:root{--green:#16724a;--green-dark:#0d5235;--green-hover:#1a8558;--green-light:#e6f4ed;--text:#1a2b22;--text-sec:#5a6e62;--text-ter:#5a6e62;--border-light:#eef2ef;--border:#dde5df;--gold:#8a6508} /* Header */ .site-header{border-bottom:1px solid var(--border-light)} .site-header .inside-header{padding:12px 40px!important;display:flex!important;align-items:center!important;justify-content:space-between!important} .site-branding{display:flex!important;align-items:center!important;gap:10px} .site-branding .main-title{font-size:17px;font-weight:400;letter-spacing:-.3px;display:flex!important;align-items:center!important;gap:8px} .site-branding .main-title a{display:flex!important;align-items:center!important;gap:8px;text-decoration:none!important;color:var(--text)!important} .site-branding .main-title a::before{content:'K';display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--green);color:#fff;border-radius:8px;font-weight:800;font-size:16px;flex-shrink:0} .site-branding .main-title a strong{font-weight:700} .site-branding .main-title a{word-spacing:-.15em} .site-branding .site-description{display:none} /* Nav — clean inline */ .main-navigation .main-nav>ul>li>a{padding:8px 14px;border-radius:6px;font-size:14px;font-weight:500;color:var(--text-sec);transition:.15s;background:transparent!important} .main-navigation .main-nav>ul>li>a:hover{background:var(--green-light)!important;color:var(--green)} .main-navigation .main-nav>ul>li.current-menu-item>a{color:var(--green);background:transparent!important} /* WC cart i nav — grön knapp som mockupen */ .wc-menu-item{background:transparent!important;list-style:none} .main-navigation .main-nav>ul>li.wc-menu-item>a, .main-navigation .main-nav>ul>li.wc-menu-item>a.cart-contents, .main-navigation .main-nav>ul>li.wc-menu-item>a.shopping-bag, #site-navigation .wc-menu-item a.cart-contents{ display:flex!important;align-items:center!important;gap:6px; background-color:#16724a!important;color:#fff!important; padding:8px 16px!important;border-radius:10px!important; font-size:14px!important;font-weight:600!important;transition:.15s!important;text-decoration:none!important} #site-navigation .wc-menu-item a.cart-contents:hover{background-color:#1a8558!important} .wc-menu-item a .cart-label{color:#fff!important;font-size:14px;font-weight:600} .wc-menu-item a .number-of-items{background:#fff!important;color:#16724a!important;min-width:20px;height:20px;border-radius:50%;display:inline-flex!important;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1} .shopping-bag::before{display:none!important} .wc-menu-item a .amount{display:none!important} /* Top bar */ .top-bar{background:var(--green-dark);color:rgba(255,255,255,.85);text-align:center;padding:10px 20px;font-size:13px;font-weight:500;letter-spacing:.3px} .top-bar strong{color:#a3e4c1} /* Homepage */ .page-id-44 .site-content,.page-id-44 .inside-article{background:transparent;box-shadow:none} .page-id-44 .inside-article,.page-id-44 .entry-content{padding:0} .page-id-44 .content-area{margin:0} /* Buttons */ button,.button,.wp-block-button__link,input[type="submit"],.woocommerce a.button,.woocommerce button.button{background:var(--green);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;transition:.15s} button:hover,.button:hover,.wp-block-button__link:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--green-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(22,114,74,.15)} .is-style-outline .wp-block-button__link{background:#fff;color:var(--text);border:1px solid var(--border-light)} .is-style-outline .wp-block-button__link:hover{border-color:var(--green);color:var(--green);background:#fff;transform:none;box-shadow:none} /* WC fullbredd, ingen sidebar */ .woocommerce .site-content,.tax-product_cat .site-content,.post-type-archive-product .site-content{padding:20px 40px!important} .woocommerce .inside-article,.tax-product_cat .inside-article{padding:0!important} .woocommerce #right-sidebar,.woocommerce .sidebar,.tax-product_cat #right-sidebar,.post-type-archive-product #right-sidebar,.woocommerce .widget-area{display:none!important} .woocommerce .content-area,.woocommerce #primary,.tax-product_cat .content-area,.tax-product_cat #primary,.post-type-archive-product .content-area,.post-type-archive-product #primary{width:100%!important;max-width:100%!important;float:none!important} .woocommerce .site-content .content-area{margin-right:0!important} /* Product grid — 3 kolumner */ .woocommerce ul.products{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:16px!important;float:none!important} .woocommerce ul.products li.product{width:100%!important;float:none!important;margin:0!important;background:#fff;border:1px solid var(--border-light);border-radius:16px;overflow:hidden;transition:.2s;padding:0!important} .woocommerce ul.products li.product:hover{border-color:var(--green-light);box-shadow:0 8px 28px rgba(22,114,74,.08);transform:translateY(-2px)} /* Bild 160px */ .woocommerce ul.products li.product .wc-product-image{height:160px!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#f5f7f6!important;border-bottom:1px solid var(--border-light)!important} .woocommerce ul.products li.product .wc-product-image .inside-wc-product-image{width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important} .woocommerce ul.products li.product .wc-product-image img,.woocommerce ul.products li.product a img{height:140px!important;width:auto!important;max-width:85%!important;object-fit:contain!important;background:transparent!important;padding:0!important;margin:0 auto!important;display:block!important} /* Kort-text */ .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px!important;font-weight:600!important;color:var(--text);padding:10px 16px 2px!important;margin:0!important;line-height:1.3!important} .woocommerce ul.products li.product .kb-product-type{padding:0 16px!important;margin:2px 0 0!important;font-size:12px!important;color:var(--text-ter);line-height:1.4!important} .woocommerce ul.products li.product .price{font-size:17px!important;font-weight:700!important;color:var(--green-dark);padding:4px 16px 0!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3!important} .woocommerce ul.products li.product .price del{font-size:13px!important;font-weight:400;color:var(--text-ter)} .woocommerce ul.products li.product .price ins{text-decoration:none} .woocommerce ul.products li.product .kb-per-tab{padding:0 16px!important;margin:2px 0 0!important;font-size:11px!important;line-height:1.3!important} .woocommerce ul.products li.product .star-rating{margin:2px 16px 0!important} /* Köp-knapp */ .woocommerce ul.products li.product a.button,.woocommerce ul.products li.product a.add_to_cart_button{margin:8px auto 14px!important;width:calc(100% - 32px)!important;text-align:center;background:var(--green)!important;color:#fff!important;border-radius:8px!important;padding:10px!important;font-size:14px!important;font-weight:600!important;display:block!important;transition:.15s!important} .woocommerce ul.products li.product a.button:hover,.woocommerce ul.products li.product a.add_to_cart_button:hover{background:var(--green-hover)!important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,114,74,.2)} /* Single product */ .single-product .entry-summary .price{font-size:28px;font-weight:700;color:var(--green-dark)} .single-product .single_add_to_cart_button{border-radius:10px;padding:14px 32px;font-size:15px;font-weight:600} /* Footer */ .site-footer,.footer-widgets-container,.footer-widgets{background:var(--green-dark)} .footer-widgets .widget-title{color:rgba(255,255,255,.85);font-size:14px;font-weight:600} .footer-widgets,.footer-widgets a,.footer-widgets p{color:rgba(255,255,255,.5);font-size:13px} .footer-widgets a:hover{color:rgba(255,255,255,.8)} .site-info{background:#0a3d28} .site-info,.site-info a{color:rgba(255,255,255,.3);font-size:12px} /* Misc */ a{color:var(--green)} a:hover{color:var(--green-hover)} ::selection{background:var(--green-light);color:var(--green-dark)} /* Responsive */ @media(max-width:768px){ .woocommerce ul.products{grid-template-columns:repeat(2,1fr)!important;gap:12px!important} .woocommerce ul.products li.product .wc-product-image{height:130px!important} .woocommerce ul.products li.product .wc-product-image img,.woocommerce ul.products li.product a img{height:110px!important} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:13px!important;padding:8px 12px 2px!important} .woocommerce ul.products li.product .price{font-size:14px!important;padding:0 12px!important} .woocommerce ul.products li.product a.button{margin:6px 12px 10px!important;width:calc(100% - 24px)!important;font-size:12px!important;padding:7px!important} } @media(max-width:480px){ .woocommerce ul.products{grid-template-columns:1fr!important} } /* ===== Tillgänglighetsfixar (WCAG-kontrast + mobil header-overlap) — 2026-07-28 ===== */ /* Länkar i brödtext/artikelinnehåll: GP:s tema-CSS (.inside-article a) vann över den tänkta märkesgröna länkfärgen pga högre specificitet och renderade i #059669 (3.28:1 mot #efefef). Återställ till den tänkta märkesgrönan var(--green) som ger 5.16:1. */ .inside-article a:not(.button):not(.checkout-button):not(.wp-block-button__link):not([style*="color"]),.paging-navigation a:not(.button):not([style*="color"]),.comments-area a:not(.button):not([style*="color"]),.page-header a:not(.button):not([style*="color"]),.entry-content a:not(.button):not(.checkout-button):not(.wp-block-button__link):not([style*="color"]){color:var(--green)!important} /* REGRESSION-FIX 2026-07-28 (samma dag): ovanstående brödtextlänk-regel traffade av misstag "Ga till kassan"-knappen (a.checkout-button.button.alt) eftersom den ligger i .entry-content, vilket gav gron text (#16724a) pa bla bakgrund (#1e73be) = ~1.20:1. Undantagen ovan (:not(.button) osv) racker for att fixa det, men sakrar aven explicit har ifall nagon annan knapp-klass skulle matcha i framtiden. */ .entry-content a.button,.entry-content a.checkout-button,.inside-article a.button{color:#fff!important} /* Aktiv-menyfix: dropdown-foraldrar (t.ex. "Guider" nar en undersida ar aktiv) far klasserna current-menu-ancestor/current-menu-parent, INTE current-menu-item - den tidigare fixen (rad 17) traffade bara current-menu-item och missade darfor detta fall, som fallerade tillbaka pa temats standardfarg #059669 mot vit bakgrund = 3.77:1 (under 4.5:1-kravet). */ .main-navigation .main-nav>ul>li.current-menu-ancestor>a, .main-navigation .main-nav>ul>li.current-menu-parent>a{color:var(--green)!important;background:transparent!important} /* WooCommerce felmeddelande (kassa-validering + Mitt konto-inloggningsfel): vit text på #e8626d gav bara 3.28:1. Mörkare röd ger 4.86:1. Länken i rutan (t.ex. "Lost your password?") ärvde tidigare grön länkfärg (~1.15:1 mot röd bakgrund) eftersom WC:s