PageSourceSearch

https://www.granngarden.se/checkout/cart

html granngarden.se collected 2026-10-02 04:00:25 UTC 114,022 bytes, 4,245 lines download raw bytes

1<!DOCTYPE html>
2<html lang="sv">
3
4<head>
5    <meta name="viewport" content="width=device-width" />
6    <meta name="color-scheme" content="light dark" />
7    <title>Granng&#xE5;rden | Varukorg</title>
8    <meta name="robots" content="noindex,follow" />
9    
9<script>
10    ((window, document) => {
11        const root = document.documentElement;
12        const themeKey = 'site-theme';
13        const darkModeEnabled = false;
14        const Theme = Object.freeze({
15            Light: 'light',
16            Dark: 'dark',
17        });
18        const normalizeTheme = (theme) => (theme === Theme.Dark ? Theme.Dark : Theme.Light);
19
20        const clearStoredTheme = () => {
21            try {
22                window.localStorage.removeItem(themeKey);
23            } catch {
24            }
25        };
26
27        const getStoredTheme = () => {
28            if (!darkModeEnabled) {
29                return Theme.Light;
30            }
31
32            try {
33                return normalizeTheme(window.localStorage.getItem(themeKey));
34            } catch {
35                return Theme.Light;
36            }
37        };
38
39        const applyTheme = (theme) => {
40            const normalizedTheme = darkModeEnabled ? normalizeTheme(theme) : Theme.Light;
41            if (root.getAttribute('data-theme') !== normalizedTheme) {
42                root.setAttribute('data-theme', normalizedTheme);
43            }
44            if (root.style.colorScheme !== normalizedTheme) {
45                root.style.colorScheme = normalizedTheme;
46            }
47
48            return normalizedTheme;
49        };
50
51        const getCurrentTheme = () => normalizeTheme(root.getAttribute('data-theme'));
52
53        const toggleTheme = () => {
54            if (!darkModeEnabled) {
55                clearStoredTheme();
56                return applyTheme(Theme.Light);
57            }
58
59            const nextTheme = getCurrentTheme() === Theme.Dark ? Theme.Light : Theme.Dark;
60
61            try {
62                window.localStorage.setItem(themeKey, nextTheme);
63            } catch {
64            }
65
66            return applyTheme(nextTheme);
67        };
68
69        const enforceThemeAvailability = () => {
70            if (!darkModeEnabled) {
71                clearStoredTheme();
72                return applyTheme(Theme.Light);
73            }
74
75            return applyTheme(getStoredTheme());
76        };
77
78        window.siteTheme = {
79            enabled: darkModeEnabled,
80            themeKey,
81            applyTheme,
82            clearStoredTheme,
83            enforceThemeAvailability,
84            getCurrentTheme,
85            getStoredTheme,
86            isEnabled: () => darkModeEnabled,
87            toggleTheme,
88        };
89
90        enforceThemeAvailability();
91        window.addEventListener('pageshow', () => enforceThemeAvailability());
92    })(window, document);
93</script>
93
94
95    
95<script async id="CookieConsent" src="https://policy.app.cookieinformation.com/uc.js" data-culture="SV" type="text/javascript" data-consent-sharing-iframe-placement="body" data-gcm-version="2.0"></script>
95
96
97    
98<script>
99    if (typeof window !== 'undefined') {
100        window._vertex = {
101            'key': 'AIzaSyBzb0qCwfqdsKdz0mCQb2-X8aRptvvQhrc',
102            'projectid': 'gg-search-for-commerce-prod',
103        }
104    }
105</script>
105
106    
107<script>
108    if (typeof window !== 'undefined') {
109        window._voyado = {
110            tenantId: 'granngarden',
111            useStaging: false
112        }
113    }
114</script>
114
115
116<link href="/dist/gg.78dce557.css" rel="stylesheet" /><link href="/dist/Checkout.8c493c11.css" rel="stylesheet" />
116<script>window.WebComponents = window.WebComponents || [];
117window.WebComponents.push(['epinova-node_364bb030-0a27-464d-8347-4e76352e2070', 'CartRecommendations', {"initialRecommendations":null,"lang":{"item":"vara","items":"varor","totalPrice":"Totalsumma","pricePer":"Pris per st.","removeProductFromCart":"Ta bort produkten från varukorgen","quantity":"Antal","cancel":"Avbryt","remove":"Ta bort","confirmRemove":"Vill du ta bort produkten ur varukorgen?","emptyCartMessage":"Du har inga produkter i varukorgen","productIsExpired":"Denna varan har utgått","exclVat":"exkl. moms","inclVat":"inkl. moms","tradeAgreementPrice":"Avtalspris","beforePriceFormat":"Tidigare lägsta {0}","regularPriceFormat":"Tidigare lägsta {0}","previousLowestPrice":"Tidligere lägsta pris","productIsSoldOut":"Denna varan är slutsåld","onlyXAmountInStock":"Just nu finns {0} st på lager","onlyXAmountInStockTiny":"Endast {0} kvar i lager","ok":"Ok","invalidCart":"\nTyvärr finns det ett problem med en eller flera produkter i varukorgen","unknownErrorOccured":"Ett okänt fel uppstod, vänligen försök igen","donate":"Donera","productHasExtraFreightCosts":"Produkten har extra fraktpåslag","extraFreightCosts":"Extra fraktpåslag","fewInStock":"Få i lager","extraFreightCostZoneDescription":"Zonen visar de två första siffrorna i ditt postnummer","zone":"Zon","zipCode":"Postnummer","price":"Pris","increase":"Öka antalet","decrease":"Minska antalet","onlyOneAddedFreightCostPerOrder":"Vid köp av flera produkter med samma artikelnummer betalar du endast ett fraktpåslag upp till artikelns angivna maxantal. Om beställningen överstiger maxantalet tillkommer ytterligare fraktpåslag. \uD83D\uDCE6","addedFreightCostsAlsoAppliesToFreeFreights":"Fraktavgift för denna artikel tillkommer även för order som annars uppnår gränsen för en fraktfri leverans","recommendations":"Andra tittade också på","extraFreightCostsModal":{"extraFreightCosts":"Extra fraktpåslag","extraFreightCostZoneDescription":"Zonen visar de två första siffrorna i ditt postnummer","zone":"Zon","zipCode":"Postnummer","price":"Pris","onlyOneAddedFreightCostPerOrder":"Vid köp av flera produkter med samma artikelnummer betalar du endast ett fraktpåslag upp till artikelns angivna maxantal. Om beställningen överstiger maxantalet tillkommer ytterligare fraktpåslag. \uD83D\uDCE6","addedFreightCostsAlsoAppliesToFreeFreights":"Fraktavgift för denna artikel tillkommer även för order som annars uppnår gränsen för en fraktfri leverans","inclVAT":"inkl. moms","exclVAT":"exkl. moms","pricesAreShown":"Priser visas","modal":{"close":"Stäng","ok":"Ok","somethingWentWrong":"Tyvärr gick något fel"}},"modal":{"close":"Stäng","ok":"Ok","somethingWentWrong":"Tyvärr gick något fel"},"productCard":{"addFavorite":"Lägg till produkten i mina favoriter","availability":{"web":"Online","store":"Butik","storeStatus":"Se lager i {0} butiker","stores":"Butiker","inStock":"Finns i lager","fewInStock":"Få i lager","notInStock":"Slut i lager","onlyAvailableInShop":"Köp i butik","normalDelivery":"Förväntad leveranstid 2-5 arbetsdagar","extendedDelivery":"Förväntad leveranstid 5-15 arbetsdagar","dynamicDeliveryDays":"Förväntad leveranstid {0}-{1} arbetsdagar","callToOrder":"Ring 0771 - 222 444 för beställning","onlyInStore":"Köp i butik","orderItem":"Beställningsvara","fetching":"Hämtar lagerstatus","upcoming":"Kommer snart","temporarilyOutOfStock":"Tillfälligt slut. Åter i lager cirka {0}","temporarilyOutOfStockUnknownDate":"Tillfälligt slut","outOfWebStock":"Tillfälligt slut online","missingPriceOnline":"Saknar pris online","orderAndBuyInStore":"Bokas o köps i butik","outOfStockOnline":"Tillfälligt slut online","outOfStockStore":"Tillfälligt slut i butik","webStockQuantityLabel":"Onlinelager: {0} st"},"buy":"Köp","campaign":"Kampanj","new":"Nyhet","price":{"price":"Pris","fetching":"Hämtar","failedMessage":"Priset är för närvarande inte tillgängligt - försök igen senare","tradeAgreementPrice":"Avtalspris","campaignPrice":"Kampanjpris","inclVAT":"inkl. moms","exclVAT":"exkl. moms","regularPrice":"Ord.pris","originalPrice":"Tidigare lägsta pris","choose":"Välj","pricePrUnit":"jfr pris {0} kr/{1}","pricesAreShown":"Priser visas","alertMe":"Meddela mig","seeAlternatives":"Se alternativ","fromPrice":"Från","priceDeviationsInStore":"Prisavvikelser kan förekomma i butik","palletFactor":"{0} st per pall","bestPriceLast30Days":"Tidigare lägsta pris","validUntil":"(Gäller till {0})"},"productLabel":{"campaign":"Kampanj","multipleCampaigns":"Flera kampanjer","club":"Klubbpris","sellOnlyOnline":"Endast online","isOnlyBuyableInStores":"\uD83C\uDFE0︎ Butiksvara","new":"Nyhet","expiring":"Sista chansen","cartL
117abel":"Missa inte","inCampaign":"I kampanjen"},"removeFavorite":"Ta bort produkten från mina favoriter","avgCustomerRatingLabel":"Betyget för denna produkt är {0} av 5","reviewsCountLabel":"Antal recensioner","demonymLabel":"{0}","colorGroup":"Finns i {0} färg","previousLowestPrice":"Tidligere lägsta pris","moreSizes":"Fler storlekar"},"alert":{"close":"Stäng"},"minQuantity":"Minsta antal är {0}","vat":"Moms","freeFreight":"{0} saknas för att nå fri hemleverans med DHL"}}]);
118window.WebComponents.push(['epinova-node_c141d5b3-e03d-4db8-8546-9526799c407e', 'Cart', {"antiForgeryToken":"Microsoft.AspNetCore.Mvc.ViewFeatures.AntiforgeryExtensions+InputContent","endpointAddOrUpdateItem":"/api/cart/item","extraFreightCostZones":{"zoneOne":"10-19","zoneTwo":"20-29","zoneThree":"40-47","zoneFour":"35-39, 57, 62","zoneFive":"30-34, 50-52, 55-56","zoneSix":"58-59, 60-61, 63-64, 72-73","zoneSeven":"65-68","zoneEight":"53-54, 69-71","zoneNine":"74-76, 80-81","zoneTen":"77-79","zoneEleven":"82-89","zoneTwelve":"90-98"},"initialItems":[],"initialRecommendations":null,"banner":null,"initialSummary":{"chargeAmount":0,"discountAmount":0,"formattedDiscountAmount":null,"formattedTaxAmount":null,"formattedTotalAmount":"0 kr","formattedGrandTotal":null,"formattedChargeAmount":null,"grandTotal":0,"includeTax":false,"taxAmount":0,"totalAmount":0,"totalItems":0},"freeFreightLimit":1500,"culture":"sv","increase":null,"decrease":null,"lang":{"item":"vara","items":"varor","totalPrice":"Totalsumma","pricePer":"Pris per st.","removeProductFromCart":"Ta bort produkten från varukorgen","quantity":"Antal","cancel":"Avbryt","remove":"Ta bort","confirmRemove":"Vill du ta bort produkten ur varukorgen?","emptyCartMessage":"Du har inga produkter i varukorgen","productIsExpired":"Denna varan har utgått","exclVat":"exkl. moms","inclVat":"inkl. moms","tradeAgreementPrice":"Avtalspris","beforePriceFormat":"Tidigare lägsta {0}","regularPriceFormat":"Tidigare lägsta {0}","previousLowestPrice":"Tidligere lägsta pris","productIsSoldOut":"Denna varan är slutsåld","onlyXAmountInStock":"Just nu finns {0} st på lager","onlyXAmountInStockTiny":"Endast {0} kvar i lager","ok":"Ok","invalidCart":"\nTyvärr finns det ett problem med en eller flera produkter i varukorgen","unknownErrorOccured":"Ett okänt fel uppstod, vänligen försök igen","donate":"Donera","productHasExtraFreightCosts":"Produkten har extra fraktpåslag","extraFreightCosts":"Extra fraktpåslag","fewInStock":"Få i lager","extraFreightCostZoneDescription":"Zonen visar de två första siffrorna i ditt postnummer","zone":"Zon","zipCode":"Postnummer","price":"Pris","increase":"Öka antalet","decrease":"Minska antalet","onlyOneAddedFreightCostPerOrder":"Vid köp av flera produkter med samma artikelnummer betalar du endast ett fraktpåslag upp till artikelns angivna maxantal. Om beställningen överstiger maxantalet tillkommer ytterligare fraktpåslag. \uD83D\uDCE6","addedFreightCostsAlsoAppliesToFreeFreights":"Fraktavgift för denna artikel tillkommer även för order som annars uppnår gränsen för en fraktfri leverans","recommendations":"Andra tittade också på","extraFreightCostsModal":{"extraFreightCosts":"Extra fraktpåslag","extraFreightCostZoneDescription":"Zonen visar de två första siffrorna i ditt postnummer","zone":"Zon","zipCode":"Postnummer","price":"Pris","onlyOneAddedFreightCostPerOrder":"Vid köp av flera produkter med samma artikelnummer betalar du endast ett fraktpåslag upp till artikelns angivna maxantal. Om beställningen överstiger maxantalet tillkommer ytterligare fraktpåslag. \uD83D\uDCE6","addedFreightCostsAlsoAppliesToFreeFreights":"Fraktavgift för denna artikel tillkommer även för order som annars uppnår gränsen för en fraktfri leverans","inclVAT":"inkl. moms","exclVAT":"exkl. moms","pricesAreShown":"Priser visas","modal":{"close":"Stäng","ok":"Ok","somethingWentWrong":"Tyvärr gick något fel"}},"modal":{"close":"Stäng","ok":"Ok","somethingWentWrong":"Tyvärr gick något fel"},"productCard":{"addFavorite":"Lägg till produkten i mina favoriter","availability":{"web":"Online","store":"Butik","storeStatus":"Se lager i {0} butiker","stores":"Butiker","inStock":"Finns i lager","fewInStock":"Få i lager","notInStock":"Slut i lager","onlyAvailableInShop":"Köp i butik","normalDelivery":"Förväntad leveranstid 2-5 arbetsdagar","extendedDelivery":"Förväntad leveranstid 5-15 arbetsdagar","dynamicDeliveryDays":"Förväntad leveranstid {0}-{1} arbetsdagar","callToOrder":"Ring 0771 - 222 444 för beställning","onlyInStore":"Köp i butik","orderItem":"Beställningsvara","fetching":"Hämtar lagerstatus","upcoming":"Kommer snart","temporarilyOutOfStock":"Tillfälligt slut. Åter i lager cirka {0}","temporarilyOutOfStockUnknownDate":"Tillfälligt slut","outOfWebStock":"Tillfälligt slut online","missingPriceOnline":"Saknar pris online","orderAndBuyInStore":"Bokas o kö
118ps i butik","outOfStockOnline":"Tillfälligt slut online","outOfStockStore":"Tillfälligt slut i butik","webStockQuantityLabel":"Onlinelager: {0} st"},"buy":"Köp","campaign":"Kampanj","new":"Nyhet","price":{"price":"Pris","fetching":"Hämtar","failedMessage":"Priset är för närvarande inte tillgängligt - försök igen senare","tradeAgreementPrice":"Avtalspris","campaignPrice":"Kampanjpris","inclVAT":"inkl. moms","exclVAT":"exkl. moms","regularPrice":"Ord.pris","originalPrice":"Tidigare lägsta pris","choose":"Välj","pricePrUnit":"jfr pris {0} kr/{1}","pricesAreShown":"Priser visas","alertMe":"Meddela mig","seeAlternatives":"Se alternativ","fromPrice":"Från","priceDeviationsInStore":"Prisavvikelser kan förekomma i butik","palletFactor":"{0} st per pall","bestPriceLast30Days":"Tidigare lägsta pris","validUntil":"(Gäller till {0})"},"productLabel":{"campaign":"Kampanj","multipleCampaigns":"Flera kampanjer","club":"Klubbpris","sellOnlyOnline":"Endast online","isOnlyBuyableInStores":"\uD83C\uDFE0︎ Butiksvara","new":"Nyhet","expiring":"Sista chansen","cartLabel":"Missa inte","inCampaign":"I kampanjen"},"removeFavorite":"Ta bort produkten från mina favoriter","avgCustomerRatingLabel":"Betyget för denna produkt är {0} av 5","reviewsCountLabel":"Antal recensioner","demonymLabel":"{0}","colorGroup":"Finns i {0} färg","previousLowestPrice":"Tidligere lägsta pris","moreSizes":"Fler storlekar"},"alert":{"close":"Stäng"},"minQuantity":"Minsta antal är {0}","vat":"Moms","freeFreight":"{0} saknas för att nå fri hemleverans med DHL"}}]);
119</script>
119    
120    
121
122<script type="text/javascript">
123window.dataLayer = window.dataLayer || [];
124dataLayer.push({ ecommerce: null });
125dataLayer.push(
126{"channel":"b2c","currency":"SEK","ecommerce":{"checkout_step_name":"Varukorg","items":[]},"event":"view_cart","original_location":"https://www.granngarden.se/checkout/cart"});
127</script>
127
128
129
130    
131    
131<script>
132        !function () {
133            var xhr = new XMLHttpRequest();
134            xhr.open("GET", "/dist/sprite.947a52f8.svg");
135            xhr.onload = function () {
136                var svgContainer = document.createElement("div");
137                svgContainer.setAttribute("id", "svgContainer");
138                svgContainer.setAttribute("style", "display: none; height: 0; width: 0;");
139                svgContainer.innerHTML = xhr.responseText;
140
141                if (document.body && document.body.appendChild) {
142                    document.body.appendChild(svgContainer);
143                } else {
144                    var interval = window.setInterval(function () {
145                        if (document.body) {
146                            document.body.appendChild(svgContainer);
147                            window.clearInterval(interval);
148                        }
149                    }, 50);
150                }
151            }
152            xhr.send();
153        }();
154    </script>
154
155
156
157        
157<script>
158            var dataLayer = window.dataLayer || [];
159        </script>
159
160        <!-- Google Tag Manager -->
161        
161<script>
162            (function (w, d, s, l, i) {
163                w[l] = w[l] || [];
164                w[l].push({
165                    'gtm.start': new Date().getTime(),
166                    event: 'gtm.js'
167                });
168
169                var f = d.getElementsByTagName(s)[0],
170                    j = d.createElement(s);
171
172                j.async = true;
173                j.src = "https://sst.granngarden.se/9zdqssbpv.js?" + i;
174                f.parentNode.insertBefore(j, f);
175            })(window, document, 'script', 'dataLayer', '4z558n=HxRfNCc8SS5PIiw%2FSjw1XABNUF1CVwAUSxcQEh0fAxsEFAcdXQIB');
176        </script>
176
177        
177<script>
178            window.addEventListener('load', function () {
179                dataLayer.push({ event: 'afterLoad' });
180            });
181        </script>
181
182        <!-- End Google Tag Manager -->
183    <!-- search console-->
184<meta name="google-site-verification" content="ZrY0OBDThAWJGNTVGzVK0QJ1yCDxJXTiijFeC8K3kms" />
185
186<meta name="format-detection" content="telephone=no">
187</head>
188
189<body class="checkout">
190    <header class="checkout__header">
191            <a href="/">
192                <img class="checkout__header-logo" src="/siteassets/varumarken/granngarden-logo-crop.svg" alt="Granng&#xE5;rden" />
193            </a>
194
195        <div class="checkout__header-actions">
196            
197        </div>
198    </header>
199
200    
201    <h1 class="sr-only">Varukorg</h1>
202    
203
204
205    
206<ul class="checkout-steps">
207    	    <li class="checkout-steps__step active">
208	      <span>Varukorg</span>
209	      <svg width="14" height="14"><use xlink:href="#sprite-check"></use></svg>
210	    </li>
211
212    	    <li class="checkout-steps__step ">
213	      <span>Leverans</span>
214	      <svg width="14" height="14"><use xlink:href="#sprite-check"></use></svg>
215	    </li>
216
217    	    <li class="checkout-steps__step ">
218	      <span>Betalning</span>
219	      <svg width="14" height="14"><use xlink:href="#sprite-check"></use></svg>
220	    </li>
221
222</ul>
223
224
225
226
227    <main class="checkout__content">
228        
229
230
231
232
233    <div class="checkout__cart-recommendations">
234        <div id="epinova-node_364bb030-0a27-464d-8347-4e76352e2070"></div>
235    </div>
236
237    <h2 class="checkout__cart-heading">Varukorg</h2>
238<div id="epinova-node_c141d5b3-e03d-4db8-8546-9526799c407e"></div>
239<div class="checkout__footer">
240    <div class="checkout__footer-buttons">
241        <a href="/" class="button checkout__button  checkout__button--continue">Fortsätt handla</a>
242    </div>
243</div>
244
245
246
247            <div class="checkout__support">
248                <div class="checkout__support-inner-wrapper">
249                    <svg>
250                        <use xlink:href="#sprite-user-headset"></use>
251                    </svg>
252                    
253
254<p><strong>Fr&aring;gor?</strong> L&auml;s mer p&aring; <a href="https://support.granngarden.se/hc/sv">kundservice</a>. Det ska vara enkelt att &aring;ngra sig efter k&ouml;pet, v&aring;r kundservice hj&auml;lper dig!</p>
255<p><strong>H&aring;ll utkik i inkorgen!</strong> En tid efter ditt k&ouml;p kan vi h&ouml;ra av oss via mail och be om ditt omd&ouml;me p&aring; din k&ouml;pupplevelse och dina produkter. Dina &aring;sikter &auml;r viktiga f&ouml;r oss och hj&auml;lper oss att forts&auml;tta utveckla Granng&aring;rden.</p>
256                </div>
257            </div>
258    </main>
259
260<script async defer src="/dist/runtime.5b793191.js"></script>
260<script async defer src="/dist/953.de499b9b.js"></script>
260<script async defer src="/dist/8750.f6689a4b.js"></script>
260<script async defer src="/dist/4697.bad6a176.js"></script>
260<script async defer src="/dist/2376.b438c6c8.js"></script>
260<script async defer src="/dist/gg.a6958d8e.js"></script>
260<script async defer src="/dist/Checkout.8dac4ef2.js"></script>
260    
261    
262    <!-- GG - fix survey prompt -->
263<style type="text/css">
264.gg-survey-prompt {
265  position: fixed;
266  right: 20px;
267  bottom: 20px;
268  z-index: 9999;
269
270  width: min(380px, calc(100% - 32px));
271  padding: 20px;
272
273  background: #fff;
274  border-radius: 10px;
275  box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
276}
277
278.gg-survey-prompt__close {
279  position: absolute;
280  top: 8px;
281  right: 10px;
282
283  padding: 4px 8px;
284
285  border: 0;
286  background: transparent;
287
288  font-size: 24px;
289  line-height: 1;
290  cursor: pointer;
291
292  color: #222;
293  appearance: none;
294  -webkit-appearance: none;
295}
296
297.gg-survey-prompt h2 {
298  margin: 0 32px 8px 0;
299
300  font-size: 20px;
301  line-height: 1.25;
302  text-align: left;
303}
304
305.gg-survey-prompt p {
306  margin: 0 0 16px;
307
308  font-size: 16px;
309  line-height: 1.45;
310  margin: 10px 0;
311}
312
313.gg-survey-prompt__button {
314  display: inline-block;
315
316  padding: 10px 16px;
317
318  background: var(--color-dark-red);
319  color: #fff !important;
320
321  border-radius: 4px;
322
323  font-weight: 600;
324  text-decoration: none;
325  font-family: 'Granngarden', sans-serif;
326  font-size: 18px;
327}
328
329.gg-survey-prompt__button:hover {
330  text-decoration: none;
331}
332
333
334/* Mobile */
335@media only screen and (max-width: 767px) {
336
337  .gg-survey-prompt {
338    left: auto;
339    right: 10px;
340    bottom: 10px;
341
342    width: 80%;
343    padding: 12px 42px 12px 14px;
344
345    border-radius: 10px;
346  }
347
348  .gg-survey-prompt h2 {
349    margin: 0 0 4px;
350
351    font-size: 16px;
352    line-height: 1.25;
353  }
354
355  .gg-survey-prompt p {
356    margin: 0;
357
358    font-size: 14px;
359    line-height: 1.35;
360    margin: 10px 0;
361  }
362
363  .gg-survey-prompt__content {
364    padding-right: 4px;
365  }
366
367  .gg-survey-prompt__actions {
368    margin-top: 8px;
369  }
370
371  .gg-survey-prompt__button {
372    padding: 7px 11px;
373
374    font-size: 16px;
375    line-height: 1.2;
376    font-family: 'Granngarden', sans-serif;
377  }
378
379  .gg-survey-prompt__close {
380    top: 7px;
381    right: 7px;
382
383    font-size: 20px;
384  }
385
386}
387</style>
388
389<!-- GG - fix hide hbg store 21/9 -> 18/11 -->
390<style type="text/css">
391/* GG - Helsingborg store move */
392.product-store-picker__store:has(a[href="/butiker/helsingborg"]) {
393    /* background-color: #fcf7f8; */
394    background-color: var(--color-error-light);
395}
396
397/* Hide stock temp */
398.product-store-picker__store:has(a[href="/butiker/helsingborg"])
399.availability {
400    display: none;
401}
402
403/* show temp info */
404.product-store-picker__store:has(a[href="/butiker/helsingborg"])
405.product-store-picker__wrapper::after {
406    content: "Butiken flyttar 21/9 -> 18/11 = lagersaldot kan vara osäkert";
407    font-size: .875rem;
408    margin: 0 20px;
409}
410/* GG - Helsingborg store move */
411.store-list-store:has(a[href="/butiker/helsingborg"]) {
412    background-color: #f797973d;
413    padding: 1rem;
414}
415
416.store-list-store:has(a[href="/butiker/helsingborg"])
417.store-list-store__info::after {
418    content: "ℹ️ Vi flyttar! Nyöppning 18/11 på Välavägen 29, Helsingborg.";
419    display: block;
420    margin: .75rem 0;
421    font-size: .875rem;
422}
423</style>
424
425<!-- GG editorial tip -->
426<style type="text/css">
427.gg-tip {
428    box-sizing: border-box;
429    max-width: 59rem;
430    margin: 2rem auto;
431    padding: 1.25rem;
432
433    color: var(--color-theme-text-primary);
434    background: var(--color-theme-surface-2);
435    border-left: 3px solid var(--color-theme-control-border);
436    text-align: left;
437}
438
439/* Brand label and decorative logo */
440.gg-tip > .gg-tip-label {
441    display: flex;
442    align-items: center;
443    gap: 0.625rem;
444    margin: 0 0 0.75rem;
445    padding: 0;
446
447    color: var(--color-theme-heading-primary);
448    font-size: 0.875rem;
449    font-weight: 700;
450    line-height: 1.3;
451    text-align: left;
452}
453
454.gg-tip > .gg-tip-label::before {
455    content: "";
456    display: block;
457    position: static;
458    flex: 0 0 2rem;
459    width: 2rem;
460    height: 2rem;
461    background: url("/siteassets/loggor/gg-favicon-180px.png")
462                center / contain no-repeat;
463}
464
465/* Tip content */
466.gg-tip > p:not(.gg-tip-label) {
467    margin: 0;
468    padding: 0;
469    line-height: 1.5;
470    text-align: left;
471}
472
473.gg-tip > p + p:not(.gg-tip-label) {
474    margin-top: 0.75rem;
475}
476
477/* Tablet and desktop */
478@media only screen and (min-width: 768px) {
479    .gg-tip {
480        padding: 1.5rem 2rem;
481    }
482}
483</style>
484
485<!-- GG - fix bulky goods alert warning message -->
486<style type="text/css">
487body.productContent .product-content__alert.alert--warning .alert__icon,
488.checkout-delivery__freight-cost .alert__icon {
489    background: var(--color-info)
490        url('/siteassets/menu/svg/ui/seal-exclamation-light-full.svg')
491        center / 25px 25px no-repeat;
492}
493
494body.productContent .product-content__alert.alert--warning .alert__icon svg,
495.checkout-delivery__freight-cost .alert__icon svg {
496    display: none;
497}
498</style>
499
500<!-- GG - fix pdp alert message icon -->
501<style type="text/css">
502body.productContent .alert.alert--warning.alert--no-icon .alert__icon {
503    width: 3rem;
504    background: var(--color-warning)
505        url('/siteassets/menu/svg/ui/circle-info-light-full.svg')
506        center / 25px 25px no-repeat;
507}
508</style>
509
510<!-- GG - fix hide shipping info when no buy btn -->
511<style type="text/css">
512body.productContent .product-content__content:not(:has(.product-quantity__buy)) .product-shipping-info {
513    display: none;
514}
515</style>
516
517<!-- GG - fix hide shipping info when bulky goods message present -->
518<style type="text/css">
519body.productContent .product-content__content:has(.product-content__alert)
520.product-shipping-info {
521    display: none;
522}
523</style>
524
525<!-- GG - fix pdp order content -->
526<style type="text/css">
527
528.productContent p.product-content__publication-date {
529    order: 1;
530    gap: 5px;
531}
532</style>
533
534<!-- GG - fix gtm inject PDP article teasers -->
535<style type="text/css">
536.product-content__accordions-wrapper .gg-gtm-injected-article-teaser a.article-teaser__image img {
537    max-height: 150px;
538}
539
540.product-content__accordions-wrapper .gg-gtm-injected-article-teasers {
541    margin-top: 24px;
542    display: flex;
543    gap: 12px;
544}
545
546.product-content__accordions-wrapper .gg-gtm-injected-article-teaser {
547    flex: 1 1 0;
548    min-width: 0;
549}
550</style>
551
552<!-- GG fix - new FAQ and facts boxes -->
553<style type="text/css">
554
555/* Show only the first paragraph when category text is collapsed */
556.product-list__text.editorial:not(.expanded) > p:first-child ~ * {
557    display: none;
558}
559
560/* Keep the editorial hero visible inside the first paragraph */
561.gg-editorial-hero {
562    display: block;
563    width: 100%;
564    max-width: 100%;
565    height: auto;
566    margin: 2rem auto 0;
567}
568
569/*
570 * Apply the new box design only when the new header structure exists.
571 * Legacy FAQ and facts boxes containing blockquote remain unaffected.
572 */
573.gg-facts:has(> .gg-facts-header),
574.gg-faq:has(> .gg-faq-header) {
575    box-sizing: border-box;
576    max-width: 59rem;
577    margin: 3rem auto;
578    padding: 1.5rem;
579
580    color: var(--color-theme-text-primary);
581    background: var(--color-theme-surface-2);
582
583    border-left: 3px solid var(--color-theme-control-border);
584}
585
586/* Shared header structure */
587.gg-facts-header,
588.gg-faq-header {
589    display: flex;
590    align-items: center;
591    gap: 1rem;
592    margin-bottom: 1.25rem;
593}
594
595/* Decorative header icon */
596.gg-facts-header::before,
597.gg-faq-header::before {
598    content: "";
599    display: block;
600    flex: 0 0 3rem;
601
602    width: 3rem;
603    height: 3rem;
604
605    background-color: var(--color-banana-mania);
606    background-position: center;
607    background-repeat: no-repeat;
608    background-size: 1.75rem;
609    border-radius: 50%;
610}
611
612/* Facts icon */
613.gg-facts-header::before {
614    background-image:
615        url("/siteassets/menu/svg/ui/lightbulb-on-light-full.svg");
616}
617
618/* FAQ icon */
619.gg-faq-header::before {
620    background-image:
621        url("/siteassets/menu/svg/ui/comment-question-light-full.svg");
622}
623
624/* Shared header label */
625.gg-facts-label,
626.gg-faq-label {
627    margin: 0 0 0.5rem !important;
628
629    color: var(--color-theme-text-muted);
630    font-size: 0.75rem;
631    font-weight: 700;
632    letter-spacing: 0.06em;
633    line-height: 1.2;
634    text-transform: uppercase;
635}
636
637/* Shared heading */
638.gg-facts-header h2,
639.gg-faq-header h2 {
640    margin: 0;
641    text-align: left;
642}
643
644/* Prevent legacy CSS from injecting text before the facts heading */
645.gg-facts .gg-facts-header h2::before {
646    display: none !important;
647    content: none !important;
648}
649
650/* Facts grid */
651.gg-facts-list {
652    display: grid;
653    gap: 0.75rem;
654    margin: 0;
655    padding: 0;
656    list-style: none;
657}
658
659/* Individual fact */
660.gg-facts-list > li {
661    position: relative !important;
662    padding: 1rem 1rem 1rem 3rem !important;
663
664    background: var(--color-theme-surface-1);
665    border-radius: 3px;
666}
667
668/* Position the existing site checkmark */
669.editorial
670.gg-facts-list > li::before {
671    top: 1.1rem;
672    left: 1rem;
673
674    color: var(--color-theme-icon);
675}
676.section-block .gg-facts-list > li:before {
677    border-color: var(--color-theme-icon);
678}
679/* Fact typography */
680.gg-facts-list strong,
681.gg-facts-list span {
682    display: block;
683}
684
685.gg-facts-list strong {
686    margin-bottom: 0.2rem;
687    color: var(--color-theme-heading-primary);
688}
689
690.gg-facts-list span {
691    line-height: 1.45;
692}
693
694/* FAQ separators */
695.gg-faq-list details {
696    border-top: 1px solid var(--color-theme-border);
697}
698
699.gg-faq-list details:last-child {
700    border-bottom: 1px solid var(--color-theme-border);
701}
702
703/* FAQ question */
704.gg-faq-list summary {
705    padding: 1rem 2rem 1rem 0;
706
707    color: var(--color-theme-heading-primary);
708    cursor: pointer;
709    font-weight: 300;
710    line-height: 1.35;
711    text-align: left;
712}
713
714.gg-faq-list summary::marker {
715    color: var(--color-theme-icon);
716}
717
718/* Keyboard focus */
719.gg-faq-list summary:focus-visible {
720    outline: 2px solid var(--color-theme-focus);
721    outline-offset: 3px;
722}
723
724/* FAQ answer */
725.gg-faq-list details p {
726    margin: 0;
727    padding: 0 0 1.25rem;
728    line-height: 1.5;
729    font-size: 14px;
730}
731
732/* Tablet and larger screens */
733@media only screen and (min-width: 768px) {
734    .gg-facts:has(> .gg-facts-header),
735    .gg-faq:has(> .gg-faq-header) {
736        padding: 50px 100px;
737    }
738
739    .gg-facts-list {
740        grid-template-columns: repeat(2, minmax(0, 1fr));
741    }
742}
743
744/* Mobile */
745@media only screen and (max-width: 767px) {
746    .gg-facts:has(> .gg-facts-header),
747    .gg-faq:has(> .gg-faq-header) {
748        padding: 1.25rem;
749    }
750
751    .gg-facts-list > li {
752        padding: 0.875rem 0.875rem 0.875rem 2.75rem !important;
753    }
754
755.editorial
756    .gg-facts-list > li::before {
757        top: 1rem;
758        left: 0.875rem;
759    }
760}
761
762</style>
763
764<!-- GG - fix fade in -->
765<style type="text/css">
766.gg-fade-in {
767    animation: ggFadeIn 0.6s ease-out;
768}
769
770@keyframes ggFadeIn {
771    from {
772        opacity: 0;
773        transform: translateY(2px);
774    }
775    to {
776        opacity: 1;
777        transform: translateY(0);
778    }
779}
780</style>
781
782<!-- GG - fix gg-pdp-affirmation -->
783<style type="text/css">
784.gg-pdp-affirmation {
785    display: flex;
786    align-items: center;
787    gap: 12px;
788    margin: 10px 0;
789    padding: 10px 20px;
790    background: #faf7f5;
791    border-left: 4px solid var(--color-theme-text-secondary);
792    border-radius: 2px;
793    width: max-content;
794}
795
796.gg-pdp-affirmation__icon {
797    width: 35px;
798    height: 35px;
799    flex: 0 0 35px;
800    color: color: var(--color-theme-text-secondary);
801    fill: currentColor;
802}
803.gg-pdp-affirmation__text {
804    display: flex;
805    flex-direction: column;
806    line-height: 1.4;
807}
808.gg-pdp-affirmation__text strong {
809    color: color: var(--color-theme-text-secondary);
810}
811.gg-elaggregat .gg-pdp-affirmation__icon {
812    background: var(--color-dark-red);
813    mask: url("/siteassets/menu/svg/ui/circle-bolt-light-full.svg") center / contain no-repeat;
814    -webkit-mask: url("/siteassets/menu/svg/ui/circle-bolt-light-full.svg") center / contain no-repeat;
815}
816</style>
817
818<!-- GG - fix cart block -->
819<style type="text/css">
820/* adjust product image */
821section.cart-banner img.cart-banner__image {
822    object-fit: contain;
823}
824/* adjust svg */
825section.cart-banner .button svg {
826    fill: var(--color-white);
827}
828section.cart-banner .cart-banner__button {
829    color: var(--color-white);
830}
831section.cart-banner h2.cart-banner__heading {
832    color: var(--color-dark-red);
833}
834@media only screen and (min-width: 1024px) {
835    .cart-banner--banner .cart-banner__image-wrapper {
836        max-width: 15.75rem;
837    }
838}
839@media only screen and (max-width: 1023px) {
840.cart-banner__image-wrapper {
841    max-height: 200px;
842}
843}
844p.cart-banner__text {
845    line-height: 1.6;
846}
847.cart-banner--banner .cart-banner__content {
848    gap: 1.5rem;
849}
850</style>
851
852<!-- GG - fix top menu marking -->
853<style type="text/css">
854@media only screen and (min-width: 1280px) {
855    .page-header__main-menu-item-name:not([aria-expanded=false]) {
856        text-decoration: underline;
857        text-underline-offset: 5px;
858    }
859}
860</style>
861
862<!-- GG - fix new shipping info pdp -->
863<style type="text/css">
864.product-content__grid ul.product-shipping-info__items {
865   display: flex;
866    flex-direction: row;
867    row-gap: 10px;
868    flex-wrap: wrap;
869    gap: 20px;
870    justify-content: center;
871}
872</style>
873
874<!-- GG - fix alert messages pdp -->
875<style type="text/css">
876@media (max-width: 767px) {
877.product-content__grid span.alert__message {
878    font-size: 14px;
879    line-height: 1.2;
880}
881
882.product-content__grid button.link.link--underline {
883    font-size: 14px;
884}
885}
886</style>
887
888<!-- GG - fix gg promo block -->
889<style type="text/css">
890.gg-promo {
891    display: flex;
892    justify-content: space-between;
893    align-items: center;
894    gap: 24px;
895
896    padding: 24px 32px;
897    margin: 24px 0 32px;
898
899    text-decoration: none;
900
901    border-radius: 6px;
902    transition: opacity .2s ease;
903}
904
905.gg-promo.gg-sale {
906    background: var(--color-campaign);
907    color: var(--color-white);
908}
909.gg-promo {
910    background: var(--color-dark-red);
911    color: var(--color-white);
912}
913
914.gg-promo:hover {
915    opacity: .92;
916}
917
918.gg-promo__eyebrow {
919    display: inline-block;
920    margin-bottom: 6px;
921
922    font-size: 13px;
923    font-weight: 700;
924    letter-spacing: .08em;
925    padding: 2px 10px;
926}
927.gg-promo__eyebrow.gg-sale {
928    background: var(--color-white);
929    color: var(--color-campaign);
930}
931.gg-promo__eyebrow {
932    background: var(--color-white);
933    color: var(--color-dark-red);
934}
935
936.gg-promo__title {
937    margin: 0 0 4px;
938    font-size: 35px;
939    line-height: 1.1;
940    color: inherit;
941    text-align: left;
942}
943
944.gg-promo__text {
945    margin: 0;
946    opacity: .9;
947    font-size: 20px;
948}
949
950.gg-promo__cta {
951    display: flex;
952    align-items: center;
953    gap: 8px;
954
955    flex-shrink: 0;
956
957    font-size: 18px;
958    font-weight: 700;
959}
960
961.gg-promo__arrow {
962    font-size: 24px;
963    line-height: 1;
964}
965
966@media (max-width: 767px) {
967    .gg-promo {
968        flex-direction: column;
969        align-items: flex-start;
970        padding: 20px;
971    }
972
973    .gg-promo__title {
974        font-size: 30px;
975        margin-bottom: 20px;
976    }
977
978    .gg-promo__text {
979    font-size: 16px;
980}
981}
982</style>
983
984<!-- GG - fix product teasers editorial -->
985<style type="text/css">
986.editorial .product-content-teaser__text h2 a {
987    font-weight: 300 !important;
988    font-size: 1.5rem;
989    color: unset !important;
990}
991</style>
992
993<!-- GG - fix scrolled header menu bar -->
994<style type="text/css">
995@media only screen and (min-width: 1280px) {
996    .page-header[data-scrolled] .page-header__main-menu-item-name {
997        font-size: 12px;
998    }
999}
1000</style>
1001
1002<!-- GG - fix category nav element line breaks -->
1003<style type="text/css">
1004@media only screen and (min-width: 1024px) {
1005    .product-list__category {
1006        white-space: nowrap;
1007    }
1008}
1009</style>
1010
1011<!-- GG - fix facet button -->
1012<style type="text/css">
1013.product-list__facets button.facets__button-filters {
1014    flex-direction: row-reverse;
1015}
1016
1017@media only screen and (min-width: 1024px) {
1018.product-list__facets #filter-and-sort:before {
1019    background-image: url(/siteassets/menu/svg/ui/sliders-light-full.svg);
1020    content: "";
1021    width: 50px;
1022    height: 30px;
1023    background-size: contain;
1024    filter: invert(18%) sepia(35%) saturate(1652%) hue-rotate(338deg) brightness(95%) contrast(92%);
1025    margin-right: 5px;
1026    background-repeat: no-repeat;
1027}
1028}
1029</style>
1030
1031<!-- GG - fix step by step number -->
1032<style type="text/css">
1033.step-by-step__number {
1034    line-height: unset;
1035    align-content: center;
1036}
1037</style>
1038
1039<!-- GG - fix search category suggestions -->
1040<style type="text/css">
1041a.search-results__category-suggestion-link {
1042    margin: 3px;
1043    border: 1px solid;
1044    padding: 2px 6px;
1045    border-radius: 40px;
1046}
1047span.search-results__category-suggestion-separator {
1048    display: none;
1049}
1050.search-results__category-suggestions {
1051    display: flex;
1052    flex-wrap: wrap;
1053    justify-content: center;
1054    align-items: center;
1055    padding: 0;
1056}
1057a.search-results__category-suggestion-link:after {
1058    content: "›";
1059    font-size: 1rem;
1060    margin-left: 0.25rem;
1061    margin-right: 0.25rem;
1062}
1063a.search-results__category-suggestion-link:hover {
1064    background-color: #f4ecea;
1065    text-decoration: none;
1066}
1067</style>
1068
1069<!-- GG - fix search result small screen -->
1070<style type="text/css">
1071@media only screen and (max-width: 400px) {
1072    .search-results__hits--products {
1073    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
1074    }
1075}
1076</style>
1077
1078<!-- GG - fix achor links position -->
1079<style type="text/css">
1080.inspirationArticlePage .editorial a[id] {
1081    scroll-margin-top: 400px;
1082}
1083.articlePage .editorial a[id] {
1084    scroll-margin-top: 100px;
1085}
1086@media (max-width: 767px) {
1087.inspirationArticlePage .editorial a[id] {
1088    scroll-margin-top: 200px;
1089}
1090.articlePage .editorial a[id] {
1091    scroll-margin-top: 50px;
1092}
1093}
1094</style>
1095
1096<!-- GG - fix product details h2 -->
1097<style type="text/css">
1098div#productdetails .editorial h2 {
1099    font-size: 1.25rem;
1100    color: var(--color-theme-text-primary);
1101}
1102div#productdetails .editorial h3 {
1103    font-size: 1.15rem;
1104    color: var(--color-theme-text-primary);
1105}
1106div#productdetails .editorial h4 {
1107    font-size: 1.05rem;
1108    color: var(--color-theme-text-primary);
1109}
1110</style>
1111
1112<!-- GG - fix campaign modal gift -->
1113<style type="text/css">
1114span.campaign-gift-modal__badge {
1115    background: var(--color-jungle-green);
1116}
1117</style>
1118
1119<!-- GG - fix connected campaign product page -->
1120<style type="text/css">
1121.gg-connected-campaign {
1122    display: flex;
1123    margin: 10px;
1124    gap: 20px;
1125}
1126
1127img.gg-connected-campaign-img {
1128  min-width: 0;
1129  max-width: 100%;
1130  height: auto;
1131  max-height: 280px;
1132  object-fit: contain;
1133}
1134
1135.gg-connected-campaign-link {
1136    white-space: nowrap;
1137    align-self: center;
1138    border: 1px solid;
1139    font-size: 14px;
1140    font-weight: 300;
1141}
1142.gg-connected-campaign a#prod-2003640 {
1143    display: none;
1144}
1145</style>
1146
1147<!-- GG - fix cards duo -->
1148<style type="text/css">
1149/* ===== Duo layout ===== */
1150.gg-embed .gg-embed__grid--duo{
1151  grid-template-columns:repeat(2, 1fr);
1152}
1153
1154/* Duo card */
1155.gg-embed .gg-card--duo{
1156  border-radius:0;
1157}
1158
1159.gg-embed .gg-card--duo .gg-card__img{
1160  aspect-ratio:16/5;
1161  object-fit:cover;
1162}
1163
1164.gg-embed .gg-card--duo .gg-card__body{
1165  position:relative;
1166  padding:18px 84px 18px 16px; /* plats för chevron till höger */
1167}
1168
1169.gg-embed .gg-card--duo .gg-card__title{
1170  font-size:clamp(20px, 4vw, 32px);
1171  line-height:.95;
1172  /* text-transform:uppercase; */
1173}
1174
1175.gg-embed .gg-card--duo .gg-card__sub{
1176  margin-top:10px;
1177  margin-right:0;
1178  line-height:1.2;
1179  font-size:clamp(16px, 1.4vw, 18px);
1180}
1181
1182.gg-embed .gg-card--duo .gg-card__prev-price{
1183  margin-top:4px;
1184  font-size:14px;
1185}
1186
1187/* Mobile */
1188@media (max-width:900px){
1189  .gg-embed .gg-embed__grid--duo{
1190    grid-template-columns:1fr;
1191  }
1192}
1193
1194@media (max-width:520px){
1195  .gg-embed .gg-card--duo .gg-card__img{
1196    aspect-ratio:16/6;
1197  }
1198
1199  .gg-embed .gg-card--duo .gg-card__body{
1200    padding:14px 54px 14px 12px;
1201  }
1202
1203  .gg-embed .gg-card--duo .gg-card__title{
1204    font-size:clamp(18px, 10vw, 25px);
1205  }
1206
1207  .gg-embed .gg-card--duo .gg-card__sub{
1208    font-size:14px;
1209  }
1210
1211  .gg-embed .gg-card--duo .gg-chevron{
1212    right:12px;
1213    bottom:16px;
1214    font-size:42px;
1215  }
1216}
1217</style>
1218
1219<!-- GG - fix kompisar title -->
1220<style type="text/css">
1221h2.custom-product-list__heading:before {
1222    background-image: url(/siteassets/menu/svg/hast/hearts-light-full.svg);
1223    content: "";
1224    width: 28px;
1225    height: 28px;
1226    background-size: contain;
1227    display: inline-block !important;
1228    filter: invert(18%) sepia(35%) saturate(1652%) hue-rotate(338deg) brightness(95%) contrast(92%);
1229    margin-right: 5px;
1230    vertical-align: bottom;
1231}
1232</style>
1233
1234<!-- GG - fix category tables -->
1235<style type="text/css">
1236.gg-category-table-wrapper {
1237  width: 100%;
1238  overflow-x: auto;
1239  -webkit-overflow-scrolling: touch;
1240  margin: 24px 0;
1241}
1242
1243.gg-table {
1244  /* width: 100%; */
1245  width: auto;
1246  min-width: 700px;
1247  border-collapse: collapse;
1248  border: 1px solid #a3a3a3;
1249  font-size: 14px;
1250}
1251
1252.gg-table caption {
1253  caption-side: top;
1254  text-align: left;
1255  font-size: 14px;
1256  line-height: 1.4;
1257  margin-bottom: 12px;
1258  font-style: italic;
1259}
1260
1261.gg-table th,
1262.gg-table td {
1263  padding: 2px 10px;
1264  border: 1px solid #a3a3a3;
1265  vertical-align: top;
1266  text-align: left;
1267}
1268
1269.gg-table thead th {
1270  font-weight: 600;
1271/*  white-space: nowrap; */
1272}
1273
1274.gg-table__title {
1275  background-color: var(--color-banana-mania);
1276  font-family: 'Granngarden', sans-serif;
1277  font-size: 1.5rem;
1278  color: var(--color-dark-red);
1279  text-align: center;
1280  padding: 12px 10px;
1281  text-transform: capitalize;
1282}
1283
1284th.gg-table__title:before {
1285/*    content: url(/UI/favicon/gg/apple-touch-icon.png); */
1286    content: url(/siteassets/loggor/gg-favicon-180px.png);
1287    zoom: 15%;
1288    margin: 0 45px 0 0;
1289    vertical-align: middle;
1290}
1291
1292.gg-table__colhead {
1293    background: var(--color-theme-surface-2);
1294}
1295
1296/*
1297thead tr:nth-of-type(2) {
1298    background: var(--color-theme-surface-2);
1299}
1300*/
1301
1302/*
1303.gg-table td:nth-child(2),
1304.gg-table td:nth-child(4) {
1305  text-align: center;
1306}
1307*/
1308
1309@media (max-width: 767px) {
1310  .gg-table {
1311    min-width: 640px;
1312   font-size: 12px;
1313  }
1314
1315  .gg-table__title {
1316    font-size: 1rem;
1317   text-align: left;
1318  }
1319}
1320
1321th:nth-of-type(1) {
1322    text-align: left;
1323}
1324  .gg-table tbody tr:nth-child(even) {
1325  /* background-color: #f8f7f5; */
1326  background-color: #f8f7f57d;
1327}
1328  .gg-table tbody tr:hover {
1329  background-color: #f3f0ec;
1330  border-bottom: 2px solid var(--color-dark-red);
1331}
1332</style>
1333
1334<!-- GG - fix extra link header hide -->
1335<style type="text/css">
1336@media (min-width: 1280px) {
1337a.link.page-header__editorial-link[href="/foretag"] {
1338    display: none;
1339}
1340}
1341</style>
1342
1343<!-- GG - fix logo filter desktop -->
1344<style type="text/css">
1345@media (min-width: 1280px) {
1346img.page-header__logo-img {
1347    filter: none;
1348}
1349</style>
1350
1351<!-- GG - fix mobile menu campaigns -->
1352<style type="text/css">
1353@media (max-width: 1279px) {
1354.page-header[data-open] .page-header__main-menu {
1355    gap: 1.2rem 0;
1356}
1357
1358.page-header[data-open] .page-header__editorial-menu {
1359    flex-direction: row;
1360    gap: 1.5rem;
1361    flex-wrap: wrap;
1362    padding: 0.8rem 1.3rem 0;
1363}
1364.page-header[data-open] .page-header__wrapper {
1365    padding: 1rem 0 0.5rem 0;
1366}
1367}
1368@media (min-width: 400px) and (max-width: 1279px) {
1369.page-header[data-open] .page-header__main-menu {
1370    grid-template-columns: 1fr 1fr 1fr 1fr;
1371}
1372}
1373</style>
1374
1375<!-- GG - fix campagin banner PLP -->
1376<style type="text/css">
1377.product-list__campaign-banner {
1378    font-weight: 300;
1379    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
1380}
1381</style>
1382
1383<!-- GG - fix img link list main category -->
1384<style type="text/css">
1385@media only screen and (min-width: 1024px) {
1386nav.main-category__link-list-images-items .link-list-with-image-block__list {
1387    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
1388    gap: 15px 5px;
1389}
1390}
1391</style>
1392
1393<!-- GG - fix menu icons -->
1394<style type="text/css">
1395@media only screen and (min-width: 1280px) {
1396    .page-header__main-menu-icon {
1397        display: flex !important;
1398        width: 20px;
1399        height: 20px;
1400        margin: 0 3px;
1401/*        border: 1px solid; */
1402/*        border-radius: 999px; */
1403    }
1404.page-header__top {
1405    background: none;
1406}
1407img.page-header__main-menu-icon {
1408    filter: invert(1) hue-rotate(180deg) brightness(1.4);
1409}
1410}
1411</style>
1412
1413<!-- GG - fix icons menu -->
1414<style type="text/css">
1415/* =========================================================
1416   1. MENU LAYOUT RULES
1417   ========================================================= */
1418
1419/* Default layout (Mobile): Icon to the left */
1420.mega-menu__item > .mega-menu__item-title {
1421    display: flex;
1422    align-items: center;
1423    gap: 10px;
1424    text-decoration: none;
1425}
1426.h4.main-category__category-accordion-title a {
1427    /* flex-direction: column; */
1428    align-items: center;
1429    gap: 10px;
1430    padding-top: 5px;
1431    display: flex;
1432    padding-bottom: 5px;
1433 }
1434li.product-list__category-title a {
1435    gap: 10px;
1436    display: flex;
1437}
1438
1439/* Desktop layout: Icon above text */
1440@media (min-width: 1280px) {
1441    .mega-menu__item > .mega-menu__item-title {
1442        flex-direction: column;
1443        align-items: flex-start; /* Align left as requested */
1444        gap: 5px;
1445        padding-top: 5px;
1446    }
1447.mega-menu__item > .mega-menu__item-title::before, .h4.main-category__category-accordion-title a:before {
1448    filter: invert(18%) sepia(35%) saturate(1652%) hue-rotate(338deg) brightness(95%) contrast(92%);
1449}
1450}
1451
1452/* =========================================================
1453   2. ICON BASE SETTINGS (Hidden by default)
1454   ========================================================= */
1455.mega-menu__item > .mega-menu__item-title::before, .h4.main-category__category-accordion-title a:before, .product-list__category-title a:before {
1456    content: "";
1457    display: none; /* Do not take up space if no icon is set */
1458    width: 28px;
1459    height: 28px;
1460    background-repeat: no-repeat;
1461    background-position: center;
1462    background-size: contain;
1463    flex-shrink: 0;
1464}
1465
1466/* =========================================================
1467   3. ICON ACTIVATION & FILE MAPPING
1468   ========================================================= */
1469
1470/* --- Husdjur --- */
1471[href$="/husdjur/hund"]::before {
1472    display: inline-block !important;
1473    background-image: url('/siteassets/menu/svg/husdjur/dog-light-full.svg');
1474}
1475[href$="/husdjur/katt"]::before {
1476    display: inline-block !important;
1477    background-image: url('/siteassets/menu/svg/husdjur/cat-light-full.svg');
1478}
1479[href$="/gnagare-smadjur"]::before {
1480    display: inline-block !important;
1481    background-image: url('/siteassets/menu/svg/husdjur/rabbit-light-full.svg');
1482}
1483
1484/* --- Lantdjur --- */
1485[href$="/lantdjur/far-get"]::before {
1486    display: inline-block !important;
1487    background-image: url('/siteassets/menu/svg/lantdjur/sheep-light-full.svg');
1488}
1489[href$="/lantdjur/gris"]::before {
1490    display: inline-block !important;
1491    background-image: url('/siteassets/menu/svg/lantdjur/pig-light-full.svg');
1492}
1493[href$="/lantdjur/hons-fjaderfa"]::before {
1494    display: inline-block !important;
1495    background-image: url('/siteassets/menu/svg/lantdjur/egg-light-full.svg');
1496}
1497[href$="/lantdjur/notkreatur"]::before {
1498    display: inline-block !important;
1499    background-image: url('/siteassets/menu/svg/lantdjur/cow-light-full.svg');
1500}
1501[href$="/lantdjur/vilt"]::before {
1502    display: inline-block !important;
1503    background-image: url('/siteassets/menu/svg/lantdjur/deer-light-full.svg');
1504}
1505[href$="/lantdjur/djurvard"]::before {
1506    display: inline-block !important;
1507    background-image: url('/siteassets/menu/svg/lantdjur/kit-medical-light-full.svg');
1508}
1509[href$="/lantdjur/markning"]::before {
1510    display: inline-block !important;
1511    background-image: url('/siteassets/menu/svg/lantdjur/tag-light-full.svg');
1512}
1513[href$="/lantdjur/saltsten-slicksten"]::before {
1514    display: inline-block !important;
1515    background-image: url('/siteassets/menu/svg/lantdjur/salt-shaker-light-full.svg');
1516}
1517
1518/* --- Kläder & Skor --- */
1519[href$="/klader-skor/klader"]::before {
1520    display: inline-block !important;
1521    background-image: url('/siteassets/menu/svg/klader-skor/clothes-hanger-light-full.svg');
1522}
1523[href$="/klader-skor/skor-stovlar"]::before {
1524    display: inline-block !important;
1525    background-image: url('/siteassets/menu/svg/klader-skor/boot-light-full.svg');
1526}
1527[href$="/klader-skor/barnklader"]::before {
1528    display: inline-block !important;
1529    background-image: url('/siteassets/menu/svg/klader-skor/child-light-full.svg');
1530}
1531
1532/* --- Hemmet --- */
1533[href$="/hemmet/stada-rengora"]::before {
1534    display: inline-block !important;
1535    background-image: url('/siteassets/menu/svg/hem/broom-light-full.svg');
1536}
1537[href$="/hemmet/tvatta-diska"]::before {
1538    display: inline-block !important;
1539    background-image: url('/siteassets/menu/svg/hem/jug-detergent-light-full.svg');
1540}
1541[href$="/hemmet/hem-fritid"]::before {
1542    display: inline-block !important;
1543    background-image: url('/siteassets/menu/svg/hem/house-heart-light-full.svg');
1544}
1545[href$="/hemmet/mala"]::before {
1546    display: inline-block !important;
1547    background-image: url('/siteassets/menu/svg/hem/brush-light-full.svg');
1548}
1549[href$="/hemmet/uppvarmning"]::before {
1550    display: inline-block !important;
1551    background-image: url('/siteassets/menu/svg/hem/fire-light-full.svg');
1552}
1553[href$="/hemmet/verktyg"]::before {
1554    display: inline-block !important;
1555    background-image: url('/siteassets/menu/svg/hem/screwdriver-wrench-light-full.svg');
1556}
1557[href$="/hemmet/toa-hushallspapper"]::before {
1558    display: inline-block !important;
1559    background-image: url('/siteassets/menu/svg/hem/toilet-paper-light-full.svg');
1560}
1561[href$="/hemmet"]::before {
1562    display: inline-block !important;
1563    background-image: url('/siteassets/menu/svg/hem/-light-full.svg');
1564}
1565
1566/* --- häst --- */
1567[href$="/hast-ryttare/hastfoder"]::before {
1568    display: inline-block !important;
1569    background-image: url('/siteassets/menu/svg/hast/wheat-awn-light-full.svg');
1570}
1571[href$="/hast-ryttare/hasttacken"]::before {
1572    display: inline-block !important;
1573    background-image: url('/siteassets/menu/svg/hast/horse-saddle-light-full.svg');
1574}
1575[href$="/hast-ryttare/fodertillskott"]::before {
1576    display: inline-block !important;
1577    background-image: url('/siteassets/menu/svg/hast/carrot-light-full.svg');
1578}
1579[href$="/hast-ryttare/hastutrustning"]::before {
1580    display: inline-block !important;
1581    background-image: url('/siteassets/menu/svg/hast/alicorn-light-full.svg');
1582}
1583[href$="/hast-ryttare/hastvard"]::before {
1584    display: inline-block !important;
1585    background-image: url('/siteassets/menu/svg/hast/hearts-light-full.svg');
1586}
1587[href$="/hast-ryttare/ridklader-ridutrustning"]::before {
1588    display: inline-block !important;
1589    background-image: url('/siteassets/menu/svg/hast/hat-cowboy-side-light-full.svg');
1590}
1591[href$="/hast-ryttare/hastskor-hovslageri"]::before {
1592    display: inline-block !important;
1593    background-image: url('/siteassets/menu/svg/hast/horseshoe-light-full.svg');
1594}
1595[href$="/hast-ryttare/hastgodis"]::before {
1596    display: inline-block !important;
1597    background-image: url('/siteassets/menu/svg/hast/apple-whole-light-full.svg');
1598}
1599[href$="/hast-ryttare/paddock-grindar"]::before {
1600    display: inline-block !important;
1601    background-image: url('/siteassets/menu/svg/hast/fence-light-full.svg');
1602}
1603[href$="/hast-ryttare/hastleksaker"]::before {
1604    display: inline-block !important;
1605    background-image: url('/siteassets/menu/svg/hast/dice-d12-light-full.svg');
1606}
1607
1608/* --- trädgård --- */
1609[href$="/tradgard/bevattning"]::before {
1610    display: inline-block !important;
1611    background-image: url('/siteassets/menu/svg/tradgard/hose-light-full.svg');
1612}
1613[href$="/tradgard/jord"]::before {
1614    display: inline-block !important;
1615    background-image: url('/siteassets/menu/svg/tradgard/bag-seedling-light-full.svg');
1616}
1617[href$="/tradgard/maskiner"]::before {
1618    display: inline-block !important;
1619    background-image: url('/siteassets/menu/svg/tradgard/lawn-robot-light-full.svg');
1620}
1621[href$="/tradgard/froer"]::before {
1622    display: inline-block !important;
1623    background-image: url('/siteassets/menu/svg/tradgard/peapod-light-full.svg');
1624}
1625[href$="/tradgard/smafaglar-vildfagel"]::before {
1626    display: inline-block !important;
1627    background-image: url('/siteassets/menu/svg/tradgard/bird-light-full.svg');
1628}
1629[href$="/tradgard/viltskydd"]::before {
1630    display: inline-block !important;
1631    background-image: url('/siteassets/menu/svg/tradgard/deer-light-full.svg');
1632}
1633[href$="/tradgard/grillar"]::before {
1634    display: inline-block !important;
1635    background-image: url('/siteassets/menu/svg/tradgard/grill-hot-light-full.svg');
1636}
1637[href$="/tradgard/kompost"]::before {
1638    display: inline-block !important;
1639    background-image: url('/siteassets/menu/svg/tradgard/worm-light-full.svg');
1640}
1641[href$="/tradgard/mossa-ogras"]::before {
1642    display: inline-block !important;
1643    background-image: url('/siteassets/menu/svg/tradgard/weeds-slash-light-full.svg');
1644}
1645[href$="/tradgard/sand-sten"]::before {
1646    display: inline-block !important;
1647    background-image: url('/siteassets/menu/svg/tradgard/hill-rockslide-light-full.svg');
1648}
1649[href$="/tradgard/tradgardsredskap"]::before {
1650    display: inline-block !important;
1651    background-image: url('/siteassets/menu/svg/tradgard/shovel-light-full.svg');
1652}
1653[href$="/tradgard/vaxter"]::before {
1654    display: inline-block !important;
1655    background-image: url('/siteassets/menu/svg/tradgard/tree-deciduous-light-full.svg');
1656}
1657[href$="/tradgard/godsel"]::before {
1658    display: inline-block !important;
1659    background-image: url('/siteassets/menu/svg/tradgard/leaf-heart-light-full.svg');
1660}
1661[href$="/tradgard/odla-plantera"]::before {
1662    display: inline-block !important;
1663    background-image: url('/siteassets/menu/svg/tradgard/hand-holding-seedling-light-full.svg');
1664}
1665[href$="/tradgard/skadedjursbekampning"]::before {
1666    display: inline-block !important;
1667    background-image: url('/siteassets/menu/svg/tradgard/opossum-light-full.svg');
1668}
1669[href$="/tradgard/utemiljo"]::before {
1670    display: inline-block !important;
1671    background-image: url('/siteassets/menu/svg/tradgard/squirrel-light-full.svg');
1672}
1673[href$="/tradgard/vaxtstod-spalje"]::before {
1674    display: inline-block !important;
1675    background-image: url('/siteassets/menu/svg/tradgard/frame-light-full.svg');
1676}
1677
1678/* --- gård stall --- */
1679[href$="/lantbruk-skog/el-belysning"]::before {
1680    display: inline-block !important;
1681    background-image: url('/siteassets/menu/svg/gard/lightbulb-on-light-full.svg');
1682}
1683[href$="/lantbruk-skog/livsmedelsproduktion"]::before {
1684    display: inline-block !important;
1685    background-image: url('/siteassets/menu/svg/gard/boxes-packing-light-full.svg');
1686}
1687[href$="/lantbruk-skog/skogsutrustning"]::before {
1688    display: inline-block !important;
1689    background-image: url('/siteassets/menu/svg/gard/trees-light-full.svg');
1690}
1691[href$="/lantbruk-skog/stallinredning"]::before {
1692    display: inline-block !important;
1693    background-image: url('/siteassets/menu/svg/gard/barn-light-full.svg');
1694}
1695[href$="/lantbruk-skog/stangsel"]::before {
1696    display: inline-block !important;
1697    background-image: url('/siteassets/menu/svg/gard/fence-light-full.svg');
1698}
1699[href$="/lantbruk-skog/vattenforsorjning"]::before {
1700    display: inline-block !important;
1701    background-image: url('/siteassets/menu/svg/gard/faucet-drip-light-full.svg');
1702}
1703[href$="/lantbruk-skog/foderutrustning"]::before {
1704    display: inline-block !important;
1705    background-image: url('/siteassets/menu/svg/gard/crate-apple-light-full.svg');
1706}
1707[href$="/lantbruk-skog/olja-drivmedel"]::before {
1708    display: inline-block !important;
1709    background-image: url('/siteassets/menu/svg/gard/oil-can-drip-light-full.svg');
1710}
1711[href$="/lantbruk-skog/skottkarror-vagnar"]::before {
1712    display: inline-block !important;
1713    background-image: url('/siteassets/menu/svg/gard/dolly-empty-light-full.svg');
1714}
1715[href$="/lantbruk-skog/stromedel"]::before {
1716    display: inline-block !important;
1717    background-image: url('/siteassets/menu/svg/gard/cubes-stacked-light-full.svg');
1718}
1719[href$="/lantbruk-skog/transport-vag"]::before {
1720    display: inline-block !important;
1721    background-image: url('/siteassets/menu/svg/gard/road-light-full.svg');
1722}
1723[href$="/lantbruk-skog/vaxtodling"]::before {
1724    display: inline-block !important;
1725    background-image: url('/siteassets/menu/svg/gard/wheat-light-full.svg');
1726}
1727[href$="/lantbruk-skog/lantbruksredskap"]::before {
1728    display: inline-block !important;
1729    background-image: url('/siteassets/menu/svg/gard/broom-wide-light-full.svg');
1730}
1731[href$="/lantbruk-skog/skyddsutrustning"]::before {
1732    display: inline-block !important;
1733    background-image: url('/siteassets/menu/svg/gard/headphones-light-full.svg');
1734}
1735[href$="/lantbruk-skog/dranering-avlopp"]::before {
1736    display: inline-block !important;
1737    background-image: url('/siteassets/menu/svg/gard/pump-light-full.svg');
1738}
1739[href$="/lantbruk-skog/presenning-lastsakring"]::before {
1740    display: inline-block !important;
1741    background-image: url('/siteassets/menu/svg/gard/tarp-light-full.svg');
1742}
1743
1744a.button:before {
1745    background-image: none;
1746}
1747</style>
1748
1749<!-- GG - fix numbers ios phone -->
1750<style type="text/css">
1751/* iOS Safari: neutralisera auto-detekterade länkar */
1752a[x-apple-data-detectors],
1753a[href^="tel"] {
1754  color: inherit !important;
1755  text-decoration: none !important;
1756  font: inherit !important;
1757}
1758</style>
1759
1760<!-- GG - fix product list height prel -->
1761<style type="text/css">
1762@media only screen and (min-width: 768px) {
1763    .product-list__products {
1764        align-content: start;
1765    }
1766}
1767</style>
1768
1769<!-- GG - fix article list teaser tags -->
1770<style type="text/css">
1771.article-teaser__tag:after {
1772    content: "";
1773}
1774li.article-teaser__tag {
1775    text-transform: initial !important;
1776}
1777</style>
1778
1779<!-- GG - fix fix chevron links -->
1780<style type="text/css">
1781.link--arrow:after, .link--article:after {
1782    border-bottom: 1.5px solid;
1783    border-right: 1.5px solid;
1784    height: 0.5rem;
1785    width: 0.5rem;
1786}
1787</style>
1788
1789<!-- GG - fix empty category message -->
1790<style type="text/css">
1791.product-list__empty {
1792    margin: 20px auto;
1793}
1794</style>
1795
1796<!-- GG - fix editorial menu -->
1797<style type="text/css">
1798@media only screen and (min-width: 1280px) {
1799.page-header__editorial-menu {
1800    padding-top: 1rem;
1801    padding-bottom: 1rem;
1802    line-height: 1.1;
1803}
1804}
1805</style>
1806
1807<!-- GG - fix product ratings size -->
1808<style type="text/css">
1809.product-card span.customer-rating__stars {
1810    font-size: 14px;
1811}
1812.product-card span.customer-rating__review-count {
1813    font-size: 14px;
1814    line-height: 1;
1815}
1816.product-card svg.display-country__icon {
1817    width: 18px;
1818}
1819</style>
1820
1821<!-- GG - fix product page tables -->
1822<style type="text/css">
1823div#productdetails .editorial table {
1824    border-collapse: collapse;
1825    margin: 20px 0;
1826    overflow-x: auto;
1827    -webkit-overflow-scrolling: touch;
1828    font-size: 14px;
1829    white-space: nowrap;
1830    display: block;
1831    max-width: 100%;
1832}
1833div#productdetails .editorial colgroup, div#productdetails .editorial tr {
1834    border-bottom: 1px solid #ccc;
1835}
1836div#productdetails .editorial tr:first-of-type {
1837    white-space: nowrap;
1838
1839}
1840div#productdetails .editorial table td {
1841    padding: 0 10px 0 5px;
1842}
1843div#productdetails .editorial table thead tr:nth-of-type(1) {
1844    background: var(--color-theme-surface-2);
1845    font-weight: 600;
1846}
1847div#productdetails .editorial table thead th {
1848    padding: 0 10px 0 5px;
1849    text-align: left;
1850}
1851div#productdetails .editorial table tbody tr:nth-child(even) {
1852  /* background-color: #f8f7f5; */
1853  background-color: #f8f7f57d;
1854}
1855
1856div#productdetails .editorial table tbody tr:hover {
1857  background-color: #f3f0ec;
1858  border-bottom: 2px solid var(--color-dark-red);
1859}
1860</style>
1861
1862<!-- gg fix - hero + cards -->
1863<style type="text/css">
1864.gg-embed{ margin:0 auto; }
1865
1866.gg-embed__grid{
1867  display:grid;
1868  gap:16px;
1869  grid-template-columns:repeat(4, 1fr);
1870}
1871
1872/* Hero tar hela bredden på desktop */
1873.gg-card--hero{ grid-column:1 / -1; }
1874
1875/* 4 tiles under i desktop */
1876.gg-card{
1877  display:block;
1878  border-radius:0px;
1879  overflow:hidden;
1880  text-decoration:none;
1881  position:relative;
1882}
1883
1884.gg-card__img{
1885  width:100%;
1886  height:auto;
1887  display:block;
1888}
1889
1890/* Hero layout */
1891.gg-card--hero .gg-card__img { 
1892aspect-ratio: 16/4; object-fit:cover; 
1893}
1894.gg-card--hero .gg-card__body{
1895  position:absolute;
1896  left:0px;
1897  bottom:0px;
1898  background:rgba(250,230,152,0.95);
1899  color: var(--color-dark-red);
1900  padding:28px 16px 14px; /* <- ändra (mer top padding) */
1901  border-radius:0px;
1902  max-width:min(520px, 70%);
1903}
1904
1905.gg-card--hero .gg-card__kicker{
1906  position:absolute;
1907  left:16px;
1908  top:-60px;            /* <- flyttar upp den ovanför gula boxen */
1909  margin:0;             /* <- ta bort margin-bottom-effekten */
1910  z-index:2;
1911
1912  font-weight:700;
1913  letter-spacing:.04em;
1914  font-size:1.5rem;
1915  display:inline-block;
1916  transform:rotate(-4deg);
1917  background:#cf4a14;
1918  color: var(--color-white);
1919  padding:6px 30px;
1920  border-radius:0px;
1921  font-family:'Granngarden';
1922}
1923
1924.gg-card--mini .gg-card__kicker {
1925    left: 10px;
1926    bottom: 120px;
1927    margin: 0;
1928    z-index: 2;
1929    font-weight: 700;
1930    letter-spacing: .04em;
1931    font-size: 1.3rem;
1932    display: inline-block;
1933    transform: rotate(-4deg);
1934    background: #cf4a14;
1935    color: var(--color-white);
1936    padding: 0 8px;
1937    /* border-radius: 12px; */
1938    font-family: 'Granngarden';
1939    position: absolute;
1940}
1941
1942.gg-card--mini .gg-card__kicker:after {
1943    content: "";
1944    position: absolute;
1945    left: 10px;
1946    bottom: -30px;
1947    width: 0;
1948    height: 0;
1949    border: 20px solid transparent;
1950    border-top-color: #cf4a14;
1951    transform: rotate(10deg);
1952}
1953
1954.gg-card__title{
1955  font-family:'Granngarden';
1956  font-weight:600;
1957  font-size:clamp(20px, 2.2vw, 34px);
1958  line-height:1.15;
1959}
1960.gg-card__sub {
1961margin-top:6px; 
1962}
1963
1964.gg-card__prev-price {
1965    text-decoration: line-through;
1966    font-size: 14px;
1967    line-height: 1;
1968    margin-top: 6px;
1969    opacity:.9; 
1970}
1971
1972/* Mini tiles */
1973.gg-card--mini .gg-card__img{ aspect-ratio: 16/10; object-fit:cover; }
1974.gg-card--mini{
1975  display:flex;
1976  flex-direction:column;
1977}
1978.gg-card--mini .gg-card__body{
1979  padding:14px 14px 18px;
1980}
1981.gg-chevron{
1982  position:absolute;
1983  right:14px;
1984  bottom:14px;
1985  width:44px;
1986  height:44px;
1987  border-radius:0px;
1988  display:flex;
1989  align-items:center;
1990  justify-content:center;
1991  font-size:34px;
1992  line-height:1;
1993  font-family:var(--basier-square-regular);
1994}
1995
1996
1997span.gg-chevron:hover, span.gg-chevron-icon:hover, .gg-btn--chevron:hover  {
1998    border: 1px solid;
1999}
2000
2001.gg-embed .gg-btn{
2002  display:inline-flex;
2003  align-items:center;
2004  justify-content:center;
2005  height:44px;
2006  padding:0 14px;
2007  border-radius:0px;
2008  margin-top:12px;
2009  font-family:var(--basier-square-regular);
2010}
2011
2012.gg-embed .gg-card-label {
2013    font-family: var(--font-open-sans-condensed);
2014    font-size: 1.3rem;
2015    font-weight: 300;
2016    line-height: 1;
2017    padding: .75rem .75rem;
2018    position: absolute;
2019    z-index: 2;
2020}
2021
2022/* Mobile: 2x2 för tiles, hero fullbredd */
2023@media (max-width: 900px){
2024  .gg-embed__grid{ grid-template-columns:repeat(2, 1fr); }
2025  .gg-card--hero{ grid-column:1 / -1; }
2026 
2027  .gg-embed .gg-card-label {
2028    font-size: 1rem;
2029    padding: .25rem .5rem;
2030}
2031}
2032@media (max-width: 320px){
2033  /* Om du ändå vill 1 kol på riktigt små skärmar */
2034  .gg-embed__grid{ grid-template-columns:1fr; }
2035}
2036
2037@media (max-width: 1023px){
2038.gg-card--hero .gg-card__img{ aspect-ratio: 16/6; object-fit:cover; }
2039}
2040
2041@media (max-width:1100px){
2042  .gg-card--mini .gg-card__sub {
2043    margin-right: 30%;
2044    line-height: 1.3;
2045}
2046}
2047
2048@media (max-width: 520px){
2049.gg-card--hero .gg-card__img {
2050aspect-ratio: 16/16; object-fit:cover; 
2051}
2052  .gg-card--mini .gg-card__sub {
2053    margin-right: 35%;
2054    line-height: 1.3;
2055   font-size: 15px;
2056}
2057.gg-chevron {
2058    right: 7px;
2059    bottom: 7px;
2060}
2061.gg-card--mini .gg-card__body {
2062    padding: 14px 10px 14px;
2063}
2064}
2065</style>
2066
2067<!-- gg fix banners embed highlight -->
2068<style type="text/css">
2069/* ===== Base ===== */ 
2070.gg-highlight {
2071    display: flex;
2072    align-items: center;
2073    padding: 16px 40px;
2074    font-family: 'Granngarden';
2075    text-decoration: none;
2076    border-radius: 0px;
2077    max-height: 150px;
2078    justify-content: center;
2079}
2080
2081/* ===== 40 / 40 / 20 layout ===== */
2082.gg-highlight__text {
2083    flex: 0 0 30%;
2084    font-weight: 600;
2085    font-size: 2.5rem;
2086    line-height: 1.2;
2087    text-align: center;
2088}
2089.gg-highlight__img {
2090    flex: 0 0 30%;
2091    max-height: 150px;
2092    width: auto;
2093    object-fit: contain;
2094    /* justify-self: center; */
2095}
2096.gg-chevron-button {
2097    flex: 0 0 20%;
2098    /* max-width: 72px; */
2099    display: flex;
2100    justify-content: center;
2101}
2102
2103/* ===== Chevron button ===== */
2104.gg-chevron-icon {
2105    width: 44px;
2106    height: 44px;
2107    display: flex;
2108    align-items: center;
2109    justify-content: center;
2110    border-radius: 0;
2111    font-size: 38px;
2112    line-height: 1;
2113    font-family: var(--basier-square-regular);
2114}
2115
2116/* Teman (Ã¥terbruk) */
2117.gg-theme-yellow-campaign{ background:#FAE698; color:var(--color-dark-red); }
2118.gg-theme-yellow{ background:#FAE698; color:var(--color-dark-red); }
2119.gg-theme-orange{ background:#cf4a14; color: var(--color-white); }
2120.gg-theme-brown{ background:var(--color-dark-red); var(--color-white); }
2121.gg-theme-gray{ background:#f8f5f1; color:var(--color-dark-red); }
2122
2123.gg-theme-yellow-campaign .gg-card__title { color: var(--color-campaign); }
2124
2125.gg-chevron-orange {
2126    color: #cf4a14;
2127 /*   border: 1px solid; */
2128}
2129.gg-chevron-yellow {
2130    color: #fae698;
2131/*    border: 1px solid; */
2132}
2133.gg-chevron-brown {
2134    color: var(--color-dark-red);
2135/*    border: 1px solid; */
2136}
2137
2138/* ===== Mobile ===== */
2139@media (max-width:640px){
2140  .gg-highlight{
2141    flex-wrap:wrap;
2142    max-height:none;
2143    padding: 16px 20px;
2144  }
2145
2146  .gg-highlight__text,
2147  .gg-highlight__img,
2148  .gg-chevron-button {
2149    flex:0 0 100%;
2150  }
2151  .gg-highlight__text {
2152    font-size: 1.6rem;
2153  }
2154
2155  .gg-chevron-button {
2156    justify-content:center;
2157    margin-top:8px;
2158  }
2159
2160  .gg-highlight__img{
2161    max-height:140px;
2162  }
2163}
2164</style>
2165
2166<!-- GG - fix no hits page -->
2167<style type="text/css">
2168h1.search-results__heading {
2169    display: none;
2170}
2171p.search-results__no-hits__message:before {
2172    content: "¯\\_(ツ)_/¯";
2173    display: block;
2174    margin-bottom: 10px;
2175}
2176p.search-results__no-hits__message {
2177    font-size: 1.5rem;
2178    margin: 20px 0;
2179    text-align: center;
2180    line-height: 1.3;
2181}
2182p.search-results__no-hits__message span {
2183    display: block;
2184}
2185p.search-results__no-hits__suggestions {
2186    font-family: 'Granngarden';
2187    color: var(--color-dark-red);
2188    font-size: 1.4rem;
2189    margin: 10px 0;
2190}
2191p.search-results__no-hits__suggestions strong {
2192    font-weight: 300;
2193}
2194@media only screen and (min-width: 768px) {
2195.search-results__no-hits__products.product-grid.product-grid--three-column {
2196        grid-template-columns: repeat(4, minmax(0, 1fr));
2197    }
2198}
2199ul.search-results__did-you-mean.search-results__did-you-mean--center {
2200    font-size: 1.3rem;
2201}
2202</style>
2203
2204<!-- GG - fix product text truncation height -->
2205<style type="text/css">
2206.accordion__content--truncated, .accordion__content[data-truncated=true] {
2207    /* max-height: 300px; */
2208}
2209</style>
2210
2211<!-- GG - fix store accessibility -->
2212<style type="text/css">
2213main#main-content.store:after {
2214    content: "Tillgänglighet i våra butiker: Butikerna ligger alltid i markplan utan hissar eller trappor. – Assistanshundar alltid välkomna – Hörselslinga finns ej – Personalen alltid tillgänglig att hjälpa till // senast uppadaterad 2026-09-01";
2215    padding: 30px;
2216    margin: 20px auto;
2217    background: var(--color-greige);
2218    display: flex;
2219    max-width: 1140px;
2220}
2221</style>
2222
2223<!-- GG - fix article teasers -->
2224<style type="text/css">
2225article.article-teaser.article-teaser--inspo img {
2226    max-height: 150px;
2227}
2228</style>
2229
2230<!-- GG - fix price text looks -->
2231<style type="text/css">
2232span.price-valid-until {
2233    color: var(--color-charcoal-gray);
2234    font-family: var(--font-open-sans-condensed);
2235    font-size: 1rem;
2236    font-weight: 300;
2237}
2238p.product-price__best-price-last-30-text {
2239    color: var(--color-charcoal-gray);
2240    font-family: var(--font-open-sans-condensed);
2241    font-size: 1rem;
2242    font-weight: 300;
2243}
2244</style>
2245
2246<!-- GG - fix google review store pages -->
2247<style type="text/css">
2248@media only screen and (max-width: 1023px) {
2249.gg-google-review p {
2250    font-size: 14px;
2251}
2252.gg-google-review h2 {
2253    font-size: 1.3rem;
2254}
2255
2256.gg-google-review p:nth-child(3) span {
2257    font-size: 18px !important;
2258}
2259.gg-google-review a.button.button--primary {
2260    font-size: 14px;
2261}
2262}
2263.gg-google-review h2 {
2264    font-size: 1.7rem;
2265}
2266.gg-google-review {
2267    background-color: var(--color-white);
2268}
2269.gg-google-review p {
2270    margin-bottom: 0rem !important;
2271}
2272
2273.gg-google-review a.button.button--primary {
2274    margin: 0;
2275    text-transform: initial;
2276}
2277.gg-google-review .campaign-product__text {
2278    padding-top: 20px;
2279    padding-bottom: 20px;
2280}
2281.store-header__opening-hours {
2282    border-radius: 0;
2283}
2284</style>
2285
2286<!-- GG - fix payment icons footer -->
2287<style type="text/css">
2288@media only screen and (max-width: 767px) {
2289.image-footer-block__items {
2290    gap: 0.5rem;
2291}
2292}
2293</style>
2294
2295<!-- GG - fix content search -->
2296<style type="text/css">
2297article.article-teaser.article-teaser--ingress.article-teaser--editorial-search-result img {
2298    max-height: 115px;
2299    min-height: 115px;
2300    width: -webkit-fill-available;
2301}
2302@media only screen and (max-width: 767px) {
2303    .article-teaser--ingress.article-teaser--editorial-search-result .article-teaser__image {
2304        display: unset;
2305    }
2306}
2307
2308.search-results__hit--content {
2309    display: flex;
2310}
2311</style>
2312
2313<!-- GG - fix label width -->
2314<style type="text/css">
2315li.product-labels__label {
2316    width: fit-content;
2317}
2318</style>
2319
2320<!-- GG - fix vertex product filtered recs -->
2321<style type="text/css">
2322h2.center.product-list-block__heading, .custom-product-list__heading {
2323    font-size: 1.625rem;
2324}
2325@media only screen and (max-width: 768px) {
2326h2.center.product-list-block__heading, .custom-product-list__heading {
2327    font-size: 1.325rem;
2328}
2329}
2330
2331@media only screen and (min-width: 1024px) {
2332.modules__module .product__recommendation .product-grid--scroll {
2333        justify-content: flex-start;
2334    }
2335
2336.modules__module .product__recommendation .product-grid--scroll .product-card {
2337    min-width: 146px;
2338    }
2339}
2340@media only screen and (min-width: 1440px) {
2341.modules__module .product__recommendation .product-grid--scroll .product-card {
2342    min-width: 210.66px;
2343    }
2344}
2345/*
2346@media only screen and (min-width: 1280px) {
2347.modules__module .product__recommendation .product-grid--scroll .product-card {
2348    min-width: 220px;
2349    }
2350}
2351*/
2352</style>
2353
2354<!-- GG - fix vertex h2 recs product page -->
2355<style type="text/css">
2356/* .product__recommendation .product-list-block__heading[data-v-1a0cad7a] */
2357.product__recommendation h2.product-list-block__heading[data-v-45a62aa8] 
2358{
2359    /* color: #775120; */
2360    font-weight: 300;
2361    color: var(--color-dark-red);
2362    text-align: left;
2363    margin: 30px 0 5px;
2364}
2365.modules__module .product__recommendation .product-list-block__heading {
2366    margin: 0px 0 5px;
2367}
2368</style>
2369
2370<!-- GG - fix campaign btn product page -->
2371<style type="text/css">
2372.product-campaign-list .product-campaign-list__buy-button {
2373    background-color: var(--color-white);
2374    color: var(--color-campaign);
2375}
2376.product-campaign-list .product-campaign-list__buy-button:hover {
2377    background-color: var(--color-campaign);
2378    color: var(--color-white);
2379}
2380</style>
2381
2382<!-- GG - fix  mobile navigation pills -->
2383<style type="text/css">
2384ul.product-list__links {
2385    gap: 0.65rem;
2386}
2387li.product-list__link {
2388    border-radius: 999px;
2389}
2390a.product-list__link-button {
2391    border-radius: 999px;
2392}
2393</style>
2394
2395<!-- GG - fix product store list few in stock -->
2396<style type="text/css">
2397.product-store-picker__info p.availability.availability--few-in-stock span:after {
2398    content: " (1-6 st)";
2399}
2400</style>
2401
2402<!-- GG - fix buy btn hover  -->
2403<style type="text/css">
2404button.product-quantity__buy:hover {
2405    transition: .2s ease-in-out;
2406    background: var(--color-moss-green);
2407}
2408</style>
2409
2410<!-- GG - fix support checkout bottom -->
2411<style type="text/css">
2412@media only screen and (min-width: 1024px) {
2413    .checkout__support p {
2414        max-width: 47.5rem;
2415    }
2416}
2417.checkout__support {
2418    padding: 30px 10px;
2419}
2420.checkout__support p {
2421    margin-bottom: 15px;
2422}
2423img.checkout-summary-cart__image {
2424    width: auto;
2425}
2426
2427@media only screen and (min-width: 768px) {
2428img.checkout-summary-cart__image {
2429    max-height: 90%;
2430}
2431}
2432
2433</style>
2434
2435<!-- GG - fix checkout delivery logos -->
2436<style type="text/css">
2437.unifaun-widget [aria-hidden=true]:not(svg) {
2438    display: unset;
2439}
2440</style>
2441
2442<!-- GG - fix  article list mobile -->
2443<style type="text/css">
2444@media screen and (min-width: 350px) and (max-width: 599px) {
2445    .article-list--inspiration .article-list__list>li {
2446        width: calc(50%);
2447    }
2448}
2449</style>
2450
2451<!-- GG - fix article bottom image -->
2452<style type="text/css">
2453picture.article-list__picture img {
2454    max-width: 100%;
2455}
2456</style>
2457
2458<!-- GG - fix search result other -->
2459<style type="text/css">
2460ul.search-results__hits.search-results__hits--other {
2461    display: grid;
2462    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
2463    grid-gap: 1.875rem .825rem;
2464}
2465</style>
2466
2467<!-- GG - fix brand page extra info image-->
2468<style type="text/css">
2469.productContent .product__brand-inner a {
2470    text-align: center;
2471}
2472
2473.productContent img.product__brand-image {
2474    max-width: 300px;
2475}
2476
2477.productContent .product__brand-inner a[href="/marken/fiskars"]:after {
2478    content: "Nöjd kund garanti från Fiskars! Köp, prova hemma och få pengarna tillbaka om du inte är nöjd inom 30 dagar!";
2479    display: inline-block;
2480    margin: 20px;
2481    padding: 1rem;
2482    font-size: 14px;
2483    color: #f59903;
2484    font-weight: 300;
2485    text-align: center;
2486    display: inline-block;
2487}
2488.productContent .product__brand-inner a[href="/marken/oregon"]:after {
2489    content: "Oregon Tool Guide gör det enkelt att hitta rätt reservdel till din motorsåg eller trimmer. Här finns ett brett sortiment av Oregon-delar som passar flera andra varumärken. Guiden hjälper dig att snabbt matcha rätt produkt.";
2490    margin: 20px;
2491    padding: 1rem;
2492    font-size: 14px;
2493    font-weight: 300;
2494    text-align: center;
2495    display: inline-block;
2496}
2497.productContent .product__brand-inner a[href="/marken/mimsafe"]:after {
2498    content: "Se bilbursguiden för hjälp att välja rätt bilbur till din bil och hund";
2499    margin: 20px;
2500    padding: 1rem;
2501    font-size: 14px;
2502    font-weight: 300;
2503    text-align: center;
2504    display: inline-block;
2505}
2506</style>
2507
2508<!-- GG - fix  kunskap article list -->
2509<style type="text/css">
2510@media screen and (min-width: 600px) {
2511    .article-list--inspiration .article-list__list>li:nth-child(7n+0) {
2512       width: calc(33.33333% - 40px);
2513/*        width: calc(25% - 40px); */
2514    }
2515}
2516article.article-teaser h3 {
2517    font-size: 1.6rem;
2518}
2519</style>
2520
2521<!-- GG - fix customer rating product page -->
2522<style type="text/css">
2523div#qa:before {
2524content: "👉  Har du en kort fråga om produktens storlek, vikt eller funktion? Ställ din fråga här så hjälper vi dig inför ditt köp. Denna funktion är endast för produktspecifika frågor. För order-, lager-, reklamations- eller rådgivningsärenden hänvisar vi till kundservice eller butik." ;
2525/*    content: "👉 Notera att frågor runt t.ex. lagersaldo eller rådgivning inte kan besvaras. Sakfrågor som rör produkten besvaras."; */
2526    font-size: 14px;
2527    line-height: 1.2;
2528    margin: 0 5px 0;
2529    display: block;
2530}
2531button#tf-tab-ask:after, div#tf-acc-ask:after {
2532    content: " om produkten" !important;
2533}
2534
2535.link.product-content__review-link {
2536    color: #a32900;
2537}
2538
2539p.product-content__review-wrapper {
2540    font-size: 12px;
2541}
2542</style>
2543
2544<!-- GG - fix new qa btn  -->
2545<style type="text/css">
2546button#tf-tab-ask {
2547    display: none !important;
2548}
2549div#tf-acc-ask {
2550    display: none !important;
2551}
2552</style>
2553
2554<!-- GG - fix hide tf q/a -->
2555<style type="text/css">
2556button.accordion__button[aria-controls="qa"] {
2557    display: none;
2558}
2559
2560.tf-tabs-panels button.accordion.pull-left.only-xs.accordion-txt.selected.iconcollapse {
2561    display: none !important;
2562}
2563
2564.tf-tabs-link.tf-link span {
2565    display: none !important;
2566}
2567</style>
2568
2569<!-- GG - fix robotmow banner  -->
2570<style type="text/css">
2571.gg-offer.gg-robotmow {
2572    align-items: center;
2573  }
2574  
2575  .gg-offer.gg-robotmow img {
2576    max-width: 100%;
2577  }
2578  
2579  .gg-offer.gg-robotmow a.link.link--article {
2580    white-space: nowrap;
2581    /* max-height: min-content; */
2582  }
2583
2584  @media only screen and (max-width: 500px) {
2585    .gg-offer.gg-robotmow {
2586        flex-direction: column;
2587    }
2588    .gg-offer.gg-robotmow img {
2589        margin-right: 0;
2590        max-height: 100%;
2591    }
2592  }
2593</style>
2594
2595<!-- GG - fix new delivery icons  -->
2596<style type="text/css">
2597.gg-delivery-info {
2598    margin-top: 20px;
2599    margin-right: 0px;
2600    margin-left: 0px;
2601    margin-bottom: 20px;
2602    /* background: rgb(247, 245, 241); */
2603    padding: 10px 0px;
2604    display: flex;
2605    /* justify-content: center; */
2606    font-size: 14px;
2607}
2608
2609.gg-delivery-info ul {
2610    display: flex;
2611    flex-direction: row;
2612    row-gap: 10px;
2613    flex-wrap: wrap;
2614    gap: 20px;
2615    justify-content: center;
2616}
2617.gg-delivery-info li {
2618    display: flex;
2619    column-gap: 10px;
2620    flex-direction: column;
2621    /* max-width: 160px; */
2622}
2623
2624.gg-delivery-info img {
2625    display: inline-block;
2626    /* margin-right: 15px; */
2627    /* max-width: 55px; */
2628    /* filter: grayscale(100%); */
2629/*    height: auto; */
2630    max-height: 22px;
2631    /* height: fit-content; */
2632    /* width: 42px; */
2633}
2634
2635.gg-delivery-info li span {
2636    align-content: center;
2637    flex-wrap: nowrap;
2638    margin-top: 5px;
2639}
2640</style>
2641
2642<!-- GG - article dates -->
2643<style type="text/css">
2644.article-header__content-author {
2645    grid-template-areas:
2646        "modified published-by"
2647        "published published-by";
2648}
2649</style>
2650
2651<!-- GG - fix product page tabs -->
2652<style type="text/css">
2653.productContent .product-chapter__link[aria-expanded=true] {
2654    color: var(--color-white);
2655    background: var(--color-cognac);
2656}
2657.productContent button.product-chapter__link {
2658    background: var(--color-greige);
2659    border: none;
2660    font-family: 'Basier Square Regular';
2661    letter-spacing: 0;
2662    font-weight: 600;
2663}
2664
2665.productContent li.product-chapter__item.is-active-tab {
2666    border: none;
2667}
2668.productContent ul.product-chapter__list {
2669    border: none;
2670    gap: 10px;
2671    /* border-bottom: 1px solid var(--color-dark-red); */
2672}
2673</style>
2674
2675<!-- GG - fix gtm date injection  -->
2676<style type="text/css">
2677@media only screen and (max-width: 420px) {
2678div#gg-gtm-last-modified-date {
2679    text-align: center !important;
2680}
2681}
2682</style>
2683
2684<!-- GG - fix store page icons  -->
2685<style type="text/css">
2686@media only screen and (min-width: 1024px) {
2687    .storePage .link-list-with-image-block--rounded .link-list-with-image-block__list {
2688        grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr));
2689    }
2690    .storePage .link-list-with-image-block--rounded span.link-list-with-image-block__text {
2691        white-space: nowrap;
2692    }
2693}
2694</style>
2695
2696<!-- GG - fix dates product list  -->
2697<style type="text/css">
2698.product-list__modified:after {
2699    content: "|";
2700}
2701p.product-list__modified {
2702    order: -1;
2703}
2704.product-list__modified:before {
2705    content: none;
2706}
2707</style>
2708
2709<!-- GG - fix shortcut category inject -->
2710<style type="text/css">
2711.gg-related-category-heading {
2712    text-align: left;
2713    margin: -15px auto 0 0;
2714}
2715.gg-related-category-heading h2 {
2716    font-size: 16px;
2717}
2718.gg-related-category-heading h2:before {
2719    background-image: url(/siteassets/menu/svg/hast/hearts-light-full.svg);
2720    content: "";
2721    width: 20px;
2722    height: 20px;
2723    background-size: contain;
2724    display: inline-block;
2725    filter: invert(18%) sepia(35%) saturate(1652%) hue-rotate(338deg) brightness(95%) contrast(92%);
2726    margin-right: 5px;
2727    vertical-align: bottom;
2728}
2729.gg-related-category-links {
2730    display: flex;
2731    gap: 10px;
2732    margin: 5px auto 20px 0;
2733    height: 38px;
2734    overflow-y: auto;
2735    width: 100%;
2736}
2737.gg-related-category-links a.link.link--article {
2738    font-weight: 300;
2739    font-family: 'Granngarden';
2740    padding: 5px 10px;
2741    /* background: var(--color-banana-mania); */
2742    text-transform: capitalize !important;
2743    white-space: nowrap;
2744}
2745@media only screen and (min-width: 1024px) {
2746    .gg-related-category-links a.link.link--article {
2747        font-size: 18px;
2748        padding: 10px 15px;
2749    }
2750    .gg-related-category-links {
2751        height: 44px;
2752}
2753}
2754</style>
2755
2756<!-- GG - fix category mobile icon -->
2757<style type="text/css">
2758@media only screen and (max-width: 1023px) {
2759    .product-list__categories-heading-wrapper {
2760        display: flex;
2761    }
2762    .product-list__categories-heading-wrapper.sr-only {
2763        min-width: 80px;
2764        clip: unset;
2765        left: 10px;
2766        overflow: visible;
2767        margin-top: -15px;
2768    }
2769    .product-list__categories-heading-wrapper svg {
2770        fill: var(--color-dark-red);
2771        /* left: 20px; */
2772        height: 12px;
2773    }
2774    .product-list__categories-heading-wrapper.sr-only h2 {
2775        font-size: 14px;
2776    }
2777    .product-list__category-section {
2778        margin-top: 1rem;
2779    }
2780    .product-list__link {
2781        padding: 0;
2782    }
2783}
2784</style>
2785
2786<!-- GG - fix injected offers -->
2787<style type="text/css">
2788.gg-offer {
2789    display: flex;
2790    flex-direction: row;
2791    font-family: 'Granngarden';
2792    width: 100%;
2793    text-align: center;
2794    margin: 10px 0 5px 0;
2795}
2796.gg-offer-text {
2797    /*background: var(--color-campaign);*/
2798    /* color: var(--color-white); */
2799    width: -webkit-fill-available;
2800    align-content: center;
2801    font-size: 1.25rem;
2802    color: var(--color-campaign);
2803    outline: 1px solid;
2804    outline-offset: 5px;
2805    overflow: hidden;
2806        font-weight: 300;
2807}
2808.gg-offer-text.gg-brown {
2809    color: var(--color-dark-red);
2810}
2811
2812.gg-offer-text.gg-brown a {
2813    color: var(--color-dark-red);
2814}
2815.gg-offer-tag {
2816    font-size: 1.25rem;
2817    /* min-width: 120px; */
2818    z-index: 2;
2819}
2820
2821.gg-offer-tag a.link.link--article {
2822    background: var(--color-banana-mania);
2823    font-size: 1.25rem;
2824    padding-left: 30px;
2825    padding-right: 30px;
2826    white-space: nowrap;
2827        font-weight: 300;
2828}
2829
2830@media only screen and (max-width: 767px) {
2831    .gg-offer-text {
2832        max-height: 38px;
2833    }
2834    .gg-offer-text, .gg-offer-tag .link.link--article {
2835        font-size: 1rem !important;
2836        font-weight: 300;
2837    }
2838    .gg-offer-tag {
2839       /* min-width: 100px; */
2840    }
2841    .gg-offer-tag a.link.link--article {
2842        padding: 11px 20px;
2843        max-height: 38px;
2844}
2845    .gg-offer-img img {
2846        max-height: 40px;
2847    }
2848}
2849@media only screen and (max-width: 1023px) {
2850.gg-offer-tag a.link.link--article {
2851    padding: 12px 20px;
2852    }
2853        .gg-offer {
2854        margin-bottom: 1.5rem;
2855        }
2856}
2857@media only screen and (max-width: 500px) {
2858    img.gg-offer-img-5, img.gg-offer-img-4, img.gg-offer-img-3, img.gg-offer-img-2 {
2859        display: none;
2860    }
2861}
2862@media only screen and (min-width: 1440px) {
2863.gg-offer-tag {
2864    /* min-width: 160px; */
2865    margin-left: -15px;
2866}
2867}
2868.gg-offer-img {
2869    flex-direction: row;
2870    display: flex;
2871    align-items: center;
2872    margin-right: 10px;
2873    gap: 10px;
2874}
2875.gg-offer-img img {
2876    max-width: 64px;
2877}
2878.gg-offer-text a {
2879    text-decoration: none;
2880    color: var(--color-campaign);
2881}
2882
2883@media only screen and (max-width: 1199px) {
2884  .gg-offer-text p {
2885    /* animation properties */
2886    -moz-transform: translateX(100%);
2887    -webkit-transform: translateX(100%);
2888    transform: translateX(100%);
2889    
2890    -moz-animation: gg-offer-animation 15s linear infinite;
2891    -webkit-animation: gg-offer-animation 15s linear infinite;
2892    animation: gg-offer-animation 15s linear infinite;
2893    white-space: nowrap;
2894  }
2895  
2896  /* for Firefox */
2897  @-moz-keyframes gg-offer-animation {
2898    from { -moz-transform: translateX(100%); }
2899    to { -moz-transform: translateX(-100%); }
2900  }
2901  
2902  /* for Chrome */
2903  @-webkit-keyframes gg-offer-animation {
2904    from { -webkit-transform: translateX(100%); }
2905    to { -webkit-transform: translateX(-100%); }
2906  }
2907  
2908  @keyframes gg-offer-animation {
2909    from {
2910      -moz-transform: translateX(100%);
2911      -webkit-transform: translateX(100%);
2912      transform: translateX(100%);
2913    }
2914    to {
2915      -moz-transform: translateX(-100%);
2916      -webkit-transform: translateX(-100%);
2917      transform: translateX(-100%);
2918    }
2919    }
2920</style>
2921
2922<!-- EN - Fix cart icon slip outside a littlebit small devices (Bugtask is made)-->
2923<style type="text/css">
2924 @media only screen and (max-width: 400px) {
2925  .page-header[data-scrolled=true]:not([data-open]) {
2926    .page-header__wrapper {
2927      gap: 0;
2928
2929      .quick-search__input {
2930        padding: 12px 36px 12px 12px;
2931      }
2932    }
2933  }
2934}
2935</style>
2936
2937<!-- GG - fix gg-gtm-injected-article-teaser -->
2938<style type="text/css">
2939.gg-gtm-injected-article-teaser {
2940    background: var(--color-banana-mania);
2941}
2942
2943.gg-gtm-injected-article-teaser .article-teaser__heading.h2 {
2944    font-size: 1.2rem;
2945    margin: 20px 7px 15px;
2946    word-break: break-word;
2947    line-height: 1.2;
2948}
2949@media only screen and (max-width: 767px) {
2950    .gg-gtm-injected-article-teaser .article-teaser__heading.h2 {
2951        font-size: 1rem;
2952    }
2953}
2954
2955@media only screen and (min-width: 768px) and (max-width: 1023px) {
2956    .gg-gtm-injected-article-teaser .article-teaser__heading.h2 {
2957        font-size: 1.1rem;
2958    }
2959}
2960
2961li.article-teaser__tag a {
2962    color: #a32900;
2963}
2964
2965 li.article-teaser__tag a:after {
2966    content: " >";
2967}
2968.gg-gtm-injected-article-teaser span.tags.tags--square {
2969    padding: .35rem 0.35rem;
2970    font-size: 15px;
2971    line-height: 1;
2972}
2973.gg-gtm-injected-article-teaser .article-teaser__types {
2974    margin: -1.35rem 0 1rem;
2975}
2976.gg-gtm-injected-article-teaser .article-teaser__types {
2977    min-height: 20px;
2978    display: flex;
2979    justify-content: center;
2980}
2981.gg-gtm-injected-article-teaser li.article-teaser__tag {
2982    text-align: center;
2983}
2984
2985.gg-gtm-injected-article-teaser li.article-teaser__tag span {
2986    display: none;
2987}
2988.gg-gtm-injected-article-teaser li.article-teaser__tag {
2989    display: none;
2990}
2991.gg-gtm-injected-article-teaser a.article-teaser__image img {
2992    height: 219px;
2993}
2994.gg-gtm-injected-article-teaser h3.article-teaser__heading.h2 a:after {
2995    content: " >";
2996}
2997.gg-gtm-injected-article-teaser h3.article-teaser__heading.h2 a {
2998    color: var(--color-dark-red);
2999}
3000</style>
3001
3002<!-- GG - fix labels temp25 -->
3003<style type="text/css">
3004.product-labels__label.product-labels__label--custom[data-content="10_för_379kr"]
3005{
3006    color: var(--color-white);
3007    background: #cf4a14;
3008}
3009</style>
3010
3011<!-- GG - fix article list picture -->
3012<style type="text/css">
3013.article-list__picture {
3014    background: none;
3015}
3016
3017</style>
3018
3019<!-- GG - fix article pages menu -->
3020<style type="text/css">
3021.article__relations-wrapper:before {
3022    content: "Se syskonsidor:";
3023    font-family: 'Granngarden';
3024    font-weight: 300;
3025    font-size: 16px;
3026    display: flex;
3027    margin: 0 auto;
3028    max-width: 47.5rem;
3029    /* padding: 0 .625rem; */
3030}
3031
3032ul.article-list__list:before {
3033    content: "Se undersidor:";
3034    font-family: 'Granngarden';
3035    font-weight: 300;
3036    font-size: 16px;
3037    display: flex;
3038    flex-basis: 100%;
3039    padding: 0 .625rem;
3040}
3041
3042.button--secondary.hover, .button--secondary:hover {
3043    background-color: var(--color-macchiato);
3044    text-decoration: underline;
3045}
3046
3047li.article__relation a.button.button--secondary {
3048    font-size: 16px;
3049    box-shadow: none;
3050    font-weight: 400;
3051    border-radius: 0;
3052    min-height: 44px;
3053}
3054</style>
3055
3056<!-- GG - fix earthbrown buttons-->
3057<style type="text/css">
3058
3059.campaign-image__link--earthbrown a {
3060    text-decoration: none;
3061}
3062
3063.campaign-image__link--earthbrown a:hover {
3064    text-decoration: underline;
3065    background: #640914;
3066}
3067</style>
3068
3069<!-- GG - fix article image bottom -->
3070<style type="text/css">
3071picture.article-list__picture {
3072    padding: 50px 20px;
3073}
3074</style>
3075
3076<!-- GG - fix tf header embed -->
3077<style type="text/css">
3078/*
3079h2.tf-header-slider.line-under.center.article-list-block__heading {
3080    display: none;
3081}
3082
3083.testfreaks-seller-reviews.seller-slider.testfreaks:before {
3084    content: "Vi ❤️ våra kunder";
3085    font-size: 2.375rem;
3086    line-height: 1;
3087    text-align: center;
3088    color: var(--color-headings);
3089    display: block;
3090    font-family: var(--font-open-sans-condensed);
3091    font-weight: 300;
3092    letter-spacing: .03em;
3093}
3094*/
3095@media only screen and (max-width: 1023px) {
3096    .testfreaks-seller-reviews.seller-slider.testfreaks:before {
3097font-size: 1.625rem;
3098}
3099}
3100
3101div#testfreaks-seller-slider h2 {
3102    margin-bottom: 0.5rem;
3103}
3104</style>
3105
3106
3107<!-- GG - fix image teasers articles -->
3108<style type="text/css">
3109article.article-teaser img {
3110    height: 200px;
3111    object-fit: cover;
3112    width: -moz-available;
3113    width: -webkit-fill-available;
3114}
3115
3116@media only screen and (max-width: 767px) {
3117    article.article-teaser img {
3118        height: unset;
3119        min-height: 150px;
3120        width: auto;
3121    }
3122    ul.link-list-with-image-block__list {
3123grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
3124}
3125span.link-list-with-image-block__text {
3126    font-size: 1rem;
3127}
3128article.article-teaser h3 {
3129    font-size: 1.1rem;
3130}
3131span.tags.tags--square {
3132    font-size: 14px;
3133}
3134li.article-teaser__tag {
3135    font-size: 14px;
3136    margin: 5px 0;
3137    text-transform: capitalize;
3138}
3139}
3140</style>
3141
3142<!-- GG - fix remove double price info -->
3143<style type="text/css">
3144p.product-header__original-price {
3145    display: none;
3146}
3147
3148p.product-header__best-price-last-30-text {
3149    font-family: 'Granngarden';
3150    font-size: 1rem;
3151    color: var(--color-charcoal-gray);
3152    font-weight: 300;
3153}
3154</style>
3155
3156<!-- GG - fix of redesign nov24 complimentary -->
3157<style type="text/css">
3158img.page-header__logo-img {
3159    height: unset;
3160}
3161
3162@media only screen and (min-width: 1024px) {
3163    .product-list__facets {
3164        justify-content: space-between;
3165    }
3166}
3167
3168.sort {
3169    border: 1px solid var(--color-greige);
3170    border-radius: 0px;
3171}
3172
3173.facets__search-input {
3174    border: 0px;
3175    border-radius: 0px;
3176    border-bottom: 1px solid var(--color-dark-red);
3177}
3178
3179button.button-facets.button-facets--confirm {
3180    border-radius: 0;
3181}
3182
3183button.button-facets.button-facets--reset {
3184    border-radius: 0;
3185}
3186
3187button.facets__button-reset-filters {
3188    border-radius: 0;
3189}
3190
3191</style>
3192
3193<!-- GG - fix buttons banana -->
3194<style type="text/css">
3195.campaign-image__link-wrapper.campaign-image__link--dimgra a {
3196/*    background: var(--color-banana-mania); */
3197    color: var(--color-dark-red);
3198}
3199
3200.campaign-image__link-wrapper.campaign-image__link--dimgra a:hover {
3201    background: #f9e080;
3202}
3203
3204a.button.campaign-image__button {
3205    min-height: 44px;
3206}
3207</style>
3208
3209<!-- GG - fix buttons squared -->
3210<style type="text/css">
3211.button.checkout__button {
3212    border-radius: 0px;
3213}
3214</style>
3215
3216<!-- GG - END redesign nov24 complimentary -->
3217
3218<!-- GG - fix black week -->
3219<style type="text/css">
3220#gg-black-week .product-labels.product-labels--card:before {
3221    content: "Black Week";
3222    display: block;
3223    color: var(--color-white);
3224    background: #000;
3225    display: block;
3226    font-family: var(--font-open-sans-condensed);
3227    font-size: 1rem;
3228    font-weight: 300;
3229    line-height: 1;
3230    margin-bottom: .125rem;
3231    padding: .25rem .5rem;
3232    margin-bottom: 3px;
3233    white-space: nowrap;
3234}
3235
3236.product-labels__label--gg-bw {
3237    color: var(--color-white);
3238    background: #000;
3239}
3240</style>
3241
3242<!-- GG - fix brand list page headers -->
3243<style type="text/css">
3244@media only screen and (max-width: 1023px) {
3245.productBrandListPage h2.h4.main-category__category__title {
3246    text-align: center;
3247    font-size: 2rem;
3248    margin: 2rem 0.5rem;
3249}
3250}
3251</style>
3252
3253<!-- GG - fix content primary button color -->
3254<style type="text/css">
3255span.button.button--primary a {
3256    color: var(--color-white);
3257}
3258
3259span.button.button--primary a:hover {
3260    color: var(--color-white);
3261}
3262</style>
3263
3264<!-- GG - fix article pages images -->
3265<style type="text/css">
3266.article-header__picture img {
3267    max-height: 500px;
3268    object-fit: cover;
3269}
3270</style>
3271
3272<!-- GG - fix main category image -->
3273<style type="text/css">
3274.main-category .main-category__picture {
3275    display: block !important;
3276}
3277
3278header.main-category__header {
3279    margin-top: 3rem;
3280}
3281@media only screen and (max-width: 1023px) {
3282    header.main-category__header {
3283        margin-top: 6rem;
3284    }
3285
3286}
3287</style>
3288
3289
3290<!-- GG - fix store page image cover -->
3291<style type="text/css">
3292@media only screen and (min-width: 768px) {
3293    .store-header__picture img {
3294        aspect-ratio: 16 / 9;
3295    }
3296}
3297@media only screen and (min-width: 1440px) {
3298    .store-header__content--has-image {
3299        margin-top: -5.625rem;
3300    }
3301.store__modules.modules p.ingress {
3302    padding: 0 100px;
3303}
3304}
3305</style>
3306
3307<!-- GG - fix start page campaign blocks -->
3308<style type="text/css">
3309.campaign-block__corner--campaign {
3310    background: #cf4a14;
3311}
3312
3313.campaign-block__corner--campaign .campaign-block__corner-text, .campaign-block__corner--campaign .campaign-block__corner-title {
3314    color: var(--color-white);
3315}
3316
3317@media only screen and (max-width: 1023px) {
3318    .campaign-block__corner--left {
3319        left: 0;
3320        top: 0;
3321        right: 0;
3322        max-width: unset;
3323    }
3324    .campaign-block__corner--right {
3325        top: 0;
3326        right: 0;
3327        max-width: unset;
3328    }
3329}
3330
3331.campaign-block__corner--left {
3332    border-bottom-left-radius: 0;
3333    border-bottom-right-radius: 0;
3334    left: 0;
3335    top: 0;
3336}
3337
3338.campaign-block__corner--right {
3339    border-bottom-left-radius: 0;
3340    border-bottom-right-radius: 0;
3341    right: 0;
3342    top: 0;
3343}
3344
3345</style>
3346
3347<!-- GG - fix additional heads up for split delivery on confirmation page -->
3348<style type="text/css">
3349.checkout-summary p.checkout-summary-header__delivery:after {
3350    content: "Din order kan skickas från olika lager. Du får då flera notiser och leveransen sker vid olika tillfällen. 📦📦";
3351    border: 2px solid rgba(249, 213, 0, 1);
3352    border-left: 1rem solid #f9d500;
3353    display: block;
3354    margin: 20px auto;
3355    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.13));
3356    background: var(--color-white);
3357    font-size: .875rem;
3358    line-height: 1.31;
3359    padding: 0.25rem 0.625rem;
3360    max-width: 37.5rem;
3361    font-weight: 400;
3362}
3363</style>
3364
3365<!-- GG - fix menu header not to break-->
3366<style type="text/css">
3367ul.page-header__main-menu {
3368    white-space: nowrap;
3369}
3370</style>
3371
3372<!-- GG - fix reverse col btn checkout proceed -->
3373<style type="text/css">
3374@media only screen and (max-width: 767px) {
3375    .checkout__footer-buttons {
3376        flex-direction: column-reverse !important;
3377    }
3378
3379    button#checkout-delivery-proceed {
3380        margin: 0 0 20px 0;
3381    }
3382    a.button.checkout__button.checkout__button--pay {
3383        margin: 0 0 20px 0;
3384    }
3385}
3386</style>
3387
3388<!-- GG - fix confirmation page header -->
3389<style type="text/css">
3390.checkout-summary-header:before {
3391    content: "Tack för din beställning!";
3392    font-family: 'Granngarden';
3393    font-size: 2rem;
3394    text-align: center;
3395    display: flex;
3396    color: var(--color-headings);
3397    font-weight: 300;
3398    flex-direction: column;
3399}
3400.checkout-summary-header__info-top:after {
3401    content: "Nu börjar vi strax plocka och packa din order.";
3402    display: flex;
3403    flex-direction: column;
3404}
3405</style>
3406
3407<!-- GG - fix quoteblock desktop -->
3408<style type="text/css">
3409@media only screen and (min-width: 1024px) {
3410blockquote.quote-block.block p {
3411    font-size: 2rem;
3412}
3413}
3414</style>
3415
3416<!-- GG - fix inventory text product lists -->
3417<style type="text/css">
3418@media only screen and (max-width: 375px) {
3419.product-card__inventory span.availability {
3420    font-size: 14px;
3421}
3422}
3423</style>
3424
3425<!-- GG - fix product list with tabs -->
3426<style type="text/css">
3427@media only screen and (min-width: 1024px) {
3428    section.product-list-with-tabs-block.block .product-grid--three-column {
3429        grid-template-columns: repeat(6, minmax(0, 1fr));
3430    }
3431}
3432</style>
3433
3434<!-- EN - ProductCard inventory stacking inventory text -->
3435<style type="text/css">
3436@media only screen and (max-width: 376px) {
3437    .product-card__footer--show-inventory .product-card__inventory {
3438         padding-left: 5px;
3439    }
3440
3441}
3442</style>
3443
3444<!-- GG - fix newsletter header -->
3445<style type="text/css">
3446@media only screen and (max-width: 1023px) {
3447h2.news-letter-block__title.h3 {
3448    margin-bottom: 15px;
3449}
3450}
3451</style>
3452
3453<!-- GG - fix campaign button on category main -->
3454<style type="text/css">
3455span.main-category__campaign__title:after {
3456    content: " - ";
3457}
3458
3459span.main-category__campaign__title {
3460    margin-right: 5px;
3461}
3462</style>
3463
3464<!-- GG - fix first image rounded-->
3465<style type="text/css">
3466.subCategory .product-list__text figure.image:nth-of-type(1) img {
3467    border-radius: 50%;
3468}
3469</style>
3470
3471<!-- GG - fix blockquote -->
3472<style type="text/css">
3473
3474.editorial .gg-faq blockquote p, .editorial .gg-facts blockquote p, .modules__module .gg-faq blockquote p {
3475    font-size: 16px !important;
3476    line-height: 1.2;
3477}
3478
3479.editorial .gg-faq blockquote, .editorial .gg-facts blockquote p, .gg-facts.gg-plants, .modules__module .gg-faq blockquote {
3480    margin: 2rem auto;
3481    max-width: 1000px;
3482}
3483
3484.editorial .gg-faq blockquote h2, .editorial .gg-facts blockquote p, .modules__module .gg-faq blockquote p {
3485    margin-bottom: 30px;
3486}
3487
3488.modules__module .gg-faq blockquote {
3489    background-color: var(--color-theme-surface-2);
3490}
3491.modules__module .gg-faq blockquote h3 {
3492        margin-bottom: 1rem;
3493    }
3494
3495.gg-faq blockquote:before {
3496        content: "🙋‍♀️🙋‍♀️ Vanliga frågor – Granngården svarar";
3497        font-family: 'Granngarden';
3498        color: var(--color-theme-text-secondary);
3499        display: block;
3500        margin: -35px -115px 40px;
3501        padding-left: 30px;
3502        text-align: left;
3503        font-size: 20px;
3504    }
3505
3506@media only screen and (min-width: 1024px) {
3507   .modules__module .gg-faq blockquote {
3508        padding: 3.125rem 7.1875rem;
3509    }
3510   .modules__module .gg-faq blockquote p:after {
3511        margin: 2.8125rem 0 2.1875rem;
3512        width: 6.25rem;
3513    }
3514}
3515   .modules__module .gg-faq blockquote p:after {
3516    background-color: var(--color-dark-red);
3517    content: "";
3518    display: block;
3519    height: 4px;
3520    margin: 1.5625rem 0;
3521    width: 3.75rem;
3522}
3523
3524@media only screen and (min-width: 768px) and (max-width: 1023px) {
3525    .product-list__text-wrapper .editorial blockquote, .modules__module .gg-faq blockquote {
3526    padding: 2rem 4rem 0.1rem;
3527}
3528}
3529
3530@media only screen and (max-width: 1023px) {
3531    .product-list__text-wrapper .editorial blockquote, .modules__module .gg-faq blockquote {
3532        margin: 2rem auto;
3533        max-width: 45rem;
3534        padding: 2.5rem 1.2rem;
3535    }
3536    .product-list__text-wrapper .editorial blockquote p, .modules__module .gg-faq blockquote p {
3537        font-size: 16px !important;
3538    }
3539    .product-list__text-wrapper .editorial blockquote h3, .modules__module .gg-faq blockquote h3 {
3540        margin-bottom: 1rem;
3541    }
3542 .gg-faq blockquote:before {
3543        padding-left: 120px;
3544        font-size: 16px;
3545       width: 100%;
3546    }
3547    }
3548.gg-faq blockquote:after {
3549    content: url(/siteassets/varumarken/granngarden-logo-crop.svg);
3550    width: 170px;
3551    height: 40px;
3552    display: block;
3553    zoom: 50%;
3554    margin: 0 90px 0 auto;
3555    }
3556
3557.gg-facts blockquote:after {
3558/*    content: url(/UI/favicon/gg/apple-touch-icon.png); */
3559    content: url(/siteassets/loggor/gg-favicon-180px.png);
3560    width: 100px;
3561    height: 100px;
3562    display: block;
3563    zoom: 20%;
3564    margin: 0 80px 40px auto;
3565}
3566
3567.gg-facts h2:nth-of-type(1):before {
3568    content: "📋 Snabb fakta - ";
3569}
3570
3571.gg-faq blockquote p, .gg-facts blockquote p {
3572    font-style: normal;
3573}
3574
3575.gg-faq blockquote li, .gg-facts blockquote li {
3576    text-align: start;
3577}
3578
3579.gg-facts blockquote  {
3580    border-radius: 0px;
3581/*    background-color: var(--color-greige); */
3582}
3583
3584.gg-faq blockquote  {
3585    border-radius: 0px;
3586}
3587
3588.gg-facts.gg-plants ul li:before {
3589    display: none;
3590}
3591
3592.gg-facts.gg-plants ul li {
3593    padding: 0;
3594}
3595
3596.gg-facts.gg-plants h2:nth-of-type(1):before {
3597    content: "📚🌱 Plantråd | ";
3598}
3599</style>
3600
3601<!-- GG - fix images main categories aspect ratio -->
3602<style type="text/css">
3603.main-category .main-category__picture img {
3604    aspect-ratio: unset;
3605    max-height: 350px;
3606    object-fit: cover;
3607}
3608</style>
3609
3610
3611<!-- GG - fix start page header links -->
3612<style type="text/css">
3613@media only screen and (min-width: 1280px) {
3614li.page-header__editorial-menu-item:nth-of-type(1), li.page-header__editorial-menu-item:nth-of-type(2) {
3615    font-size: 1rem;
3616    font-weight: 700;
3617    color: var(--color-dark-red);
3618}
3619}
3620</style>
3621
3622<!-- GG - fix product page long text -->
3623<style type="text/css">
3624@media only screen and (min-width: 1024px) {
3625
3626button.button.product-chapter__panel-expand {
3627    display: none;
3628}
3629
3630.product-chapter__panel.is-active {
3631    max-height: none;
3632}
3633
3634.product-chapter__panel:after {
3635height: 0 !important;
3636}
3637}
3638</style>
3639
3640<!-- GG - fix offline stock not shown properly -->
3641<style type="text/css">
3642
3643li.product-labels__label.product-labels__label--online-only.gg-correction1 {
3644    display: none;
3645}
3646
3647p.product-actions__availability:nth-of-type(2) .availability--not-in-stock.gg-correction2:before {
3648    background: blue;
3649}
3650
3651p.product-actions__availability:nth-of-type(2) span.availability.availability--not-in-stock.gg-correction3:after {
3652    content: "= Finns i butik";
3653}
3654
3655p.product-actions__availability:nth-of-type(2) span.availability.availability--not-in-stock button.product-actions__store-button.gg-correction4 {
3656    display: none;
3657}
3658</style>
3659
3660<!-- GG - fix testfreaks font size -->
3661<style type="text/css">
3662.testfreaks-seller-badge {
3663    font-size: 12px !important;
3664}
3665</style>
3666
3667<!-- GG - fix product card img hover -->
3668<style type="text/css">
3669.product-card.product-card--grid:hover .product-card__image img {
3670    webkit-transform: scale(1.03);
3671    -ms-transform: scale(1.03);
3672    transform: scale(1.03);
3673}
3674
3675.product-card.product-card--grid
3675 .product-card__image img{
3676    transition: .2s ease-in-out;
3677}
3678</style>
3679
3680<!-- GG - fix feedback header checkout-->
3681<style type="text/css">
3682body.checkout .feedback__header h2 {
3683    font-size: 22px;
3684}
3685</style>
3686
3687<!-- GG - fix h2 recs product page -->
3688<style type="text/css">
3689.product__recommendation h2.center.product-list-block__heading {
3690    /* color: #775120; */
3691    font-weight: 300;
3692   color: var(--color-theme-text-secondary);
3693    text-align: left;
3694    margin: 30px 0 5px;
3695}
3696</style>
3697
3698<!-- GG - fix of load more button -->
3699<style type="text/css">
3700button.button.button--secondary.button--small {
3701    border-radius: 0;
3702    text-transform: initial;
3703    font-weight: 400;
3704    background: var(--color-white);
3705    border: 2px solid;
3706    box-shadow: none;
3707}
3708</style>
3709
3710<!-- GG - fix read more button on products-->
3711<style type="text/css">
3712button.button.product-chapter__panel-expand {
3713    border: 1px solid;
3714    border-radius: 0px;
3715    margin-bottom: 12px;
3716    /* text-decoration: none; */
3717    text-transform: initial;
3718    min-width: unset;
3719}
3720
3721.product-chapter__panel:after {
3722    background: linear-gradient(180deg,hsla(0,0%,100%,0),#fff 60%);
3723    bottom: 0;
3724    content: "";
3725    display: block;
3726    height: 11.5rem;
3727    left: 0;
3728    position: absolute;
3729    width: 100%;
3730}
3731</style>
3732
3733<!-- GG - fix manual product recs availability text -->
3734<style type="text/css">
3735.product-list-block.block span.availability {
3736    font-size: unset;
3737    white-space: nowrap;
3738}
3739</style>
3740
3741<!-- GG - fix global message mobile adjustments-->
3742<style type="text/css">
3743@media only screen and (max-width: 767px) {
3744.page-header__message__text {
3745    font-size: 0.75rem;
3746    font-weight: unset;
3747}
3748}
3749</style>
3750
3751<!-- GG - fix header link secondary-->
3752<style type="text/css">
3753a.page-header__sub-menu-link {
3754    /* color: #521967; news color*/
3755    background: var(--color-white);
3756    border: 1px solid;
3757    color: #cf4a14;
3758    border-radius: 0;
3759    line-height: 1.5;
3760    font-size: 14px;
3761}
3762
3763a.page-header__sub-menu-link:hover {
3764    color: var(--color-white);
3765    background: var(--color-campaign);
3766}
3767</style>
3768
3769<!-- GG - fix usp font-->
3770<style type="text/css">
3771.productContent li.product-header__product-usp {
3772    font-family: 'Granngarden';
3773}
3774</style>
3775
3776<!-- GG - fix christmas vibe -->
3777<style type="text/css">
3778@media only screen and (min-width: 1280px) {
3779button.page-header__main-menu-item-name.page-header__main-menu-item-icons[aria-controls="webjul"] span:after {
3780    content: "🎄 ";
3781}
3782}
3783</style>
3784
3785<!-- GG - fix store page cash free -->
3786<style type="text/css">
3787.storePage .store-header__contact:after {
3788    content: "💳 Alla våra butiker är kontantfria! Betala med kort, Swish eller Klarna";
3789    border: 2px solid var(--color-dark-red);
3790    border-left: 1.2rem solid var(--color-dark-red);
3791    display: block;
3792    margin: 20px;
3793    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.13));
3794    background: var(--color-white);
3795    font-size: .875rem;
3796    line-height: 1.31;
3797    padding: 0.25rem;
3798    text-align: center;
3799</style>
3800
3801
3802<!-- GG - fix info message boxes product -->
3803<style type="text/css">
3804@media only screen and (max-width: 767px) {
3805.gg-gtm-info-product-textbox .alert.alert--info:nth-child(2), .alert.alert--info:nth-child(3) {
3806    margin-top: 20px;
3807}
3808}
3809@media only screen and (min-width: 768px) {
3810.gg-gtm-info-product-textbox {
3811    display: flex;
3812    gap: 20px;
3813}
3814}
3815</style>
3816
3817<!-- GG - fix review count margin mobile -->
3818<style type="text/css">
3819@media only screen and (max-width: 409px) {
3820span.product-header__testfreaks-count.active {
3821    margin-left: -8px;
3822}
3823}
3824</style>
3825
3826<!-- GG - fix 2nd usp not visible mobile S -->
3827<style type="text/css">
3828@media only screen and (max-width: 370px) {
3829.page-header__usp:nth-child(1n+2) {
3830    display: none;
3831}
3832}
3833</style>
3834
3835<!-- GG - fix link color -->
3836<style type="text/css">
3837.campaign-product__text a:not(.button) {
3838    color: #a32900;
3839    font-weight: 600;
3840    text-decoration: none;
3841}
3842
3843.editorial a:not(.button) {
3844    color: #a32900;
3845}
3846</style>
3847
3848<!-- GG - fix columns expanded brand text -->
3849<style type="text/css">
3850@media only screen and (min-width: 1024px) {
3851.productBrandPage .product-list__text.editorial {
3852    width: 80%
3853}
3854}
3855@media only screen and (min-width: 1024px) {
3856.productBrandPage .product-list__text.editorial  {
3857    padding: 10px;
3858    width: 100%;
3859    -moz-column-count: 2;
3860    -moz-column-gap: 50px;
3861    -webkit-column-count: 2;
3862    -webkit-column-gap: 50px;
3863    column-count: 2;
3864    column-gap: 50px;
3865    column-rule-color: #ede3d9;
3866    column-rule-style: solid;
3867    column-rule-width: thin;
3868}
3869}
3870</style>
3871
3872<!-- GG - fix button decoration front -->
3873<style type="text/css">
3874span.button {
3875    min-height: 44px;
3876}
3877
3878span.button a {
3879    text-decoration: none !important;
3880}
3881</style>
3882
3883<!-- GG - fix casing price product cards -->
3884<style type="text/css">
3885.product-card__price {
3886    text-transform: inherit;
3887}
3888</style>
3889
3890<!-- GG - fix related services -->
3891<style type="text/css">
3892.product__related-services:before {
3893    background-color: var(--color-background);
3894    content: "";
3895    height: 60px;
3896    height: 3.75rem;
3897    left: 50%;
3898    position: absolute;
3899    top: 0;
3900    transform: translate(-50%,-50%) rotate(45deg);
3901    width: 60px;
3902    width: 3.75rem;
3903    z-index: -1;
3904}
3905</style>
3906
3907<!-- GG - fix filter campaign color -->
3908<style type="text/css">
3909#p_IsOnCampaign span.facets__sum {
3910    background: #cf4a14;
3911}
3912</style>
3913
3914<!-- GG - fix mobile accordion footer-->
3915<style type="text/css">
3916@media only screen and (max-width: 1023px){
3917.link-list-block__accordion-description {
3918    margin-bottom: 25px;
3919}
3920}
3921</style>
3922
3923<!-- GG - fix button height -->
3924<style type="text/css">
3925a.button.button--primary, a.button.button--campaign {
3926    min-height: 44px;
3927}
3928
3929</style>
3930
3931<!-- GG - fix texts-->
3932<style type="text/css">
3933p.ingress {
3934    line-height: 1.5;
3935}
3936
3937.productContent .product__intro {
3938    line-height: 1.5;
3939    font-size: 1rem;
3940}
3941.product-chapter .editorial {
3942    line-height: 1.5;
3943}
3944
3945@media only screen and (min-width: 1024px) {
3946    .product-list__text.editorial.expanded ol, .product-list__text.editorial.expanded p, .product-list__text.editorial.expanded ul {
3947    margin-bottom: 1.25rem;
3948}
3949}
3950</style>
3951
3952<!-- GG - fix mega menu -->
3953<style type="text/css">
3954ul.mega-menu {
3955/*    border-radius: 0 0 6px 6px; */
3956    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
3957}
3958</style>
3959
3960<!-- GG - fix pj img-->
3961<style type="text/css">
3962@media only screen and (max-width: 1023px) {
3963a.prisjakt_cheapest_a img {
3964    margin: 0 auto;
3965}
3966}
3967</style>
3968
3969<!-- GG - fix breadcrumb mobile-->
3970<style type="text/css">
3971@media only screen and (max-width: 767px) {
3972ul.breadcrumb__list {
3973    overflow-x: scroll;
3974    white-space: nowrap;
3975    flex-wrap: nowrap;
3976    margin-bottom: 10px;
3977}
3978}
3979</style>
3980
3981<!-- GG - fix of storelistpage -->
3982<style type="text/css">
3983.storeListPage li.store-list-store__contact--phone {
3984    display: none;
3985}
3986.storeListPage li.store-list-store__contact--email {
3987    display: none;
3988}
3989.storeListPage .store-list-store__inner-wrapper {
3990    margin-bottom: 20px;
3991}
3992</style>
3993
3994<!-- GG - fix star size reviews -->
3995<style type="text/css">
3996.product-card__info .customer-rating {
3997    font-size: 16px;
3998}
3999</style>
4000
4001<!-- GG - fix article-list__list -->
4002<style type="text/css">
4003ul.article-list__list {
4004    display: flex;
4005    flex-wrap: wrap;
4006}
4007
4008.article-list__list li {
4009    margin-bottom: 0.975rem;
4010    padding: 0 0.625rem;
4011}
4012</style>
4013
4014<!-- GG - fix link-list-block -->
4015<style type="text/css">
4016ul.link-list-block__list {
4017    display: flex;
4018    flex-wrap: wrap;
4019}
4020
4021ul.link-list-block__list a {
4022    font-size: 1rem;
4023    text-transform: capitalize;
4024}
4025</style>
4026
4027<!-- GG - fix link--article -->
4028<style type="text/css">
4029
4030a.link.link--article {
4031    font-size: 1rem;
4032    text-transform: inherit;
4033}
4034</style>
4035
4036<!-- GG - fix article__relation -->
4037<style type="text/css">
4038ul.article__relations li.article__relation {
4039    width: auto;
4040}
4041li.article__relation a {
4042    text-transform: inherit;
4043}
4044</style>
4045
4046<!-- GG - fix link list center desktop tablet-->
4047<style type="text/css">
4048@media only screen and (min-width: 768px) {
4049ul.article-list__list, ul.link-list-block__list  {
4050    justify-content: center;
4051}
4052}
4053</style>
4054
4055<!-- GG - fix labels -->
4056<style type="text/css">
4057.product-labels__label {
4058    font-weight: 300;
4059    white-space: nowrap;
4060}
4061
4062.product-labels__label.product-labels__label--custom[data-content=favorit] {
4063    color: #6D1B00;
4064    background: #ECE3D9;
4065}
4066
4067.product-labels__label.product-labels__label--custom[data-content=kolla_priset] {
4068    background: #cf4a14;
4069   color: var(--color-white);
4070    /*
4071    border: 1px solid;
4072    color: #6D1B00;
4073    background: #ECE3D9; 
4074*/
4075}
4076.product-labels__label.product-labels__label--custom[data-content=onlinepris] {
4077    background: #cf4a14;
4078   color: var(--color-white);
4079}
4080.product-labels__label.product-labels__label--custom[data-content=bäst_i_test] {
4081    color: var(--color-white);
4082    background: #b41464;
4083}
4084.product-labels__label--news {
4085    background: #511966 !important;
4086}
4087
4088.product-labels__label--gg-offline-store-only {
4089    background-color: #B70E0C;
4090    color: var(--color-white);
4091}
4092.product-labels__label.product-labels__label--custom[data-content=julklappstips] {
4093    background-color: var(--color-white);
4094    color: #B70E0C;
4095    border: 1px solid #B70E0C;
4096}
4097.product-labels__label.product-labels__label--custom[data-content=julklappstips]::before {
4098    content: "🎁 ";
4099}
4100
4101.product-labels__label.product-labels__label--custom[data-content=svenskproducerat] {
4102    background: #FFCD00;
4103    color: #004988 ;
4104}
4105
4106.product-labels__label.product-labels__label--custom[data-content=finskproducerat] {
4107    background: var(--color-white);
4108    color: #002F6C;
4109    border: 1px solid #002F6C;
4110}
4111
4112.product-labels__label.product-labels__label--custom[data-content=norskproducerat] {
4113    background: var(--color-white);
4114    color: #00205B;
4115    border: 1px solid #BA0C2F;
4116}
4117
4118.product-labels__label.product-labels__label--custom[data-content=danskproducerat] {
4119    background: var(--color-white);
4120    color: #C8102E;
4121    border: 1px solid #C8102E;
4122}
4123</style>
4124
4125<!-- GG - test of checkout delivery styling text color-->
4126<style type="text/css">
4127.unifaun-checkout-selected0 .unifaun-checkout-option-sub-options .unifaun-checkout-option-column2 span.unifaun-checkout-option-description2 {
4128    color: #446176;
4129    font-weight: bold;
4130    font-size: 14px;
4131}
4132.unifaun-checkout-selected0 .unifaun-checkout-option-sub-options .unifaun-checkout-option-column2 span.unifaun-checkout-option-description3 {
4133    color: #6d8e37;
4134    padding-top: 5px;
4135    font-weight: bold;
4136    font-size: 14px;
4137}
4138</style>
4139
4140<!-- GG styling link list -->
4141<style type="text/css">
4142span.link-list-with-image-block__text.link.link--arrow {
4143    background: none;
4144    border-bottom: none;
4145}
4146#main-content li.link-list-with-image-block__item img {
4147    border-radius: 40px 0;
4148}
4149#main-content li.link-list-with-image-block__item {
4150    border-radius: 40px 0 0 0;
4151}
4152li.link-list-with-image-block__item img:hover {
4153    webkit-transform: scale(1.03);
4154    -ms-transform: scale(1.03);
4155    transform: scale(1.03);
4156    transition: .2s ease-in-out;
4157    opacity: 0.9;
4158}
4159</style>
4160
4161<!-- GG MENU NAV -->
4162<style type="text/css">
4163    .gg-menu-container {
4164        position: relative;
4165    }
4166
4167    .gg-menu {
4168        overflow-x: auto;
4169        white-space: nowrap;
4170        overflow-y: hidden;
4171        display: flex;
4172        margin: 30px auto;
4173        position: relative;
4174        gap: 5px;
4175        padding-right: 30px;
4176    }
4177
4178    .gg-menu a {
4179        text-decoration: none;
4180        text-transform: none;
4181    }
4182
4183    .gg-menu-container:after {
4184        content: "";
4185        position: absolute;
4186        top: 0;
4187        right: 0;
4188        bottom: 0;
4189        width: 1.3125rem;
4190        background: linear-gradient(90deg, transparent, rgba(255,255,255,0)  0%, rgba(255,255,255,0.50)  50%, rgba(255,255,255,1) 100%);
4191        pointer-events: none;
4192    }
4193
4194    .gg-menu-container2:after {
4195        content: "";
4196        position: absolute;
4197        top: 0;
4198        left: 0;
4199        bottom: 0;
4200        width: 1.3125rem;
4201        background: linear-gradient(270deg, transparent, rgba(255,255,255,0)  0%, rgba(255,255,255,0.50)  50%, rgba(255,255,255,1) 100%);
4202        pointer-events: none;
4203    }
4204
4205    .gg-menu-object {
4206        min-width: 135px;
4207        padding: 5px 0;
4208        margin-bottom: 15px;
4209    }
4210
4211    .gg-menutext {
4212        text-align: center;
4213        margin-top: 10px;
4214        color: #775120;
4215        font-size: 0.9rem;
4216    }
4217
4218    .gg-menu::-webkit-overflow-scrolling {
4219        touch-action: auto;
4220    }
4221
4222    .gg-grow:hover {
4223        -webkit-transform: scale(1.03);
4224        -ms-transform: scale(1.03);
4225        transform: scale(1.03);
4226        transition: .2s ease-in-out;
4227        opacity: 0.9;
4228    }
4229
4230@media screen and (min-width: 1024px) {
4231.gg-menu {
4232    display: grid !important;
4233    grid-template-columns: repeat(auto-fill,minmax(165px, 1fr));
4234    overflow: visible;
4235    padding: 0;
4236}
4237    .gg-menutext {
4238        font-size: 1rem;
4239    }
4240
4241}
4242</style>
4243</body>
4244
4245</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.