/* Custom code */ /*PRODUKTSIDA VISAFÖR DEKSTOP */ @media screen and (min-width: 800px) { .listColumn { float: left; width: 33.33%; padding: 5px; font-family: Open Sans; font-size: 16px; line-height: 36px; } /* Tre Kolumner */ .listColumn .third { display: table; clear: both; } /* KOLUMNVIDEO SUP FABRIK */ .columnVideo { float: left; width: 50%; padding: 10px; height: 350px; /* Should be removed. Only for demonstration */ background-color: #f8f9fa; font-family: Open Sans; line-height: 32px; } .descriptionTwoColumn { font-family: "Open Sans", sans-serif; font-weight: 300; letter-spacing: 0px; line-height: 1.4; float: left; padding-left: 1rem; padding-right: 1rem; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .half { width: 50%; /*text-align: center;*/ } /*BESKRIVNING OCH SPECIFIKATION*/ .splitcolumn { float: left; padding: 10px; } .description { width: 70%; } .spec { width: 30%; } /* Clear floats after the columns */ .rows:after { content: ""; display: table; clear: both; }/*BESKRIVNING OCH SPECIFIKATION*/ .splitcolumn { float: left; padding: 10px; } .description { width: 70%; } .spec { width: 30%; } /* Clear floats after the columns */ .rows:after { content: ""; display: table; clear: both; } /* REKOMMENDERADE TILLBEHÖRSPAKET */ .shadow-1 { -webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.12), 0 1px 2px rgba(0,0,0, 0.24); -moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.12), 0 1px 2px rgba(0,0,0, 0.24); box-shadow: 0 1px 3px rgba(0,0,0, 0.12), 0 1px 2px rgba(0,0,0, 0.24); } .is-card { display: table; background-color: #fff; } .is-dark-text, .is-dark-text h1, .is-dark-text h2, .is-dark-text h3, .is-dark-text, .is-dark-text h4, .is-dark-text h5, .is-dark-text h6, .is-dark-text p, .is-dark-text li { color: #111; } *, ::after, ::before { box-sizing: border-box; } .qb-custom-wrapper { margin: 0; font-family: "Open Sans", sans-serif; font-size: 100%; line-height: 2; font-weight: 300; -webkit-font-smoothing: auto; -webkit-text-size-adjust: 100%; } .qb-custom-wrapper .btn { padding: 7px 25px; font-size: 1em; hline-height: 2em; border-radius: 5px; letter-spacing: 1px; display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; -webkit-transition: all 0.16s ease; transition: all 0.16s ease; } .margin-25 { margin: 25px !important; } .center { text-align: center; } /* REKOMMENDERADE TILLBEHÖRSPAKET */ .shadow-1 { -webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.12), 0 1px 2px rgba(0,0,0, 0.24); -moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.12), 0 1px 2px rgba(0,0,0, 0.24); box-shadow: 0 1px 3px rgba(0,0,0, 0.12), 0 1px 2px rgba(0,0,0, 0.24); } .is-card { display: table; background-color: #fff; } .is-dark-text, .is-dark-text h1, .is-dark-text h2, .is-dark-text h3, .is-dark-text, .is-dark-text h4, .is-dark-text h5, .is-dark-text h6, .is-dark-text p, .is-dark-text li { color: #111; } *, ::after, ::before { box-sizing: border-box; } .qb-custom-wrapper { margin: 0; font-family: "Open Sans", sans-serif; font-size: 100%; line-height: 2; font-weight: 300; -webkit-font-smoothing: auto; -webkit-text-size-adjust: 100%; } .qb-custom-wrapper .btn { padding: 7px 25px; font-size: 1em; line-height: 2em; border-radius: 5px; letter-spacing: 1px; display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; -webkit-transition: all 0.16s ease; transition: all 0.16s ease; } .margin-25 { margin: 25px !important; } .center { text-align: center; } } /*GÖM FÖR MOBIL/VISA FÖR MOBIL*/ #content-desktop {display: block;} #content-mobile {display: none;} @media screen and (max-width: 768px) { #content-desktop {display: none;} #content-mobile {display: block;} } .is-btn { padding: 10px 20px; font-size: 1em; line-height: 2em; border-radius: 0; letter-spacing: 3px; display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; -webkit-transition: all 0.16s ease; transition: all 0.16s ease; } .is-btn-ghost1 { color: #000; border: 2px solid #111; } .is-upper { text-transform: uppercase; } /* .addtokorg { background-color: #007dbc; text-color: white; line-height: 16px; font-weight: bold; padding-left: 16px; padding-right: 16px; padding-top: 16px; padding-bottom: 16px; border-radius: 4px; } */ .p-background { padding: 25px 20px; background-color: #f5f5f7; border-radius: 30px; } .centerknapp { display: flex; justify-content: center; align-items: center; } .laggikorg { padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; background-color: #c60156; border-radius: 4px; line-height: 16px; font-weight: bold; box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 10px 0px; opacity: 0.9; min-width: 120px; } .similar-slider .qs-actions .qs-cart-submit { min-width: 120px !important; display: inline-block; /* Ensures width applies properly */ text-align: center; /* Keeps text centered */ } .similar-slider .product-image img { max-height: 180px; object-fit: contain; margin-bottom: 10px; } .similar-slider .product h3.category-p { min-height: 60px; /* Enough space for 3-4 lines */ max-height: 75px; /* Prevents overflow */ display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .similar-slider .product { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .similar-slider { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* .swiper-container { margin-bottom: 0 !important; padding-bottom: 0 !important; } .swiper-wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; } .swiper-thumbs { padding-top: 0px !important; } */ .lasmer { padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; background: #007dbc; border-radius: 4px; line-height: 16px; opacity: 0.9; } .swiper-nav .swiper-button-prev, .swiper-nav .swiper-button-next { opacity: 0.8; } .swiper-button-next { right: 0; top: 40%; left: auto; } .swiper-button-prev { right: auto; left: 0; top: 40%; bottom: 0; } .product-btn-addcart{ line-height: 3; font-size: 16px; color: white; background: #c60156; } .option-row-custom { font-size: 14px; font-weight: bold; } .masthead { height: 500px; min-height: 500px; /* background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080'); */ background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-image { height: 50%; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } @media all and (min-width:375px) and (max-width: 768px) { .mobileland { padding-left: 0px; padding-right: 0px; } } .panel { padding: 0 18px; display: none; overflow: hidden; position: relative; max-width: 600px; } .forsta-header{ position: relative; } .forsta-header-bild{ display: block; overflow: visible; z-index: -1; width:100%; } .forsta-container .btn { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: white; color: black; font-size: 16px; padding: 12px 24px; border: none; cursor: pointer; border-radius: 5px; text-align: center; } .header-banner a { color: white; } .header-banner p { color: #f5f5f5; margin-bottom: 0px; } .header-banner { display: flex; justify-content: center; align-items: center; padding: 8px; background-color: black; font-size: 14px; font-weight: bold; gap: 10px; /* Mellanrum mellan innehåll */ min-height: 35px; /* Sätt en fast höjd för att förhindra layoutförskjutning */ } .banner-text { color: #f5f5f5; margin: 0; display: inline; /* Säkerställ att texten är inline */ } .header-banner .messages{ display: flex; /* Ändra från block till flex */ justify-content: center; align-items: center; } .header-banner a { color: white; text-decoration: underline; font-weight: bold; } .banner-info { display: flex; align-items: center; /* Centrera text och länk vertikalt */ gap: 10px; /* Mellanrum mellan text och länk */ } .forsta-header-bild { display: block; overflow: visible; z-index: -1; width: 100%; } .product-price { font-weight: bold; color: #f7203a; } .qs-product-before-price { font-weight: normal; color: #637180; font-size: 15px; opacity: 2; } .h4-small-category { color: #012145; } .forsta-header-bild{ display: block; padding-top: 0; overflow: visible; z-index: -1; width:100%; background-size: cover; /* Image in the center of container */ background-position: center center; } .forsta-header{ position: relative; padding-top: 0; } #kategorilista { width: 100%; } #kategorilista div[class^="col-"] { padding-left: 5px; padding-right: 5px; margin-bottom: 1rem; display: flex; justify-content: center; } #kategorilista .col-lg-2 { margin-bottom: 1.5rem; } .kategorilista-link { min-height: 20px; display: flex; align-items: center; justify-content: center; color: #001018; background-color: #fff; border: 1px solid #eff1f3; border-radius: 12px; transition: background-color 250ms ease; font-size: 14px; padding: 0.9rem 1.2rem; width: 100%; max-width: 230px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; white-space: nowrap; } .kategorilista-link-text { padding-left: 6px; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; } .kategorilista-link-img { flex-shrink: 0; width: 24px; height: 24px; } .kategorilista-link:hover { border: 1px solid #012145; color: #012145; } .active-category { background-color: #f7f7f7; } @media (max-width: 1199px) { .kategorilista-link { max-width: 200px; padding: 0.8rem 1rem; } } @media (max-width: 991px) { #kategorilista .row { display: flex; flex-wrap: wrap; justify-content: center; } #kategorilista div[class^="col-"] { width: calc(33.333% - 10px); margin: 0 5px 1rem; flex: 0 0 auto; } .kategorilista-link { max-width: 100%; } } @media (min-width: 992px) { .kategorilista-link { max-width: 100%; width: 100%; min-height: 60px; padding: 0.9rem 1.2rem; white-space: normal; justify-content: flex-start; border-radius: 12px; text-align: left; } .kategorilista-link-text { white-space: normal; text-overflow: clip; overflow: visible; line-height: 1.3; } #kategorilista .col-lg-2 { min-width: auto; max-width: none; } } @media (max-width: 767px) { #kategorilista div[class^="col-"] { width: calc(50% - 10px); } .kategorilista-link { font-size: 12px; padding: 0.7rem 0.9rem; } .kategorilista-link-img { width: 20px; height: 20px; } } .about-section { padding-top: 5rem; background: linear-gradient(to bottom, rgb(245, 245, 247, 0.9) 0%, rgba(245, 245, 247, 0.2) 50%, rgba(255, 255, 255, 0.8) 100%); } .about-section p { margin-bottom: 5rem; } .product-section { padding-top: 5rem; background: linear-gradient(to bottom, rgb(255,0,0) 20%, rgba(244,47,25, 0.6) 60%, rgba(255, 255, 255, 0.6) 100%); border-radius: 25px; } .grey-section { padding-top: 5rem; background: linear-gradient(to bottom, rgb(242,242,242) 20%, rgba(242,242,242, 0.6) 60%, rgba(242,242,242, 0.8) 100%); border-radius: 25px; } .rounded-custom { border-radius: 100px 100px 300px } .header-section { padding-top: 4rem; background: linear-gradient(to bottom, #f4f4f6 30%, rgba(244, 244, 246, 0.3) 60%, rgba(255, 255, 255, 0.6) 100%); border-radius: 5px; } .tillbehor-section { padding-top: 25px; border-radius: 25px; background: linear-gradient(to left, rgb(245, 245, 247) 0%, rgba(243, 241, 241, 0.9) 20%, rgba(255, 255, 255, 0.8) 60%); } .btn-rounded { border-radius: 100px; } .rounded-category { border-radius: 10px !important; } .forsta-header { position: relative; } .forsta-header-bild { display: block; overflow: visible; z-index: -1; width: 100%; } .forsta-container .btn { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: white; color: black; font-size: 16px; padding: 12px 24px; border: none; cursor: pointer; border-radius: 5px; text-align: center; max-width: 100%; } .sup-header-rounded { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } .sup-header-section { padding-top: 5rem; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(142,207,206,0.3029586834733894) 100%); border-radius: 12px; } .havskajak-header-rounded { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } .havskajak-header-section { padding-top: 5rem; background: linear-gradient(to bottom, #f4f4f6 30%, rgba(244, 244, 246, 0.3) 60%, rgba(255, 255, 255, 0.6) 100%); border-radius: 12px; } .h1-category{ font-size: 32px; } .blue-section { padding-top: 5rem; background: linear-gradient(to bottom, #0575E6 0%, #0575E6 50%, #0575E6 95%); border-radius: 25px; } .review-details { display: flex; align-items: center; justify-content: center; margin-top: 10px; } .review-rating { font-size: 20px; color: #f5b515; margin-right: 10px; } .review-stars { font-size: 16px; color: #f5b515; } .review-count { font-size: 16px; margin-top: 10px; } .review-background { padding: 20px 20px; background-color: #f5f5f7; border-radius: 30px; margin-bottom: 20px; } .hero-banner { position: relative; /* Dina stilar för hero-sektionen här */ } .tree-container { position: absolute; bottom: 15px; /* Justera detta värde om du vill att botten av trädet ska gå under vågen */ left: 50%; /* Centrerar elementet i sidled */ width: 400px; /* Bredd på julgranen, justera enligt din bild */ height: 300px; /* Höjd på julgranen, justera enligt din bild */ background: url('img/julgran.png') bottom center / contain no-repeat; /* Ersätt med den faktiska sökvägen till din julgransbild */ transform: translateX(-52%); /* Flyttar elementet till vänster med hälften av dess bredd för att centrera det exakt */ } .button-container { position: absolute; left: 50%; bottom: -15px; /* Justera detta värde för att höja eller sänka knappen från botten */ transform: translateX(-50%); } .hero-banner .kopknapp { padding: 0.90rem 2rem; /* Större padding för en större knapp */ font-size: 1rem; font-weight: lighter; /* Storlek på texten i knappen */ /* Lägg till ytterligare stilar om du vill anpassa designen ytterligare */ } /* Döljer vågen på skärmar mindre än 768px */ @media (max-width: 767px) { .wave-container { display: none; } } /* Basstil för promo-sektionen */ .promo-section { position: relative; font-family: 'Lato', sans-serif; overflow: hidden; /* Döljer element som går utanför sektionens gränser */ height: 300px; /* Eller höjden som önskas för sektionen */ background-color: transparent; /* Säkerställer att bakgrunden är transparent */ } /* Stil för banden */ .promo-banner { position: absolute; left: 50%; top: 50%; width: 220%; /* Bredd utöver 100% för att kompensera för rotationen */ height: 80px; /* Höjden på ditt band */ color: white; /* Vit text */ display: flex; align-items: center; justify-content: center; text-align: center; /* Centrerar texten horisontellt */ font-size: 20px; /* Storlek på texten */ font-weight: lighter; /* Fet text */ transform: translate(-50%, -50%) rotate(-4deg); /* Centrerar och roterar bandet */ white-space: nowrap; /* Säkerställer att texten inte bryts */ overflow: hidden; /* Döljer överflödig text */ z-index: 1; } /* Röda bandet */ .red-banner { background-color: #FF0000; /* Röd bakgrundsfärg */ z-index: 1; transform: translate(-50%, -50%) rotate(5deg); /* Centrerar och roterar bandet */ } /* Gröna bandet, positionerat så det överlappar det röda bandet */ .green-banner { background-color: #008000; /* Grön bakgrundsfärg */ z-index: 2; top: calc(60% + 30px); /* Justerar överlappningen */ transform: translate(-50%, -90%) rotate(-4deg); /* Centrerar och roterar bandet */ } /* Stil för text-containern */ .promo-text-container { position: absolute; white-space: nowrap; display: flex; align-items: center; height: 100%; animation: scrollText 5s linear infinite; } /* Grundläggande styling för hela accordion-behållaren */ .accordion { width: 100%; /* Sätter bredden på accordion till att fylla sin container */ } .accordion-item { border-bottom: 1px solid rgba(187, 187, 187, .3); margin-bottom: 10px; /* Ger lite avstånd mellan varje accordion-panel */ } #faqAccordion .accordion-item { border: none !important; } /* Stil för varje accordion-knapp */ .accordion-button { background-color: #0000;; color: #14141e; /* Textfärg */ cursor: pointer; /* Förvandlar muspekaren till en pekare när den hovrar över knappen */ padding: 10px 10px 10px; /* Inre avstånd inuti knappen */ width: 100%; /* Bredden på knappen är hela bredden av dess container */ border: none; /* Tar bort standardgränsen från knapparna */ text-align: left; /* Justerar texten till vänster */ outline: none; /* Tar bort kontur när knappen är fokuserad (klickad) */ font-size: 16px; /* Storleken på texten inuti knappen */ font-weight: bold; transition: background-color 0.6s ease; /* Gör en mjuk övergång för bakgrundsfärgen när den ändras */ display: flex; align-items: center; /* Vertikal centrering av innehållet */ justify-content: flex-start; /* Justera innehållet till vänster */ } /* Stil för pseudoelementet som används för att visa plus- och minustecknen */ .accordion-button:before { content: '\002B'; /* Standardtecken är ett plus */ color: #012145; /* Färgen på tecknet */ font-weight: bold; /* Gör tecknet fetare */ margin-right: 20px; /* Lägger till avstånd till höger om tecknet */ width: 24px; /* Bredden på cirkeln */ height: 24px; /* Höjden på cirkeln */ background-color: white; /* Bakgrundsfärg för cirkeln */ border-radius: 50%; /* Gör elementet cirkulärt */ display: flex; /* Används för att centrera innehållet i cirkeln */ align-items: center; /* Vertikal centrering */ justify-content: center; /* Horisontell centrering */ border: 1px solid #012145; /* Tunn rund border */ flex-shrink: 0; /* Förhindrar att cirkeln krymper */ flex-grow: 0; /* Förhindrar att cirkeln växer */ } /* Ändrar tecknet till ett minus när knappen är aktiv */ .accordion-button.active:before { content: "\2212"; /* Tecknet för minus */ } /* Stil för innehållet som är gömt under varje accordion-knapp */ .accordion-content { background-color: white; max-height: 0; overflow: hidden; transition: max-height 300ms ease-in; padding-left: 50px; } .accordion-content.show { max-height: 500px; /* Du kan justera detta beroende på innehållets faktiska höjd */ } .accordion-body { font-size: 16px; color: #4f4f61; padding-left: 60px; padding-bottom: 20px; } /* Anpassad klass för vertikal linje */ .vr { background-color: #777; /* Svart färg för linjen */ width: 1px; /* Bredden på linjen */ height: 1px; /* Höjden ska vara lika med parent-elementets höjd */ margin-left: 2px; /* Justera placeringen av linjen */ } @media (max-width: 767px) { .vr-row { display: none; } } .vr::before { content: ""; /* Nödvändigt för att visa pseudoelementet */ position: absolute; /* Positionera absolut inuti .vr */ top: 0; /* Placera vid toppen av .vr */ left: -15px; /* Flytta lite till vänster från .vr */ width: 30px; /* Bredden på den horisontella linjen */ height: 1px; /* Höjden på den horisontella linjen, gör den tunn som en linje */ background-color: #777; /* Färg på den horisontella linjen */ z-index: 1; /* Se till att linjen visas över andra element */ } /* Extra stil för att säkerställa att linjen syns */ .vr-row { position: relative; /* Positionering relativ till raden */ } /* Lägg till en :after-pseudoelement för att skapa en linje */ .vr-row:after { content: ""; position: absolute; height: 1000px; top: 0; bottom: 0; left: 40%; border-left: 1px solid #777; /* Skapar den vertikala linjen */ transform: translateX(-50%); /* Centrerar linjen */ } /* Anpassad klass för horisontell linje */ .hr { height: 1px; /* Höjden på linjen, gör den tunn som en linje */ background-color: #777; /* Färg på linjen */ width: 100%; /* Full bredd, kan anpassas efter behov */ margin-top: 0; /* Tar bort eventuell överkant marginal */ margin-bottom: 0; /* Tar bort eventuell underkant marginal */ } .circle-image { position: absolute; top: -50px; /* Justera dessa värden enligt behov */ left: 50%; /* Centrera cirkeln i sidan */ transform: translateX(-50%); /* Centrera cirkeln exakt */ width: 100%; /* Ange cirkelns storlek */ height: auto; /* Behåll bildens aspektförhållande */ z-index: -1; /* Placera cirkeln bakom texten och knapparna */ } .circle-image-2 { /* Ny stil för halvcirkeln */ position: absolute; /* Position relativ till sektionen */ top: 0; /* Placera högst upp i sektionen */ right: -300px; /* Halva bredden av cirkeln utanför sektionens högra kant */ width: 400px; /* Bredd på cirkeln */ height: auto; /* Höjd på cirkeln, gör den till en full cirkel */ overflow: hidden; /* Döljer överskottsinnehåll för att skapa en halvcirkel */ z-index: -1; /* Ligger bakom andra element */ } .arrow { font-size: 350px; color: black; display: inline-block; /* Gör så att transform-egenskapen fungerar */ transform: rotate(135deg); /* Roterar pilen 45 grader */ position: absolute; width: 800px; right: 50px; height: 650px; bottom: -1250px; } /* Media query för mobilvyer, exempelvis mindre än 768px */ @media (max-width: 900px) { .arrow { transform: rotate(90deg); /* Roterar pilen så att den pekar åt höger */ right: 0; /* Justera positionen till högerkanten av skärmen */ bottom: 100px; /* Justera positionen till botten av elementet */ font-size: 150px; /* Minska storleken på pilen för mindre skärmar */ width: 50px; /* Justera bredden om nödvändigt */ height: 50px; /* Justera höjden om nödvändigt */ } } .lvhv { margin: 0; padding: 0; font-family: 'Arial', sans-serif; background-image: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/4932Q/files/Dots.png'), linear-gradient(to right, #85A2B9, #ffffff); background-repeat: repeat-y, no-repeat; background-size: 50% auto, cover; background-position: left top, center right; } .lvhv-header { position: relative; text-align: center; color: white; /* Ta bort en fast höjd och låt innehållet bestämma höjden på headern */ padding: 100px 0; /* Justera detta värde för att ge utrymme ovanför och nedanför innehållet */ background-image: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/4932Q/files/Dots.png'), linear-gradient(to right, #85A2B9, #ffffff); background-repeat: repeat-y, no-repeat; background-size: 50% auto, cover; /* Anpassa storleken på de prickiga bilderna */ background-position: left top, right top; overflow: hidden; /* Förhindrar att absolut positionerade element går utanför headern */ } /* Stil för innehållet i headern, som bild och text, kan också behöva anpassas */ .lvhv-header-content { position: relative; z-index: 2; /* Säkerställer att innehållet är ovanför de prickiga bakgrundsbilderna */ /* Lägg till ytterligare stilar för innehållet här */ } .kajak-image { max-width: 50%; /* Säkerställer att bilden inte är större än sin container */ height: auto; /* Bevarar bildens proportioner */ display: block; /* Centrerar bilden om 'margin: auto' används */ margin: 20px auto;k /* Lägger till utrymme ovanför och nedanför bilden */ } .specifications { display: flex; justify-content: space-around; align-items: center; color: #fff; padding-bottom: 25px; /* Justera enligt din design */ } .specifications div { text-align: left; } .spec-line { display: block; /* Gör elementet till ett block-element så att det kan ha bredd och höjd */ margin: 10px auto; /* Centrerar linjen horisontellt och ger lite vertikalt utrymme */ height: 1px; /* Höjden på linjen, gör den synlig */ background-color: #7f7f7f; /* Färgen på linjen, ändra efter behov */ width: 200px; /* Bredden på linjen, justera efter behov */ } .button { background-color: #012145; color: #fff; font-size: 14px; padding: 10px 25px; text-decoration: none; display: inline-block; margin-top: 20px; /* Justera enligt din design */ font-weight: solid; } @media (max-width: 767px) { .spec-line { display: none; } } .kajak-section { padding-top: 50px; padding-bottom: 50px; } .kajak-title { position: relative; margin-bottom: 25px; } .kajak-title::after { position: absolute; top: 70%; /* Justera detta värde för att placera blixten korrekt */ right: -10%; /* Justera detta värde för att placera blixten korrekt */ width: 550px; /* Bredd på din blixtbild */ height: 69px; /* Höjd på din blixtbild */ /* background-image: url('/img/zigzag.png'); */ /* Sökväg till din blixtbild */ background-size: contain; background-repeat: no-repeat; z-index: 10; /* Se till att blixten hamnar ovanpå texten */ transform: translateY(-50%); /* Centrerar vertikalt i förhållande till rubriken */ } .kajak-spec-line { width: 100%; height: 1px; /* Höjden på linjen */ background-color: #7f7f7f; margin-top: 50px; /* Rymden ovanför linjen */ margin-bottom: 45px; /* Rymden nedanför linjen */ margin-left: 0; /* Alignar med vänstra kanten av kolumnen */ } .kajak-category { display: flex; /* Aktiverar flexbox-layouten */ flex-direction: column; /* Ställer in flex-items i en kolumn */ justify-content: space-between; /* Distribuerar utrymmet mellan och runt innehållsobjekten */ } .kajak-category h2, .kajak-category p { text-align: left; /* Justerar texten åt vänster */ margin-left: 0; /* Nollställer vänstermarginalen för att aligna med vänstra kanten av kolumnen */ margin-right: auto; /* Behåller texten åt vänster inom kolumnen */ max-width: calc(100% - 30px); /* Justerar textbredden så att den inte går utanför bildens bredd om nödvändigt */ } .kajak-img { display: block; object-fit: cover; /* Ser till att bilden är ett blockelement */ margin-left: 0; /* Nollställer vänstermarginalen för att aligna med vänstra kanten av kolumnen */ width: 309px; /* Specificerad fast bredd */ height: 246px; /* Specificerad fast höjd */ } @media (max-width: 767px) { .circle-image-2 { display: none; } } .mySwiper .swiper-wrapper { margin-top: 2rem; margin-bottom: 20px; } .mySwiper .swiper-pagination { text-align: center; position: relative; margin-top: 3px; z-index: 5; } .myAccessorySwiper .swiper-pagination { text-align: center; position: relative; margin-top: 30px; z-index: 5; } .kayakCategorySwiper .swiper-pagination { text-align: center; position: relative; margin-top: 40px; z-index: 5; } .myCustomerReviewSwiper .swiper-pagination { text-align: center; position: relative; margin-top: 20px; z-index: 5; } .mySwiper .kategorilista-link { display: flex; align-items: center; justify-content: flex-start; padding: 1rem 0.5rem 1rem 0.5rem; width: 100%; max-width: none; margin-bottom: 12px; margin-left: 4px; margin-right: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); font-size: 14px; height: 60px; /* Fast höjd istället för min-height */ border-radius: 10px; white-space: normal; } .mySwiper .kategorilista-link-text { padding-left: 10px; white-space: normal; text-overflow: clip; overflow: visible; line-height: 1.2; flex: 1; text-align: left; } .mySwiper .kategorilista-link-img { width: 22px; height: 22px; flex-shrink: 0; } /* För att säkerställa att swiper-slides har samma höjd */ .mySwiper .swiper-slide { padding: 0 3px; height: auto; display: block; } .mySwiper .swiper-slide a { flex: 1; /* Få a-taggen att fylla hela utrymmet */ } .view-all-swiper-link { display: block; padding: 10px 5px 10px 0; /* Minskar padding till höger och vänster */ text-align: left; /* Texten justeras till vänster */ color: #000; text-decoration: none; } .kategorilista-link-active { border: 1px solid rgba(1, 33, 69, 0.1); /* Nästan osynlig border */ background-color: #f5f8ff; /* Extremt subtil blå nyans */ font-weight: 500; /* Medium vikt, inte för tung */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Mjuk, subtil skugga */ color: #012145; /* Din primärblå färg för texten */ } /* Elegant subtil hover-effekt */ .kategorilista-link-active:hover { background-color: #f0f5ff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); border: 1px solid rgba(1, 33, 69, 0.15); } /* Förbättrat utseende på ikon i aktiv kategori */ .kategorilista-link-active .kategorilista-link-img { filter: saturate(1.2); /* Något mer färgmättnad */ } .myAccessorySwiper .swiper-slide { display: flex; justify-content: center; } .myAccessorySwiper .card { width: 80%; height: auto; /* Detta gör att kortets höjd anpassas efter innehållet */ } /* För att centrera korten vertikalt inuti Swiper-slides */ .myAccessorySwiper .swiper-slide { display: flex; align-items: center; height: 100%; } .swiper-container { } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; color: #fff; /* eller vilken färg du föredrar */ font-size: 12px; /* justera storlek efter behov */ } .swiper-button-prev { left: 5px; /* justera avstånd från kanten */ } .swiper-button-next { right: 5px; /* justera avstånd från kanten */ } .swiper-button-prev, .swiper-button-next { color: black; /* Ändrar färgen på pilarna */ } .swiper-button-prev::after, .swiper-button-next::after { color: black; /* Ändrar färgen på pilikonen */ } @media (max-width: 768px) { /* Anpassa bredden efter dina behov */ .full-width-background { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; background-color: #efeef1; color: black; padding-top: 3rem; padding-bottom: 4rem; } } .spacer-small { width: 100%; padding-top: 1.25rem; } .headline-sub { font-weight: 500; color: #888888; font-size: 16px; padding: 0 4rem; max-width: 600px; margin-left: auto; margin-right: auto; } .rounded-image { width: 100%; aspect-ratio: 4 / 3; /* 💡 Kräver modern browser, annars se fallback nedan */ object-fit: cover; border-top-left-radius: 12px; border-top-right-radius: 12px; } .card.rounded-category { display: flex; flex-direction: column; } .card-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: 1rem 1.2rem; } .card-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .h2-creative { /* font-family: 'Josefin Sans', sans-serif;*/ font-size: 40px; font-weight: bolder; letter-spacing: -0.5px; /* Mellanrum mellan bokstäverna */ } .rounded-image { border-radius: 10px 10px 0px 0px; } .full-width-background-icons { border-radius: 10px; padding-top: 2rem; padding-bottom: 2px; margin-bottom: 2rem; } .rounded-pros { border-radius: 5px; } @media (max-width: 768px) { .parent-class .white-link-color, .parent-class .white-link-color:link, .parent-class .white-link-color:visited, ... { color: white !important; } } /* Grundläggande styling för produktbeskrivnings-accordion */ .product-accordion { width: 100%; /* övriga stilar */ } .product-accordion-item { border-bottom: 1px solid rgba(187, 187, 187, .3); margin-bottom: 10px; /* Övriga stilar */ } /* Stil för varje produkt-accordion-knapp */ .product-accordion-button { background-color: #FFFFFF; color: #14141e; /* Textfärg */ /* Förvandlar muspekaren till en pekare när den hovrar över knappen */ padding: 10px 10px 10px; /* Inre avstånd inuti knappen */ width: 100%; /* Bredden på knappen är hela bredden av dess container */ border: none; /* Tar bort standardgränsen från knapparna */ text-align: left; /* Justerar texten till vänster */ outline: none; /* Tar bort kontur när knappen är fokuserad (klickad) */ font-size: 16px; /* Storleken på texten inuti knappen */ font-weight: bold; transition: background-color 0.6s ease; /* Gör en mjuk övergång för bakgrundsfärgen när den ändras */ display: flex; align-items: center; /* Vertikal centrering av innehållet */ justify-content: flex-start; /* Justera innehållet till vänster */ } /* Stil för pseudoelementet i produkt-accordion */ /* Stil för pseudoelementet i produkt-accordion */ .product-accordion-button:before { content: '\002B'; /* Standardtecken är ett plus */ color: #012145; /* Färgen på tecknet */ font-weight: bold; /* Gör tecknet fetare */ margin-right: 10px; /* Lägger till avstånd till vänster om tecknet */ border-radius: 50%; /* Gör elementet cirkulärt */ display: inline-flex; /* Behåller proportionerna och centreringen av innehållet */ border: 1px solid #012145; /* Tunn rund border */ width: 24px; /* Bredden på cirkeln */ height: 24px; /* Höjden på cirkeln */ align-items: center; /* Vertikal centrering */ justify-content: center; /* Horisontell centrering */ flex-shrink: 0; /* Förhindrar att cirkeln krymper */ } /* Ändrar tecknet för aktiv produkt-accordion-knapp */ .product-accordion-button.active:before { content: "\2212"; /* övriga stilar */ } /* Stil för innehållet i produkt-accordion */ .product-accordion-content { background-color: white; /* Bakgrundsfärg för innehållet */ display: none; /* Standardinställningen är att inte visa innehållet */ padding: 18px 18px 5px 5px; /* Padding inuti innehållet */ } .product-accordion-body { padding-left: 50px; } .accordion-list-item { display: flex; align-items: center; } .accordion-list-item img { margin-right: 5px; } /* Moderna, diskreta navigationsknappar */ .product-swiper-button-prev, .product-swiper-button-next { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 123, 255, 0.2); border-radius: 8px; width: 40px; height: 60px; position: absolute; top: 50%; z-index: 10; cursor: pointer; transition: all 0.3s ease; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .product-swiper-button-prev i, .product-swiper-button-next i { font-size: 18px; color: #007bff; } .product-swiper-button-prev { left: 10px; } .product-swiper-button-next { right: 10px; } /* Ta bort default Swiper-pilar */ .product-swiper-button-prev:after, .product-swiper-button-next:after { display: none; } /* Hover-effekt */ .product-swiper-button-prev:hover, .product-swiper-button-next:hover { background: rgba(255, 255, 255, 1); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); transform: translateY(-50%) scale(1.05); } /* Dölj på mobil för bättre touch-upplevelse */ @media (max-width: 768px) { .product-swiper-button-prev, .product-swiper-button-next { display: none; } } /* Stil för att visa en nedre ram på den aktiva miniatyrbilden */ .active-thumb { border: 1px solid #012145; padding: 1px; margin-bottom: 5px; } .header-small { font-size: 1rem; line-height: 1.5rem; } .havskajaker-background { background-image: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/4932Q/files/havskajak-header-kategori.jpg'); background-size: cover; background-position: center center; max-height: 400px; } /* Stil för den vita text-rutan */ .info-box { padding: 25px; margin-top: 50px; /* Eller använd 'mt-5' Bootstrap-klassen */ margin: 30px; background-color: rgba(255, 255, 255, 0.9); border-radius: 20px; backdrop-filter: blur(0.9px); } /* Media query för att anpassa layouten på små skärmar */ @media (max-width: 768px) { .info-box { margin-top: 20px; /* Eller använd 'mt-2' Bootstrap-klassen */ padding: 20px; /* Eller använd 'p-1' Bootstrap-klassen */ } } @media (max-width: 768px) { /* Anpassa bredden efter dina behov */ .full-width-header { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; padding-top: 1rem; padding-bottom: 1rem; } } .kajaktillbehor-banner { background-image: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/4932Q/files/Kajaktillbehor-header.jpg'); background-size: cover; background-position: center; height: 300px; /* Basinställning för mobiler */ } @media (min-width: 768px) { .kajaktillbehor-banner { height: 400px; /* För desktop */ } } .kajaksortiment-banner { background-image: url('https://cdn.quickbutik.com/images/4932Q/products/659fb6ad08050.jpeg?auto=format'); background-size: cover; background-position: center; height: 300px; /* Basinställning för mobiler */ } @media (min-width: 768px) { .kajaksortiment-banner { height: 400px; /* För desktop */ } } .sup-banner { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.quickbutik.com/images/4932Q/products/659fbc25769b3.jpeg?auto=format'); background-size: cover; background-size: cover; background-position: center; height: 400px; /* Basinställning för mobiler */ } @media (min-width: 768px) { .sup-banner { height: 400px; /* För desktop */ padding: 25px; } } .stock-info { background: #e6f2ff; border-radius: 5px; margin-top: 15px; margin-bottom: 15px; padding: 15px; padding-left: 25px; font-size: 14px; font-weight: bold; display:flex; align-items: center; color: #012145; } .stock-info img { margin-right: 15px; width: 20px; } .stock-info .shipping-date { color: #1e5a8e; } .notice-info { position: relative; background: linear-gradient(135deg, #e6f2ff 0%, #f0f7ff 100%); border-radius: 8px; margin-top: 8px; margin-bottom: 20px; padding: 14px 16px 14px 16px; font-size: 14px; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0, 61, 107, 0.08); } .notice-info::before { content: 'Hej!'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); background: #003d6b; color: white; font-weight: 700; font-size: 13px; padding: 10px 14px; border-radius: 20px; white-space: nowrap; z-index: 2; } /* Pratbubbla-pil som pekar från vänster sida av bubblan */ .notice-info::after { content: ''; position: absolute; left: 10px; /* Vänster om bubblan */ top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 8px solid #003d6b; /* Pekar åt vänster */ z-index: 1; } .notice-info img { display: none; } .notice-info .notice-text { color: #1e5a8e; font-weight: 400; line-height: 1.5; margin-left: 70px; } /* Responsiv design */ @media (max-width: 768px) { .notice-info { padding: 14px 14px; } .notice-info::before { font-size: 12px; padding: 8px 12px; left: 12px; } .notice-info::after { left: 6px; } .notice-info .notice-text { font-size: 13px; margin-left: 65px; } } .ribbon-info { position: relative; display: inline-block; } .ribbon-info span { color: #001e3c; background-color: #e6f2ff; border: 1px solid white; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; display: inline-block; letter-spacing: 0.3px; } /* .few-info { background: #fdc82b; border-radius: 5px; margin-top: 5px; margin-right: 5px; padding: 5px 15px; font-size: 13px; font-weight: light; display: inline-block; color: black; } */ .few-info { background-color: #fdc82b; /* Gul bakgrundsfärg */ border-radius: 5px; /* Rundade hörn */ margin-top: 5px; margin-right: 5px; padding: 5px 15px; /* Inre vaddering */ font-size: 13px; /* Textstorlek */ font-weight: 600; /* Semibold för bättre läsbarhet, eftersom 'light' kan vara svårt att läsa */ display: inline-block; /* Behåll detta för att visa som inline-block */ color: black; /* Svart textfärg */ } .few-info { box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1); } .pro-container { margin-bottom: 16px; } .pro-info { margin-top: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; } .pro-info img { display: none; /* Dölj de gamla bilderna */ } .pro-info::before { content: '\f00c'; /* Font Awesome checkmark unicode */ font-family: 'Font Awesome 5 Free'; font-weight: 900; width: 24px; height: 24px; background: #003d6b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .pro-text { color: #012145; line-height: 1.4; } /* Mobilanpassning - behåll vertikal layout */ @media (max-width: 768px) { .pro-info { font-size: 13px; } .pro-info::before { width: 22px; height: 22px; font-size: 11px; } } @media (min-width: 992px) { .sticky-product { position: -webkit-sticky; /* För Safari */ position: sticky; top: 20px; /* Justera detta värde baserat på önskat utrymme från toppen av viewporten */ z-index: 10; /* Se till att den ligger över andra innehållselement */ } } .similar-products-accordion .similar-products-header { font-size: 1.25rem; /* Example font size */ font-weight: bold; /* Example font weight */ } .similar-products-accordion .similar-products-button { background-color: #fff; /* Example background color */ color: #000; /* Example text color */ border-bottom: 1px solid #ECE7E2; border-radius: .25rem; /* Optional: if you want rounded corners */ } .similar-products-accordion .similar-products-collapse { border-color: #f0f0f0; */ } .similar-products-accordion .similar-products-body { padding: 1rem; /* Example padding */ } @media (max-width: 768px) { /* Anpassa bredden efter dina behov */ .full-width-section { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; } } .productsort { border-radius: 10px !important; padding: 8px !important; } .badge-custom { width: fit-content; !important; border-radius: 5px; right: 10px !important; } .badge-custom span { box-shadow: none!important; border-radius: 5px; } .beautiful-button { font-size: 16px; font-weight: 600; color: #FFFFFF; background-color: #c60156; border-radius: 10px; position: relative; border: none; text-align: center; vertical-align: middle; line-height: 3; padding: 10px 20px; transition: all 0.3s ease; outline: none; margin-top: 5px; margin-bottom: 12px; } .beautiful-button { box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.4), /* Inner skugga */ 0 8px 8px rgba(27, 35, 50, 0.1), /* Yttre skugga */ 0 4px 4px rgba(27, 35, 50, 0.1); /* Yttre skugga */ } .beautiful-button-small { font-size: 14; font-weight: 600; color: #FFFFFF; background-color: #c60156; border-radius: 10px; position: relative; border: none; text-align: center; vertical-align: middle; line-height: 2; padding: 10px 20px; transition: all 0.3s ease; outline: none; } .beautiful-button-small { box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.4), /* Inner skugga */ /* 0 8px 8px rgba(27, 35, 50, 0.1), Yttre skugga 0 4px 4px rgba(27, 35, 50, 0.1); Yttre skugga */ } .beautiful-button-continue-shopping { font-size: 14; font-weight: 600; color: black; background-color: #fdc82b; border-radius: 10px; position: relative; border: none; text-align: center; vertical-align: middle; line-height: 2; padding: 10px 20px; transition: all 0.3s ease; outline: none; } .beautiful-button-continue-shopping { box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.4), /* Inner skugga */ /* 0 8px 8px rgba(27, 35, 50, 0.1), Yttre skugga 0 4px 4px rgba(27, 35, 50, 0.1); Yttre skugga */ } .input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } .input-group { background: none !important; box-shadow: none !important; } .rounded-pill { box-shadow: } .btn.btn-selectpicker { border-radius: .25rem; /* Lätt rundade hörn */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtil skugga för djup */ color: #333; /* Mörkgrå text, för bättre läsbarhet */ } .index-header-background { background: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/4932Q/files/ben-index-header.png') no-repeat center center; background-size: cover; color: white; padding: 50px 50px; border-radius: 10px; margin-bottom: 5px; } @media (max-width: 767px) { .index-header-background { position: fixed; margin-top: 5px; left: 0; right: 0; width: 100%; padding: 50px 20px; z-index: 1000; background-position: 70% center; } } .link-text a { color: white !important; } .uthyrning-header-background { background: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/4932Q/files/hyra-kajak-header.jpg') no-repeat center center; background-size: cover; color: white; padding: 50px 50px; border-radius: 10px; margin-bottom: 5px; } .category-p { font-size: 14px; line-height: 20px; color: #000000; letter-spacing: normal; } .category-h5{ font-size: 18px; color: #000000; letter-spacing: -0.24px; font-weight: 500; } .category-h3{ font-size: 20px; color: #000000; letter-spacing: -0.24px; font-weight: 800; } .category-h2{ font-size: 24px; color: #000000; letter-spacing: -0.24px; font-weight: 800; } .cta-custom { background-color: #00afff; color: #FFFFFF; font-size: 16px; padding: 15px 25px; /* Adjusted for px-5 and py-3 */ margin-right: 10px; /* Adjusted for me-3 */ margin-bottom: 10px; /* Adjusted for mb-2 */ border-radius: 30px; /* Adjusted for rounded-category */ white-space: nowrap; min-width: 150px; text-decoration: none; /* Assuming you want to remove underline for links */ display: inline-block; /* Ensuring it behaves like a button */ border: none; /* Removing any default border */ outline: none; /* Removing any default outline */ } .cta-custom-secondary { background-color: white; color: #0086ff; font-size: 16px; /* Justera vid behov */ padding: 15px 25px; /* Justerat för px-5 och py-3 */ margin-right: 10px; /* Justerat för me-3 */ margin-bottom: 10px; /* Justerat för mb-2 */ border-radius: 30px; /* Justerat för rounded-category */ white-space: nowrap; min-width: 150px; text-decoration: none; /* Ingen understrykning */ display: inline-block; /* Beter sig som en knapp */ border: 1px solid black; /* Smal svart ram */ outline: none; /* Ingen standardkontur */ } .cta-custom-white { background-color: white; color: black; /* Assuming 'text-dark' should be black */ font-size: 16px; /* Adjust as needed */ padding: 15px 25px; /* Adjusted for px-5 and py-3 */ margin-right: 10px; /* Adjusted for me-3 */ margin-bottom: 10px; /* Adjusted for mb-2 */ border-radius: 30px; /* Adjusted for rounded-category */ white-space: nowrap; min-width: 150px; text-decoration: none; /* Assuming you want to remove underline for links */ display: inline-block; /* Ensuring it behaves like a button */ border: none; /* Removing any default border */ outline: none; /* Removing any default outline */ } .cta-custom-white-secondary { background-color: white; /* Ingen bakgrund */ color: black; /* Vit text */ font-size: 16px; /* Justera vid behov */ padding: 15px 25px; /* Justerat för px-5 och py-3 */ margin-right: 10px; /* Justerat för me-3 */ margin-bottom: 10px; /* Justerat för mb-2 */ border-radius: 30px; /* Justerat för rounded-category */ white-space: nowrap; min-width: 150px; text-decoration: none; /* Ingen understrykning */ display: inline-block; /* Ser ut som en knapp */ border: 2px solid white; /* Vit ram */ outline: none; /* Ingen standardkontur */ box-shadow: none; /* Ingen skugga */ } .custom-shipping-container { display: flex; padding: 6px 20px; justify-content: space-between; align-items: center; align-self: stretch; background-color: #f6f6f6; border-radius: 20px; } .custom-shipping-item { display: flex; align-items: center; gap: 6px; } .text-block-shipping { font-size: 14px; color: #000; } .shipping-date { font-weight: 500; } .free-shipping { font-weight: bold; } .green-circle { } .fewleft-container { display: flex; flex-direction: column; padding: 12px 0; gap: 10px; /* Lägg till ett mellanrum mellan raderna */ } .fewleft-item { display: flex; align-items: center; gap: 6px; } .fewleft-text { font-size: 14px; color: #89580a; } .fewleft-circle { width: 12px; /* Justera bredden vid behov */ height: 12px; /* Justera höjden vid behov */ vertical-align: middle; /* Se till att cirkeln är i mitten vertikalt */ } .instock-container { display: flex; flex-direction: column; padding: 12px 0; gap: 10px; /* Lägg till ett mellanrum mellan raderna */ } .instock-item { display: flex; align-items: center; gap: 6px; } .instock-text { font-size: 14px; color: #1a6241; } .instock-circle { width: 12px; /* Justera bredden vid behov */ height: 12px; /* Justera höjden vid behov */ vertical-align: middle; /* Se till att cirkeln är i mitten vertikalt */ } .product_description { font-size: 14px; color: #000; flex-direction: column; padding: 0px 7px; } .produktval-info { background: #f6f6f6; border-radius: 5px; margin-top: 10px; padding: 15px; font-size: 13px; font-weight: bold; display:flex; align-items: center; } .produktval-info img { margin-right: 15px; width: 100px; height: 100px; } @media (max-width: 576px) { .img-small { width: 300px; /* Adjust the width as needed */ height: 300px; display: block; margin-left: auto; margin-right: auto; } } @media (min-width: 1280px) { .sticky-add-to-cart, .prelander-sticky-add-to-cart { display: none !important; } } /* Shared Base Styles */ .prelander-sticky-add-to-cart, .sticky-add-to-cart { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; color: #000; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 999; padding: 0px 20px 2px 20px; border-top: 1px solid rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: center; min-height: 90px; } /* Sticky: Appears on Scroll */ .sticky-add-to-cart { opacity: 0; transform: translateY(100%); transition: all 0.3s ease-in-out; max-width: 100vw; } .sticky-visible { opacity: 1; transform: translateY(0); } /* Layout Structure */ .prelander-page-width, .sticky-page-width { display: flex; flex-direction: column; align-items: flex-start; /* Align content left */ width: 100%; text-align: left; } .prelander-sticky-info, .sticky-info { display: flex; flex-direction: column; align-items: flex-start; } .prelander-sticky-price, .sticky-price-section { display: flex; gap: 6px; font-size: 18px; font-weight: bold; } .prelander-current-price, .sticky-current-price { font-size: 20px; font-weight: bold; color: #ff3b30; margin-right: 4px; } .prelander-old-price, .sticky-old-price { font-size: 16px; text-decoration: line-through; color: gray; } .prelander-klarna-info, .sticky-klarna-info { font-size: 13px; color: #000; display: flex; align-items: center; justify-content: flex-start; } .prelander-klarna-logo, .sticky-klarna-logo { width: 40px; height: auto; margin-left: 5px; } /* Button Section */ .prelander-add-btn, .sticky-add-btn { width: 100%; } .prelander-sticky-add-cart, .sticky-add-cart { background: #c60156; color: white; padding: 14px 20px; font-size: 18px; font-weight: bold; text-transform: uppercase; text-align: center; border-radius: 8px; width: 100%; display: block; } #launcher, #webWidget { bottom: 65px !important; /* Flytta upp Zendesk-widgeten ovanför din sticky add-to-cart knapp */ z-index: 1000 !important; /* Se till att den har ett högre z-index så den ligger över andra element */ } button:focus { outline: none !important; } .stock-status-container { display: flex; flex-direction: column; padding: 8px 0; gap: 10px; /* Lägg till ett mellanrum mellan raderna */ } .stock-status-item { display: flex; align-items: center; gap: 8px; } .stock-status-text { font-size: 14px !important; color: #012145; } .green-circle { animation: fade 1s ease-in-out infinite; } .fewleft-circle { width: 12px; /* Justera bredden vid behov */ height: 12px; /* Justera höjden vid behov */ vertical-align: middle; /* Se till att cirkeln är i mitten vertikalt */ } .free-shipping-notification { display: flex; align-items: center; justify-content: center; /* Lägg till detta för att centrera innehållet horisontellt */ font-size: 15px; color: #c60156; margin: 0 auto; /* Lägg till detta för att centrera containern */ font-weight: bold; } .free-shipping-notification img { width: 24px; height: auto; margin-right: 8px; } .text-block-shipping { font-size: 14px !important; color: #000; } .full-width-bg { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .full-width-gradient { background-image: linear-gradient(#e6f0fc, #fff0); width: 100%; /* Använd 100% bredd istället för 100vw */ position: relative; padding-top: 0; padding-bottom: 0; overflow: hidden; } .blu-wave-w { position: relative; overflow: hidden; /* Se till att inget sträcker sig utanför */ margin-top: -5px; /* Behåll justeringen om du behöver den */ } .blu-wave-w img { width: 100%; /* Se till att bilden täcker hela bredden */ display: block; position: relative; top: 0; } @media (max-width: 768px) { .full-width-gradient, .blu-wave-w { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; } } .flying-bean { box-sizing: content-box; max-height: 98px; position: absolute; top: 10%; bottom: auto; left: auto; right: 10%; } .flying-bean._2 { max-height: 82px; top: 15%; bottom: auto; left: 5%; right: auto; } @media screen and (max-width: 767px) { .spacer-80px { height: 60px; } } @media screen and (max-width: 991px) { .spacer-80px { height: 70px; } } .spacer-80px { height: 80px; } @media screen and (max-width: 767px) { .spacer-60px { height: 40px; } } @media screen and (max-width: 991px) { .spacer-60px { height: 50px; } } .spacer-60px { height: 60px; } /* Grundläggande layout för FAQ-sektionen */ .faq-w { display: flex; gap: 20px; } /* För skärmar större än 991px (desktop) */ @media screen and (min-width: 992px) { .faq-w { flex-direction: row; /* Bilden till vänster, FAQ till höger */ align-items: center; } .faq-w .col-md-5 { order: 1; /* Bilden i första kolumnen */ flex: 0 0 50%; max-width: 50%; } .faq-w .col-md-7 { order: 2; /* FAQ i andra kolumnen */ flex: 0 0 50%; max-width: 50%; display: flex; flex-direction: column; justify-content: center; /* Centrera FAQ-listan vertikalt */ } } /* För skärmar mindre än 992px (tablet och mobil) */ @media screen and (max-width: 991px) { .faq-w { flex-direction: column; /* Vertikal stapling på mindre skärmar */ } .faq-w .col-md-5, .faq-w .col-md-7 { width: 100%; /* Gör varje element 100% bredd */ max-width: 100%; } .faq-img { width: 100%; height: auto; margin-bottom: 20px; /* Lägger till mellanrum under bilden */ } } .custom-scroll-nav-wrapper { position: relative; width: 100vw; /* Gör att elementet sträcker sig över hela bredden av viewporten */ margin-left: calc(-50vw + 50%); /* Flyttar elementet tillbaka så det täcker hela bredden */ } /* Anpassning av scrollbaren för bättre synlighet på alla enheter */ .custom-scroll-nav { font-weight: 800; font-size: 16px; line-height: 24px; color: #231f20; white-space: nowrap; overflow-x: scroll; /* Forcera synlig scrollbar */ -webkit-overflow-scrolling: touch; /* För smidig scrollning på mobila enheter */ padding: 10px 0; border-bottom: 1px solid #adb5bd; scrollbar-width: auto; /* Visa scrollbar med standardbredd */ scrollbar-color: #0db2f0 #e0e0e0; /* Färger på scrollbar (tumme och spår) */ } /* Anpassad scrollbar för Webkit-baserade webbläsare (Chrome, Safari) */ .custom-scroll-nav::-webkit-scrollbar { height: 10px; /* Ökad höjd på scrollbarens tumme för bättre synlighet */ } .custom-scroll-nav::-webkit-scrollbar-track { background: #e0e0e0; /* Färg på scrollbarens spår */ } .custom-scroll-nav::-webkit-scrollbar-thumb { background-color: #0db2f0; /* Färg på scrollbarens tumme */ border-radius: 10px; /* Rundade kanter på tummen */ } /* Anpassning av scrollbaren för Firefox */ .custom-scroll-nav { scrollbar-width: thin; scrollbar-color: #0db2f0 white; /* Färg på tumme och spår */ } .custom-nav-link { color: #231f20; padding: 0 15px; text-decoration: none; transition: color 0.3s ease; } /* Dölj hela menyn på desktop */ @media (min-width: 992px) { .custom-scroll-nav-wrapper { display: none; } } @media (max-width: 991px) { .breadcrumb-container { display: none; } } .order-limit-container { display: flex; margin-top: 15px; } .order-limit-box { background-color: var(--backgroundColor, #DEEAF7); color: var(--color, #356796); border-radius: 10px; box-shadow: 0 0 0 2px inset rgba(0, 0, 0, 0.05); display: flex; flex-direction: row; font-family: Gotham, sans-serif; font-size: 14px; justify-content: center; line-height: 1.11; padding: 14px 18px 0px; position: relative; text-align: center; text-decoration: none; } .order-limit-text { flex-grow: 1; display: flex; align-items: center; justify-content: center; } .order-limit-tooltip { position: relative; align-items: center; } .order-limit-tooltip-btn { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; } .order-limit-icon { width: 16px; /* Justera storleken på ikonen */ height: 16px; /* Samma höjd som bredd för att hålla ikonen kvadratisk */ fill: var(--color, #356796); vertical-align: middle; /* Gör att ikonen linjeras vertikalt med texten */ margin-left: 5px; /* Lägger till lite mellanrum mellan text och ikon */ } .order-limit-tooltip-btn[aria-expanded="true"] .order-limit-tooltip-content { display: block; } .order-limit-tooltip-content { position: absolute; top: var(--tooltipTop, 43px); left: 50%; transform: translateX(-50%); background-color: #fff; color: #000; padding: 12px 16px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); white-space: normal; /* Tillåter text att brytas */ width: 300px; /* Fast bredd för att säkerställa tillräckligt med utrymme */ z-index: 9999; display: none; overflow-wrap: break-word; /* Bryt ord om nödvändigt */ font-size: 14px; font-weight: 500; line-height: 1.4; text-align: left; /* Gör texten vänsterjusterad för bättre läsbarhet */ } /* Visar tooltip när du hovrar över ikonen */ .order-limit-tooltip:hover .order-limit-tooltip-content { display: block; } //* Justering för små skärmar */ @media (max-width: 576px) { .order-limit-tooltip-content { width: 300px; /* Använd en fast bredd som på desktop */ left: 50%; /* Centrerar rutan på skärmen */ transform: translateX(-50%); /* Behåller centrerad position */ top: calc(var(--tooltipTop, 43px) + 10px); padding: 12px 16px; /* Behåll samma padding för konsistens */ box-sizing: border-box; /* Se till att padding inte gör rutan bredare än 300px */ } } .custom-scroll-reviews { display: flex; overflow-x: auto; scroll-behavior: smooth; padding: 10px; gap: 20px; } .review-box { min-width: 250px; max-width: 300px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; padding: 20px; text-align: center; flex-shrink: 0; box-sizing: border-box; word-wrap: break-word; } .custom-scroll-reviews::-webkit-scrollbar { display: none; } /* Pagination dots styling */ .custom-pagination-dots { text-align: center; margin-top: 15px; } .custom-pagination-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background-color: #ddd; border-radius: 50%; } .custom-pagination-dots .dot.active { background-color: #00d084; } .no-padding-left-review .accordion-body { padding-left: 0; /* Tar bort padding-left */ } .review-image { width: 100px; /* Gör bilden kvadratisk */ height: 100px; /* Samma höjd som bredd för att hålla formen kvadratisk */ object-fit: cover; margin-bottom: 10px; /* Avstånd mellan bild och text */ border-radius: 50%; /* Gör bilden rund */ display: block; padding: 4px; /* Lägg till padding för att visa gradientbordern */ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram-liknande gradient */ background-size: 200%; /* Gör gradienten större för att skapa en smidig övergång */ border: none; /* Ta bort standardgränsen */ } .review-image img { border-radius: 50%; /* Gör den inre bilden rund */ display: block; width: 100%; /* Se till att bilden fyller utrymmet korrekt */ height: 100%; object-fit: cover; } .review-modal { display: none; /* Döljer modalen vid sidans laddning */ align-items: center; justify-content: center; height: 100vh; padding: 20px; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; position: fixed; top: 0; left: 0; width: 100%; } .review-modal-content { margin: auto; display: block; width: 80%; max-width: 700px; border-radius: 10px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .review-modal-close { position: absolute; top: 20px; right: 25px; color: #ffffff; /* Ljus färg för stängningsknappen */ font-size: 35px; font-weight: bold; cursor: pointer; z-index: 1001; } .review-story-container { position: relative; text-align: center; } .review-story-content { display: flex; justify-content: center; align-items: center; height: auto; } .review-story-image { display: none; width: 100%; border-radius: 10px; } .review-story-image.active { display: block; } .review-story-prev, .review-story-next { position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: #ffffff !important; /* Tvingar pilarna att vara vita */ font-weight: bold; font-size: 24px; cursor: pointer; user-select: none; z-index: 1001; } .review-story-prev { left: 10px; } .review-story-next { right: 10px; } .review-story-prev:hover, .review-story-next:hover { color: #d1d1d1 !important; /* Ljusare grå färg vid hover */ } .review-story-video { width: 315px; /* Bredd för att matcha typiska Short-videor */ height: 560px; /* Höjd för att matcha typiska Short-videor */ border-radius: 10px; object-fit: cover; display: none; /* Starta som dold, visas när aktiv */ } .review-story-video.active { display: block; } .section.hero { margin-bottom: 10px; position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .section.hero img { margin: 0; padding: 0; } .uthyrning-background { background-color: #bedbff; position: relative; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } /* SUP SECTION 1 */ .first-section { padding: 4rem 0; position: relative; height: auto; min-height: 100vh; } .product-info { position: absolute; top: 10%; left: 10%; } .product-number { font-size: 3rem; font-weight: normal; } .sup-name { font-size: 5rem; font-weight: bold; line-height: 0.9; } .product-subname { font-size: 5rem; color: #9CCCCD; } .sup-image { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(2deg); max-width: 60%; z-index: 10; } .konstruktion-image { position: static; transform: none; max-width: 50%; } .product-description { position: absolute; bottom: 10%; right: 5%; max-width: 400px; font-size: 16px; color: #737373; } @media (max-width: 768px) { .first-section { display: flex; flex-direction: column; padding: 2rem 1rem; min-height: auto; } .product-info { position: static; width: 100%; margin-bottom: 2rem; } .product-number { font-size: 2rem; } .sup-name, .product-subname { font-size: 4rem; } .sup-image { position: static; transform: none; max-width: 100%; margin: 2rem 0; } .hero-boat-image { position: static; transform: none; max-width: 100%; margin: 2rem 0; } .konstruktion-image { position: static; transform: none; max-width: 100%; } .product-description { position: static; max-width: 100%; margin-top: 2rem; } } /* SUP SECTION 2 */ .drop-stitch-section { /*background-color: #f0f8ff;*/ padding: 1rem 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .section-title { font-size: 3rem; font-weight: bold; margin-bottom: 2rem; } .section-title span { color: #9CCCCD; } .section-description { color: #6c757d; margin-bottom: 2rem; max-width: 700px; margin-left: auto; margin-right: auto; text-align: left; } .feature-title { font-weight: bold; font-size: 1rem; margin-bottom: 0.5rem; text-align: left; } .feature-description { font-size: 1rem; color: #6c757d; text-align: left; } /* PORTABLE SECTION */ .sup-section { position: relative; background-image: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/4932Q/files/sup-produktbeskrivning.jpg'); background-size: cover; background-position: center; color: white; padding: 5rem 0; min-height: 600px; display: flex; align-items: center; z-index: 1; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #00000066; /* Mörk overlay med 50% opacitet */ z-index: -1; /* Lägg bakom innehållet */ } .sup-description-box { position: absolute; bottom: -200px; /* Liten marginal till botten */ right: 70px; /* Liten marginal till höger */ padding: 1.5rem; max-width: 400px; /* Du kan justera bredden här */ z-index: 2; } .sup-description { font-size: 1rem; color: white; /* Textfärg */ margin-bottom: 0.5rem; } @media (max-width: 768px) { .sup-title { font-size: 2rem; } .sup-description { font-size: 1rem; } .sup-description-box { right: 0px; padding: 1rem; max-width: 100%; top: 10px; } .lvhv-name { font-size: 4rem; font-weight: bold; line-height: 0.7; } .lvhv-subname { font-size: 3rem; line-height: 1.2; } } /* STABILITY SECTION */ .stability-section { position: relative; background-image: url('https://cdn.quickbutik.com/images/4932Q/products/6386050181b55.jpeg?auto=format'); background-size: cover; background-position: center; color: white; padding: 5rem 0; min-height: 600px; display: flex; align-items: center; z-index: 1; } .stability-section-gif { position: relative; background-image: url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExanduZXJuNmY4b2RyNTNxZWF1ZTc2NzBtY3lmdngyMWl2bXoxN2M0biZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xVPTFFFa5sJ9ISfxQr/giphy.gif); background-size: cover; background-position: center; color: white; padding: 5rem 0; min-height: 600px; display: flex; align-items: center; z-index: 1; } .wave-number { font-size: 3rem; font-weight: normal; color: #FF7F50; } .wave-name { font-size: 3rem; font-weight: bold; line-height: 0.9; } .waves-subname { font-size: 5rem; color: #FF7F50; } .wave-product-image { position: absolute; top: 40%; left: 45%; transform: translate(-50%, -50%) rotate(1deg); max-width: 60%; z-index: 10; } .waves-section-title { font-size: 3rem; font-weight: bold; margin-bottom: 2rem; } .waves-section-title span { color: #FF7F50; } .lvhv-number { font-size: 5rem; font-weight: normal; color: #FF3131; } .lvhv-name { font-size: 5rem; font-weight: bold; line-height: 0.7; } .lvhv-subname { font-size: 3rem; color: #FF3131; line-height: 0.7; } .hero-boat-image { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(150deg); max-width: 90%; z-index: 10; } .kayak-section { background-color: #ffffff; min-height: 50vh; display: flex; align-items: center; } .kayak-image { position: static; transform: none; max-width: 100%; /* Ökar storleken */ width: 100%; /* Lägg till för att säkerställa att bilden expanderar */ height: auto; /* Bevarar bildens proportioner */ } .lvhv-section-title { font-size: 3rem; font-weight: bold; margin-bottom: 2rem; } .lvhv-section-title span { color: #FF3131; } .lvhv-section { position: relative; /* För overlay-positionering */ background-image: url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExYWVlMnV0NnQ0MW03cDRiamg4amNoZmkxNXh4MGRtcmFoZ3hpbDhlNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ZyzkNUIUGBUWD4HSgU/giphy.gif'); /* Bakgrundsbild */ background-size: cover; /* Täck hela sektionen */ background-position: center; color: white; /* Vit text */ padding: 5rem 0; /* Padding för sektionen */ min-height: 600px; /* Justera höjden beroende på ditt innehåll */ display: flex; align-items: center; z-index: 1; } .lvhv2-section { position: relative; /* För overlay-positionering */ background-image: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/4932Q/files/roder.jpg'); /* Bakgrundsbild */ background-size: cover; /* Täck hela sektionen */ background-position: center; color: white; /* Vit text */ padding: 5rem 0; /* Padding för sektionen */ min-height: 600px; /* Justera höjden beroende på ditt innehåll */ display: flex; align-items: center; z-index: 1; } .product-offer-addon { display: flex; justify-content: space-between; align-items: center; padding: 12px; background-color: #ffffff; border: 0.5px solid #dee2e6; border-radius: .25rem; margin-bottom: 20px; transition: border-color 0.3s ease, background-color 0.3s ease; } .product-offer-addon:hover { /*border-color: #a5d6a7;*/ border-color: #012145; background-color: #f7f7f7; } .product-offer-addon input[type="checkbox"] { margin-right: 15px; cursor: pointer; transform: scale(1.2); } .product-offer-addon label { font-size: 16px; font-weight: 500; color: #333333; cursor: pointer; } .product-offer-addon .addon-price { color: #d32f2f; font-weight: bold; margin-left: 10px !important; font-size: 14px; } .product-property-line { /*padding: 10px 0px 2px 13px !important;*/ } .product-image label { position: relative; padding-left: 60px; /* Skapar utrymme för bilden */ } .product-image label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 50px; /* Bildens bredd */ height: 50px; /* Bildens höjd */ background-image: url('https://cdn.quickbutik.com/images/4932Q/products/63847bdfaee18.jpeg?auto=format'); background-size: cover; background-position: center; border-radius: 5px; /* Rundade hörn för en snygg design */ } .garanti-banner { position: relative; width: 100%; background-color: #64D988; /* Färg för banderollen */ color: white; text-align: center; padding: 3px; z-index: 1; /* Gör att den ligger över andra element om nödvändigt */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lägger till en skugga för att ge den lite djup */ } .garanti-banner .garanti-text { font-size: 14px; /* Stor text för årtalet */ font-weight: bold; display: inline-block; } .garanti-banner .garanti-small { font-size: 10px; /* Ännu mindre text för "enligt köpvillkor" */ display: block; margin-top: -5px; } .flash-sale { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; margin-bottom: 8px; /*background-color: #e6f2ff;*/ background-color: black; /*border-left: 4px solid #003d6b;*/ font-size: 14px; gap: 12px; } .flash-sale-left { display: flex; align-items: center; gap: 8px; font-weight: 600; /*color: #012145;*/ color: white; margin: 0; padding: 0; background: none; clip-path: none; line-height: 1.2; } .flash-sale-left::before { content: "⚡"; font-size: 18px; line-height: 1; color: white; } .flash-sale-right { display: flex; align-items: center; font-weight: 400; /*color: #1e5a8e;*/ color: white; margin: 0; padding: 0; background: none; clip-path: none; white-space: normal; text-align: right; line-height: 1.2; } /* Anpassning för mobilskärmar */ @media (max-width: 768px) { .flash-sale { padding: 12px; gap: 8px; } .flash-sale-left { font-size: 14px; } .flash-sale-right { font-size: 13px; text-align: left; flex: 1; } } @media (max-width: 480px) { .flash-sale { padding: 10px; gap: 6px; } .flash-sale-left { font-size: 13px; } .flash-sale-right { font-size: 12px; line-height: 1.4; } } .timer { color: #ff8c00; } .scroll-container { display: flex; align-items: center; position: relative; overflow: hidden; /* Håller knapparna inom container */ } .custom-scroll-reviews { display: flex; overflow-x: auto; padding: 10px; gap: 20px; will-change: scroll-position; scroll-snap-type: x mandatory; scroll-behavior: smooth; width: 100%; /* Så att scroll-baren fyller utrymmet */ } .scroll-btn { background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; z-index: 1; /* Placera knapparna över andra element */ } .scroll-btn.left { left: 10px; } .scroll-btn.right { right: 10px; } .kajakerbjudande { position: relative; background: linear-gradient(135deg, rgb(0, 0, 0), rgba(0, 0, 0, 0.4)); padding: 20px; border-radius: 10px; color: #fff; } .header-banner-highlight { background-color: white; color: #007dbc; padding: 2px 7px; border-radius: 15px; font-weight: bold; margin-right: 10px; } .mobile-break { display: none; /* Dölj på större skärmar */ } @media (max-width: 768px) { /* Anpassa max-width om du vill */ .mobile-break { display: inline; /* Visa på mobila enheter */ } } .discount-percentage { position: absolute; top: 5px; /* Justera om du vill placera den högre eller lägre */ right: 5px; /* Placera på vänstra sidan för att undvika konflikt */ font-size: 12px; font-weight: bold; color: white; background-color: black; padding: 5px 10px; border-radius: 8px; z-index: 10; /* Se till att den hamnar över andra element */ } .production-description-intro { font-size: 13px; letter-spacing: normal; } /*bikebag*/ .comparison-section { background-color: #007bff; color: white; padding: 50px 0; } .comparison-table { background-color: white; border-radius: 15px; overflow: hidden; } .comparison-table td, .comparison-table th { padding: 15px; text-align: center; } .comparison-table th { background-color: #f8f9fa; font-weight: bold; } .check-mark { color: #28a745; font-size: 1.5rem; } .x-mark { color: #dc3545; font-size: 1.5rem; } .comparison-section { background-color: #007bff; color: white; padding: 50px 0; } .comparison-table { background-color: white; border-radius: 15px; overflow: hidden; } .comparison-table td, .comparison-table th { padding: 15px; text-align: center; } .comparison-table th { background-color: #f8f9fa; font-weight: bold; } .check-mark { color: #28a745; font-size: 1.5rem; } .x-mark { color: #dc3545; font-size: 1.5rem; } .cta-section { background-image: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/4932Q/files/cykelvaska-lander.jpg'); background-size: cover; background-position: center; color: white; text-align: center; padding: 100px 0; position: relative; } .cta-section .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; } .cta-section .content { position: relative; z-index: 2; } .cta-section h2 { font-size: 2.5rem; font-weight: bold; margin-bottom: 20px; } .live-counter { font-size: 16px; color: #333; } .live-counter strong { color: #d9534f; } .sticky-top { position: sticky; top: 0; z-index: 1000; /* Ensures it stays above other elements */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for depth */ background-color: #f8f9fa; /* Matches Bootstrap's bg-light */ border-bottom: 1px solid #ddd; /* Optional: Adds a subtle border */ } .cta-lander { background-color: #f7203a; color: white; padding: 10px 20px; text-decoration: none; display: block; text-align: center; font-size: 20px; font-weight: bold; border-radius: 5px; } .price-tag { font-size: 28px; color: #ff0000; text-align: center; text-decoration: line-through; } .new-price { font-size: 36px; color: #009900; text-align: center; font-weight: bold; } .product-property-line { padding: 5px 0px; } .addon-product-container { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 8px; gap: 12px; background: white !important; } .addon-product-image { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; } .addon-product-content { min-width: 0; } .addon-product-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; color: #012145; line-height: 1.3; word-wrap: break-word; } .addon-product-price { font-size: 13px; font-weight: 600; color: #012145; display: inline; margin-right: 8px; } .addon-product-link { font-size: 12px; color: #1e5a8e; text-decoration: none; white-space: nowrap; display: inline; } .addon-product-link:hover { text-decoration: underline; } .addon-product-container:has(input[type="checkbox"]:checked) { border-color: #003d6b; border-width: 1px; } /* Before after */ .before-after-container { position: relative; width: 100%; max-width: 800px; height: 400px; overflow: hidden; margin: auto; } .before-after-wrapper { position: relative; width: 100%; height: 100%; } .before-image, .after-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .after-image { clip-path: inset(0 50% 0 0); } .slider-handle { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; background-color: #fff; border: 2px solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: grab; z-index: 10; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .slider-handle:active { cursor: grabbing; } .slider-icon { font-size: 18px; color: #000; margin: 0 5px; } .before-arrow { transform: translateY(-1px); /* Justerar vertikalt */ } .after-arrow { transform: translateY(-1px); /* Justerar vertikalt */ } .pdp-accordion-button { width: 100%; border: none; border-bottom: 1px solid #e5e7eb; background: #ffffff; color: #012145 !important; text-align: left; font-size: 16px; font-weight: 600; padding: 18px 20px; display: flex; justify-content: flex-start; align-items: center; cursor: pointer; transition: background-color 0.2s ease; gap: 12px; } .pdp-accordion-button.collapsed { color: #012145; } .pdp-accordion-button:hover { background-color: #f8f9fa; } .pdp-accordion-button::after { content: ""; display: inline-block; width: 10px; height: 10px; border-right: 2.5px solid #003d6b; border-bottom: 2.5px solid #003d6b; transform: rotate(45deg); transition: transform 0.3s ease; margin-left: auto; } .pdp-accordion-button:not(.collapsed)::after { transform: rotate(-135deg); border-color: #003d6b; } .pdp-accordion-button:not(.collapsed) { background-color: #f8f9fa; border-bottom: 2px solid #003d6b; } .pdp-accordion-button:not(.collapsed) .accordion-icon { color: #003d6b; } .accordion-icon { font-size: 20px; width: 24px; height: 24px; color: #012145; transition: color 0.3s ease; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .pdp-accordion-button { padding: 16px 18px; font-size: 15px; } .accordion-icon { font-size: 18px; width: 22px; height: 22px; } } .discount-text { display: block; font-size: 13px; /* Keeps it compact */ color: #FFFDE0; text-transform: none; font-weight: 600 !important; line-height: 1.4; /* Slightly tighter spacing */ margin-top: -10px; /* Brings text closer without breaking layout */ } .erbjudande-text { display: inline-block; background: white; /* Ren vit bakgrund */ color: #333; /* Mörkgrå text för bättre läsbarhet */ font-size: 14px; font-weight: 500; /* Elegant, inte för fet */ padding: 6px 14px; /* Balanserad padding */ border-radius: 8px; /* Mjukt rundade hörn */ text-align: center; border: 1px solid rgba(0, 0, 0, 0.1); /* Subtil ljusgrå ram */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Väldigt mjuk skugga */ margin-bottom: 8px; white-space: normal; max-width: 100%; } .giphy-background { width: 100%; height: 100%; min-height: 400px; /* Anpassa höjden */ background-image: url("https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExanduZXJuNmY4b2RyNTNxZWF1ZTc2NzBtY3lmdngyMWl2bXoxN2M0biZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xVPTFFFa5sJ9ISfxQr/giphy.gif"); background-size: cover; background-position: center; border-radius: 10px; /* Rundade hörn, om du vill matcha bilden */ } .sidebar-cart-footer { height: auto !important; background-color: #fff !important; } .sidebar-cart-product-wrapper { max-height: calc(calc(var(--vh, 1vh) * 100) - 350px) !important; } .returns-policy-section { background-color: white; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 115, 182, 0.08); position: relative; overflow: hidden; } .returns-page-heading { font-weight: 700; color: #1A365D; position: relative; display: inline-block; margin-bottom: 1.5rem; } .returns-section-heading { font-weight: 600; color: #1A365D; margin-top: 2rem; margin-bottom: 1rem; } .returns-info-card { background-color: white; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 115, 182, 0.08); transition: all 0.3s ease; position: relative; z-index: 1; border-left: 4px solid #0073b6; } .returns-category-card { background-color: white; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 115, 182, 0.08); height: 100%; position: relative; z-index: 1; overflow: hidden; border-top: 4px solid #0073b6; } .returns-category-title { font-weight: 600; color: #1A365D; background-color: rgba(0, 115, 182, 0.1); padding: 10px 15px; border-radius: 12px 12px 0 0; } .returns-address-box { background-color: white; border-radius: 12px; border-left: 4px solid #FFA726; padding: 20px; margin-bottom: 20px; } .returns-address-box strong { color: #1A365D; } .returns-price-highlight { font-weight: 600; color: #0073b6; } .returns-info-icon { color: #0073b6; margin-right: 8px; } .returns-warning-text { font-weight: 600; color: #e74c3c; } .returns-address-list { list-style-type: none; padding-left: 0; } .returns-address-list li { padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .returns-address-list li:last-child { border-bottom: none; } .returns-products-list { list-style-type: none; padding-left: 0; } .returns-products-list li { padding: 8px 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; } .returns-products-list li:last-child { border-bottom: none; } .returns-contact-info { background-color: #FFF7ED; border-radius: 12px; padding: 15px; margin-top: 20px; } .returns-contact-info i { color: #0073b6; margin-right: 10px; } .returns-alert-box { background-color: rgba(255, 167, 38, 0.1); border-left: 4px solid #FFA726; padding: 15px; border-radius: 0 12px 12px 0; margin: 20px 0; } @media (max-width: 768px) { .category-card { margin-bottom: 1.5rem; } } .important-note { background-color: rgba(231, 76, 60, 0.1); border-left: 4px solid #e74c3c; padding: 15px; border-radius: 0 var(--border-radius) var(--border-radius) 0; margin: 20px 0; } .kategorisida-container { position: relative; overflow: hidden; font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; color: #140337; } .kategorisida-banner { background-size: cover; background-position: center; width: 100%; } .kategorisida-desktop { height: auto; min-height: 400px; max-height: 800px;∫ padding: 3rem 0; } .kategorisida-content { position: relative; z-index: 2; max-width: 800px; margin-right: auto; margin-left: auto; color: black; } .kategorisida-subtitle { line-height: 1.6; max-height: 50vh; overflow-y: auto; } .kategorisida-badge { display: inline-flex; align-items: center; background-color: rgba(255, 255, 255, 0.58); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); border-radius: 50px; padding: 0.5rem 1rem; white-space: nowrap; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin: 0.25rem; } .kategorisida-badge img { width: 18px; height: 18px; margin-right: 8px; } /* Endast för mobil */ @media (max-width: 767.98px) { .kategorisida-mobile { min-height: 450px; } } .uthyrning-hero-section { max-height: 400px; min-height: 400px; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: white; } .uthyrning-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .uthyrning-hero-content { position: relative; z-index: 1; max-width: 600px; padding: 0 15px; } .uthyrning-bullet-point { width: 8px; height: 8px; background-color: #0d6efd; border-radius: 50%; display: inline-block; margin-right: 10px; } .uthyrning-section { padding: 5rem 0; } .uthyrning-rounded-category { overflow: hidden; border-radius: 0.375rem; } .guide-section { padding: 100px 0; font-family: 'Inter', sans-serif; color: #212529; line-height: 1.7; } .guide-section h2 { font-size: 2.5rem; margin-bottom: 20px; } .header-info-bar { display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; gap: 16px !important; background-color: #F9F7F5; color: #1A2143; font-size: 14px; font-weight: 500; padding: 10px 20px; border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); width: 100%; } .header-info-bar .info-item { display: inline-flex !important; align-items: center !important; gap: 8px; white-space: nowrap; font-size: 13px; } .header-info-bar i { color: #1A2143; font-size: 15px; } .header-info-bar .divider { width: 1px; height: 18px; background-color: rgba(255,255,255,0.25); display: block; } @media (max-width: 768px) { .header-info-bar { gap: 12px !important; text-align: center; } .header-info-bar .divider { display: none !important; } } .klarna-usp img { width: 40px; height: auto; margin-bottom: 5px; /* Reduce from 10px to 5px */ } .usp-container { display: flex; justify-content: center; align-items: center; } .product-hover-overlay .laggikorg { background-color: #00b67a; color: white; } .youtube-wrapper { width: 80%; /* Justera storleken */ max-width: 480px; /* Sätt en maxbredd så den inte blir för stor */ margin: 0 auto; /* Centrerar den i mitten */ } .youtube-wrapper iframe { width: 100%; /* Låter den anpassa sig till förälderelementet */ height: auto; aspect-ratio: 16 / 9; /* Håller rätt proportioner */ display: block; border-radius: 8px; /* Valfritt, om du vill ha rundade hörn */ } .youtube-wrapper img { width: 100%; height: auto; display: block; border-radius: 8px; } /* Synlig och centrerad play-knapp */ .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(0, 0, 0, 0.7); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; /* Se till att knappen ligger över bilden */ } /* Skapa en ikon i mitten av knappen */ .play-button::before { content: "▶"; font-size: 24px; color: white; } .offer-feature-item { display: flex; align-items: center; margin-bottom: 10px; } .offer-feature-item svg { margin-right: 10px; min-width: 20px; } .offer-trust-badges { display: flex; justify-content: center; } .offer-trust-badge { display: flex; align-items: center; margin: 0 10px; color: #6c757d; font-size: 0.875rem; } .offer-trust-badge svg { margin-right: 5px; color: #28a745; } /* Grundläggande stil för select-elementet */ .sod_select.custom.rounded-category { border: 1px solid #e6e6e6; border-radius: 8px; background-color: white; padding: 8px 12px; font-size: 14px; color: #333; box-shadow: 0 1px 2px rgba(0,0,0,0.04); width: auto; min-width: 180px; height: auto; cursor: pointer; display: inline-block; position: relative; } /* Stil för pilen/chevron */ .sod_select.custom.rounded-category:after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; } /* Hover-tillstånd */ .sod_select.custom.rounded-category:hover { border-color: #c0c0c0; } /* Fokus-tillstånd */ .sod_select.custom.rounded-category:focus-within { outline: none; border-color: #4a90e2; box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15); } /* Dropdown-container (listan med alternativ) */ .sod_select.custom.rounded-category .sod_list_wrapper { border: 1px solid #e6e6e6; border-radius: 0 0 8px 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-top: -1px; } /* Alternativ i dropdown */ .sod_select.custom.rounded-category .sod_option { padding: 8px 12px; color: #333; transition: background-color 0.15s ease; } /* Hover på alternativ */ .sod_select.custom.rounded-category .sod_option:hover { background-color: #f5f5f5; } /* Aktivt/valt alternativ */ .sod_select.custom.rounded-category .sod_option.active, .sod_select.custom.rounded-category .sod_option.selected { background-color: #f0f7ff; color: #0066cc; } /* Justera texten inuti select */ .sod_select.custom.rounded-category .sod_label { padding-right: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; visibility: hidden; } .sod_select.custom.rounded-category .sod_label::after { content: "Filter"; /* Ersätt med bara "Filter" */ visibility: visible; position: absolute; left: 0; top: 0; } .hero-btn-optimized { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); color: #2c3e50; font-weight: 600; font-size: 0.95rem; white-space: nowrap; min-width: 160px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 1rem 2rem; text-decoration: none; display: inline-block; margin: 0.5rem 0.25rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .hero-btn-optimized:hover { color: #1a252f; text-decoration: none; transform: translateY(-2px) scale(1.02); background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1); } .hero-btn-optimized:active { transform: translateY(-1px) scale(1.01); transition: all 0.1s ease; } .hero-emoji { font-size: 1.2rem; margin-right: 0.5rem; } .qs-product-lowest-price { display: block !important; flex-basis: 100% !important; order: 2; margin-top: 6px; font-size: 14px; color: #333; } .pricehistory-tooltip { background-color: #fff !important; color: #000; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font-size: 13px; z-index: 9999; } .swiper-slide .img-fluid { width: 100%; height: auto; display: block; } .swiper-slide iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; } @media (max-width: 768px) { .detail-carousel { width: 100vw; margin-left: calc(-50vw + 50%); overflow-x: hidden; /* kombinerat i samma media query */ } } @media (min-width: 992px) { .detail-slider.swiper-container { height: auto !important; min-height: auto; } .sticky-product { position: -webkit-sticky; position: sticky; top: 20px; z-index: 10; background: white; height: auto !important; } } .price-wrapper .product-price { font-size: 24px; } @media (min-width: 992px) { .price-wrapper .product-price { font-size: 28px; } } .kajakgaranti { background-color: #012145; /* Grön bakgrundsfärg */ border-radius: 5px; /* Rundade hörn */ margin-right: 5px; padding: 2px 9px; /* Inre vaddering */ font-size: 14px; font-weight: 600; display: inline-block; /* Behåll detta för att visa som inline-block */ color: white; /* Vit textfärg */ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Textskugga för att förbättra kontrasten */ } .kajakgaranti { box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1); } .summer-campaign-info { background: #ffd600; border: 1px solid #001e3c; border-radius: 5px; margin-top: 5px; margin-bottom: 5px; padding: 10px 14px; font-size: 14px; font-weight: normal; display: flex; align-items: center; } .summer-campaign-info .text-primary { color: #001e3c !important; } .summer-campaign-info .text-muted { color: #001e3c !important; } .search-autocomplete-list { top: 100% !important; } #sidebarLeft .search-wrapper { display: flex; align-items: center; position: relative; } #sidebarLeft .search-wrapper input { flex-grow: 1; min-width: 0; border-radius: 12px 0 0 12px; height: 40px; } #sidebarLeft .input-group-append { flex-shrink: 0; height: 40px; z-index: 2; } #sidebarLeft .input-group-append button { height: 40px; border-radius: 0 12px 12px 0; } .modal-category-title { font-size: 0.85rem; font-weight: 600; margin-top: 0.5rem; text-align: center; color: #212529 !important; letter-spacing: 0.02em; } .mobile-nav-link { font-size: 1rem; font-weight: 600; color: #212529 !important; /* mörk text */ padding: 0.75rem 0; display: block; border-bottom: 1px solid #eee; transition: color 0.2s ease; } .modal-popular-header { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; color: #6c757d; text-transform: uppercase; margin-bottom: 1rem; } .hero-landing { position: relative; height: auto; min-height: 800px; padding: 56px 0 24px; overflow: hidden; width: 100vw; margin-left: calc(-50vw + 50%); } /* Bakgrundslager (bild + overlay) */ .hero-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; } .hero-media picture { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; line-height: 0; } .hero-media .hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } /* Innehållslager över bilden */ .hero-center { position: relative; z-index: 3; /* NYTT: höjd z-index för innehållet */ transform: none; top: auto; left: auto; } /* Rating-pill - UPPDATERAD för bättre alignment */ .hero-rating { display: inline-flex; /* NYTT: för bättre stjärn-alignment */ align-items: center; /* NYTT */ gap: 8px; /* NYTT: space mellan stjärnor och text */ color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); border-radius: 50rem; padding: .5rem .9rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, .25) inset, 0 3px 10px rgba(0, 0, 0, .25); } .hero-stars { display: inline-block; font-size: 1rem; letter-spacing: 2px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); } .hero-stars:before { content: "★★★★★"; background: linear-gradient(180deg, #ffd25a, #f0b72f); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Typografi */ .hero-title { color: #fff; line-height: 1.12; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); font-size: 60px; margin: .75rem 0 1rem; } .hero-intro { color: #fff; font-size: 18px; font-weight: 400; position: relative; padding-bottom: 1rem; margin-bottom: 1.25rem; } .hero-btn-primary { color: #1b1b1b; background: linear-gradient(180deg, #f6c567, #e3a93b); border: 0; border-radius: 50rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .3); min-width: 180px; padding: 14px 32px; } .hero-btn-secondary { color: #f1f1f1; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); border-radius: 50rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25); min-width: 180px; padding: 14px 32px; } .hero-btn-secondary:hover { background: rgba(255, 255, 255, .18); color: #fff; } /* Butiks-kort - FIXAD VERSION */ .hero-storecard { position: relative; margin-top: 1.25rem; max-width: 50%; color: #fff; background: rgba(40, 40, 40, .35); border-radius: 18px; border: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .hero-storecard .card-body { color: #fff; padding: 1rem 1.25rem; /* NYTT: mer luft för text */ } .hero-storecard strong { color: #fff; font-size: 14px; /* NYTT: tydligare storlek */ } .hero-storecard .small { color: rgba(255, 255, 255, .85); /* NYTT: lite transparens för hierarki */ line-height: 1.4; /* NYTT: bättre radavstånd */ } /* FIXAD mobil-layout - mer plats mellan knappar och storecard */ @media (max-width: 576px) { .hero-landing { min-height: 100%; padding: 0; display: flex; flex-direction: column; } .hero-center { position: relative; flex: 1; display: flex; flex-direction: column; text-align: center; margin-top: 3rem; padding-bottom: 140px; /* Från andra regeln */ } .hero-center .row { margin: 0; } .hero-center .col-12 { max-width: 100%; } .hero-title { font-size: 1.7rem; /* Från andra regeln */ line-height: 1.2; margin-bottom: 1rem; font-weight: 700; } .hero-intro { font-size: 15px; /* Från andra regeln */ margin: 0 auto 1rem; line-height: 1.4; padding-bottom: 0; } .hero-center .d-flex { display: flex !important; justify-content: center; align-items: center; /* Från andra regeln */ gap: 12px; margin: 1.5rem 0 2rem; flex-wrap: wrap; } .hero-btn-primary, .hero-btn-secondary { display: inline-block !important; padding: 10px 16px; /* Från andra regeln */ font-size: 0.9rem; min-width: 100px; /* Från andra regeln */ width: auto; /* Från andra regeln */ text-decoration: none; } .hero-storecard { position: relative; width: 85%; max-width: 240px; /* Från andra regeln */ margin: 1.5rem auto 0; background: rgba(15, 15, 15, .7); backdrop-filter: blur(12px); border-radius: 10px; box-shadow: 0 8px 25px rgba(0, 0, 0, .4); text-align: center; bottom: 10px; /* Från andra regeln */ } .hero-storecard .card-body { padding: 12px 12px; text-align: center; } .hero-storecard strong { font-size: 14px; display: block; margin-bottom: 3px; } .hero-storecard .small { font-size: 14px; line-height: 1.5; } } @media (min-width: 576.01px) and (max-width: 991.98px) { .hero-landing { min-height: 100%; padding: 0; display: flex; flex-direction: column; } .hero-center { position: relative; flex: 1; display: flex; flex-direction: column; text-align: center; margin-top: 3rem; padding-bottom: 140px; } .hero-media .hero-img { object-position: center 50%; } .hero-center .row { margin: 0; } .hero-center .col-12 { max-width: 100%; } .hero-title { font-size: 42px; line-height: 1.2; margin-bottom: 1rem; font-weight: 700; } .hero-intro { font-size: 17px; margin: 0 auto 1rem; line-height: 1.4; padding-bottom: 0; } .hero-center .d-flex { display: flex !important; justify-content: center; align-items: center; gap: 12px; margin: 1.5rem 0 2rem; flex-wrap: wrap; } .hero-btn-primary, .hero-btn-secondary { display: inline-block !important; padding: 10px 16px; font-size: 0.9rem; min-width: 100px; width: auto; text-decoration: none; } .hero-storecard { position: relative; width: 85%; max-width: 240px; margin: 1.5rem auto 0; background: rgba(15, 15, 15, .7); backdrop-filter: blur(12px); border-radius: 10px; box-shadow: 0 8px 25px rgba(0, 0, 0, .4); text-align: center; bottom: 10px; } .hero-storecard .card-body { padding: 12px 12px; text-align: center; } .hero-storecard strong { font-size: 14px; display: block; margin-bottom: 3px; } .hero-storecard .small { font-size: 14px; line-height: 1.5; } } .feature-box { background-color: #ffffff; border-radius: 16px; padding: 2rem 1rem 1.5rem; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06); transition: box-shadow 0.3s ease; height: 100%; display: flex; /* ⬅️ Flexbox för vertikal layout */ flex-direction: column; align-items: center; /* ⬅️ Centrerar rubrik + text korrekt */ text-align: center; } .feature-box:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08); } .icon-circle { color: #012145; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.8rem; } .feature-title { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; color: #0d0d0d; } .feature-text { font-size: 0.9rem; color: #444; line-height: 1.4; margin-bottom: 0; } .category-card { display: flex; flex-direction: column; background-color: white; border-radius: 12px; overflow: hidden; } .category-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .category-card .card-body { flex: 1; padding: 1rem; display: flex; flex-direction: column; justify-content: flex-start; } .card-img-overlay { background: rgba(0, 0, 0, 0.3); /* gör texten mer läsbar */ padding: 0.75rem; display: flex; align-items: flex-end; justify-content: center; text-align: center; } .overlay-content h5 { color: #fff !important; font-size: 1rem; margin-bottom: 0; } /* === THUMBNAIL STYLING === */ .swiper-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 0; width: 100%; box-sizing: border-box; } .swiper-thumbs::-webkit-scrollbar { display: none; } .swiper-thumb-item { flex: 0 0 auto; width: 80px; height: 80px; padding: 0 !important; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; margin-top: 5px; line-height: 0; } .swiper-thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; vertical-align: top; } .swiper-thumb-item.active { border-color: #007bff; } /* === HUVUDKARUSELL STYLING === */ .detail-carousel { max-width: 100%; box-sizing: border-box; overflow: hidden; } .detail-carousel .swiper-container { width: 100%; margin: 0 auto; overflow: hidden; position: relative; } .detail-carousel .swiper-wrapper { display: flex; align-items: flex-start; width: 100%; height: auto; } .detail-carousel .swiper-slide { flex: 0 0 auto; height: auto; padding: 0; margin: 0; } @media (min-width: 769px) { .detail-carousel .swiper-slide { width: 100%; max-width: 100%; } } .detail-carousel .swiper-slide > div { width: 100%; padding: 0; margin: 0; } .detail-carousel .swiper-slide img { width: 100%; height: auto; display: block; margin: 0; padding: 0; } /* === MOBIL ANPASSNINGAR === */ @media (max-width: 768px) { .detail-carousel { width: 100%; margin-left: 0; } .swiper-thumbs { padding: 0; margin: 0; } .bg-white.shadow-small.sticky-product { max-width: 100%; overflow: hidden; box-sizing: border-box; } } @media (min-width: 992px) { .detail-slider.swiper-container { height: auto !important; min-height: auto; } } .shipping-bonus-banner { position: relative; display: inline-flex; align-items: center; background: linear-gradient(135deg, #e6f2ff 0%, #f0f7ff 100%); border-radius: 8px; padding: 14px 16px 14px 0; margin: 12px 0; /* Tillbaka till 0 eftersom wrapper centrerar */ box-shadow: 0 2px 4px rgba(0, 61, 107, 0.08); gap: 14px; overflow: hidden; } .shipping-badge { background: #003d6b; color: white; font-weight: 700; font-size: 11px; letter-spacing: 0.5px; padding: 8px 20px 8px 16px; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); white-space: nowrap; flex-shrink: 0; margin-left: 0; } .shipping-content { flex: 1; display: flex; flex-direction: column; gap: 2px; } .shipping-title { font-size: 14px; font-weight: 600; color: #003d6b; line-height: 1.3; } .shipping-subtitle { font-size: 13px; color: #1e5a8e; line-height: 1.3; } /* Responsiv design */ @media (max-width: 768px) { .shipping-bonus-banner { padding: 14px 16px 14px 0; gap: 12px; } .shipping-badge { font-size: 10px; padding: 6px 14px 6px 12px; } .shipping-title { font-size: 13px; } .shipping-subtitle { font-size: 12px; } } .campaign-info { background: #e6f2ff; border-radius: 6px; margin-top: 8px; margin-bottom: 8px; padding: 12px 16px; font-size: 14px; font-weight: normal; display: flex; align-items: center; /* Ändrat från flex-start till center */ gap: 12px; } .campaign-info i { color: #003d6b; font-size: 18px; margin-right: 0; margin-top: 0; /* Borttaget margin-top */ flex-shrink: 0; line-height: 1; /* Lägg till för bättre kontroll */ } .campaign-info .campaign-text { color: #1e5a8e; line-height: 1.5; } .campaign-info .campaign-text b { color: #003d6b; font-weight: 600; } .addon-product-container { color: #012145 !important; } .product-advantages-content { padding: 20px 24px; background-color: #fff; } .advantages-list { list-style: none; padding: 0; margin: 0; } .advantage-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .advantage-item:last-child { border-bottom: none; } .advantage-icon { width: 24px; height: 24px; background: #003d6b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; margin-top: 2px; } .advantage-icon i { font-weight: 900; } /* Text styling */ .advantage-text { color: #012145; font-size: 14px; font-weight: 500; line-height: 1.5; flex: 1; } @media (max-width: 768px) { .product-advantages-content { padding: 16px 20px; } .advantage-item { gap: 10px; padding: 10px 0; } .advantage-icon { width: 22px; height: 22px; font-size: 11px; } .advantage-text { font-size: 13px; } } .package-content { padding: 20px 24px; background-color: #fff; } .package-list { list-style: none; padding: 0; margin: 0; } .package-item { position: relative; padding: 10px 0 10px 24px; color: #012145; font-size: 14px; line-height: 1.6; border-bottom: 1px solid #f0f0f0; } .package-item:last-child { border-bottom: none; } .package-item::before { content: "–"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #003d6b; font-size: 16px; font-weight: 600; line-height: 1; } @media (max-width: 768px) { .package-content { padding: 16px 20px; } .package-item { padding: 9px 0 9px 22px; font-size: 13px; } .package-item::before { content: "–"; left: 7px; top: 50%; transform: translateY(-50%); color: #003d6b; font-size: 15px; font-weight: 600; line-height: 1; } } .specs-table-wrapper { background-color: #fff; overflow-x: auto; } .specs-table { width: 100%; border-collapse: collapse; } .specs-row { border-bottom: 1px solid #f0f0f0; } .specs-row:last-child { border-bottom: none; } .specs-label { padding: 12px 16px 12px 0; color: #6b7280; font-size: 14px; font-weight: 500; text-align: left; width: 50%; vertical-align: top; } .specs-value { padding: 12px 0; color: #012145; font-size: 14px; font-weight: 500; text-align: left; vertical-align: top; } @media (max-width: 768px) { .specs-label, .specs-value { padding: 10px 12px 10px 0; font-size: 13px; display: block; width: 100%; } .specs-label { padding-bottom: 4px; } .specs-value { padding-top: 0; padding-bottom: 10px; } } label.font-weight-bold, .controls label.font-weight-bold, .form-group label.font-weight-bold, .option-row-custom, .option-row-custom-label { color: #012145 !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 10px !important; } .option-row-custom-variant-name { color: #012145 !important; font-size: 13px !important; font-weight: 500 !important; text-transform: capitalize !important; letter-spacing: 0 !important; } select.qs-cart-option.form-control { width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 500; color: #012145; background-color: #ffffff; border: 2px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23003d6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; height: auto; } select.qs-cart-option.form-control:hover { border-color: #003d6b; } select.qs-cart-option.form-control:focus { outline: none; border-color: #003d6b; box-shadow: 0 0 0 3px rgba(0, 61, 107, 0.1); } /* Mobilanpassning */ @media (max-width: 768px) { label.font-weight-bold, .controls label.font-weight-bold, .form-group label.font-weight-bold, .option-row-custom, .option-row-custom-label { font-size: 11px; } select.qs-cart-option.form-control { padding: 11px 14px; font-size: 13px; padding-right: 38px; } } .usp-section { background-color: #fff; padding: 20px 16px; border-radius: 8px; border: 1px solid #e5e7eb; margin: 16px 0; } .usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; } .usp-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 8px; } .usp-icon { width: 40px; height: 40px; background-color: #003d6b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .usp-text { font-size: 12px; font-weight: 600; color: #012145; line-height: 1.3; } .usp-klarna-logo { width: 50px; height: 40px; object-fit: contain; flex-shrink: 0; } .usp-countdown { text-align: center; font-size: 13px; color: #012145; font-weight: 500; padding-top: 12px; border-top: 1px solid #f0f0f0; } @media (max-width: 768px) { .usp-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .usp-section { padding: 16px 12px; } .usp-icon { width: 36px; height: 36px; font-size: 16px; } .usp-text { font-size: 11px; } .usp-klarna-logo { width: 45px; } } .btn-marine { background-color: #012145; color: #ffffff; border: 2px solid #012145; font-weight: 600; border-radius: 100px; transition: all 0.3s ease; } .btn-marine:hover { background-color: #023a6b; border-color: #023a6b; color: #ffffff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(1, 33, 69, 0.3); } .btn-white { background-color: #ffffff; color: #012145; border: 2px solid #012145; font-weight: 600; border-radius: 100px; transition: all 0.3s ease; } .btn-white:hover { background-color: #012145; border-color: #012145; color: #ffffff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(1, 33, 69, 0.3); } .gym-before-after-container { position: relative; width: 100%; max-width: 540px; height: 540px; overflow: hidden; margin: auto; } .gym-before-after-wrapper { position: relative; width: 100%; height: 100%; } .gym-before-image, .gym-after-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .gym-after-image { clip-path: inset(0 50% 0 0); } @media (max-width: 1200px) { .gym-before-after-container { max-width: 800px; height: 800px; } } @media (max-width: 768px) { .gym-before-after-container { max-width: 100%; height: 400px; } } .btn-photoswipe { display: none !important; } .cart-head { font-size: 1rem; margin-bottom: 0.5rem; font-weight: 700; line-height: 1.3; display: block; } .category-header { position: relative; width: 100vw; /* hela viewportens bredd */ left: 50%; margin-left: -50vw; /* bryter ut ur container */ overflow: hidden; } /* Bilden fyller sektionen utan vita kanter */ .category-header img { display: block; width: 100%; height: auto; /* bevarar proportioner */ object-fit: cover; /* täcker bredden */ object-position: center center; } .category-header img.mobile { display: none; } /* Desktop */ @media (min-width: 769px) { .category-header img { } } @media (max-width: 768px) { .category-header img.desktop { display: none; } .category-header img.mobile { display: block; } .category-header img { } } .bogo-offer { /*display: inline-block;*/ background: #333; color: white; font-size: 14px; font-weight: 500; /* Elegant, inte för fet */ padding: 6px 14px; /* Balanserad padding */ border-radius: 8px 8px 0px 0px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.1); border-bottom: none; /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */ margin-bottom: -3px; white-space: normal; max-width: 100%; } .bundle-offer-container { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; } .bundle-card { position: relative; flex: 1 1 30%; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 10px; background: #fff; text-align: center; transition: all .2s ease; cursor: pointer; } .bundle-price small { display:block; font-size:12px; color:#666; } .bundle-card:hover, .bundle-card.active { border-color: #012145; box-shadow: 0 0 8px rgba(0,0,0,0.08); } .bundle-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background-color: #e63946; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 6px; line-height: 1.2; z-index: 3; white-space: nowrap; /* hindrar radbrytning */ box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .bundle-badge.red { background-color:#22c55e; } .bundle-badge.purple { background-color:#fecc02; color: #012145; } .bundle-title { font-weight:700; font-size:16px; color:#012145; margin:2px 0; } .bundle-price { font-size:13px; color:#333; margin-bottom: 0; } #bundlePriceDisplay { margin-left: 8px; font-weight: 600; } #bundlePriceDisplay s { color: rgba(255,255,255,0.6); margin-right: 4px; } #bundlePriceDisplay strong { color: #fff; } #cart-discount-label { font-size: 13px; color: #49b74e; /* Samma gröna som checkout-knappen */ } .bundle-image { width: 45%; max-width: 70px; height: auto; border-radius: 6px; object-fit: contain; } .bundle-image-group { display: flex; justify-content: center; align-items: center; margin-bottom: 8px; position: relative; } .bundle-image-group .bundle-image { width: 60px; border-radius: 6px; object-fit: contain; transition: transform 0.2s ease; } /* overlap for multi-pack bundles */ .bundle-card[data-qty="2"] .bundle-image:nth-child(2) { margin-left: -15px; } .bundle-card[data-qty="3"] .bundle-image:nth-child(2) { margin-left: -20px; } .bundle-card[data-qty="3"] .bundle-image:nth-child(3) { margin-left: -20px; transform: scale(0.95); /* adds slight depth */ } .bundle-disclaimer { font-size: 12px; color: rgba(0,0,0,0.6); text-align: center; margin-top: 6px; font-style: italic; } .bundle-heading { text-align: center; font-size: 13px; font-weight: bold; color: white; margin-bottom: 8px; background: black; letter-spacing: normal; padding:2px; }