/* Font: Outfit. Loaded via in _partials/head.tpl (NOT via @import — that causes a serial waterfall: theme CSS must download + parse before the @import fires its own request. in downloads in parallel with theme CSS.) */ /* ============================================================ v186 — Revert v185's universal *::before/*::after font-family override. ------------------------------------------------------------ v185 added: *, *::before, *::after { font-family: 'Outfit' !important; } That broke icons rendered via CSS pseudo-elements: classic uses `.btn-comment::before { content: "\E70F"; font-family: "Material Icons" }` for the review-write pen icon, and `.touchspin-up::after { content: "\E5CE" }` for quantity stepper arrows. Our universal override won the specificity+!important fight and replaced Material Icons with Outfit, so those pseudo-elements rendered the codepoints in Outfit (which doesn't have those glyphs) → tofu boxes / blank space. Reality check from theme.css inspection: Manrope WAS NEVER ACTUALLY downloaded — our existing body/html font-family rules already steered everything to Outfit. The 60 KiB woff2 we kept chasing is Material Icons, which is genuinely needed for visible UI (pen, arrows, cart, search, menu chevrons). Keeping Material Icons loaded is correct. Fix: remove the universal override entirely. Keep the html-level font-family for inheritance, keep Material Icons working as-is. ============================================================ */ /* html-level font-family — overrides classic's `html { font-family: Manrope }` so the inheritance default is Outfit. Body and other elements already covered by specific rules elsewhere in this file. */ html { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --k-olive: #7C9039; --k-olive-dark: #5E7A2A; --k-olive-darker: #4A6020; --k-deep: #2E3320; --k-amber: #A6792E; --k-amber-light: #F3E7D6; --k-bg: #F2F5EC; --k-surface: #FFFFFF; --k-tint: #EDF1E2; --k-border: #E6EAD9; --k-muted: #8A9170; --k-text: #2E3320; --k-text-soft: #5A6348; --k-dark-img: #11140C; --k-radius: 14px; --k-radius-sm: 10px; --k-radius-pill: 24px; --k-shadow: 0 1px 3px rgba(46,51,32,0.06), 0 4px 16px rgba(46,51,32,0.04); --k-shadow-hover: 0 6px 24px rgba(46,51,32,0.10); --k-maxw: 1280px; } body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--k-bg); color: var(--k-text); font-weight: 400; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .h1, .h2, .h3 { font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--k-deep); letter-spacing: -0.4px; } a { color: var(--k-olive-dark); } a:hover { color: var(--k-olive); text-decoration: none; } .container { max-width: var(--k-maxw); } /* NOTE: .container-fluid intentionally excluded — it must stay full-width per Bootstrap conventions. Constraining it broke the checkout payment column. */ #wrapper { background: var(--k-bg); } /* ---------- Buttons ---------- */ .btn-primary, .btn.btn-primary { background: var(--k-olive); border-color: var(--k-olive); color: #fff; font-weight: 500; border-radius: var(--k-radius-sm); padding: 11px 22px; transition: background .15s ease, transform .1s ease; } .btn-primary:hover, .btn.btn-primary:hover { background: var(--k-deep); border-color: var(--k-deep); color: #fff; } .btn-primary:active { transform: scale(0.985); } .btn-secondary { background: #fff; border: 1px solid var(--k-border); color: var(--k-deep); border-radius: var(--k-radius-sm); font-weight: 500; } .btn-secondary:hover { background: var(--k-tint); color: var(--k-deep); } /* ---------- Green info bar (contact + lab-tested | sign-in + cart) ---------- */ .k-greenbar.header-nav { background: var(--k-olive); color: #fff; border: none; padding: 6px 0; margin: 0; min-height: 0; } .k-greenbar-row { display: flex; align-items: center; min-height: 24px; } .k-greenbar-left { display: flex; align-items: center; gap: 20px; flex: 1 1 auto; } .k-greenbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex: 0 0 auto; white-space: nowrap; } .k-greenbar .k-tb-item { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 13px; } .k-greenbar .k-tb-link { color: #fff !important; } .k-greenbar .k-tb-link:hover { color: #fff !important; opacity: .85; } /* cart + sign-in inside the green bar */ .k-greenbar #_desktop_cart, .k-greenbar #_desktop_user_info, .k-greenbar .blockcart, .k-greenbar .user-info { background: transparent !important; margin: 0; padding: 0; } .k-greenbar a, .k-greenbar .blockcart a, .k-greenbar .user-info a { color: #fff !important; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } .k-greenbar a:hover, .k-greenbar a:hover * { color: #fff !important; opacity: .9; } .k-greenbar .blockcart, .k-greenbar .blockcart.active, .k-greenbar .blockcart:hover { background: transparent !important; } .k-greenbar .blockcart .cart-products-count { background: #fff !important; color: var(--k-olive-dark) !important; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; } .k-greenbar .material-icons { font-size: 18px; vertical-align: middle; color: #fff; } @media (max-width: 767px) { .k-tb-lab { display: none; } .k-greenbar { font-size: 12px; } } /* ---------- White header (logo + nav + search) ---------- */ .header-top, #header .header-top { background: var(--k-surface); border-bottom: 1px solid var(--k-border); box-shadow: none; padding: 14px 0; } #header { background: var(--k-surface); } .k-logo { font-family: 'Outfit', sans-serif; font-size: 38px; font-weight: 600; letter-spacing: -1px; color: var(--k-olive-dark); text-decoration: none; line-height: 1; display: inline-block; } .k-logo:hover { color: var(--k-olive-dark); } .k-logo .k-o { color: var(--k-amber); } #_desktop_top_menu .top-menu a, .header-top .menu a { color: var(--k-deep); font-weight: 400; font-size: 14.5px; } #_desktop_top_menu .top-menu a:hover, #_desktop_top_menu .top-menu a:focus, #_desktop_top_menu .top-menu .sub-menu a:hover, #_desktop_top_menu .top-menu li:hover > a, .header-top .menu a:hover, .menu-dropdown a:hover { color: var(--k-olive) !important; background: transparent !important; background-color: transparent !important; } #_desktop_top_menu .top-menu a.dropdown-submenu:hover, #_desktop_top_menu .top-menu .collapse a:hover { color: var(--k-olive) !important; background: var(--k-tint); } #header .header-top a:hover, #header .header-top a:focus, .header-top a:hover { color: var(--k-olive) !important; } #header .blockcart:hover, #header .blockcart:hover * { color: #fff !important; } /* general link hover safety net — kill Classic's default blue site-wide */ a:hover, a:focus { color: var(--k-olive); } .header-top a:hover { color: var(--k-olive) !important; } /* nuclear override for ps_mainmenu blue hover — target every rendered state */ #_desktop_top_menu a:hover, #_desktop_top_menu a:focus, #_desktop_top_menu a:active, #_desktop_top_menu li:hover > a, #_desktop_top_menu .top-menu > li > a:hover, #_desktop_top_menu .top-menu .sub-menu a:hover, #_desktop_top_menu .top-menu .sub-menu li:hover > a, #_desktop_top_menu .top-menu li.menu-item:hover > a, .menu .top-menu a:hover, .top-menu a:hover, .top-menu a:focus, .top-menu li:hover > a, .top-menu .sub-menu a:hover, .top-menu .sub-menu li:hover > a, ul.top-menu li a:hover, #header .top-menu a:hover { color: var(--k-olive) !important; text-decoration: none !important; background: transparent !important; background-color: transparent !important; } .header-nav i, .header-top i { color: var(--k-text-soft); } .header-nav a:hover i, .header-top a:hover i, .header .search-widget a:hover, .header i:hover { color: var(--k-olive); } .cart-preview .header { color: var(--k-deep); } .blockcart { position: relative; } /* kill Classic's blue cart block background */ .blockcart, .blockcart.active, .header-top .blockcart, #_desktop_cart .blockcart { background: transparent !important; border-radius: var(--k-radius-sm); } .blockcart a, .blockcart .header a { color: #fff !important; } /* Desktop only — mobile cart should always stay transparent on the olive bar */ @media (min-width: 992px) { .blockcart:hover, .blockcart.active { background: var(--k-tint) !important; } } @media (max-width: 991px) { .k-mh-cart, .k-mh-cart:hover, .k-mh-cart .blockcart, .k-mh-cart .blockcart.active, #_mobile_cart, #_mobile_cart .blockcart, #_mobile_cart .blockcart.active { background: transparent !important; border-radius: 0 !important; } } .blockcart:hover a, .blockcart.active a { color: #fff !important; } .blockcart .cart-products-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--k-olive); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 500; line-height: 1; vertical-align: top; margin-left: 4px; } .blockcart.cart-empty .cart-products-count { display: none; } /* ---------- Product grid card ---------- */ .products, .featured-products .products { gap: 16px; } /* Product grid: 4 per row by default (home, full-width listings) */ #products .products, .featured-products .products, .products.product_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } #products .products .product-miniature, .featured-products .products .product-miniature, .products .js-product { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* When a left filter sidebar is present, drop to 3 per row so cards don't squeeze */ #content-wrapper.left-column #js-product-list .products, #content-wrapper.left-column .products.product_list, #content-wrapper.col-md-8 #js-product-list .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1199px) { #products .products, .featured-products .products, .products.product_list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 991px) { #products .products, .featured-products .products, .products.product_list, #content-wrapper.left-column #js-product-list .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { #products .products, .featured-products .products, .products.product_list, #content-wrapper.left-column #js-product-list .products { grid-template-columns: 1fr; } } .product-miniature { background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; display: flex; flex-direction: column; height: 100%; } .product-miniature .thumbnail-container { display: flex; flex-direction: column; height: 100%; } .product-miniature .product-description { padding: 12px 13px 14px; display: flex; flex-direction: column; flex: 1 1 auto; } /* uniform product name height (2 lines) so prices/buttons align */ .product-miniature .product-title { min-height: 2.7em; margin-bottom: 4px; } .product-miniature .product-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } /* push price + button to the bottom of every card */ .product-miniature .k-card-foot { margin-top: auto; } /* make grid cells stretch so all cards in a row match the tallest */ #products .products, .featured-products .products, .products.product_list { align-items: stretch; } #products .products > *, .featured-products .products > *, .products .js-product { display: flex; } .product-miniature:hover { box-shadow: var(--k-shadow-hover); transform: translateY(-2px); } .product-miniature .thumbnail-container { background: var(--k-dark-img); border-radius: var(--k-radius) var(--k-radius) 0 0; margin: 0; box-shadow: none; } .product-miniature .thumbnail-top { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--k-dark-img); } .product-miniature .thumbnail-top .product-thumbnail { display: block; height: 100%; } .product-miniature .thumbnail-top img { width: 100%; height: 100%; object-fit: cover; } .product-miniature .product-description { padding: 12px 13px 14px; } .product-miniature .product-title a { color: var(--k-deep); font-size: 13.5px; font-weight: 500; line-height: 1.35; } .product-miniature .product-price-and-shipping .price { color: var(--k-deep); font-size: 16px; font-weight: 600; } .product-miniature .regular-price { color: var(--k-muted); font-size: 13px; } .k-card-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; } .k-card-foot .k-add-form { width: 100%; margin: 0; } .k-card-foot .product-price-and-shipping { display: flex; align-items: baseline; gap: 8px; } /* compact add button that collapses on mobile */ .k-add-btn { border: none; background: var(--k-olive); color: #fff; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 11px 14px; border-radius: var(--k-radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; text-align: center; transition: background .15s ease; white-space: nowrap; } .k-add-btn, .k-add-btn:link, .k-add-btn:visited, .k-add-btn .k-add-label, a.k-add-btn, a.k-add-btn .k-add-label, .k-add-btn svg { color: #fff !important; fill: #fff !important; } .k-add-btn:hover { background: var(--k-deep); color: #fff !important; } .k-add-btn:hover .k-add-label, .k-add-btn:hover svg { color: #fff !important; fill: #fff !important; } .k-add-btn .k-add-label { display: inline; } /* ---------- Sticky add-to-cart bar (product page) ---------- */ .k-sticky-cart { position: fixed; left: 0; right: 0; bottom: -100px; background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); border-top: 1px solid var(--k-border); box-shadow: 0 -4px 20px rgba(46,51,32,0.08); padding: 12px 0; z-index: 1040; transition: bottom .3s cubic-bezier(.2,.8,.2,1); } .k-sticky-cart.k-visible { bottom: 0; } .k-sticky-cart .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .k-sticky-cart .k-sc-info { display: flex; align-items: center; gap: 14px; min-width: 0; } .k-sticky-cart .k-sc-thumb { width: 44px; height: 44px; border-radius: 9px; background: var(--k-dark-img); flex-shrink: 0; object-fit: cover; } .k-sticky-cart .k-sc-name { font-weight: 500; font-size: 14px; color: var(--k-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-sticky-cart .k-sc-price { color: var(--k-olive-dark); font-weight: 600; font-size: 16px; } .k-sticky-cart .btn { white-space: nowrap; } @media (max-width: 600px) { .k-sticky-cart .k-sc-name { max-width: 130px; } } /* ---------- Product page ---------- */ .product-prices .current-price .current-price-value, .product-prices .current-price .price, .product-price, .h1 + .product-prices .price { color: var(--k-deep) !important; font-weight: 600; font-size: 28px; } /* v154 — was previously '.product-prices .current-price span' which matched kratomaloyal's cashback span and forced it to 28px. Now targets only the actual price class. */ .product-prices, .product-prices * { color: var(--k-deep); } .product-information a, .product-description a, .tab-content a, .product-tabs a:not(.nav-link) { color: var(--k-olive-dark); } .product-information a:hover, .product-description a:hover { color: var(--k-olive); } .product-discount .regular-price { color: var(--k-muted); } .discount.discount-percentage, .product-flag.discount { background: #FCEBEB; color: #A32D2D; border-radius: var(--k-radius-pill); font-weight: 500; } /* volume / quantity discount tiles */ .k-volume-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 9px; margin: 14px 0 18px; } .k-volume-tile { border: 1.5px solid var(--k-border); border-radius: var(--k-radius-sm); padding: 11px 10px; cursor: pointer; position: relative; text-align: left; background: #fff; transition: border-color .12s ease, background .12s ease; } .k-volume-tile:hover { border-color: var(--k-olive); } .k-volume-tile.k-selected { border-color: var(--k-olive); background: var(--k-tint); } .k-volume-tile .k-vt-units { font-weight: 600; font-size: 14px; color: var(--k-deep); } .k-volume-tile .k-vt-price { font-size: 12.5px; color: var(--k-text-soft); margin-top: 2px; } .k-volume-tile .k-vt-save { position: absolute; top: -8px; right: 8px; background: var(--k-olive); color: #fff; font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: var(--k-radius-pill); } /* quantity stepper */ .k-qty { display: inline-flex; align-items: center; border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); overflow: hidden; } .k-qty button { border: none; background: #fff; width: 40px; height: 48px; font-size: 19px; color: var(--k-deep); cursor: pointer; } .k-qty button:hover { background: var(--k-tint); } .k-qty input { width: 42px; height: 48px; text-align: center; border: none; font-weight: 600; font-size: 15px; color: var(--k-deep); background: #fff; -moz-appearance: textfield; } .k-qty input::-webkit-outer-spin-button, .k-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* product tabs */ .product-tabs .nav-tabs { border-bottom: 1px solid var(--k-border); gap: 4px; } /* tabs are relocated below the product-container by JS and get this class */ .k-tabs-fullwidth { width: 100%; margin-top: 36px; clear: both; } .tabs .nav-tabs .nav-link, .product-tabs .nav-tabs .nav-link { border: none; color: var(--k-text-soft) !important; font-weight: 500; padding: 12px 18px; border-radius: 0; border-bottom: 2px solid transparent; } .tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link.js-product-nav-active, .product-tabs .nav-tabs .nav-link.active, .nav-tabs .nav-link.active { color: var(--k-olive-dark) !important; border-bottom-color: var(--k-olive) !important; background: transparent !important; } .tabs .nav-tabs .nav-link:hover { color: var(--k-olive) !important; } /* reassurance row */ .k-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 20px 0; } .k-trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--k-text-soft); } .k-trust-item i { color: var(--k-olive); } /* keep product page content aligned, not pushed right */ #main .product-container { margin-left: 0; } .product-information { padding-left: 0; } /* rounded product page images + thumbnails */ #main .product-cover, #main .product-cover img, #main .images-container .product-cover { border-radius: var(--k-radius) !important; overflow: hidden; } #main .product-cover img { display: block; width: 100%; } #main .product-images .thumb-container .thumb, #main .js-qv-product-images img, #main .product-images img, #main .thumb { border-radius: var(--k-radius-sm) !important; overflow: hidden; } #main .product-cover .layer { border-radius: var(--k-radius); } /* ---------- Age gate ---------- */ .k-agegate-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(17,20,12,0.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; } .k-agegate { background: #fff; border-radius: var(--k-radius); max-width: 420px; width: 100%; padding: 36px 32px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .k-agegate .k-ag-logo { font-size: 26px; font-weight: 600; color: var(--k-olive-dark); letter-spacing: -1px; margin-bottom: 18px; } .k-agegate .k-ag-logo .k-o { color: var(--k-amber); } .k-agegate h2 { font-size: 21px; margin-bottom: 10px; } .k-agegate p { color: var(--k-text-soft); font-size: 14px; margin-bottom: 24px; line-height: 1.5; } .k-agegate .k-ag-btns { display: flex; gap: 12px; } .k-agegate .k-ag-btns button { flex: 1; padding: 13px; border-radius: var(--k-radius-sm); font-weight: 600; font-size: 14px; cursor: pointer; border: none; font-family: 'Outfit', sans-serif; } .k-ag-yes { background: var(--k-olive); color: #fff; } .k-ag-yes:hover { background: var(--k-olive-dark); } .k-ag-no { background: #F1EFE8; color: var(--k-text-soft); } .k-ag-no:hover { background: #E4E2D8; } body.k-agegate-open { overflow: hidden; } /* ---------- Footer ---------- */ #footer { background: var(--k-bg); color: var(--k-text-soft); padding-top: 40px; border-top: 1px solid #DCE3CB; } #footer .k-logo, #footer .k-foot-logo { color: var(--k-olive-dark); font-size: 24px; font-weight: 600; letter-spacing: -1px; } #footer .k-foot-logo .k-o { color: var(--k-amber); } #footer h3, #footer .h3, #footer .links .title, #footer .block-title, #footer .footer__title { color: var(--k-deep) !important; font-size: 14px; margin-bottom: 14px; font-weight: 600; } #footer, #footer a, #footer li a, #footer p, #footer span, #footer li, #footer .toggle, #footer .navbar-toggler, .footer-container, .footer-container a, .footer-container li a, .footer-container p, .footer-container span { color: var(--k-text-soft) !important; } #footer a:hover, .footer-container a:hover { color: var(--k-olive) !important; } #footer .k-logo, #footer .k-foot-logo, #footer h3, #footer .h3 { color: var(--k-deep) !important; } #footer .links ul { list-style: none; padding: 0; } #footer .links li { margin-bottom: 8px; } /* Brand block above footer columns */ .k-foot-brand { text-align: center; padding: 28px 0 18px; border-bottom: 1px solid #DCE3CB; margin-bottom: 24px; } .k-foot-brand .k-foot-logo { font-family: 'Outfit', sans-serif; font-size: 28px; font-weight: 600; letter-spacing: -1px; color: var(--k-olive-dark) !important; text-decoration: none; display: inline-block; } .k-foot-brand .k-foot-logo .k-o { color: var(--k-amber); } .k-foot-brand .k-foot-tagline { font-size: 13px; color: var(--k-text-soft); margin: 6px 0 0; } /* Unified footer strip — legal disclaimer + cards/copyright together */ .k-foot-strip { background: #E8EDDD; border-top: 1px solid #DCE3CB; padding: 28px 0 22px; } .k-foot-strip .k-legal-disclaimer { background: transparent; padding: 0 0 18px; border: none; } .k-foot-strip .k-legal-disclaimer p { max-width: 1000px; margin: 0 auto; text-align: center; font-size: 12px; line-height: 1.7; color: var(--k-text-soft); } .k-foot-strip .k-foot-bottom { border-top: 1px solid #DCE3CB; margin-top: 0; padding: 18px 0 0; font-size: 12px; color: var(--k-muted); text-align: center; } .k-foot-cards { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; } .k-foot-cards svg { border-radius: 4px; } .k-foot-copy { margin: 0; color: var(--k-muted); } /* kill Classic blue everywhere in header on hover/focus/active */ #header a, #header a:link, .header-top a, .header-nav a { color: var(--k-deep); } #header .header-top a:hover, #header .header-top a:focus, .header-top a:hover, .header-top a:focus { color: var(--k-olive) !important; } #header .header-top a:hover *, .header-top a:hover * { color: var(--k-olive) !important; } /* cart block — force no blue background anywhere */ #header .blockcart, #header .blockcart.active, .header-top .blockcart, .header-top .blockcart.active, #_desktop_cart > .blockcart, #_desktop_cart .blockcart.active { background-color: transparent !important; background-image: none !important; } @media (min-width: 992px) { #header .blockcart.active, #header .blockcart:hover { background-color: var(--k-tint) !important; } } #header .blockcart * { color: #fff !important; } #header .blockcart:hover *, #header .blockcart.active * { color: #fff !important; } #header .blockcart .cart-products-count { color: var(--k-olive-dark) !important; background: #fff !important; } /* product page thumbnail selected state — olive rounded instead of blue square */ #main .product-images .thumb.selected, #main .product-images li.selected img, #main .thumb-container .thumb.selected { border: 2px solid var(--k-olive) !important; border-radius: var(--k-radius-sm) !important; } /* ===== Green bar cart/sign-in cleanup — kill the cart box ===== */ .k-greenbar .blockcart, .k-greenbar .blockcart.active, .k-greenbar .blockcart:hover, .k-greenbar #_desktop_cart, .k-greenbar #_desktop_cart .blockcart { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } .k-greenbar .header-top-right, .k-greenbar .right-nav { padding: 0 !important; } .k-greenbar-right { gap: 24px; } .k-greenbar-right .blockcart a, .k-greenbar-right .user-info a { padding: 0 !important; background: transparent !important; font-weight: 500; } .k-greenbar .cart-products, .k-greenbar .header { background: transparent !important; } /* vertically center everything in the green bar */ .k-greenbar-row { min-height: 24px; } .k-greenbar-left, .k-greenbar-right { align-items: center; } /* ===== Green bar: sign-in + cart rendered individually, side by side ===== */ .k-greenbar-right { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 24px !important; flex-wrap: nowrap !important; } .k-gb-signin, .k-gb-cart { display: inline-flex !important; align-items: center !important; } .k-gb-signin *, .k-gb-cart * { display: inline-flex !important; flex-direction: row !important; align-items: center !important; float: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } /* white text + icons, readable size */ .k-greenbar-right, .k-greenbar-right *, .k-gb-signin a, .k-gb-cart a, .k-greenbar-right .material-icons { color: #fff !important; font-size: 15px !important; } .k-greenbar-right .material-icons { font-size: 20px !important; margin-right: 6px; } .k-gb-cart a, .k-gb-signin a { gap: 6px; } /* count badge: white circle, olive number */ .k-greenbar-right .cart-products-count { background: #fff !important; color: var(--k-olive-dark) !important; font-size: 12px !important; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 6px; margin-left: 5px; } .k-greenbar-left, .k-greenbar-left * { font-size: 14px !important; } /* ===== Sticky header on scroll ===== */ #header { position: sticky; top: 0; z-index: 1030; background: var(--k-surface); transition: box-shadow .2s ease; } #header.k-stuck { box-shadow: 0 2px 12px rgba(46,51,32,0.10); } /* keep the age-gate and any modals above the sticky header */ .k-agegate-overlay { z-index: 2000; } /* ===== Force cart + account icons white in green bar ===== */ .k-greenbar .material-icons, .k-greenbar i.material-icons, .k-gb-signin .material-icons, .k-gb-cart .material-icons, .k-greenbar-right i, .k-greenbar-right svg, .k-greenbar-right .material-icons { color: #fff !important; fill: #fff !important; } .k-gb-signin a *, .k-gb-cart a * { color: #fff !important; } /* the cart count badge stays olive-on-white though */ .k-greenbar-right .cart-products-count, .k-greenbar-right .cart-products-count * { color: var(--k-olive-dark) !important; } /* ===== DEFINITIVE green-bar colors (last = wins) ===== */ /* everything in the green bar is white, including on hover/focus */ .k-greenbar a, .k-greenbar a *, .k-greenbar span, .k-greenbar i, .k-greenbar .material-icons, .k-greenbar svg, .k-greenbar-left a, .k-greenbar-left a *, .k-greenbar-right a, .k-greenbar-right a *, .k-gb-signin a, .k-gb-signin a *, .k-gb-cart a, .k-gb-cart a * { color: #fff !important; fill: #fff !important; } .k-greenbar a:hover, .k-greenbar a:hover *, .k-greenbar a:focus, .k-greenbar a:focus *, .k-greenbar-left a:hover, .k-greenbar-left a:hover *, .k-greenbar-right a:hover, .k-greenbar-right a:hover *, .k-gb-signin a:hover, .k-gb-signin a:hover *, .k-gb-cart a:hover, .k-gb-cart a:hover * { color: #fff !important; fill: #fff !important; opacity: .85; } /* count badge is the ONE exception: olive number on white circle */ .k-greenbar .cart-products-count, .k-greenbar .cart-products-count *, .k-greenbar-right .cart-products-count { color: var(--k-olive-dark) !important; background: #fff !important; } /* ============================================================ HOMEPAGE ============================================================ */ .k-home { padding: 6px 0 0; } .k-home .container { max-width: var(--k-maxw); } /* Section heading */ .k-section { margin: 48px 0; } .k-section-head { text-align: center; margin-bottom: 24px; } .k-section-head h2 { font-size: 26px; font-weight: 600; color: var(--k-deep); margin: 0 0 6px; letter-spacing: -0.5px; } .k-section-head p { font-size: 14px; color: var(--k-text-soft); margin: 0; } /* 1. Hero slider — rounded corners + no arrows */ .k-hero { margin-bottom: 0; border-radius: var(--k-radius); overflow: hidden; } .k-hero .homeslider-container, .k-hero .rslides, .k-hero .slide, .k-hero .slide img, .k-hero .rslides_container { border-radius: var(--k-radius) !important; overflow: hidden; } .k-hero .slide img { display: block; width: 100%; height: auto; border-radius: var(--k-radius) !important; } .k-hero .rslides_nav, .k-hero a.rslides_nav, .k-hero .rslides_nav.prev, .k-hero .rslides_nav.next, .k-hero .prev, .k-hero .next, .k-hero a.prev, .k-hero a.next, .homeslider-container .rslides_nav, .homeslider-container .prev, .homeslider-container .next, .homeslider-container a.prev, .homeslider-container a.next, #homepage-slider .rslides_nav, .rslides_nav { display: none !important; visibility: hidden !important; opacity: 0 !important; } .k-hero .rslides_tabs { bottom: 14px; } .k-hero .rslides_tabs a, .k-hero .rslides_tabs li a { background: rgba(255,255,255,0.5); border: none; } .k-hero .rslides_tabs .rslides_here a, .k-hero .rslides_tabs li.rslides_here a { background: #fff; } .k-hero .caption { background: rgba(0,0,0,0.35); color: #fff; border-radius: var(--k-radius-sm); } /* 1b. Static hero (from kratomahome module). * Image fills the section, dark gradient overlay keeps text readable on * any background, CTA uses the same olive→black pattern as the cart drawer * checkout button so visual language stays consistent. */ .k-hero-static { position: relative; overflow: hidden; border-radius: var(--k-radius); min-height: 460px; display: flex; } .k-hero-static .k-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } .k-hero-static .k-hero-overlay { position: relative; z-index: 1; width: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 75%); display: flex; align-items: center; } .k-hero-static .k-hero-overlay-inner { padding: 48px 56px; max-width: 620px; color: #ffffff; } .k-hero-static .k-hero-title { font-size: 44px; line-height: 1.1; font-weight: 700; color: #ffffff; margin: 0 0 16px 0; text-shadow: 0 1px 2px rgba(0,0,0,0.25); } .k-hero-static .k-hero-subtitle { font-size: 18px; line-height: 1.5; color: #f0f0f0; margin: 0 0 28px 0; text-shadow: 0 1px 2px rgba(0,0,0,0.25); max-width: 520px; } .k-hero-static .k-hero-cta { display: inline-flex; align-items: center; padding: 14px 28px; background: #5b6b22; border: 1px solid #5b6b22; border-radius: 6px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; text-decoration: none !important; transition: background 0.15s, border-color 0.15s; } /* Color forced white across every link state, matching the checkout button * pattern — defeats Classic theme's .btn-primary rules without an arms race. */ .k-hero-static .k-hero-cta, .k-hero-static .k-hero-cta:link, .k-hero-static .k-hero-cta:visited, .k-hero-static .k-hero-cta:hover, .k-hero-static .k-hero-cta:focus, .k-hero-static .k-hero-cta:active, .k-hero-static .k-hero-cta * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .k-hero-static .k-hero-cta:hover, .k-hero-static .k-hero-cta:focus { background: #1a1a1a; border-color: #1a1a1a; } /* Breathing room below the static hero before the trust strip. * (The trust strip has margin-top: -1px to overlap the slider hero by * design — looks tight with the static hero, so we cancel that here.) */ .k-hero-static { margin-bottom: 20px; } .k-hero-static + .k-trust-strip { margin-top: 0; } /* Mobile: stack overlay, smaller text, less padding */ @media (max-width: 768px) { .k-hero-static { min-height: 360px; } .k-hero-static .k-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 100%); align-items: flex-end; } .k-hero-static .k-hero-overlay-inner { padding: 28px 22px; } .k-hero-static .k-hero-title { font-size: 30px; } .k-hero-static .k-hero-subtitle { font-size: 15px; margin-bottom: 20px; } .k-hero-static .k-hero-cta { padding: 12px 22px; font-size: 13px; } } /* 2. Trust strip */ .k-trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: -1px 0 8px; padding: 22px 24px; background: #E8EDDD; border: 1px solid #DCE3CB; border-radius: var(--k-radius); } .k-trust-strip .k-trust-item { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--k-text-soft); } .k-trust-strip .k-trust-item strong { display: block; color: var(--k-deep); font-weight: 600; font-size: 14px; } .k-trust-strip .k-trust-item span { display: block; font-size: 12px; color: var(--k-text-soft); } @media (max-width: 767px) { .k-trust-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 14px; } } /* 3. Shop by form */ .k-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .k-form-tile { position: relative; aspect-ratio: 16/10; border-radius: var(--k-radius); overflow: hidden; background: var(--k-dark-img); display: flex; align-items: flex-end; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .k-form-tile:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-hover); } .k-form-tile .k-form-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .k-form-tile .k-form-tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%); z-index: 2; } .k-form-tile .k-form-tile-label { position: relative; z-index: 3; color: #fff !important; font-size: 18px; font-weight: 600; padding: 16px 20px; width: 100%; } @media (max-width: 767px) { .k-form-grid { grid-template-columns: 1fr; } } /* 5. Shop by color */ .k-vein-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .k-vein-tile { display: flex; flex-direction: column; align-items: center; padding: 22px 14px; border-radius: var(--k-radius); text-decoration: none; border: 1.5px solid transparent; transition: transform .2s ease, border-color .2s ease; text-align: center; } .k-vein-tile:hover { transform: translateY(-3px); } .k-vein-dot { width: 28px; height: 28px; border-radius: 50%; margin-bottom: 10px; } .k-vein-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .k-vein-desc { font-size: 12px; opacity: 0.85; } .k-vein-red { background: #FCEBEB; } .k-vein-red .k-vein-dot { background: #C0392B; } .k-vein-red .k-vein-name, .k-vein-red .k-vein-desc { color: #791F1F; } .k-vein-red:hover { border-color: #C0392B; } .k-vein-green { background: #EAF3DE; } .k-vein-green .k-vein-dot { background: #5E7A2A; } .k-vein-green .k-vein-name, .k-vein-green .k-vein-desc { color: #27500A; } .k-vein-green:hover { border-color: #5E7A2A; } .k-vein-white { background: #F4F4F0; } .k-vein-white .k-vein-dot { background: #fff; border: 2px solid #D3D1C7; box-sizing: content-box; width: 24px; height: 24px; } .k-vein-white .k-vein-name, .k-vein-white .k-vein-desc { color: #444441; } .k-vein-white:hover { border-color: #888780; } .k-vein-yellow { background: #FAEEDA; } .k-vein-yellow .k-vein-dot { background: #D4A22F; } .k-vein-yellow .k-vein-name, .k-vein-yellow .k-vein-desc { color: #633806; } .k-vein-yellow:hover { border-color: #D4A22F; } @media (max-width: 767px) { .k-vein-grid { grid-template-columns: repeat(2, 1fr); } } /* 6. Why Kratoma */ .k-why { background: var(--k-tint); border-radius: var(--k-radius); padding: 36px; margin-top: 48px; } .k-why-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; } .k-why-text h2 { font-size: 26px; font-weight: 600; color: var(--k-deep); margin: 0 0 12px; letter-spacing: -0.5px; } .k-why-text p { font-size: 14.5px; color: var(--k-text-soft); line-height: 1.65; margin: 0 0 16px; } .k-why-list { list-style: none; padding: 0; margin: 0 0 22px; } .k-why-list li { font-size: 14px; color: var(--k-deep); padding: 6px 0; display: flex; align-items: center; gap: 8px; } .k-why-list .k-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--k-olive); color: #fff !important; font-size: 12px; font-weight: 600; flex-shrink: 0; } .k-why-btn { padding: 12px 24px; font-weight: 600; } .k-why-stats { display: grid; grid-template-columns: 1fr; gap: 12px; } .k-stat { background: #fff; border: 1px solid var(--k-border); border-radius: var(--k-radius); padding: 18px 22px; text-align: center; } .k-stat-num { font-size: 32px; font-weight: 700; color: var(--k-olive-dark); line-height: 1; letter-spacing: -1px; } .k-stat-lbl { font-size: 13px; color: var(--k-text-soft); margin-top: 6px; } @media (max-width: 767px) { .k-why { padding: 22px; } .k-why-inner { grid-template-columns: 1fr; gap: 22px; } } /* ============================================================ CHECKOUT — Personal Information cleanup Social title: handled in Back Office. Format helper text: removed at source via templates/_partials/form-fields.tpl override. ============================================================ */ /* ============================================================ CHECKOUT — modern, rounded, on-brand styling ============================================================ */ /* --- Header (focused checkout header) --- */ .k-checkout-topbar { background: var(--k-olive); color: #fff; padding: 8px 0; min-height: 0; border: none; margin: 0; } .k-checkout-topbar-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; } .k-checkout-topbar .k-checkout-back, .k-checkout-topbar .k-checkout-help { color: #fff !important; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .k-checkout-topbar .k-checkout-back:hover { color: #fff !important; opacity: .85; } .k-checkout-logo-bar { background: var(--k-surface); padding: 26px 0 22px; border-bottom: 1px solid var(--k-border); } .k-checkout-logo { font-family: 'Outfit', sans-serif; font-size: 36px; font-weight: 600; letter-spacing: -1.2px; color: var(--k-olive-dark) !important; text-decoration: none; display: inline-block; } .k-checkout-logo .k-o { color: var(--k-amber); } .k-checkout-logo:hover { color: var(--k-olive-dark) !important; } .k-checkout-tagline { font-size: 12px; color: var(--k-text-soft); margin: 8px 0 0; letter-spacing: 0.4px; } /* --- Body background to match site --- */ body#checkout, body.checkout { background: var(--k-bg); } /* --- Step boxes (Personal Info / Addresses / Shipping / Payment) --- */ body#checkout section.checkout-step, body.checkout section.checkout-step { background: var(--k-surface) !important; border: 1px solid var(--k-border) !important; border-radius: var(--k-radius) !important; margin-bottom: 16px !important; box-shadow: none !important; overflow: hidden; } body#checkout section.checkout-step .step-title, body.checkout section.checkout-step .step-title { padding: 18px 22px !important; font-size: 16px !important; font-weight: 600 !important; color: var(--k-deep) !important; letter-spacing: 0.3px; text-transform: none !important; background: transparent !important; border-bottom: 1px solid var(--k-border); } body#checkout section.checkout-step .content, body.checkout section.checkout-step .content { padding: 24px !important; } /* Hide the bottom border between header and content for unchecked steps */ body#checkout section.checkout-step.-unreachable .step-title, body#checkout section.checkout-step.-current .step-title { border-bottom-color: var(--k-border); } /* Step number badges */ body#checkout .step-number, body.checkout .step-number { background: var(--k-olive) !important; color: #fff !important; width: 28px; height: 28px; border-radius: 50%; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; } body#checkout section.checkout-step.-unreachable .step-number { background: #C5C9B8 !important; } /* Form inputs - rounded + theme styling */ body#checkout .form-control, body.checkout .form-control, body#checkout input[type=text], body#checkout input[type=email], body#checkout input[type=password], body#checkout input[type=tel], body#checkout select, body#checkout textarea { border: 1px solid var(--k-border) !important; border-radius: var(--k-radius-sm) !important; padding: 10px 14px !important; font-size: 14px !important; background: #fff !important; transition: border-color .15s ease, box-shadow .15s ease; } body#checkout .form-control:focus, body.checkout .form-control:focus { border-color: var(--k-olive) !important; box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important; outline: none !important; } /* Form labels */ body#checkout .form-control-label, body.checkout .form-control-label { color: var(--k-deep) !important; font-weight: 500 !important; font-size: 14px !important; } /* Continue/Save buttons */ body#checkout .btn-primary, body.checkout .btn-primary, body#checkout button.continue, body.checkout button.continue { background: var(--k-olive) !important; border: none !important; color: #fff !important; padding: 12px 28px !important; border-radius: var(--k-radius-sm) !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: 0.3px; text-transform: uppercase; transition: background .15s ease; } body#checkout .btn-primary:hover, body.checkout .btn-primary:hover { background: var(--k-deep) !important; } /* Cart summary sidebar (right side during checkout) */ body#checkout .cart-summary, body.checkout .cart-summary, body#checkout #js-checkout-summary, body.checkout #js-checkout-summary { background: var(--k-surface) !important; border: 1px solid var(--k-border) !important; border-radius: var(--k-radius) !important; padding: 22px !important; box-shadow: none !important; } body#checkout .cart-summary .h6, body#checkout .cart-summary .card-title { color: var(--k-deep) !important; font-weight: 600; } body#checkout .cart-summary-line { padding: 8px 0 !important; font-size: 14px; } body#checkout .cart-summary-line .value { color: var(--k-deep) !important; font-weight: 500; } body#checkout .cart-total .value, body#checkout .cart-summary-totals .value { color: var(--k-olive-dark) !important; font-weight: 700; } /* Carrier options (Shipping step) */ body#checkout .delivery-options .delivery-option { background: var(--k-tint) !important; border: 1px solid var(--k-border) !important; border-radius: var(--k-radius-sm) !important; padding: 14px 18px !important; margin-bottom: 10px !important; transition: border-color .15s ease, background .15s ease; } body#checkout .delivery-options .delivery-option:hover { border-color: var(--k-olive) !important; } body#checkout .delivery-options .delivery-option:has(input:checked) { background: rgba(124, 144, 57, 0.08) !important; border-color: var(--k-olive) !important; } /* Payment options */ body#checkout .payment-options .payment-option { background: var(--k-tint) !important; border: 1px solid var(--k-border) !important; border-radius: var(--k-radius-sm) !important; padding: 14px 18px !important; margin-bottom: 10px !important; } body#checkout .payment-options .payment-option:hover { border-color: var(--k-olive) !important; } /* Place order button - extra emphasis */ body#checkout #payment-confirmation .btn-primary { font-size: 16px !important; padding: 14px 36px !important; border-radius: var(--k-radius-sm) !important; width: 100%; } /* Custom radio / checkbox to match theme olive */ body#checkout .custom-radio input[type="radio"]:checked + span, body#checkout .custom-checkbox input[type="checkbox"]:checked + span { background: var(--k-olive) !important; border-color: var(--k-olive) !important; } /* Terms of service section */ body#checkout #conditions-to-approve { background: var(--k-tint); border-radius: var(--k-radius-sm); padding: 16px 18px; margin-top: 18px; } body#checkout #conditions-to-approve ul { margin: 0; padding: 0; list-style: none; } body#checkout #conditions-to-approve li { padding: 4px 0; font-size: 14px; } /* "Sign in" / "Create an account" toggle styling */ body#checkout .nav-inline { border-bottom: 1px solid var(--k-border); padding-bottom: 14px; margin-bottom: 22px; } body#checkout .nav-inline .nav-link { color: var(--k-text-soft) !important; font-weight: 500; padding: 0 16px 0 0; } body#checkout .nav-inline .nav-link.active { color: var(--k-olive-dark) !important; font-weight: 600; } /* Checkout footer styling */ .k-checkout-foot { margin-top: 32px; } /* Hide PrestaShop "Ecommerce software by PrestaShop" credit (replaced by Kratoma copyright) */ #footer .text-sm-center:not(.k-foot-bottom):not(.js-terms) { display: none; } /* ===== Address selector cards - olive instead of default blue ===== */ body#checkout .address-item, body#checkout .address-selector .address, body#checkout .address { border: 1px solid var(--k-border) !important; border-radius: var(--k-radius) !important; background: #fff !important; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } body#checkout .address-item:hover, body#checkout .address-selector .address:hover { border-color: var(--k-olive) !important; } /* Selected address — olive border instead of blue */ body#checkout .address-item.selected, body#checkout .address-selector .address.selected, body#checkout .address-item:has(input[type="radio"]:checked), body#checkout .address-selector .address:has(input[type="radio"]:checked) { border-color: var(--k-olive) !important; background: rgba(124, 144, 57, 0.06) !important; box-shadow: 0 0 0 1px var(--k-olive); } /* The radio dot itself */ body#checkout .address-selector .custom-radio input[type="radio"]:checked + span, body#checkout .address .custom-radio input[type="radio"]:checked + span { background: var(--k-olive) !important; border-color: var(--k-olive) !important; } /* ===== Kill the white inner box inside address cards ===== */ body#checkout .address-item .address, body#checkout .address-selector .address-item .address, body#checkout .address-item .alias, body#checkout .address-item .address-alias, body#checkout .address-item article, body#checkout .address-item .address-body, body#checkout .address-selector article { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* Also when the address-item IS the .address element itself, ensure no inner whites */ body#checkout .address-item > *, body#checkout .address-selector > .address > * { background: transparent !important; } /* Keep our outer card styling intact (re-assert) */ body#checkout .address-item { padding: 18px !important; } body#checkout .address-item.selected, body#checkout .address-item:has(input[type="radio"]:checked) { background: rgba(124, 144, 57, 0.06) !important; } /* ============================================================ CUSTOMER ACCOUNT — rounded, on-brand styling Applies to: Your account hub, Information, Addresses, Order history, Credit slips, Wishlist, GDPR, Login, Registration, Password recovery ============================================================ */ /* Page title styling */ body.customer-account .page-header, body.my-account .page-header, body.identity .page-header, body.history .page-header, body.order-detail .page-header, body.address .page-header, body.addresses .page-header, body.password .page-header, body.registration .page-header { margin-bottom: 24px; padding-bottom: 0; border-bottom: none; } body.customer-account h1.page-title, body.my-account h1.page-title, body.identity h1.page-title, body.history h1.page-title, body.order-detail h1.page-title, body.address h1.page-title, body.addresses h1.page-title { font-size: 28px !important; font-weight: 600 !important; color: var(--k-deep) !important; letter-spacing: -0.5px; text-transform: none !important; } /* --- "Your account" hub: the 6 link cards --- */ body.my-account .links { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; } body.my-account .links .col-lg-4 { max-width: 100% !important; flex: none !important; padding: 0 !important; } body.my-account .links a { background: #fff !important; border: 1px solid var(--k-border) !important; border-radius: var(--k-radius) !important; padding: 28px 22px !important; box-shadow: none !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; display: flex !important; flex-direction: column; align-items: center; text-align: center; } body.my-account .links a:hover { transform: translateY(-2px); border-color: var(--k-olive) !important; box-shadow: var(--k-shadow-hover) !important; } /* Icon styling */ body.my-account .links a i, body.my-account .links a .material-icons { color: var(--k-olive) !important; font-size: 40px !important; margin-bottom: 12px; background: var(--k-tint); width: 64px; height: 64px; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; } /* Label styling — sentence case, theme color */ body.my-account .links a .link-item, body.my-account .links a span { text-transform: none !important; font-size: 15px !important; font-weight: 600 !important; color: var(--k-deep) !important; letter-spacing: 0; margin-top: 4px; background: transparent !important; padding: 0 !important; border: none !important; } /* Sign out link at bottom */ body.my-account .logout { display: inline-block; margin-top: 24px; padding: 10px 28px; border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); background: #fff; color: var(--k-deep) !important; font-weight: 500; text-decoration: none; transition: border-color .15s ease, background .15s ease; } body.my-account .logout:hover { border-color: var(--k-olive); background: var(--k-tint); } /* --- Account sub-pages: forms, address blocks, history tables --- */ /* Form panels (identity, password change, address forms) */ body.identity #content, body.password #content, body.address #content, body.registration #content { background: #fff; border: 1px solid var(--k-border); border-radius: var(--k-radius); padding: 28px; } /* Form inputs to match checkout */ body.customer-account .form-control, body.my-account .form-control, body.identity .form-control, body.password .form-control, body.address .form-control, body.addresses .form-control, body.registration .form-control { border: 1px solid var(--k-border) !important; border-radius: var(--k-radius-sm) !important; padding: 10px 14px !important; background: #fff !important; } body.customer-account .form-control:focus, body.my-account .form-control:focus, body.identity .form-control:focus, body.password .form-control:focus, body.address .form-control:focus, body.registration .form-control:focus, body.authentication .form-control:focus { border-color: var(--k-olive) !important; box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important; outline: none !important; } /* Login/registration: also style other input types (date, password show/hide buttons, etc.) */ body.registration input:focus, body.registration select:focus, body.registration textarea:focus, body.authentication input:focus, body.authentication select:focus, body.authentication textarea:focus { border-color: var(--k-olive) !important; box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important; outline: none !important; } /* Fallback: target by form action URL — works regardless of body class. This catches login + registration even if PrestaShop uses different body classes than the ones above. Specificity boosted with multiple selector levels. */ form[action*="login"] input:focus, form[action*="login"] select:focus, form[action*="login"] textarea:focus, form[action*="authentication"] input:focus, form[action*="authentication"] select:focus, form[action*="authentication"] textarea:focus, form[action*="registration"] input:focus, form[action*="registration"] select:focus, form[action*="registration"] textarea:focus, form#login-form input:focus, form#login-form select:focus, form#customer-form input:focus, form#customer-form select:focus, form#customer-form textarea:focus, form.js-customer-form input:focus, form.js-customer-form select:focus, form.js-customer-form textarea:focus, section#content .form-control:focus, #main .form-control:focus, section.login-form .form-control:focus, section.register-form .form-control:focus { border-color: var(--k-olive) !important; box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important; outline: none !important; -webkit-box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important; } /* Nuclear option: kill Bootstrap's default blue focus ring globally on form inputs. This is safe because we explicitly set our own focus colors above for known pages, and other pages get a sensible neutral fallback. */ .form-control:focus, input.form-control:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="url"]:focus, select.form-control:focus, textarea.form-control:focus { border-color: var(--k-olive) !important; box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important; outline: none !important; -webkit-box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important; } /* Buttons in account sections */ body.customer-account .btn-primary, body.my-account .btn-primary, body.identity .btn-primary, body.password .btn-primary, body.address .btn-primary, body.addresses .btn-primary, body.registration .btn-primary, body.authentication .btn-primary { background: var(--k-olive) !important; border: none !important; color: #fff !important; padding: 11px 26px !important; border-radius: var(--k-radius-sm) !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } body.customer-account .btn-primary:hover, body.my-account .btn-primary:hover, body.identity .btn-primary:hover { background: var(--k-deep) !important; } /* --- Addresses page: saved address cards --- */ body.addresses .addresses-footer, body.addresses .address { margin-bottom: 16px; } body.addresses article.address { background: #fff; border: 1px solid var(--k-border) !important; border-radius: var(--k-radius) !important; padding: 22px !important; box-shadow: none !important; } body.addresses article.address h4, body.addresses article.address .h4 { color: var(--k-deep) !important; font-weight: 600; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--k-border); } body.addresses .address-body { padding: 0 !important; } body.addresses .address-footer { background: transparent !important; padding: 12px 0 0 !important; border-top: 1px solid var(--k-border); margin-top: 12px; } body.addresses .address-footer a { color: var(--k-text-soft) !important; } body.addresses .address-footer a:hover { color: var(--k-olive) !important; } /* "Add new address" button */ body.addresses .addresses-footer a { display: inline-flex; align-items: center; gap: 8px; color: var(--k-olive) !important; font-weight: 600; text-decoration: none; } body.addresses .addresses-footer a:hover { color: var(--k-deep) !important; } /* --- Order history table --- */ body.history #content, body.order-detail #content { background: #fff; border: 1px solid var(--k-border); border-radius: var(--k-radius); padding: 24px; } body.history table.table, body.order-detail table.table { border-radius: var(--k-radius-sm); overflow: hidden; border: 1px solid var(--k-border); } body.history .table thead th, body.order-detail .table thead th { background: var(--k-tint) !important; border-bottom: 1px solid var(--k-border); color: var(--k-deep); font-weight: 600; text-transform: none; padding: 12px 14px; } body.history .table td, body.order-detail .table td { padding: 12px 14px; } /* Status badge (Awaiting, Delivered, etc.) */ body.history .label, body.order-detail .label { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; } /* --- Wishlist --- */ body.wishlist .wishlist-list, body#module-blockwishlist-lists .wishlist-list { border: 1px solid var(--k-border); border-radius: var(--k-radius); background: #fff; padding: 20px; } /* --- Login + Registration pages --- */ body.authentication #content, body.registration #content { max-width: 540px; margin: 0 auto; background: #fff; border: 1px solid var(--k-border); border-radius: var(--k-radius); padding: 32px; } body.authentication h1.page-title, body.registration h1.page-title { text-align: center; } body.authentication .forgot-password { text-align: center; margin-top: 12px; } body.authentication .forgot-password a { color: var(--k-olive) !important; font-weight: 500; } body.authentication .no-account a { color: var(--k-olive-dark) !important; font-weight: 600; } /* Account sidebar (left nav on some sub-pages) */ body.customer-account .links-aside, body.my-account .links-aside, body.identity .links-aside, body.history .links-aside, body.order-detail .links-aside, body.address .links-aside, body.addresses .links-aside { background: #fff; border: 1px solid var(--k-border); border-radius: var(--k-radius); padding: 16px; } body.customer-account .links-aside li, body.my-account .links-aside li, body.identity .links-aside li { list-style: none; margin: 4px 0; } body.customer-account .links-aside li a, body.my-account .links-aside li a { display: block; padding: 8px 12px; border-radius: var(--k-radius-sm); color: var(--k-deep) !important; text-decoration: none; font-size: 14px; } body.customer-account .links-aside li a:hover { background: var(--k-tint); color: var(--k-olive-dark) !important; } body.customer-account .links-aside li a.active, body.customer-account .links-aside li.active a { background: var(--k-olive); color: #fff !important; } /* Responsive: stack cards on mobile */ @media (max-width: 767px) { body.my-account .links { grid-template-columns: 1fr; } body.identity #content, body.password #content, body.address #content, body.registration #content, body.authentication #content { padding: 20px; } } /* ============================================================ QUICK VIEW — replace PrestaShop blues with theme olive ============================================================ */ .product-miniature .quick-view, .product-miniature a.quick-view, .product-miniature .js-quick-view { background: transparent !important; color: #000 !important; border: none !important; padding: 6px 10px !important; border-radius: 0 !important; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; } .product-miniature .quick-view:hover, .product-miniature a.quick-view:hover, .product-miniature .js-quick-view:hover { background: transparent !important; color: #000 !important; text-decoration: underline !important; } .product-miniature .quick-view i, .product-miniature .quick-view .material-icons { color: #000 !important; font-size: 14px !important; vertical-align: middle; margin-right: 2px; } /* --- Quick view modal --- */ .modal-content, #blockcart-modal .modal-content, .quickview .modal-content { border-radius: var(--k-radius) !important; border: 1px solid var(--k-border) !important; } /* Selected thumbnail border in quick view (and product page gallery) */ .quickview .product-images li.thumb-container .thumb.selected, .quickview .product-images img.selected, .quickview .images-container .thumb.selected, #product .product-images li.thumb-container .thumb.selected, #product .images-container .thumb.selected, .product-images .thumb-container .thumb:hover, .product-images .thumb.selected, .product-images img.selected { border: 2px solid var(--k-olive) !important; outline: none !important; box-shadow: 0 0 0 1px var(--k-olive) !important; } .quickview .product-images li.thumb-container .thumb, .quickview .images-container .thumb, #product .product-images li.thumb-container .thumb, .product-images .thumb-container .thumb, .product-images .thumb { border: 1px solid var(--k-border) !important; border-radius: var(--k-radius-sm) !important; transition: border-color .15s ease !important; } /* Quick view product layout cleanup */ .quickview .product-actions .add-to-cart, .quickview .product-add-to-cart .btn-primary { background: var(--k-olive) !important; border: none !important; color: #fff !important; border-radius: var(--k-radius-sm) !important; font-weight: 600; text-transform: uppercase; } .quickview .product-actions .add-to-cart:hover { background: var(--k-deep) !important; } .quickview .product-prices .current-price .price, .quickview .current-price .price { color: var(--k-olive-dark) !important; } .quickview .product-variants .input-color:checked + span, .quickview .product-variants input:checked + .color { outline: 2px solid var(--k-olive) !important; outline-offset: 2px; } /* Modal close (X) */ .modal .close, .modal-header .close { color: var(--k-deep) !important; opacity: 0.6; } .modal .close:hover { opacity: 1; color: var(--k-olive) !important; } /* "Item added to cart" modal — the one that pops up after Add to cart */ #blockcart-modal .modal-title, #blockcart-modal .h6 { color: var(--k-deep) !important; } #blockcart-modal .cart-content a.btn-primary { background: var(--k-olive) !important; border: none !important; color: #fff !important; } #blockcart-modal .cart-content a.btn-secondary { background: #fff !important; border: 1px solid var(--k-border) !important; color: var(--k-deep) !important; } #blockcart-modal .cart-content a.btn-secondary:hover { border-color: var(--k-olive) !important; color: var(--k-olive-dark) !important; } /* ============================================================ CONTACT page — restyle the file upload "Choose file" button + footer "Contact us" link styling ============================================================ */ /* Footer Contact us link */ .k-footer-contact-link { display: inline-block; margin-top: 6px; color: var(--k-olive-dark) !important; font-weight: 500; text-decoration: none; } .k-footer-contact-link:hover { color: var(--k-olive) !important; text-decoration: underline; } /* Contact form file input — kill the browser blue button */ body#contact .form-control-file, body#contact input[type="file"], body.contact input[type="file"], body#contact .input-file { background: var(--k-tint) !important; border: 1px dashed var(--k-border) !important; border-radius: var(--k-radius-sm) !important; padding: 14px 16px !important; color: var(--k-deep) !important; font-size: 14px; cursor: pointer; width: 100%; } /* The actual "Choose file" button inside the input (webkit / firefox) */ body#contact input[type="file"]::-webkit-file-upload-button, body.contact input[type="file"]::-webkit-file-upload-button { background: var(--k-olive) !important; color: #fff !important; border: none !important; border-radius: var(--k-radius-sm) !important; padding: 8px 18px !important; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; margin-right: 12px; transition: background .15s ease; } body#contact input[type="file"]::-webkit-file-upload-button:hover { background: var(--k-deep) !important; } /* Firefox */ body#contact input[type="file"]::file-selector-button, body.contact input[type="file"]::file-selector-button { background: var(--k-olive) !important; color: #fff !important; border: none !important; border-radius: var(--k-radius-sm) !important; padding: 8px 18px !important; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; margin-right: 12px; } body#contact input[type="file"]::file-selector-button:hover { background: var(--k-deep) !important; } /* The whole contact form panel */ body#contact #content-wrapper #content, body.contact #content-wrapper #content { background: #fff; border: 1px solid var(--k-border); border-radius: var(--k-radius); padding: 32px; } body#contact .form-control, body.contact .form-control { border: 1px solid var(--k-border) !important; border-radius: var(--k-radius-sm) !important; background: #fff !important; } body#contact .form-control:focus, body.contact .form-control:focus { border-color: var(--k-olive) !important; box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important; outline: none !important; } body#contact .btn-primary, body.contact .btn-primary { background: var(--k-olive) !important; border: none !important; color: #fff !important; border-radius: var(--k-radius-sm) !important; text-transform: uppercase; font-weight: 600; padding: 11px 26px; } body#contact .btn-primary:hover, body.contact .btn-primary:hover { background: var(--k-deep) !important; } /* ===== Contact form: kill the blue CHOOSE FILE button ===== */ /* The button is a real