/*
Karenderia — Custom Modern Theme Override
Palette : Orange & Charcoal
Font : Inter
Author : Claude for basti's Karenderia
Version : 1.0
--------------------------------------------------------
HOW TO USE:
1. Add this file AFTER style.css in your :
2. Add the Google Fonts import to your BEFORE style.css:
3. Do NOT edit style.css — all overrides live here.
--------------------------------------------------------
*/
/* =========================================================
1. DESIGN TOKENS (single source of truth)
========================================================= */
:root {
/* Brand */
--k-orange: #f17821;
--k-orange-dark: #d96810;
--k-orange-light: #fff3e8;
--k-charcoal: #2d2d2d;
--k-charcoal-mid: #4a4a4a;
--k-gold: #ffc857;
/* Surfaces */
--k-bg-page: #f9f8f6;
--k-bg-surface: #f1f0ee;
--k-bg-input: #f4f3f1;
--k-bg-white: #ffffff;
/* Borders */
--k-border: #e8e6e3;
--k-border-dark: #d0cec9;
/* Text */
--k-text-primary: #2d2d2d;
--k-text-muted: #6b6b6b;
--k-text-light: #a0a0a0;
/* Status */
--k-green: #3ecf8e;
--k-green-dark: #2db87a;
--k-green-bg: #eaf8f2;
--k-red: #e84040;
--k-red-bg: #fdf0f0;
--k-yellow: #f7c942;
--k-yellow-bg: #fdf8e8;
/* Radius */
--k-radius-sm: 6px;
--k-radius-md: 10px;
--k-radius-lg: 14px;
--k-radius-xl: 20px;
--k-radius-pill: 999px;
/* Shadow */
--k-shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
--k-shadow-md: 0 4px 16px rgba(0,0,0,0.09);
--k-shadow-lg: 0 8px 28px rgba(0,0,0,0.12);
/* Transition */
--k-transition: 0.18s ease;
}
/* =========================================================
2. BASE TYPOGRAPHY & FONT
========================================================= */
html,
body {
font-family: 'Inter', 'Open Sans', sans-serif !important;
font-size: 14px !important;
color: var(--k-text-primary) !important;
background: var(--k-bg-page) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
}
/* Loosen up the locked 12px on cards / tables / paragraphs */
p,
.card,
.dataTables_info,
table,
.a-12,
.cart-summary {
font-size: 13px !important;
line-height: 1.6 !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', sans-serif !important;
color: var(--k-charcoal) !important;
letter-spacing: -0.02em;
}
h5 { font-size: 16px !important; font-weight: 700 !important; }
h6 { font-size: 14px !important; font-weight: 600 !important; }
a {
color: var(--k-charcoal);
transition: color var(--k-transition);
}
a:hover {
color: var(--k-orange) !important;
text-decoration: none;
}
a.no-hover:hover {
color: inherit !important;
}
/* Page backgrounds */
body.column2-layout,
.grey-bg,
#cmaps,
.page-grey {
background: var(--k-bg-page) !important;
}
/* =========================================================
3. BUTTONS
========================================================= */
.btn {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
border-radius: var(--k-radius-md) !important;
padding: 9px 20px !important;
transition: all var(--k-transition) !important;
letter-spacing: -0.01em;
line-height: 1.4;
}
.btn.small {
padding: 6px 14px !important;
font-size: 12px !important;
}
.btn.extra-small {
padding: 4px 10px !important;
font-size: 11px !important;
}
.btn.link {
padding: 0 !important;
font-size: 12px !important;
}
/* Primary — Orange */
.btn-green,
.btn-primary-orange {
background: var(--k-orange) !important;
color: #fff !important;
border: none !important;
}
.btn-green:hover,
.btn-primary-orange:hover {
background: var(--k-orange-dark) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(241, 120, 33, 0.35) !important;
}
.btn-green:focus,
.btn-primary-orange:focus {
box-shadow: 0 0 0 3px rgba(241, 120, 33, 0.25) !important;
color: #fff !important;
}
/* Green outlined */
.btn-green-line {
border: 1.5px solid var(--k-orange) !important;
color: var(--k-orange) !important;
background: transparent !important;
}
.btn-green-line:hover {
background: var(--k-orange) !important;
color: #fff !important;
}
/* Black → Charcoal */
.btn-black {
background: var(--k-charcoal) !important;
color: #fff !important;
border: none !important;
}
.btn-black:hover,
.btn-black:focus {
background: #111 !important;
color: rgba(255,255,255,0.9) !important;
}
/* White button */
.btn-white {
background: #fff !important;
color: var(--k-orange) !important;
border: 1.5px solid var(--k-border) !important;
}
.btn-white:hover {
border-color: var(--k-orange) !important;
}
/* Grey button */
.btn-grey {
background: var(--k-bg-surface) !important;
color: var(--k-text-muted) !important;
border: 1px solid var(--k-border) !important;
}
.btn-grey:hover {
background: var(--k-orange) !important;
color: #fff !important;
border-color: var(--k-orange) !important;
}
/* Disabled / loading */
.loading.btn,
.btn:disabled,
a[disabled="true"] {
background: var(--k-bg-surface) !important;
color: var(--k-text-light) !important;
border-color: var(--k-border) !important;
box-shadow: none !important;
transform: none !important;
}
/* Pill qty buttons */
.quantity a.rounded-pill,
.rounded-button-icon {
background: var(--k-bg-surface) !important;
color: var(--k-text-primary) !important;
border: 1px solid var(--k-border) !important;
transition: all var(--k-transition) !important;
}
.quantity a.rounded-pill:hover,
.rounded-button-icon:hover {
background: var(--k-charcoal) !important;
color: #fff !important;
border-color: var(--k-charcoal) !important;
}
/* Button groups */
.btn-group label,
.btn-group.big .btn {
background: var(--k-bg-surface) !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
}
.btn-group .btn.active {
background: var(--k-charcoal) !important;
color: #fff !important;
}
.btn-group-rounded .btn {
border-radius: var(--k-radius-pill) !important;
}
.btn-group-rounded {
background: var(--k-bg-surface) !important;
border-radius: var(--k-radius-pill) !important;
}
/* =========================================================
4. NAVIGATION
========================================================= */
#top-navigation {
background: var(--k-bg-white) !important;
border-bottom: 1px solid var(--k-border) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
body.front-page #top-navigation {
border-bottom: 0 !important;
}
ul.top-menu a,
.list-inline a,
.siderbar-menu a,
.menu-carousel a,
.drawer-preview-cart a {
font-family: 'Inter', sans-serif !important;
color: var(--k-charcoal) !important;
font-weight: 600 !important;
font-size: 13px !important;
}
ul.top-menu a:hover,
.list-inline a:hover,
.menu-category a:hover,
.siderbar-menu li.active a,
#menu-category .col a.active,
.btn.normal:hover,
.text-green,
.menu-carousel a.active,
.menu-carousel a:hover {
color: var(--k-orange) !important;
}
ul.top-menu li.active {
border-bottom: 2px solid var(--k-orange) !important;
}
/* Cart badge */
.cart-handle span.badge {
background: var(--k-orange) !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
}
/* Headroom sticky nav */
.headroom.headroom--pinned {
background: var(--k-bg-white) !important;
border-bottom: 1px solid var(--k-border) !important;
}
/* Category nav strip */
.category-nav {
background: var(--k-bg-white) !important;
}
.category-nav .container,
.sticky-wrapper.is-sticky .category-nav {
border-bottom: 1px solid var(--k-border) !important;
}
/* Dropdown menus */
.dropdown-menu {
border: 1px solid var(--k-border) !important;
border-radius: var(--k-radius-md) !important;
box-shadow: var(--k-shadow-md) !important;
padding: 6px !important;
}
.dropdown-menu a {
border-radius: var(--k-radius-sm) !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
padding: 8px 12px !important;
color: var(--k-text-primary) !important;
transition: background var(--k-transition) !important;
}
.dropdown-menu a:hover {
background: var(--k-bg-surface) !important;
color: var(--k-charcoal) !important;
}
.dropdown-menu a[disabled="true"] {
background: var(--k-bg-surface) !important;
color: var(--k-text-light) !important;
}
/* =========================================================
5. SIDEBAR (admin / user account)
========================================================= */
#sidebar {
background: var(--k-bg-white) !important;
border-right: 1px solid var(--k-border) !important;
box-shadow: none !important;
}
.siderbar-menu a {
border-radius: var(--k-radius-md) !important;
padding: 11px 20px !important;
transition: all var(--k-transition) !important;
color: var(--k-text-muted) !important;
font-weight: 500 !important;
}
.siderbar-menu a:hover {
background: var(--k-orange-light) !important;
color: var(--k-orange) !important;
}
.siderbar-menu li.active a {
background: var(--k-orange-light) !important;
color: var(--k-orange) !important;
font-weight: 600 !important;
}
/* Sub-menu active state */
ul.sub-menu li.active a {
background: var(--k-orange) !important;
color: #fff !important;
border-radius: var(--k-radius-md) !important;
}
ul.sub-menu li.active a:hover {
color: #fff !important;
}
ul.sub-menu li a {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
color: var(--k-charcoal) !important;
border-radius: var(--k-radius-md) !important;
transition: background var(--k-transition) !important;
}
ul.sub-menu li a:hover {
background: var(--k-bg-surface) !important;
}
/* =========================================================
6. CARDS & LIST ITEMS
========================================================= */
.card {
border: 1px solid var(--k-border) !important;
border-radius: var(--k-radius-lg) !important;
background: var(--k-bg-white) !important;
box-shadow: var(--k-shadow-sm) !important;
transition: box-shadow var(--k-transition), transform var(--k-transition) !important;
}
.card:hover {
box-shadow: var(--k-shadow-md) !important;
}
/* Restaurant / food list item cards */
.list-item-rows {
border: 1px solid var(--k-border) !important;
border-radius: var(--k-radius-lg) !important;
overflow: hidden !important;
transition: all var(--k-transition) !important;
background: var(--k-bg-white) !important;
}
.list-item-rows:hover {
box-shadow: var(--k-shadow-md) !important;
transform: translateY(-2px) !important;
}
/* Swiper cards */
.swiperResto .swiperSlide,
.rounded-box {
border: 1px solid var(--k-border) !important;
border-radius: var(--k-radius-lg) !important;
background: var(--k-bg-white) !important;
transition: all var(--k-transition) !important;
}
.swiperResto .swiperSlide:hover,
.rounded-box:hover {
box-shadow: var(--k-shadow-md) !important;
transform: translateY(-2px) !important;
}
/* Join sections */
.join-sections .content {
border: 1px solid var(--k-border) !important;
border-bottom-left-radius: var(--k-radius-lg) !important;
border-bottom-right-radius: var(--k-radius-lg) !important;
}
/* =========================================================
7. BADGES
========================================================= */
.badge {
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
.badge-light {
color: var(--k-text-muted) !important;
background-color: var(--k-bg-surface) !important;
}
.badge.badge-green,
.badge-success {
background: var(--k-green) !important;
color: #fff !important;
}
.badge.badge-yellow {
background: var(--k-gold) !important;
color: var(--k-charcoal) !important;
}
.badge-grey {
background: var(--k-bg-surface) !important;
color: var(--k-text-muted) !important;
}
/* Promo tag */
.with-promo {
background-color: var(--k-orange) !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
border-radius: 0 var(--k-radius-sm) var(--k-radius-sm) 0 !important;
}
/* Bordered selected box */
.bordered-box.selected {
border-color: var(--k-orange) !important;
}
.bordered-box.selected .text-xs {
color: var(--k-orange) !important;
}
/* =========================================================
8. FORMS & INPUTS
========================================================= */
.form-control-text,
.form-control-select {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
background: var(--k-bg-input) !important;
border: 1.5px solid transparent !important;
border-radius: var(--k-radius-md) !important;
min-height: 48px !important;
color: var(--k-text-primary) !important;
transition: border-color var(--k-transition), box-shadow var(--k-transition) !important;
}
.form-control-text:focus,
.form-control-select:focus {
background: var(--k-bg-white) !important;
border-color: var(--k-orange) !important;
box-shadow: 0 0 0 3px rgba(241,120,33,0.15) !important;
outline: none !important;
}
.form-control-text.form-control-text-white {
background: var(--k-bg-white) !important;
}
/* Search geocomplete */
.search-geocomplete {
background: var(--k-bg-input) !important;
border-radius: var(--k-radius-pill) !important;
border: 1.5px solid transparent !important;
transition: border-color var(--k-transition), box-shadow var(--k-transition) !important;
}
.search-geocomplete:focus-within {
border-color: var(--k-orange) !important;
box-shadow: 0 0 0 3px rgba(241,120,33,0.15) !important;
}
.search-geocomplete-results {
border: 1px solid var(--k-border) !important;
border-radius: var(--k-radius-md) !important;
box-shadow: var(--k-shadow-md) !important;
}
.search-geocomplete-results a:hover,
.list-with-icon-button li:hover {
background-color: var(--k-bg-surface) !important;
}
/* Suggestion results dropdown */
.suggestion-results {
border: 1px solid var(--k-border) !important;
border-radius: var(--k-radius-md) !important;
box-shadow: var(--k-shadow-md) !important;
}
.suggestion-search-list li:hover {
background-color: var(--k-bg-surface) !important;
}
/* Typeahead */
.typeahead__result {
border: 1px solid var(--k-border) !important;
border-radius: var(--k-radius-md) !important;
box-shadow: var(--k-shadow-md) !important;
}
.typeahead__list .typeahead__item:hover {
background: var(--k-bg-surface) !important;
}
/* Inputs with dropdown */
.inputs-with-dropdown,
.inputs-with-dropdown input {
background: var(--k-bg-input) !important;
border-radius: var(--k-radius-md) !important;
}
/* Inputs box grey */
.inputs-box-grey {
background: var(--k-bg-surface) !important;
}
.inputs-box-grey:focus {
box-shadow: inset 0 -1px 0 var(--k-orange) !important;
}
.inputs-box-grey.rounded {
border-radius: var(--k-radius-pill) !important;
}
/* Input group small */
.input-group-small .btn {
font-size: 12px !important;
padding: 6px 16px !important;
}
.input-group-small .form-control-text {
min-height: 36px !important;
font-size: 12px !important;
}
/* Addon required highlight */
.addon-required {
background: var(--k-yellow-bg) !important;
border-left: 3px solid var(--k-yellow) !important;
color: var(--k-charcoal) !important;
border-radius: var(--k-radius-sm) !important;
padding: 6px 10px !important;
font-weight: 500 !important;
}
/* Addon row heads */
.addon-rows .heads {
background: var(--k-bg-surface) !important;
border-radius: var(--k-radius-sm) !important;
}
/* Custom switch colours */
.custom-control-input:checked ~ .custom-control-label::before {
background: var(--k-orange) !important;
border-color: var(--k-orange) !important;
}
.custom-range::-moz-range-thumb {
background-color: var(--k-orange) !important;
}
/* Dropzone */
.dropzone_container {
border: 2px dashed var(--k-border-dark) !important;
border-radius: var(--k-radius-md) !important;
transition: border-color var(--k-transition) !important;
}
.dropzone_container:hover {
border-color: var(--k-orange) !important;
}
.avatar-uploader .el-upload:hover {
border-color: var(--k-orange) !important;
}
/* Alert success */
.alert-success {
background-color: var(--k-green-bg) !important;
border-color: var(--k-green) !important;
color: var(--k-charcoal) !important;
}
/* Form error */
form .errorMessage {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
color: var(--k-red) !important;
}
/* =========================================================
9. NAVIGATION — HOVER STATES & ACTIVE COLOURS
========================================================= */
/* Menu category sidebar */
.menu-category a {
color: var(--k-text-muted) !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
border-radius: var(--k-radius-sm) !important;
padding: 6px 8px !important;
transition: color var(--k-transition) !important;
}
.menu-category li.active a,
.menu-category li a.active {
color: var(--k-charcoal) !important;
font-weight: 700 !important;
}
.menu-category li.active a:after,
.menu-category li a.active:after {
border-left-color: var(--k-orange) !important;
}
/* Chevron sections */
.chevron-section {
border: 1px solid var(--k-border) !important;
border-radius: var(--k-radius-md) !important;
margin-bottom: 6px;
transition: box-shadow var(--k-transition) !important;
}
.chevron-section.selected {
border-left: 3px solid var(--k-orange) !important;
}
a.chevron-section:hover,
.section-menu a.highlight:hover {
box-shadow: var(--k-shadow-sm) !important;
}
/* List hover */
.list-selection li:hover {
background: var(--k-bg-surface) !important;
border-radius: var(--k-radius-md) !important;
}
/* Address section active */
.address-section.active {
border: 1.5px solid var(--k-orange) !important;
background: var(--k-orange-light) !important;
}
.address-section {
border: 1px solid var(--k-border) !important;
border-radius: var(--k-radius-md) !important;
}
/* Border green → orange */
.border-green,
.btn-green-line {
border-color: var(--k-orange) !important;
}
.border-vertical-green {
border-left: 10px solid var(--k-orange) !important;
}
/* =========================================================
10. CART & ORDER SECTIONS
========================================================= */
.section-cart .items,
.divider {
border-bottom: 1px solid var(--k-border) !important;
}
.cart-summary {
font-size: 13px !important;
}
.big-new-button {
background: var(--k-charcoal) !important;
border-radius: var(--k-radius-lg) !important;
}
.big-new-button:after {
border-top-color: var(--k-charcoal) !important;
}
/* Cart drawer / sidebar panel */
.sidebar-panel,
.order-details-panel {
background: var(--k-bg-white) !important;
box-shadow: var(--k-shadow-lg) !important;
border-left: 1px solid var(--k-border) !important;
}
/* =========================================================
11. ORDER PROGRESS BAR
========================================================= */
#progressbar li:before,
#progressbar li:after {
background: var(--k-bg-surface) !important;
}
#progressbar li.active:before,
#progressbar li.active:after {
background: var(--k-orange) !important;
}
#progressbar li.progressing:before {
animation: pulse-orange 2s infinite !important;
}
@keyframes pulse-orange {
0% { box-shadow: 0 0 0 0 rgba(241,120,33,0.7); }
70% { box-shadow: 0 0 0 10px rgba(241,120,33,0); }
100% { box-shadow: 0 0 0 0 rgba(241,120,33,0); }
}
.progressing .progress-value {
background: var(--k-orange) !important;
}
#progressbar li.order_failed:before,
#progressbar li.order_failed:after {
background: var(--k-red) !important;
}
/* =========================================================
12. MODALS
========================================================= */
.modal-content {
border: none !important;
border-radius: var(--k-radius-xl) !important;
box-shadow: var(--k-shadow-lg) !important;
overflow: hidden;
}
.modal-header {
border-bottom: 1px solid var(--k-border) !important;
padding: 16px 20px !important;
}
.modal-footer {
border-top: 1px solid var(--k-border) !important;
padding: 14px 20px !important;
}
.modal-body {
padding: 20px !important;
}
/* =========================================================
13. FOOTER
========================================================= */
footer,
.change-address-wrap,
.grey-section {
background: var(--k-bg-surface) !important;
border-top: 1px solid var(--k-border) !important;
margin-top: 40px !important;
}
.sub-footer,
.sub-footer-nav {
border-top: 1px solid var(--k-border) !important;
}
#footer-none-bg footer {
background: none !important;
border-top: 1px solid var(--k-border) !important;
}
/* =========================================================
14. COLOUR HELPERS — unify the multi-green problem
========================================================= */
/* Everything that was #00b14f or #2d9f5f → canonical orange or green */
.text-green {
color: var(--k-orange) !important;
}
/* Gold star rating colour */
.gold-color {
color: var(--k-gold) !important;
}
/* Red text */
.text-red {
color: var(--k-red) !important;
}
/* Grey text */
.text-grey,
.light {
color: var(--k-text-muted) !important;
}
/* Warm pink */
.warm-pink {
color: #e07a6e !important;
}
/* Section title accent */
.section-title span {
color: var(--k-orange) !important;
}
.change-address-wrap a {
color: var(--k-orange) !important;
}
/* Offers / promo section */
.offers-container {
background: var(--k-orange-light) !important;
}
/* Other promo wrap */
.other-promo-wrap {
background: var(--k-bg-surface) !important;
border-radius: var(--k-radius-lg) !important;
}
/* Yellow background accent */
.yellow-bg {
background: var(--k-yellow-bg) !important;
}
/* Loader spinner — use orange */
[data-loader='circle'] {
border-color: var(--k-orange) !important;
border-top-color: transparent !important;
}
/* =========================================================
15. WIDGET DROPDOWNS
========================================================= */
.widget-dropdown button {
background: var(--k-bg-surface) !important;
border-radius: var(--k-radius-pill) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 13px !important;
color: var(--k-text-primary) !important;
border: 1px solid var(--k-border) !important;
transition: all var(--k-transition) !important;
}
.widget-dropdown button:hover {
border-color: var(--k-orange) !important;
}
.widget-dropdown .dropdown-menu {
background: var(--k-bg-white) !important;
border-radius: var(--k-radius-md) !important;
border: 1px solid var(--k-border) !important;
box-shadow: var(--k-shadow-md) !important;
overflow: hidden !important;
}
.widget-dropdown a:hover {
background: var(--k-bg-surface) !important;
color: var(--k-charcoal) !important;
}
/* =========================================================
16. SOCIAL LOGIN
========================================================= */
.social-login a {
border: 1.5px solid var(--k-border) !important;
border-radius: var(--k-radius-lg) !important;
transition: border-color var(--k-transition), box-shadow var(--k-transition) !important;
}
.social-login a:hover {
border-color: var(--k-orange) !important;
box-shadow: 0 0 0 3px rgba(241,120,33,0.1) !important;
}
/* =========================================================
17. ELEMENT UI OVERRIDES (Vue / Element Plus)
========================================================= */
.el-button.is-rounded {
border-radius: var(--k-radius-md) !important;
}
.el-button.disabled {
cursor: not-allowed !important;
}
.rounded .el-input__wrapper {
border-radius: var(--k-radius-pill) !important;
}
.avatar-uploader .el-upload {
border-radius: var(--k-radius-md) !important;
}
.el-radio-group.block label {
font-family: 'Inter', sans-serif !important;
}
/* El tag wrapping */
span.el-tag {
white-space: normal !important;
font-family: 'Inter', sans-serif !important;
}
/* =========================================================
18. SKELETON & LOADING STATES
========================================================= */
.skeleton-placeholder {
background: var(--k-bg-surface) !important;
border-radius: var(--k-radius-sm) !important;
}
/* =========================================================
19. SCROLLBAR (Webkit)
========================================================= */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--k-bg-surface);
}
::-webkit-scrollbar-thumb {
background: var(--k-border-dark);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--k-text-light);
}
/* =========================================================
20. UTILITY OVERRIDES
========================================================= */
.line-left {
border-left: 1px solid var(--k-border) !important;
}
.border-top-bottom-grey {
border-top: 1px solid var(--k-border) !important;
border-bottom: 1px solid var(--k-border) !important;
}
.list-item-rows,
.list-with-icon-button li {
border-color: var(--k-border) !important;
}
.list-with-icon-button li {
padding: 14px 0 !important;
}
/* Result empty state */
.result {
background: var(--k-bg-surface) !important;
border-radius: var(--k-radius-md) !important;
font-family: 'Inter', sans-serif !important;
}
/* Read more link */
.read-more {
color: var(--k-orange) !important;
}
/* Discount icon tint */
.discount-icon {
color: var(--k-orange) !important;
filter: brightness(0) saturate(100%) invert(47%) sepia(72%) saturate(1200%) hue-rotate(5deg) !important;
}
/* Bg-lighter */
.bg-lighter {
background: var(--k-bg-surface) !important;
color: var(--k-text-muted) !important;
border-radius: var(--k-radius-sm) !important;
}
/* Image hover zoom */
.hover01 figure {
border-radius: var(--k-radius-md) !important;
overflow: hidden !important;
}
/* Section menu divider */
.section-menu .menu-left {
border-right: 1px solid var(--k-border) !important;
}
/* =========================================================
21. MOBILE — RESPONSIVE TWEAKS
========================================================= */
@media (max-width: 768px) {
body {
font-size: 14px !important;
}
.btn {
padding: 10px 18px !important;
font-size: 13px !important;
}
.card {
border-radius: var(--k-radius-md) !important;
}
.modal-content {
border-radius: var(--k-radius-lg) !important;
}
#top-navigation {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.form-control-text,
.form-control-select {
min-height: 46px !important;
font-size: 14px !important;
}
.sidebar-panel,
.order-details-panel {
width: 100% !important;
border-radius: var(--k-radius-xl) var(--k-radius-xl) 0 0 !important;
}
/* Swiper cards tighter on mobile */
.swiperResto .swiperSlide,
.rounded-box {
border-radius: var(--k-radius-md) !important;
}
}
@media (max-width: 480px) {
p, .card, table, .a-12, .cart-summary {
font-size: 12px !important;
}
}