/* * Design-justering av Woodmarts INBYGGDA sticky add-to-cart-bar (funktionen * själv är oförändrad - bara aktiverad i temats inställningar, se * Theme Settings > Single product > Add to cart). Ändrar INTE Woodmarts * egna filer (skrivs över vid temauppdatering) - denna fil laddas EFTER * Woodmarts egen CSS (se functions.php: woodmart_child_enqueue_styles * kör på prioritet 10010) och är mer specifik (klass + klass), så den * vinner i cascaden. Bakgrundsfärgen på Add to cart-knappen sätts ändå med * !important - Woodmarts egen accentfärg (#d12c2c) kommer troligen från en * dynamiskt injicerad "tema-accentfärg"-regel, säkrast att inte lita på * cascade-ordning för just den. * * Bort med bokmärke/jämför-ikonerna, och resten av baren fräschas upp till * en rundare, mer "premium/Shopify"-känsla (rundade hörn, tunnare gråa * kantlinjer, fetare typsnitt) istället för Woodmarts fyrkantiga * standardutseende - och bytt till SAMMA röda märkesfärg * (var(--wd-primary-color)) som alla andra knappar/accenter vi byggt i * child-temat (recensionssidans "Write a review", FAQ-formuläret, etc.) * istället för Woodmarts egen, något ljusare rödton - så sticky-baren känns * som en del av samma sajt, inte ett Woodmart-standardelement. * * Bara från 769px och uppåt: på mobil tvingar Woodmart redan knappen till * en fyrkantig, edge-to-edge-bar (border-radius:0 !important i deras egen * CSS) - rätt känsla där (en helbred knapp ska inte ha rundade hörn, och en * flytande kort-widget känns fel på en liten skärm), så mobilversionen * lämnas orörd. * * UPPDATERAT: hela baren är nu ett FLYTANDE kort i nedre högra hörnet * (position + storlek) istället för en helbred rad längst ner - Woodmarts * egen .container-klass på .wd-sticky-btn-container (samma bredd/padding * som resten av sajtens innehåll) nollställs därför också, annars hade * kortet fortsatt sträcka sig till sajtens fulla innehållsbredd. * * bottom: 24px, samma som right - kortet ligger nu tight i hörnet enligt * önskemål. OBS: sajten har en Crisp-chattbubbla i samma hörn, men den * går inte att verifiera i den lokala dev-miljön (kräver en Crisp- * website-ID-konfiguration som inte finns här) - kontrollera överlappet * i produktion och hör av dig om avståndet behöver justeras igen. * * !important på inset/box-shadow/padding: Woodmart laddar * woo-opt-sticky-add-to-cart.css via ett eget, senare laddningssystem - * den filen hamnar i praktiken EFTER den här i trots att den här * enqueue:as på prioritet 10010 (kontrollerat i webbläsaren). Samma * specificitet (.wd-sticky-btn, en klass, i båda) + Woodmarts fil sist = * deras regel vinner annars cascade-striden på just de här egenskaperna. * * Uttoning nära footern hanteras av JS (se * assets/js/sticky-add-to-cart-footer-fade.js), som sätter opacity direkt * på elementet - påverkar bara opacity, aldrig transform/display, så det * krockar inte med Woodmarts egen visa/dölj-logik (.wd-sticky-btn-shown). */ .wd-sticky-btn .wd-wishlist-btn, .wd-sticky-btn .wd-compare-btn { display: none; } @media ( min-width: 769px ) { .wd-sticky-btn { inset: auto 24px 24px auto !important; width: auto !important; max-width: 520px; border-top: none; border-radius: 16px !important; box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.16 ) !important; padding: 14px 16px !important; /* Woodmarts egen glid-in-animation (translate3d 100% -> 0) förutsätter en HELBRED bar - kortet "startade" därför nere vid skärmens absoluta botten (skiftat neråt med sin EGEN höjd, som råkar vara i linje med kanten) och gled sedan upp till den korrekta bottom:96px-positionen ovan, vilket såg ut som att den dök upp fel och rättade till sig. transform:none stänger av den glidningen helt - kortet ligger alltid kvar på sin rätta plats, opaciteten (styrs av assets/js/sticky-add-to-cart-visibility.js) sköter hela in/ut- toningen istället. */ transform: none !important; /* !important - Woodmarts egen transition: transform 0.5s ...-regel (samma senare-laddning-vinner-trots-enqueue-prioritet som övriga !important ovan) skrev annars över HELA denna shorthand, så opacity-ändringen skedde utan någon transition alls - kortet "poppade" upp/bort istället för att tona. */ transition: opacity 0.35s ease !important; /* Dold som STANDARD redan i CSS:en (INTE !important - JS:ens vanliga inline style måste kunna skriva över detta för att visa kortet, se assets/js/sticky-add-to-cart-visibility.js). Utan detta var kortet synligt (opacity 1 är webbläsarens eget default) under den korta stund innan JS:en hunnit köra och sätta rätt opacity vid sidladdning - syntes till som ett kort blink uppe vid produktfältet innan det försvann och kom tillbaka rätt vid scroll. */ opacity: 0; pointer-events: none; } /* Woodmarts egen site-wide .container (max-width + auto-marginal) - nollställs så kortet krymper till sitt innehåll istället för att sträcka sig till sajtens innehållsbredd. */ .wd-sticky-btn .container { width: auto; max-width: none; margin: 0; padding: 0; } .wd-sticky-btn-content { flex: 0 1 auto; min-width: 0; } /* Utan denna krymper flexboxen fel del: .wd-sticky-btn-cart (pris + antal + knapp) klämdes annars ihop TRÅNGARE än sina egna barns naturliga bredd (pris+antalsväljare+knapp tillsammans, ~355px) och knapptexten klipptes av mitt i ordet - flex:0 0 auto tvingar hela kortet att istället växa (upp till max-width ovan) för att ge den delen sin fulla, tänkta bredd. */ .wd-sticky-btn-cart { flex: 0 0 auto; } .wd-sticky-btn-info { min-width: 0; } .wd-sticky-btn .wd-entities-title { overflow: hidden; max-width: 130px; color: #111; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .wd-sticky-btn .price { margin-inline-end: 10px; color: var( --wd-primary-color, #8a1f1f ); font-weight: 700; } .wd-sticky-btn-thumbnail img { border: 1px solid #ececec; border-radius: 10px; } .wd-sticky-btn .quantity { display: flex; flex: 0 0 auto; align-items: center; overflow: hidden; border: 1px solid #ddd; border-radius: 10px; background: #fff; } .wd-sticky-btn .quantity .qty { width: 34px; border: none; background: none; } .wd-sticky-btn .quantity .minus, .wd-sticky-btn .quantity .plus { border: none; background: #f7f7f7; color: #555; } .wd-sticky-btn .single_add_to_cart_button { flex: 0 0 auto; border-radius: 10px; background: var( --wd-primary-color, #8a1f1f ) !important; border-color: var( --wd-primary-color, #8a1f1f ) !important; padding: 11px 20px; font-size: 13px; font-weight: 700; white-space: nowrap; transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .wd-sticky-btn .single_add_to_cart_button:hover { filter: brightness( 0.92 ); transform: translateY( -1px ); box-shadow: 0 6px 14px rgba( 138, 31, 31, 0.25 ); } /* Woodmart reserverar annars plats i sidfoten för en helbred bar (padding-bottom: var(--wd-sticky-btn-height)) - onödigt för ett litet flytande kort som redan tonar bort innan footern, och skulle bara lämna ett tomt mellanrum ovanför footern. */ .wd-sticky-btn-on { padding-bottom: 0 !important; } }