/* Optimize Font Loading & Rendering */ @font-face { font-family: 'YourCustomFont'; src: url('../fonts/yourfont.woff2') format('woff2'); /* Use WOFF2 for 30% better compression */ font-weight: 400; font-style: normal; font-display: swap; /* Prevents invisible text during loading (FOIT) */ } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: 'YourCustomFont', system-ui, -apple-system, sans-serif; /* Fallback to system fonts */ font-size: 16px; /* 2026 standard for accessibility & mobile readability */ line-height: 1.6; } /* Responsive Font Scaling */ @media (max-width: 768px) { body { font-size: 1.1rem; /* Slightly larger for easier mobile reading */ } } :root{--color-primary:#428bca;--color-border:#4870ba;--color-body-text:#666;--color-heading-text:#232323;--color-body-link:#666;--color-body-link-hover:#428bca;--color-product-title:#232323;--color-regular-price:#0051ba;--color-sale-price:#666;--btn-border-radius:4px;--color-btn-bg:#0051ba;--color-btn-text:#fff;--color-btn-bg-hover:#428bca;--color-btn-text-hover:#fff;--color-tip-bg:#fff;--color-tip-text:#333;--color-ratings:#0051ba;--input-border-radius:0;--color-input-bg:rgba(255, 255, 255, 0.5);--color-input-border:rgba(129, 129, 129, 0.2);--color-input-text:#282828;--color-cookie-bg:#0051ba;--color-cookie-txt:#fff;--color-cookie-link:#e6e2ef;--color-cookie-btn-bg:#fff;--color-cookie-btn-text:#000;--color-cookie-btn-bg-h:#22990f;--color-cookie-btn-text-h:#fff;--color-box-bg:#fff;--color-box-border:#e5e5e5;--box-border-radius:0;}.breadcrumb{background:#f9f9f9;padding-top:20px;padding-right:0px;padding-bottom:20px;padding-left:0px;color:#666;}.breadcrumb .page-heading{color:#232323;}.breadcrumb li:after{color:#666;}.breadcrumb a{color:#666;}.breadcrumb a:hover{color:#232323;}@media (max-width:991px){.breadcrumb{padding-top:10px;padding-right:0px;padding-bottom:10px;padding-left:0px;}}.lang-rtl .breadcrumb{padding-left:0px;padding-right:0px;}@media (max-width:991px){.lang-rtl .breadcrumb{padding-left:0px;padding-right:0px;}}body.boxed main{border:solid 3px #f8fbff;overflow:hidden;position:relative;margin:0 15px;box-shadow:2px 2px 5px 3px #fff;}@media (min-width:1300px){body.boxed main{max-width:127%;margin:0 auto;}}.container,.elementor-section.elementor-section-boxed > .elementor-container{max-width:97%;}body{background:#fff;color:var(--color-body-text, #666);}.tdstar:after{color:#0051ba;}.product-flags .discount,.product-flags .on-sale{background:#f46e6e;color:#fff;}.product-flags .new{background:#232323;color:#fff;}.product-flags .online-only,.product-flags .pack{background:#232323;color:#fff;}.product-flags .out_of_stock{background:#232323;color:#fff;}.product-price.has-discount .discount{background:#f46e6e;color:#fff;}table#product_comparison .discount-product,#mywishlist .discount-product,#view_wishlist .discount-product,table#product_comparison .discount-percentage,#mywishlist .discount-percentage,#view_wishlist .discount-percentage{background:#f46e6e;color:#fff;}.products.row{margin-left:calc(-20px/2);margin-right:calc(-20px/2);}.products.row > .col,.products.row > [class*="col-"]{padding-left:calc(20px/2);padding-right:calc(20px/2);margin-bottom:20px;}.products.row .slick-slider .product-miniature{padding-left:calc(20px/2);padding-right:calc(20px/2);margin-bottom:20px;}@media (max-width:767px){.products.row{margin-left:calc(-10px/2);margin-right:calc(-10px/2);}.products.row > .col,.products.row > [class*="col-"]{padding-left:calc(10px/2);padding-right:calc(10px/2);margin-bottom:10px;}.products.row .slick-slider .product-miniature{padding-left:calc(10px/2);padding-right:calc(10px/2);margin-bottom:10px;}}.product-miniature .product-container{border:none 1px;padding:0px;}@media (max-width:543px){}.products .product-miniature .product-container .variant-links{display:none !important;}#maintenance{background:#b1b1b1 url("https://jarmix.fi/img/cms/Taustakuva_sinitaivas_2500.jpg") center center / auto no-repeat fixed;color:#fff;}#maintenance a{color:#fff;}.loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1051;background-color:#fff;display:table;}.loader-wrapper .loader-section{display:block;position:relative;text-align:center;display:table-cell;vertical-align:middle;}html{font-size:13px;}@media (max-width:767px){html{font-size:13px;}}body{line-height:24px;}body{font-family:Arial, Helvetica, sans-serif;}.cbp-horizontal > ul > li > a{font-size:13px;font-style:normal;font-weight:500;text-transform:none;line-height:50px;color:#fff;padding-left:10px;padding-right:10px;}.cbp-horizontal > ul > li > a:hover{background:#0051ba;color:#fff;}.cbp-horizontal .cbp-tab-title{line-height:1em !important;}.cbp-horizontal .cbp-mainlink-icon,.cbp-horizontal .cbp-mainlink-iicon{font-size:30px;max-height:30px;}.cbp-hrmenu.cbp-vertical > ul{background:#e0e8f3;border:solid 2px #0051ba;box-shadow:0px 15px 25px 0px rgba(74, 63, 63, 0.15);z-index:1;}.cbp-hrmenu.cbp-vertical .cbp-vertical-title{font-size:14px;font-style:normal;font-weight:500;text-transform:uppercase;line-height:40px;color:#fff;background:#232323;}.cbp-hrmenu.cbp-vertical .cbp-vertical-title:hover{background:#0b6bbd;}.cbp-hrmenu.cbp-vertical > ul > li > a{font-size:13px;font-style:normal;font-weight:400;text-transform:uppercase;padding-top:8px;padding-bottom:8px;color:#000;border-top:solid 12px;}.cbp-hrmenu.cbp-vertical > ul > li > a .cbp-mainlink-icon,.cbp-hrmenu.cbp-vertical > ul > li > a .cbp-mainlink-iicon{font-size:13px;max-height:13px;}.cbp-hrmenu.cbp-vertical > ul > li > a:hover{color:#428bca;}.cbp-vertical.cbp-vert-expanded .cbp-vertical-title{background:#0b6bbd;}.cbp-hrmenu.cbp-vertical .cbp-hrsub-wrapper{top:0;margin-top:0px !important;min-height:100%;}.cbp-hrmenu.cbp-vertical .cbp-hrsub{min-height:100%;}.cbp-hrmenu.cbp-vertical .cbp-show{-js-display:flex;display:flex;flex-wrap:wrap;}.cbp-hrmenu.cbp-vertical .cbp-hrsub-inner{width:100%;}.cbp-hrmenu .cbp-hrsub{font-size:13px;font-style:normal;font-weight:400;text-transform:uppercase;}.cbp-hrmenu .cbp-hrsub-inner,.cbp-hrmenu ul.cbp-hrsub-level2{border:none 1px;box-shadow:0px 15px 25px 0px rgba(74, 63, 63, 0.15);}.cbp-hrmenu .cbp-hrsub-inner,.cbp-hrmenu .cbp-hrsub-inner a{color:#232323 !important;}.cbp-hrmenu .cbp-hrsub-inner a:hover{color:#428bca !important;}.cbp-hrmenu .cbp-tabs-names li a{color:#232323 !important;}.cbp-hrmenu .cbp-tabs-names li a:hover,.cbp-hrmenu .cbp-tabs-names li a.active{color:#428bca !important;}.cbp-hrmenu .cbp-links li a:before{display:none;}.cbp-hrmenu .cbp-links li a{padding-left:0;}.cbp-hrmenu .cbp-hrsub-inner .cbp-column-title{color:#232323 !important;border-bottom:none 1px;font-size:13px;font-style:normal;font-weight:600;text-transform:uppercase;}.cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:hover{color:#428bca !important;}#bitmegamenu-mobile{background:#fff;}.mobile-menu__submenu{background:#fff;}.mobile-menu__tab{border-bottom:solid 1px #ebebeb;min-height:46px;}.mobile-menu__link{color:#444 !important;padding-top:15px;padding-bottom:15px;font-size:16px;font-style:normal;font-weight:400;text-transform:none;}.mobile-menu__arrow{padding-top:15px;padding-bottom:15px;color:#444;font-size:16px;}.mobile-menu__tab-icon{font-size:16px;}.mobile-menu__tab-icon--img{max-height:16px;}.mobile-menu__legend{font-size:12px;font-style:normal;font-weight:400;text-transform:none;color:#fff;background-color:#444;}.mobile-menu__header-wrapper{color:#444;background-color:#f4f4f4;border-bottom:none 1px;}.mobile-menu__title{font-size:16px;font-style:normal;font-weight:400;text-transform:none;}.mobile-menu__column-title{font-size:16px;font-style:normal;font-weight:600;text-transform:uppercase;color:#444 !important;}.mobile-menu__column{font-size:14px;font-style:normal;font-weight:400;text-transform:none;color:#444;margin-bottom:30px;}.mobile-menu__column-categories:not(:last-child){margin-bottom:30px;}.mobile-menu__column-title{margin-bottom:10px;}.mobile-menu__links-list-li{padding-top:6px;padding-bottom:6px;}.mobile-menu__back-btn{color:#444;}@keyframes slideMenuLeft{0%{opacity:0;transform:translateX(100%);}100%{opacity:1;transform:translateX(0);}}@keyframes slideMenuRight{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(100%);}}/* Pakotetaan elementti näkyviin ja tyylitellään se */ #product-availability { display: flex !important; align-items: center !important; visibility: visible !important; opacity: 1 !important; margin-top: 12px !important; font-weight: bold; } /* Piilotetaan vanha ikoni */ #product-availability i { display: none !important; } /* Pallon perusmääritelmä */ #product-availability::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; } /* Vihreä tila */ #product-availability.is-in-stock { color: #24b946 !important; } #product-availability.is-in-stock::before { background-color: #24b946; } /* Keltainen tila */ #product-availability.is-last-items { color: #ff752d !important; } #product-availability.is-last-items::before { background-color: #ff752d; } /* Punainen tila */ #product-availability.is-out-of-stock { color: #ff2400 !important; } #product-availability.is-out-of-stock::before { background-color: #ff2400; } /* Taustaväri muuttuu punaiseksi vain, jos JavaScript on lisännyt 'has-error' luokan */ input.has-error { background-color: #ff9999 !important; border: 2px solid #ff0000 !important; } /* Kohdistus erityisesti "down"-painikkeeseen */ .btn-touchspin.js-touchspin.bootstrap-touchspin-down { background-color: #ED2939 !important; /* Vaihda haluamasi taustaväri */ color: #fff !important; /* Vaihda tekstin tai ikonin väri */ border-color: #000 !important; /* Valinnainen: reunaviivan väri */ } /* Jos haluat muuttaa myös "up"-painikkeen samalla kertaa */ .btn-touchspin.js-touchspin.bootstrap-touchspin-up { background-color: #00A86B !important; color: #fff !important; border-color: #000 !important; /* Valinnainen: reunaviivan väri */ } /* Vinkki: Lisää :hover-tila paremman käyttökokemuksen saamiseksi, Down-painike */ .btn-touchspin.js-touchspin.bootstrap-touchspin-down:hover { background-color: #D21F3C !important; color: #fff !important; border-color: #000 !important; /* Valinnainen: reunaviivan väri */ } /* Vinkki: Lisää :hover-tila paremman käyttökokemuksen saamiseksi, Up-painike */ .btn-touchspin.js-touchspin.bootstrap-touchspin-up:hover { background-color: #2E8B57 !important; color: #fff !important; border-color: #000 !important; /* Valinnainen: reunaviivan väri */ } /* Targets the .form-control (input) inside the checkout containers */ .form-control { background-color: #ecf3fa !important; border-color: #ccc !important; } /* Handles the focus state */ .form-control:focus { background-color: #eef4fa !important; outline: none !important; border-color: #aaa !important; } /* Specifically targets the alias field in the address form at checkout */ .js-address-form .form-group:has(input[name="alias"]), .js-address-form .field-alias { display: none !important; } /* Muuttaa noutopisteiden näytön ja valinnan taustavärin */ .form-control.form-select { background-color: #ecf3fa !important; /* Replace with your desired color */ } /* Lisää tekstin noutopisteiden valintakentän yläpuolelle */ .my-0::after { content: "Valitse tästä haluamasi paketin noutopiste:" !important; display: block !important; margin-top: 10px !important; margin-bottom: -5px !important; font-weight: bold !important; color: #3277b2 !important; /* Voit muuttaa tekstin värin tästä */ } /*Muuttaa kassalla noutopisteistä kertovan tekstin värin */ .my-0 { color: #3277b2 !important; } .step.unreachable { opacity: 0.3 !important; /* Makes the element 70% transparent */ } /* 1. Style the Circle around the icon */ .icons .icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; /* Ensure width and height are equal for a circle */ height: 40px; background-color: #ecf3fa !important; /* Change rounding icon background color */ border-radius: 50%; /* Makes it a perfect circle */ margin-right: 10px; } /* 2. Style the Icons (Line Awesome) */ .icons .icon i, .icons .edit i { color: #0051ba; /* Change icon color */ font-size: 1.1rem; /* Adjust icon size */ } /* 3. Style the Title Text */ .step-title:not(.page-subheading) { color: #0051ba; /* Change text color */ font-size: 16px; margin-top: 5px; } /* 4. Optional: Style the Edit button specifically */ .icons .edit { cursor: pointer; color: #00a86b !important; /* Different color for the edit pen */ } /* Step 1: Hide the original text */ .verticalblockcategories .title_block { visibility: hidden; position: relative; font-size: 14px; /* Sets the layout space to match the new text */ } /* Step 2: Insert and style the new custom text */ .verticalblockcategories .title_block::after { content: "Tuoteryhmät"; visibility: visible; position: absolute; top: 0; left: 0; /* Styling */ font-size: 14px; color: #428bca; font-weight: bold; } /* Evästeiden hyväksyntä palkin linkin tekstin väri */ .cc-link { color: #ffffff !important; /* Tekstin väri */ opacity: .95; } /* Evästeiden hyväksyntä palkin linkin tekstin väri, kun hiiri viedään painikkeen päälle (hover) */ .cc-link:hover { color: #e1fae1 !important; } /* Jatka ostoksia painikkeen väri kassalla */ .btn.btn-secondary.btn-wrap { background-color: #0051BA !important; /* Painikkeen taustaväri */ color: #ffffff !important; /* Tekstin väri */ } /* Jatka ostoksia painikkeen tyyli kassalla, kun hiiri viedään painikkeen päälle (hover) */ .btn.btn-secondary.btn-wrap:hover { background-color: #008000 !important; color: #ffffff !important; } * Rest of your existing hover styles for links */ .block-categories .category-sub-menu li a:hover { background-color: #ecf3fa; color: #000000; padding: 10px; margin-left: -10px; margin-right: 10px; display: block; /* Ensures the background color fills the width */ } /* Moduulin pääsäiliö (koko lohko) */ .block-categories { background-color: #ecf3fa; /* Esim. vaaleanharmaa tausta */ border: 1px solid #ffffff; /* Musta reunus */ padding: 10px 0px 0px 10px; /* Lisää hieman tilaa reunoille */ margin: 10px 0px 0px 0 px; /* Ylös/Alas: 0, Vasen/Oikea: 5px */ color: #000000; /* Valkoinen teksti */ } /* Alakategorioiden lista (jos haluat muuttaa vain listan taustaa) */ .block-categories .category-sub-menu { background-color: #ecf3fa; /* Valkoinen tausta listalle */ border: 1px solid #ecf3fa; /* Kevyt harmaa reunus listalle */ padding-left: 5px; /* Säädä tätä lukua siirtääksesi tekstiä enemmän oikealle */ margin: 0px 5px; /* Ylös/Alas: 0, Vasen/Oikea: 5px */ color: #000000; /* Valkoinen teksti */ outline: 5px solid #ecf3fa; /* Expands the visual background by 5px */ } /* Yksittäisen kategorialinkin tyyli hiiren ollessa päällä */ .block-categories .category-sub-menu li a:hover { background-color: #428bca; /* Taustaväri kun hiiri on päällä */ color: #ffffff; /* Valkoinen teksti */ padding: 5px 5px 5px 10px; /* Lisää hieman tilaa reunoille */ margin-left: -3px; /* Pulls left by half the expansion */ margin-right: -3px; /* Pulls right by half the expansion */ } .title_block.hidden-md-down { color: #0051ba; /* Change to your preferred color */ margin-top: 10px /* Adjus magin size Top as needed */ margin-left: 20px; /* Adjust margin size as needed */ margin-bottom: 0px; text-transform: uppercase; } /* Target the Add to Cart button in PrestaShop 9 */ .add-to-cart .btn-primary.add-to-cart, #add-to-cart-or-refresh .add-to-cart { display: flex !important; align-items: center; /* Vertical centering */ justify-content: center; /* Horizontal centering */ text-align: center; /* Fallback for older browsers */ width: 100%; /* Optional: ensures button takes full container width */ min-height: 45px; /* Optional: ensures consistent height across devices */ } /* Desktop: 5 products per row */ @media (min-width: 1200px) { #products .products .product-miniature, .featured-products .products .product-miniature { width: 20% !important; flex: 0 0 20% !important; max-width: 20% !important; } } /* Desktop: 4 products per row */ @media (min-width: 992px) and (max-width: 1199px) { #products .products .product-miniature, .featured-products .products .product-miniature { width: 25% !important; flex: 0 0 25% !important; max-width: 25% !important; } } /* Tablets: 3 products per row */ @media (min-width: 768px) and (max-width: 991px) { #products .products .product-miniature, .featured-products .products .product-miniature { width: 33.33% !important; flex: 0 0 33.33% !important; max-width: 33.33% !important; } } /* Mobile Devices: 1 products per row */ @media (max-width: 544px) { #products .products .product-miniature, .featured-products .products .product-miniature { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } } .homepage-heading { display: block !important; /* Shows the heading again */ color: #0051Ba; /* Change color (e.g., Red) */ font-size: 24px; /* Change size */ font-weight: bold; /* Change text to Bold */ text-transform: uppercase; /* Force all letters to uppercase */ } /* PrestaShop 9: Force product titles to occupy exactly 2 lines */ .product-miniature .product-title a, .products .product-description h3 a { display: -webkit-box; -webkit-line-clamp: 2; /* Limits text to 2 lines */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; /* Ensure space is reserved even for 1-line titles */ min-height: 2.8em; /* Adjust based on your line-height (e.g., 1.4em * 2) */ line-height: 1.4em; /* Standard readable line height */ height: 2.8em; /* Forces consistent height across all product cards */ } /* Hide the original text and replace it */ .showing { visibility: hidden; position: relative; } .showing::after { content: "Järjestä tuotteet:"; /* Replace with your desired text */ visibility: visible; position: right; left: 0; top: 0; white-space: nowrap; /* Prevents text from wrapping if necessary */ } /* Ensure the hero image container has a reserved height to prevent layout shifts */ .home-banner { min-height: 400px; /* Adjust to your banner's actual height */ aspect-ratio: 16 / 9; background-color: #f0f0f0; /* Placeholder color while loading */ } /* Prioritize display of text content */ .hero-text { display: block !important; visibility: visible !important; } /* Hide promo code button original text */ .promo-code button[type="submit"] { font-size: 0 !important; /* Hide original text */ } .promo-code button[type="submit"]::after { content: "aktivoi koodi"; /* Your custom text */ font-size: 12px; /* Reset font size for visibility */ display: inline-block; visibility: visible; text-transform: uppercase; } /* Target buttons and force sentence case */ button, .btn, input[type="button"], input[type="submit"] { text-transform: lowercase; } button::first-letter, .btn::first-letter, input[type="button"]::first-letter, input[type="submit"]::first-letter { text-transform: uppercase; } /* Make Quick-view button inside thumbnail invisible */ .quick-view { display: none !important; } /* Ensure the button below the image remains visible */ .product-description .quick-view, .product-information .quick-view { display: inline-block !important; } /* Force uppercase for the final checkout button */ #payment-confirmation button[type="submit"], .payment-options button.btn-primary { text-transform: uppercase !important; font-weight: bold; font-size: 18pxy; } /* 1. Ensure the parent container can position the tooltip */ #payment-confirmation { position: relative; } /* 2. Base styles (Desktop) */ #payment-confirmation:hover::after { content: "Hyväksythän vielä tilaus- ja toimitusehdot ja/tai valitse maksutapa, jotta voit hyväksyä tilauksesi ja siirtyä maksamiseen."; display: flex; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #FFFFFF; color: #FF0000; padding: 16px; border-radius: 6px; font-size: 14px; white-space: nowrap; z-index: 10; margin-bottom: 10px; pointer-events: none; box-shadow: 0px 4px 10px rgba(0,0,0,0.1); /* Added for visibility on white bgs */ } /* 3. Mobile Adjustments (Screens smaller than 768px) */ @media (max-width: 768px) { #payment-confirmation:hover::after { /* Allow text to wrap so it doesn't bleed off screen */ white-space: normal; /* Set a maximum width so the box stays within the viewport */ width: 90vw; max-width: 280px; /* Center the text for better readability on small screens */ text-align: center; justify-content: center; /* Ensure it is visible on tap */ display: flex; } } /* 4. Logic to hide the tooltip if the button is NOT disabled (customer accepted terms) */ #payment-confirmation:has(button:not([disabled]))::after { display: none !important; } /* 5. Optional: Add a small triangle/arrow below the tooltip */ #payment-confirmation:hover::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #333; margin-bottom: -2px; } /* 6. Ensure the disabled button doesn't block the hover event for the parent */ #payment-confirmation button:disabled { pointer-events: none; } /** * Highlight Payment Options: * If no payment option is checked, add a red border to the payment section. */ .checkout-step:has(.payment-options:not(:has(input:checked))) { border: 2px solid #FF0000; border-radius: 8px; padding: 0; transition: border 0.3s ease; } /** * Highlight Terms & Conditions: * If the terms checkbox is NOT checked, highlight the conditions-to-approve area. */ #conditions-to-approve:has(input[type="checkbox"]:not(:checked)) { border: 2px solid #FF0000; border-radius: 8px; padding: 15px 15px 5px 15px; margin-top: 10px; transition: border 0.3s ease; margin-bottom: 10px; /* Space under the highlight */ } /* Optional: Add a "Not Selected" message via CSS if you want to be extra clear */ .payment-options:not(:has(input:checked))::after { content: "Hups! Mikäli näet tämän tekstin, valitse vielä haluamasi maksutapa. HUOM! Maksut meille välittää: Visma Payments Oy (VismaPay)"; color: #FF0000; font-weight: bold; display: block; margin-bottom: 10px; } /* Remove highlights once conditions are met */ #conditions-to-approve:has(input[type="checkbox"]:checked) { border-color: transparent; } /* Lisää ostoskoriin -painikkeen tyylit tuotesivulla */ #add-to-cart-or-refresh .add-to-cart { background-color: #0051BA !important; /* Painikkeen taustaväri */ color: #ffffff !important; /* Tekstin väri */ text-transform: capitalize !important; /* Muuttaa ensimmäisen kirjaimen suuraakkoseksi */ } /* Tyyli, kun hiiri viedään painikkeen päälle (hover) */ #add-to-cart-or-refresh .add-to-cart:hover { background-color: #008000 !important; color: #ffffff !important; text-transform: capitalize !important; /* Muuttaa ensimmäisen kirjaimen suuraakkoseksi */ } /* Change checkout 'Continue' / 'Next Step' button color */ #checkout .checkout-step .continue, #checkout .cart-content-btn .btn-primary { background-color: #009900 !important; border-color: #009900 !important; color: #FFFFFF !important; /* Text color */ display: flex; justify-content: center; width: 90%; font-weight: bold; /* Change text to Bold */ text-transform: uppercase; /* This forces the text to be ALL CAPS */ /* Centering logic */ display: block; /* Changed from flex to block for margin centering */ margin: 0 auto !important; /* Centers the element horizontally */ } /* Optional: Change color on hover */ #checkout .checkout-step .continue:hover, #checkout .cart-content-btn .btn-primary:hover { background-color: #008000 !important; border-color: #008000 !important; display: flex; justify-content: center; width: 90%; font-weight: bold; /* Change text to Bold */ text-transform: uppercase; /* This forces the text to be ALL CAPS */ /* Centering logic */ display: block; /* Changed from flex to block for margin centering */ margin: 0 auto !important; /* Centers the element horizontally */ } /* Change button background and text color */ #payment-confirmation button[type="submit"] { background-color: #009900 !important; /* Green example */ border-color: #009900 !important; color: #FFFFFF !important; display: flex; justify-content: center; width: 90%; font-weight: bold; /* Change text to Bold */ text-transform: uppercase; /* This forces the text to be ALL CAPS */ /* Centering logic */ display: block; /* Changed from flex to block for margin centering */ margin: 0 auto !important; /* Centers the element horizontally */ } /* Change color on hover */ #payment-confirmation button[type="submit"]:hover { background-color: #008000 !important; border-color: #008000 !important; color: #FFFFFF !important; display: flex; justify-content: center; width: 90%; font-weight: bold; /* Change text to Bold */ text-transform: uppercase; /* This forces the text to be ALL CAPS */ /* Centering logic */ display: block; /* Changed from flex to block for margin centering */ margin: 0 auto !important; /* Centers the element horizontally */ } .product-brand { display: none !important; } :root { --color-input-border:rgba(0, 81, 186, 1); /* light blue */ } /* Hide the "New" text label */ .product-flag.new::before { display: none; } .product-flag.new { position: absolute; top: -7px; /* Increase this negative number to move it further up */ left: 0; /* existing styles (background, color, etc.) */ } /* Apply a background image and control its appearance */ .product-flag.new { /* Replace 'Lippu-uusi-tuote.png' with the actual path to your image */ background-image: url('/themes/PRS028/Lippu-uusi-tuote.png'); background-size: contain; /* or 'cover' or specific dimensions like '30px 30px' */ background-repeat: no-repeat; background-position: center; /* Adjust as needed */ /* Set dimensions for the flag area to accommodate the image */ width: 65px; /* Adjust width as per your image size */ height: 65px; /* Adjust height as per your image size */ text-indent: -9999px; /* This is an alternative way to hide the text visually */ /* Remove default background color and padding if necessary */ background-color: transparent; padding: 0; } /* Replace the Out of Stock flag with a custom image */ .product-flags .product-flag.out_of_stock { background-image: url('/themes/PRS028/Lippu-tuote-loppu.png') !important; background-size: contain; background-repeat: no-repeat; background-color: transparent !important; color: transparent !important; /* Hides the original "Out of Stock" text */ width: 65px; /* Adjust based on your image size */ height: 65px; /* Adjust based on your image size */ border: none; padding: 0; text-indent: -9999px; /* Ensures text is hidden but stays SEO-friendly */ } .header-hello { display: block; font-size: 13px; line-height: 1.2; opacity: 0.7; } .header-name { display: block; color: #0051ba; font-size: 14px; font-weight: 600; line-height: 1.2; } /* Hide payment text, show only logo */ .payment-option label { font-size: 0; } /* Ensure logo is centered */ .payment-option img { display: block; margin: auto auto; } /* Show payment name ONLY for Bank Transfer */ #payment-option-21-container .custom-control-label { font-size: 14px; /* restore text */ font-weight: 600; justify-content: left; gap: 8px; } /* Hide logo if any exists (optional safety) */ #payment-option-21-container .custom-control-label img { display: none; } /* Make payment options grid (3 per row) */ #checkout-payment-step .payment-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 768px) { #checkout-payment-step .payment-options { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { #checkout-payment-step .payment-options { grid-template-columns: 1fr; } } /* Highlight full payment option when selected */ .payment-option:has(.custom-control-input:checked) { /* light blue */ box-shadow: 4px 4px 4px 7px rgba(0, 81, 186, 1); /* soft focus ring */ background: #f8fbff; padding-left: 15px; padding-top: 10px; }