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å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å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ågor?</strong> Läs mer på <a href="https://support.granngarden.se/hc/sv">kundservice</a>. Det ska vara enkelt att ångra sig efter köpet, vår kundservice hjälper dig!</p> 255<p><strong>Håll utkik i inkorgen!</strong> En tid efter ditt köp kan vi höra av oss via mail och be om ditt omdöme på din köpupplevelse och dina produkter. Dina åsikter är viktiga för oss och hjälper oss att fortsätta utveckla Granngå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.