.dpi-shortcode-wrapper {
width: 100%;
} .dpi-product-grid-wrapper {
display: flex;
gap: 24px;
align-items: flex-start;
max-width: 1440px;
margin: 0 auto;
padding: 32px 24px 80px;
font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
color: #333;
box-sizing: border-box;
} .dpi-vehiculier-section {
background: #f8f8f8;
padding: 32px 24px 36px;
margin-bottom: 0;
}
.dpi-vehiculier-inner {
max-width: 1440px;
margin: 0 auto;
}
.dpi-vehiculier-title {
margin-bottom: 16px;
}
.dpi-vehiculier-title h2 {
margin: 0 0 6px !important;
font-family: Neuropolitical, "SF Pro Display", sans-serif !important;
font-size: 32px !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #000 !important;
line-height: 1.2 !important;
}
.dpi-vehiculier-title h2 span {
color: #FF0000 !important;
}
.dpi-vehiculier-title p {
margin: 0 !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 15px !important;
color: #666 !important;
}
.dpi-vehiculier-wrapper {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 24px 28px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.dpi-vehiculier-row {
display: flex;
align-items: center;
gap: 10px;
}
.dpi-vehiculier-selects {
display: flex;
flex: 1;
gap: 10px;
width:100%;
}
.dpi-vehiculier-select {
flex: 1;
min-width: 0;
padding: 12px 36px 12px 14px !important;
background: #fff;
border: 1px solid #e0e0e0 !important;
border-radius: 10px !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 14px !important;
color: #333;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
transition: border-color 0.2s!important;
}
.dpi-vehiculier-select:focus {
border-color: #FF0000;
outline: none;
box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.1);
}
.dpi-vehiculier-select:disabled {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
} .dpi-searchable-wrap {
position: relative;
flex: 1;
min-width: 0;
}
.dpi-searchable-input {
width: 100%;
box-sizing: border-box;
}
.dpi-searchable-input::placeholder {
color: #999;
}
.dpi-searchable-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 220px;
overflow-y: auto;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
z-index: 101;
padding: 4px;
}
.dpi-searchable-option {
padding: 10px 14px;
font-family: "SF Pro Display", sans-serif;
font-size: 14px;
color: #333;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
}
.dpi-searchable-option:hover {
background: #f5f5f5;
}
.dpi-searchable-empty {
padding: 12px 14px;
font-family: "SF Pro Display", sans-serif;
font-size: 13px;
color: #999;
text-align: center;
}
.dpi-vehiculier-btn {
padding: 12px 24px;
white-space: nowrap;
background: #FF0000 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
font-family: Neuropolitical, "SF Pro Display", sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background 0.2s, box-shadow 0.2s;
flex-shrink: 0;
}
.dpi-vehiculier-btn:hover:not(:disabled) {
background: #cc0000 !important;
box-shadow: 0 4px 12px rgba(255, 0, 0, 0.25);
}
.dpi-vehiculier-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
} .dpi-vehiculier-separator {
display: flex;
align-items: center;
gap: 16px;
margin: 16px 0;
}
.dpi-vehiculier-separator::before,
.dpi-vehiculier-separator::after {
content: '';
flex: 1;
height: 1px;
background: #e5e5e5;
}
.dpi-vehiculier-separator span {
font-family: "SF Pro Display", sans-serif !important;
font-size: 13px !important;
color: #999 !important;
text-transform: uppercase;
letter-spacing: 1px;
flex-shrink: 0;
} .dpi-vehiculier-search {
position: relative;
}
.dpi-vehiculier-search .dpi-search-bar-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #999;
pointer-events: none;
}
.dpi-vehiculier-search .dpi-filter-search {
width: 100%;
padding: 12px 16px 12px 42px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 10px !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 14px !important;
color: #333 !important;
background: #fff !important;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
.dpi-vehiculier-search .dpi-filter-search:focus {
border-color: #FF0000 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1) !important;
} .dpi-vehicle-bar {
position: sticky;
top: 0;
z-index: 100;
background: #fff;
border-bottom: 1px solid #e5e5e5;
padding: 10px 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.admin-bar .dpi-vehicle-bar {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .dpi-vehicle-bar {
top: 46px;
}
}
.dpi-vehicle-bar-inner {
max-width: 1440px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.dpi-vehicle-bar-left {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.dpi-vehicle-bar-icon {
color: #666;
flex-shrink: 0;
width: 40px;
height: 40px;
}
.dpi-vehicle-bar.dpi-vehicle-applied .dpi-vehicle-bar-icon {
color: #FF0000;
}
.dpi-vehicle-bar-label {
font-family: "SF Pro Display", sans-serif;
font-size: 13px;
font-weight: 600;
color: #666;
white-space: nowrap;
}
.dpi-vehicle-bar-value {
font-family: "SF Pro Display", sans-serif;
font-size: 15px;
color: #999;
white-space: nowrap;
}
.dpi-vehicle-bar.dpi-vehicle-applied .dpi-vehicle-bar-value {
color: #000;
font-weight: 600;
}
.dpi-vehicle-bar-action {
background: none;
border: 1px solid #ddd;
border-radius: 4px!important;
padding: 3px 8px;
font-family: "SF Pro Display", sans-serif!important;
font-size: 14px!important;
font-weight: 500!important;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.dpi-vehicle-bar-action:hover {
background: #FF0000;
border-color: #FF0000;
color: #fff;
}
.dpi-vehicle-bar-delete {
display: none;
align-items: center;
color: #bbb;
cursor: pointer;
transition: color 0.2s;
margin-left: 2px;
}
.dpi-vehicle-bar-delete:hover {
color: #FF0000;
}
.dpi-vehicle-bar.dpi-vehicle-applied .dpi-vehicle-bar-delete {
display: flex;
}
.dpi-vehicle-bar-right {
flex: 1;
max-width: 520px;
min-width: 200px;
}
.dpi-vehicle-bar-search {
display: flex;
align-items: center;
background: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 36px;
padding: 1px 4px;
transition: border-color 0.2s;
}
.dpi-vehicle-bar-search:focus-within {
border-color: #FF0000;
background: #fff;
}
.dpi-vehicle-bar-search .dpi-filter-search {
border: none !important;
background: none !important;
padding: 10px 16px !important;
margin: 0 !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 14px !important;
color: #333 !important;
width: 100% !important;
outline: none !important;
box-shadow: none !important;
border-radius: 8px 0 0 8px !important;
}
.dpi-vehicle-bar-search .dpi-filter-search::placeholder {
color: #aaa;
}
.dpi-vehicle-bar-search-btn {
display: flex;
align-items: center;
justify-content: center;
background: #FF0000;
border: none;
color: #fff;
padding: 10px 14px;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
border-radius: 0 8px 8px 0;
}
.dpi-vehicle-bar-search-btn:hover {
background: #cc0000;
} .dpi-vehiculier-section.dpi-hidden {
display: none;
} .dpi-filters-sidebar {
width: 260px;
min-width: 260px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 12px;
padding: 20px;
position: sticky;
top: 100px;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
.dpi-filters-sidebar::-webkit-scrollbar {
width: 4px;
}
.dpi-filters-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.dpi-filters-sidebar::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 4px;
}
.dpi-filters-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #f0f0f0;
}
.dpi-filters-header h3 {
margin: 0 !important;
font-family: Neuropolitical, "SF Pro Display", sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #000 !important;
}
.dpi-filters-close {
display: none;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
padding: 0;
line-height: 1;
color: #666;
}
.dpi-filters-reset {
display: none;
width: 100%;
padding: 8px 16px !important;
margin-bottom: 16px;
background: #FF0000 !important;
border: none !important;
border-radius: 4px !important;
cursor: pointer;
font-family: "SF Pro Display", sans-serif !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #fff !important;
transition: background 0.2s;
}
.dpi-filters-reset:hover {
background: #cc0000 !important;
} .dpi-filter-group {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.dpi-filter-group:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.dpi-filter-label {
display: block;
font-family: Neuropolitical, "SF Pro Display", sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
color: #000 !important;
margin-bottom: 8px !important;
}
.dpi-filter-toggle-label {
cursor: pointer;
user-select: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.dpi-toggle-icon {
font-size: 10px;
color: #999;
transition: transform 0.2s;
}
.dpi-filter-content {
transition: max-height 0.3s ease;
overflow-x: hidden;
} .dpi-filter-search {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 13px !important;
box-sizing: border-box;
transition: border-color 0.2s;
}
.dpi-filter-search:focus {
border-color: #FF0000 !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.1) !important;
} .dpi-filter-checkbox-list {
max-height: 240px;
overflow-y: auto;
}
.dpi-filter-checkbox-list::-webkit-scrollbar {
width: 3px;
}
.dpi-filter-checkbox-list::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 3px;
}
.dpi-filter-nested {
margin-left: 16px;
}
.dpi-filter-checkbox {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0;
font-family: "SF Pro Display", sans-serif !important;
font-size: 12px !important;
color: #444 !important;
cursor: pointer;
line-height: 1.3 !important;
}
.dpi-filter-checkbox:hover {
color: #000 !important;
}
.dpi-filter-checkbox input[type="checkbox"] {
margin: 0;
accent-color: #FF0000;
flex-shrink: 0;
}
.dpi-filter-count {
color: #aaa !important;
font-size: 11px !important;
flex-shrink: 0;
} .dpi-filter-categories {
display: flex;
flex-direction: column;
}
.dpi-cat-row {
display: flex;
align-items: center;
padding: 8px 4px;
border-bottom: 1px solid #f0f0f0;
border-radius: 4px;
transition: background 0.15s, opacity 0.2s;
}
.dpi-cat-row:hover {
background: #f8f8f8;
} .dpi-cat-row.dpi-cat-empty {
opacity: 0.35;
pointer-events: none;
cursor: default;
}
.dpi-cat-row.dpi-cat-empty .dpi-cat-name {
cursor: default;
}
.dpi-cat-name {
flex: 1;
font-family: "SF Pro Display", sans-serif !important;
font-size: 13px !important;
color: #444 !important;
cursor: pointer;
transition: color 0.15s, font-weight 0.15s;
padding: 2px 4px;
border-radius: 4px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dpi-cat-name:hover {
color: #FF0000 !important;
}
.dpi-cat-name.active {
color: #FF0000 !important;
font-weight: 600 !important;
background: rgba(255, 0, 0, 0.06);
}
.dpi-cat-count {
color: #aaa !important;
font-size: 11px !important;
flex-shrink: 0;
margin-left: 4px;
margin-right: 4px;
transition: color 0.2s;
}
.dpi-cat-toggle {
background: none;
border: none;
padding: 4px;
cursor: pointer;
color: #999;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.dpi-cat-toggle:hover {
color: #666;
}
.dpi-cat-toggle.open {
transform: rotate(90deg);
}
.dpi-cat-children {
padding-left: 16px;
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease;
}
.dpi-cat-children.open {
max-height: 500px;
}
.dpi-cat-children .dpi-cat-name {
font-size: 12px !important;
}
.dpi-cat-children .dpi-cat-row {
padding: 6px 4px;
} .dpi-filter-brands {
display: flex;
flex-direction: column;
}
.dpi-brand-logo {
width: 24px;
height: 18px;
object-fit: contain;
flex-shrink: 0;
border-radius: 3px;
margin-right: 2px;
}
.dpi-brand-name {
flex: 1;
font-family: "SF Pro Display", sans-serif !important;
font-size: 13px !important;
color: #444 !important;
cursor: pointer;
transition: color 0.15s, font-weight 0.15s;
padding: 2px 4px;
border-radius: 4px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dpi-brand-name:hover {
color: #FF0000 !important;
}
.dpi-brand-name.active {
color: #FF0000 !important;
font-weight: 600 !important;
background: rgba(255, 0, 0, 0.06);
}
.dpi-brand-count {
color: #aaa !important;
font-size: 11px !important;
flex-shrink: 0;
margin-left: 4px;
margin-right: 4px;
transition: color 0.2s;
} .dpi-price-range {
padding: 4px 0;
}
.dpi-price-inputs {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.dpi-price-inputs input[type="number"] {
width: 80px;
padding: 6px 8px;
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 13px !important;
text-align: center;
}
.dpi-price-inputs input[type="number"]:focus {
border-color: #FF0000 !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.1) !important;
}
.dpi-price-separator {
color: #999;
}
.dpi-price-currency {
color: #666;
font-size: 13px !important;
} .dpi-range-slider {
position: relative;
height: 30px;
}
.dpi-range-slider input[type="range"] {
position: absolute;
width: 100%;
top: 0;
height: 30px;
margin: 0;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
background: transparent;
}
.dpi-range-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: #FF0000;
border-radius: 50%;
cursor: pointer;
pointer-events: all;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
margin-top: -7.5px;
}
.dpi-range-slider input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: #FF0000;
border-radius: 50%;
cursor: pointer;
pointer-events: all;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.dpi-range-slider input[type="range"]::-webkit-slider-runnable-track {
height: 3px;
background: #e0e0e0;
border-radius: 2px;
margin-top: 0;
}
.dpi-range-slider input[type="range"]::-moz-range-track {
height: 3px;
background: #e0e0e0;
border-radius: 2px;
border: none;
} .dpi-filter-content select {
width: 100%;
padding: 8px 10px;
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 12px !important;
margin-bottom: 8px;
background: #fff;
color: #333 !important;
}
.dpi-filter-content select:focus {
border-color: #FF0000 !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.1) !important;
}
.dpi-filter-content select:disabled {
background: #f5f5f5;
color: #999 !important;
} .dpi-filter-spec-select {
width: 100%;
padding: 8px 10px;
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 12px !important;
} .dpi-products-container {
flex: 1;
min-width: 0;
position: relative;
} .dpi-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.75);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
pointer-events: all;
border-radius: inherit;
}
.dpi-spinner {
width: 32px;
height: 32px;
border: 3px solid #e5e5e5;
border-top-color: #FF0000;
border-radius: 50%;
animation: dpi-spin 0.7s linear infinite;
}
.dpi-spinner-sm {
width: 18px;
height: 18px;
border-width: 2px;
} .dpi-vehiculier-select.dpi-select-loading {
pointer-events: none;
opacity: 0.6;
background-image: none !important;
} .dpi-category-grid-section.dpi-is-loading {
position: relative;
min-height: 200px;
}
.dpi-category-grid-section.dpi-is-loading .dpi-category-grid {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.2s;
} .dpi-products-container.dpi-is-loading {
position: relative;
min-height: 200px;
}
.dpi-filters-sidebar.dpi-locked {
pointer-events: none;
opacity: 0.6;
transition: opacity 0.2s;
}
.dpi-vehiculier-wrapper.dpi-locked {
pointer-events: none;
opacity: 0.6;
transition: opacity 0.2s;
} .dpi-products-topbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 10px 0;
}
.dpi-products-count {
font-family: "SF Pro Display", sans-serif !important;
font-size: 14px !important;
color: #666 !important;
}
.dpi-products-topbar-right {
display: flex;
align-items: center;
gap: 10px;
}
.dpi-sort-select {
padding: 6px 10px;
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 13px !important;
background: #fff;
}
.dpi-sort-select:focus {
border-color: #FF0000 !important;
outline: none !important;
}
.dpi-filters-toggle {
display: none;
padding: 8px 20px !important;
background: #FF0000 !important;
color: #fff !important;
border: none !important;
border-radius: 100px !important;
cursor: pointer;
font-family: Neuropolitical, "SF Pro Display", sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.dpi-filters-toggle:hover {
background: #cc0000 !important;
} .dpi-products-grid {
display: grid;
grid-template-columns: repeat(var(--dpi-cols, 4), 1fr);
gap: 20px;
} .dpi-product-card {
background: #fff !important;
border: 1px solid #e8e8e8 !important;
border-radius: 10px !important;
overflow: hidden;
transition: box-shadow 0.2s, transform 0.2s;
display: flex;
flex-direction: column;
}
.dpi-product-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
transform: translateY(-2px);
}
.dpi-product-link {
text-decoration: none !important;
color: inherit !important;
display: flex;
flex-direction: column;
flex: 1;
}
.dpi-product-image {
position: relative;
padding-top: 100%;
overflow: hidden;
}
.dpi-product-image > img,
.dpi-product-image > .wp-post-image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
transition: transform 0.3s;
}
.dpi-product-card:hover .dpi-product-image > img,
.dpi-product-card:hover .dpi-product-image > .wp-post-image {
transform: scale(1.05);
} .dpi-brand-badge {
position: absolute !important;
top: 8px !important;
left: 8px !important;
z-index: 2 !important;
background: rgba(255, 255, 255, 0.92) !important;
border-radius: 6px !important;
padding: 4px 6px !important;
line-height: 1 !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}
.dpi-brand-badge img {
position: static !important;
width: auto !important;
height: 28px !important;
max-width: 80px !important;
padding-top: 0 !important;
object-fit: contain !important;
display: block !important;
}
.dpi-brand-badge-text {
font-family: Neuropolitical, "SF Pro Display", sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: #333 !important;
letter-spacing: 0.5px !important;
padding: 5px 10px !important;
}
.dpi-product-title {
font-family: "SF Pro Display", -apple-system, sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: #000 !important;
margin: 12px 14px 4px !important;
line-height: 1.3 !important;
text-align: center !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dpi-product-brand {
display: block !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
color: #888 !important;
margin: 0 14px 6px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-align: center !important;
}
.dpi-product-price {
font-family: "SF Pro Display", -apple-system, sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
color: #FF0000 !important;
margin: 0 14px 12px !important;
text-align: center !important;
}
.dpi-product-price del {
color: #999 !important;
font-size: 13px !important;
font-weight: 300 !important;
}
.dpi-product-price ins {
text-decoration: none !important;
color: #FF0000 !important;
}
.dpi-product-price-na {
color: #999 !important;
font-size: 13px !important;
font-style: italic !important;
}
.dpi-product-info {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 14px;
flex: 1;
}
.dpi-product-cat {
font-family: "SF Pro Display", sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #999 !important;
margin: 10px 14px 2px !important;
text-align: center !important;
}
.dpi-product-sku {
font-family: "SF Pro Display", sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
color: #aaa !important;
margin: 2px 14px 4px !important;
text-align: center !important;
}
.dpi-product-stock {
font-family: "SF Pro Display", sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
margin: 4px 14px 0 !important;
text-align: center !important;
}
.dpi-product-stock.in-stock {
color: #22c55e !important;
}
.dpi-product-stock.out-of-stock {
color: #ef4444 !important;
}
.dpi-product-img-placeholder {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 48px !important;
color: #ddd !important;
background: #f5f5f5 !important;
}
.dpi-product-add-to-cart {
display: block !important;
text-align: center !important;
padding: 12px 24px !important;
margin: 0 14px 14px !important;
background: #FF0000 !important;
color: #fff !important;
border: none !important;
border-radius: 100px !important;
font-family: Neuropolitical, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
text-transform: uppercase !important;
cursor: pointer;
transition: background 0.2s;
text-decoration: none !important;
}
.dpi-product-add-to-cart:hover {
background: #cc0000 !important;
color: #fff !important;
} .dpi-products-loading {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: #bbb !important;
font-size: 13px !important;
}
@keyframes dpi-spin {
to { transform: rotate(360deg); }
} .dpi-no-products {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: #999 !important;
font-size: 15px !important;
} .dpi-products-pagination {
text-align: center;
margin-top: 24px;
}
.dpi-load-more-btn {
display: inline-block;
padding: 12px 32px !important;
background: #FF0000 !important;
color: #fff !important;
border: none !important;
border-radius: 100px !important;
cursor: pointer;
font-family: Neuropolitical, "SF Pro Display", sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: background 0.2s;
}
.dpi-load-more-btn:hover {
background: #cc0000 !important;
}
.dpi-load-more-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.dpi-load-more-btn.loading::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-left: 8px;
border: 2px solid transparent;
border-top-color: #fff;
border-radius: 50%;
animation: dpi-spin 0.8s linear infinite;
vertical-align: middle;
} .dpi-pagination-numbers {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.dpi-pagination-numbers a,
.dpi-pagination-numbers span {
display: inline-block;
padding: 8px 14px;
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-size: 13px !important;
text-decoration: none !important;
color: #333 !important;
cursor: pointer;
transition: background 0.2s;
}
.dpi-pagination-numbers a:hover {
background: #f5f5f5 !important;
}
.dpi-pagination-numbers .dpi-page-current {
background: #FF0000 !important;
color: #fff !important;
border-color: #FF0000 !important;
} .dpi-filters-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 99998;
} @media screen and (max-width: 991px) {
.dpi-products-grid {
--dpi-cols: 3 !important;
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 768px) {
.dpi-product-grid-wrapper {
flex-direction: column;
padding: 0 16px;
}
.dpi-filters-sidebar {
display: none;
position: fixed;
top: 0;
left: 0;
width: 85%;
max-width: 320px;
height: 100%;
max-height: 100vh;
z-index: 99999;
border-radius: 0;
border: none;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
}
.dpi-filters-sidebar.dpi-sidebar-open {
display: block;
}
.dpi-filters-close {
display: block;
}
.dpi-filters-toggle {
display: inline-block;
}
.dpi-filters-overlay.active {
display: block;
}
.dpi-products-grid {
--dpi-cols: 2 !important;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.dpi-product-title {
font-size: 14px !important;
}
.dpi-product-brand {
font-size: 11px !important;
}
.dpi-product-price {
font-size: 14px !important;
}
.dpi-product-add-to-cart {
margin: 0 10px 10px !important;
padding: 8px 10px !important;
font-size: 10px !important;
}
.dpi-vehiculier-section {
padding: 24px 16px 32px;
}
.dpi-vehiculier-title h2 {
font-size: 22px !important;
}
.dpi-vehiculier-wrapper {
padding: 18px 14px;
}
.dpi-vehiculier-row {
flex-direction: column;
gap: 10px;
}
.dpi-vehiculier-selects {
flex-direction: column;
gap: 8px;
}
.dpi-vehiculier-btn {
width: 100%;
font-size: 12px !important;
padding: 12px !important;
}
.dpi-vehiculier-separator {
margin: 12px 0;
}
.dpi-vehicle-bar-inner {
flex-wrap: wrap;
}
.dpi-vehicle-bar-right {
max-width: none;
width: 100%;
}
.dpi-vehicle-bar-label {
display: none;
}
}
@media screen and (max-width: 480px) {
.dpi-products-grid {
--dpi-cols: 1 !important;
grid-template-columns: 1fr;
}
.dpi-products-topbar {
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.dpi-products-topbar-right {
justify-content: space-between;
}
.dpi-vehiculier-title h2 {
font-size: 18px !important;
}
.dpi-vehicle-bar {
padding: 8px 12px;
}
.dpi-vehicle-bar-left {
gap: 6px;
}
.dpi-vehicle-bar-value {
font-size: 12px;
}
} .dpi-category-grid-section {
max-width: 1440px;
margin: 0 auto;
padding: 28px 24px 24px;
} .dpi-category-grid-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.dpi-category-grid-title {
margin: 0 !important;
font-family: Neuropolitical, "SF Pro Display", sans-serif !important;
font-size: 28px !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #000 !important;
line-height: 1.2 !important;
}
.dpi-category-grid-title span {
color: #FF0000 !important;
} .dpi-category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 0;
} .dpi-category-card {
position: relative;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 28px 24px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 6px;
}
.dpi-category-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border-color: rgba(255, 0, 0, 0.3);
} .dpi-category-card.dpi-selected {
border-color: #FF0000;
box-shadow: 0 0 0 1px #FF0000, 0 4px 12px rgba(255, 0, 0, 0.15);
} .dpi-category-card-check {
display: none;
position: absolute;
top: 10px;
right: 10px;
width: 22px;
height: 22px;
background: #FF0000;
border-radius: 50%;
align-items: center;
justify-content: center;
z-index: 2;
}
.dpi-category-card.dpi-selected .dpi-category-card-check {
display: flex;
}
.dpi-category-card-check svg {
width: 14px;
height: 14px;
} .dpi-category-card-icon-wrap {
width: 125px;
height: 125px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.dpi-category-card-icon-wrap svg {
width: 52px;
height: 52px;
color: #FF0000;
}
.dpi-category-card-img {
width: 125px;
height: 125px;
object-fit: contain;
border-radius: 6px;
} .dpi-category-card-icon-wrap svg path,
.dpi-category-card-icon-wrap svg circle,
.dpi-category-card-icon-wrap svg rect,
.dpi-category-card-icon-wrap svg polygon,
.dpi-category-card-icon-wrap svg line,
.dpi-category-card-icon-wrap svg polyline,
.dpi-category-card-icon-wrap svg ellipse {
fill: #FF0000 !important;
stroke: none !important;
} .dpi-category-card.dpi-cat-empty {
opacity: 0.35;
pointer-events: none;
cursor: default;
} .dpi-category-card-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.dpi-category-card-info h4 {
margin: 0 !important;
font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
color: #000 !important;
line-height: 1.3 !important;
}
.dpi-category-card-desc {
margin: 4px 0 0 !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 12px !important;
color: #888 !important;
line-height: 1.4 !important;
font-weight: 400 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dpi-category-card-count {
font-size: 13px;
color: #FF0000;
font-family: "SF Pro Display", sans-serif;
font-weight: 500;
margin-top: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.dpi-category-card-count::after {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background: #FF0000;
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
flex-shrink: 0;
} .dpi-category-back-card {
position: relative;
background: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 28px 24px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 6px;
}
.dpi-category-back-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border-color: rgba(255, 0, 0, 0.3);
}
.dpi-category-back-card .dpi-category-card-icon-wrap svg {
color: #999;
}
.dpi-category-back-card .dpi-category-card-icon-wrap svg path,
.dpi-category-back-card .dpi-category-card-icon-wrap svg circle,
.dpi-category-back-card .dpi-category-card-icon-wrap svg rect,
.dpi-category-back-card .dpi-category-card-icon-wrap svg polygon,
.dpi-category-back-card .dpi-category-card-icon-wrap svg line,
.dpi-category-back-card .dpi-category-card-icon-wrap svg polyline {
fill: none !important;
stroke: #999 !important;
}
.dpi-category-back-card:hover .dpi-category-card-icon-wrap svg path,
.dpi-category-back-card:hover .dpi-category-card-icon-wrap svg circle,
.dpi-category-back-card:hover .dpi-category-card-icon-wrap svg rect,
.dpi-category-back-card:hover .dpi-category-card-icon-wrap svg polygon,
.dpi-category-back-card:hover .dpi-category-card-icon-wrap svg line,
.dpi-category-back-card:hover .dpi-category-card-icon-wrap svg polyline {
stroke: #FF0000 !important;
}
.dpi-category-back-card .dpi-category-card-info h4 {
color: #666 !important;
}
.dpi-category-back-card:hover .dpi-category-card-info h4 {
color: #FF0000 !important;
} .dpi-category-viewall-card {
position: relative;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 28px 24px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 6px;
}
.dpi-category-viewall-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border-color: rgba(255, 0, 0, 0.3);
}
.dpi-category-viewall-card.dpi-selected {
border-color: #FF0000;
box-shadow: 0 0 0 1px #FF0000, 0 4px 12px rgba(255, 0, 0, 0.15);
}
.dpi-category-viewall-card .dpi-category-card-check {
display: none;
position: absolute;
top: 10px;
right: 10px;
width: 22px;
height: 22px;
background: #FF0000;
border-radius: 50%;
align-items: center;
justify-content: center;
z-index: 2;
}
.dpi-category-viewall-card.dpi-selected .dpi-category-card-check {
display: flex;
}
.dpi-category-viewall-card .dpi-category-card-check svg {
width: 14px;
height: 14px;
} @media (max-width: 1024px) {
.dpi-category-grid {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.dpi-category-grid-title {
font-size: 24px !important;
}
.dpi-category-card {
padding: 20px 16px;
}
} @media (max-width: 768px) {
.dpi-category-grid-section {
padding: 20px 16px;
}
.dpi-category-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.dpi-category-grid-title {
font-size: 20px !important;
}
.dpi-category-card {
padding: 16px 14px;
border-radius: 10px;
}
.dpi-category-card-icon-wrap {
width: 80px;
height: 80px;
}
.dpi-category-card-icon-wrap svg {
width: 36px;
height: 36px;
}
.dpi-category-card-img {
width: 80px;
height: 80px;
}
.dpi-category-card-info h4 {
font-size: 12px !important;
}
.dpi-category-card-desc {
font-size: 11px !important;
}
.dpi-category-grid-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
} @media (max-width: 480px) {
.dpi-category-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.dpi-category-card {
padding: 14px 12px;
border-radius: 8px;
}
.dpi-category-card-icon-wrap {
width: 60px;
height: 60px;
}
.dpi-category-card-icon-wrap svg {
width: 32px;
height: 32px;
}
.dpi-category-card-img {
width: 60px;
height: 60px;
}
.dpi-category-card-info h4 {
font-size: 11px !important;
}
.dpi-category-card-desc {
display: none;
}
}  .dpi-equipment-wrapper {
width: 100%;
} .dpi-equip-grid-section {
max-width: 1440px;
margin: 0 auto;
padding: 32px 24px 28px;
position: relative;
}
.dpi-equip-grid-header {
margin-bottom: 20px;
}
.dpi-equip-grid-title {
margin: 0 !important;
font-family: Neuropolitical, "SF Pro Display", sans-serif !important;
font-size: 28px !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #000 !important;
line-height: 1.2 !important;
}
.dpi-equip-grid-title span {
color: #FF0000 !important;
} .dpi-equip-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
} .dpi-equip-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
}
.dpi-equip-card:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
border-color: rgba(255, 0, 0, 0.3);
transform: translateY(-2px);
}
.dpi-equip-card.dpi-selected {
border-color: #FF0000;
box-shadow: 0 0 0 1px #FF0000, 0 4px 12px rgba(255, 0, 0, 0.15);
} .dpi-equip-card-image {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
}
.dpi-equip-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.3s;
}
.dpi-equip-card:hover .dpi-equip-card-image img {
transform: scale(1.05);
} .dpi-equip-card-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
} .dpi-equip-card-name {
padding: 12px 10px;
text-align: center;
font-family: "SF Pro Display", -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #333 !important;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .dpi-equip-back-card {
background: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
}
.dpi-equip-back-card:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
border-color: rgba(255, 0, 0, 0.3);
}
.dpi-equip-back-card .dpi-equip-card-image {
background: #f2f2f2;
}
.dpi-equip-back-card .dpi-equip-card-image svg {
width: 48px;
height: 48px;
color: #999;
transition: color 0.2s;
}
.dpi-equip-back-card:hover .dpi-equip-card-image svg {
color: #FF0000;
}
.dpi-equip-back-card .dpi-equip-card-name {
color: #666 !important;
}
.dpi-equip-back-card:hover .dpi-equip-card-name {
color: #FF0000 !important;
} .dpi-equip-grid-section.dpi-is-loading {
min-height: 200px;
}
.dpi-equip-grid-section.dpi-is-loading .dpi-equip-grid {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.2s;
} .dpi-equip-products-hidden {
display: none !important;
} .dpi-equip-search-bar {
display: flex;
align-items: center;
background: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.2s;
max-width: 280px;
}
.dpi-equip-search-bar:focus-within {
border-color: #FF0000;
background: #fff;
}
.dpi-equip-search-bar .dpi-filter-search {
border: none !important;
background: none !important;
padding: 7px 12px !important;
margin: 0 !important;
font-family: "SF Pro Display", sans-serif !important;
font-size: 13px !important;
color: #333 !important;
width: 100% !important;
outline: none !important;
box-shadow: none !important;
}
.dpi-equip-search-bar .dpi-filter-search::placeholder {
color: #aaa;
}
.dpi-equip-search-btn {
display: flex;
align-items: center;
justify-content: center;
background: #FF0000;
border: none;
color: #fff;
padding: 8px 12px;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
}
.dpi-equip-search-btn:hover {
background: #cc0000;
} @media (max-width: 1200px) {
.dpi-equip-grid {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 1024px) {
.dpi-equip-grid {
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.dpi-equip-grid-title {
font-size: 24px !important;
}
}
@media (max-width: 768px) {
.dpi-equip-grid-section {
padding: 24px 16px;
}
.dpi-equip-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.dpi-equip-grid-title {
font-size: 20px !important;
}
.dpi-equip-card-name {
font-size: 11px !important;
padding: 8px 6px;
}
.dpi-equip-search-bar {
max-width: none;
flex: 1;
}
}
@media (max-width: 480px) {
.dpi-equip-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.dpi-equip-card {
border-radius: 8px;
}
.dpi-equip-card-name {
font-size: 10px !important;
padding: 6px 4px;
}
} .dpi-infinite-sentinel {
height: 1px;
width: 100%;
}
.dpi-infinite-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 32px 0;
font-family: "SF Pro Display", sans-serif;
font-size: 13px;
color: #999;
} .dpi-sidebar-subcategories {
margin: 15px 0 25px 0;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
}
.dpi-sidebar-subcat-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.dpi-sidebar-subcat-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
font-family: "SF Pro Display", sans-serif;
font-size: 14px;
cursor: pointer;
color: #444;
transition: all 0.2s ease;
line-height: 1.4;
}
.dpi-subcat-name {
flex: 1;
padding-right: 10px;
word-break: break-word;
overflow-wrap: break-word;
}
.dpi-subcat-count {
color: #999;
font-size: 13px;
white-space: nowrap;
flex-shrink: 0;
}
.dpi-sidebar-subcat-item:hover {
color: #FF0000;
}
.dpi-sidebar-subcat-item.active {
color: #FF0000;
font-weight: 700;
}
.dpi-sidebar-subcat-item.active .dpi-subcat-count {
color: #FF0000;
font-weight: 700;
}
.dpi-sidebar-subcat-child {
padding-left: 24px;
}@media screen and (max-width: 768px) { .dpi-vehiculier-section {
padding: 20px 14px 24px !important;
}
.dpi-vehiculier-title {
margin-bottom: 12px;
text-align: center;
}
.dpi-vehiculier-title h2 {
font-size: 20px !important;
letter-spacing: 0.5px !important;
}
.dpi-vehiculier-title p {
font-size: 13px !important;
}
.dpi-vehiculier-wrapper {
padding: 14px 12px !important;
border-radius: 10px;
}
.dpi-vehiculier-row {
flex-direction: column !important;
gap: 8px !important;
}
.dpi-vehiculier-selects {
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
.dpi-vehiculier-select,
.dpi-searchable-input {
width: 100% !important;
min-width: unset !important;
padding: 14px 36px 14px 14px !important;
font-size: 16px !important; border-radius: 10px !important;
}
.dpi-searchable-wrap {
width: 100% !important;
}
.dpi-searchable-dropdown {
max-height: 200px !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
}
.dpi-vehiculier-btn {
width: 100% !important;
padding: 14px !important;
font-size: 13px !important;
border-radius: 10px !important;
min-height: 48px; }
.dpi-vehiculier-separator {
margin: 10px 0 !important;
}
.dpi-vehiculier-separator span {
font-size: 12px !important;
} .dpi-vehicle-bar {
padding: 8px 12px !important;
}
.dpi-vehicle-bar-inner {
flex-wrap: wrap !important;
gap: 8px !important;
}
.dpi-vehicle-bar-left {
width: 100% !important;
justify-content: space-between;
gap: 6px !important;
}
.dpi-vehicle-bar-icon {
width: 32px !important;
height: 32px !important;
}
.dpi-vehicle-bar-value {
font-size: 13px !important;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dpi-vehicle-bar-label {
display: none !important;
}
.dpi-vehicle-bar-action {
padding: 6px 12px !important;
font-size: 12px !important;
min-height: 36px;
}
.dpi-vehicle-bar-delete {
min-width: 36px;
min-height: 36px;
display: flex !important;
align-items: center;
justify-content: center;
}
.dpi-vehicle-bar-right {
width: 100% !important;
max-width: none !important;
min-width: unset !important;
}
.dpi-vehicle-bar-search {
border-radius: 10px !important;
}
.dpi-vehicle-bar-search input {
font-size: 16px !important; padding: 10px 12px !important;
} .dpi-product-grid-wrapper {
flex-direction: column !important;
padding: 12px 12px 40px !important;
gap: 0 !important;
} .dpi-filters-sidebar {
display: none !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 88% !important;
max-width: 340px !important;
height: 100vh !important;
height: 100dvh !important; max-height: 100vh !important;
max-height: 100dvh !important;
z-index: 99999 !important;
border-radius: 0 !important;
border: none !important;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
padding: 16px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.dpi-filters-sidebar.dpi-sidebar-open {
display: block !important;
}
.dpi-filters-close {
display: flex !important;
align-items: center;
justify-content: center;
width: 40px !important;
height: 40px !important;
font-size: 28px !important;
border-radius: 50%;
background: #f5f5f5 !important;
border: none;
color: #333 !important;
cursor: pointer;
min-height: 44px;
min-width: 44px;
}
.dpi-filters-header {
position: sticky;
top: 0;
background: #fff;
z-index: 2;
padding-bottom: 12px !important;
margin-bottom: 12px !important;
}
.dpi-filters-overlay.active {
display: block !important;
} .dpi-filters-toggle {
display: none !important; align-items: center;
gap: 6px;
padding: 10px 18px !important;
min-height: 44px; font-size: 12px !important;
border-radius: 100px !important;
} .dpi-products-topbar {
flex-wrap: wrap;
gap: 8px !important;
padding: 8px 0 !important;
}
.dpi-products-count {
font-size: 13px !important;
width: 100%;
}
.dpi-products-topbar-right {
width: 100%;
display: flex !important;
justify-content: space-between !important;
gap: 8px !important;
}
.dpi-sort-select {
flex: 1;
font-size: 13px !important;
padding: 10px 8px !important;
min-height: 44px; border-radius: 8px !important;
} .dpi-products-grid {
--dpi-cols: 2 !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
} .dpi-product-card {
border-radius: 8px !important;
}
.dpi-product-card:hover {
transform: none !important; }
.dpi-product-title {
font-size: 13px !important;
margin: 8px 10px 2px !important;
-webkit-line-clamp: 2;
}
.dpi-product-brand {
font-size: 10px !important;
margin: 0 10px 4px !important;
}
.dpi-product-price {
font-size: 14px !important;
margin: 0 10px 8px !important;
}
.dpi-product-price del {
font-size: 11px !important;
}
.dpi-product-cat {
font-size: 10px !important;
margin: 6px 10px 0 !important;
}
.dpi-product-sku {
font-size: 10px !important;
margin: 1px 10px 2px !important;
}
.dpi-product-stock {
font-size: 10px !important;
margin: 2px 10px 0 !important;
}
.dpi-product-info {
padding: 0 0 10px !important;
}
.dpi-product-add-to-cart {
margin: 0 8px 8px !important;
padding: 10px 12px !important;
font-size: 11px !important;
min-height: 44px; border-radius: 100px !important;
}
.dpi-brand-badge {
top: 6px !important;
left: 6px !important;
padding: 3px 5px !important;
}
.dpi-brand-badge img {
height: 20px !important;
max-width: 60px !important;
}
.dpi-brand-badge-text {
font-size: 8px !important;
padding: 3px 6px !important;
} .dpi-category-grid-section {
padding: 16px 12px 16px !important;
}
.dpi-category-grid-header {
margin-bottom: 12px !important;
gap: 10px !important;
}
.dpi-category-grid-title {
font-size: 20px !important;
}
.dpi-category-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.dpi-category-card {
padding: 14px 12px !important;
border-radius: 10px !important;
gap: 4px !important;
}
.dpi-category-card:hover {
transform: none !important;
}
.dpi-category-card-icon-wrap {
width: 70px !important;
height: 70px !important;
margin-bottom: 6px !important;
}
.dpi-category-card-icon-wrap svg {
width: 36px !important;
height: 36px !important;
}
.dpi-category-card-img {
width: 70px !important;
height: 70px !important;
}
.dpi-category-card-info h4 {
font-size: 12px !important;
letter-spacing: 0.2px !important;
}
.dpi-category-card-desc {
font-size: 11px !important;
-webkit-line-clamp: 1 !important;
}
.dpi-category-card-count {
font-size: 11px !important;
margin-top: 4px !important;
}
.dpi-category-card-check {
top: 6px !important;
right: 6px !important;
width: 18px !important;
height: 18px !important;
}
.dpi-category-card-check svg {
width: 12px !important;
height: 12px !important;
} .dpi-equip-grid-section {
padding: 20px 12px 16px !important;
}
.dpi-equip-grid-title {
font-size: 20px !important;
}
.dpi-equip-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
.dpi-equip-card {
border-radius: 8px !important;
}
.dpi-equip-card:hover {
transform: none !important;
}
.dpi-equip-card-name {
padding: 8px 6px !important;
font-size: 11px !important;
}
.dpi-equip-search-bar {
max-width: none !important;
flex: 1 !important;
} .dpi-products-pagination {
padding: 16px 0 !important;
}
.dpi-pagination-numbers {
gap: 4px !important;
}
.dpi-pagination-numbers a,
.dpi-pagination-numbers span {
padding: 8px 12px !important;
font-size: 13px !important;
min-width: 40px;
min-height: 40px;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.dpi-load-more-btn {
width: 100% !important;
padding: 14px 24px !important;
min-height: 48px;
font-size: 13px !important;
} .dpi-sidebar-subcategories {
margin: 12px 0 16px !important;
}
.dpi-sidebar-subcat-item {
font-size: 14px !important;
padding: 8px 0 !important;
min-height: 44px;
display: flex !important;
align-items: center !important;
}
.dpi-sidebar-subcat-list {
gap: 4px !important;
} .dpi-filter-group {
margin-bottom: 14px !important;
padding-bottom: 14px !important;
}
.dpi-filter-label {
font-size: 13px !important;
margin-bottom: 10px !important;
}
.dpi-filter-toggle-label {
min-height: 44px;
display: flex !important;
align-items: center;
padding: 4px 0 !important;
}
.dpi-filter-checkbox {
padding: 6px 0 !important;
font-size: 13px !important;
min-height: 40px;
display: flex !important;
align-items: center !important;
}
.dpi-filter-checkbox input[type="checkbox"] {
width: 20px !important;
height: 20px !important;
min-width: 20px;
}
.dpi-filter-search {
padding: 10px 12px !important;
font-size: 16px !important; min-height: 44px;
}
.dpi-filter-content select {
padding: 10px !important;
font-size: 14px !important;
min-height: 44px;
} .dpi-cat-row {
padding: 10px 4px !important;
min-height: 44px;
}
.dpi-cat-name {
font-size: 14px !important;
padding: 4px !important;
}
.dpi-cat-toggle {
padding: 8px !important;
min-width: 36px;
min-height: 36px;
} .dpi-loading-overlay {
border-radius: 8px;
} .dpi-back-all-cats {
font-size: 13px !important;
padding: 10px 14px !important;
min-height: 44px;
}
} @media screen and (max-width: 480px) { .dpi-products-grid {
--dpi-cols: 2 !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
} .dpi-vehiculier-title h2 {
font-size: 17px !important;
}
.dpi-vehiculier-title p {
font-size: 12px !important;
} .dpi-vehicle-bar {
padding: 6px 10px !important;
}
.dpi-vehicle-bar-icon {
width: 28px !important;
height: 28px !important;
}
.dpi-vehicle-bar-value {
font-size: 12px !important;
}
.dpi-vehicle-bar-action {
font-size: 11px !important;
padding: 4px 8px !important;
} .dpi-product-card {
border-radius: 6px !important;
}
.dpi-product-title {
font-size: 12px !important;
margin: 6px 8px 2px !important;
}
.dpi-product-brand {
font-size: 9px !important;
margin: 0 8px 3px !important;
}
.dpi-product-price {
font-size: 13px !important;
margin: 0 8px 6px !important;
}
.dpi-product-cat {
font-size: 9px !important;
margin: 4px 8px 0 !important;
}
.dpi-product-sku {
display: none !important; }
.dpi-product-add-to-cart {
margin: 0 6px 6px !important;
padding: 8px 8px !important;
font-size: 10px !important;
}
.dpi-brand-badge {
top: 4px !important;
left: 4px !important;
padding: 2px 4px !important;
}
.dpi-brand-badge img {
height: 16px !important;
max-width: 50px !important;
} .dpi-category-grid-section {
padding: 12px 10px 12px !important;
}
.dpi-category-grid-title {
font-size: 17px !important;
}
.dpi-category-grid {
gap: 8px !important;
}
.dpi-category-card {
padding: 10px 8px !important;
border-radius: 8px !important;
}
.dpi-category-card-icon-wrap {
width: 56px !important;
height: 56px !important;
margin-bottom: 4px !important;
}
.dpi-category-card-icon-wrap svg {
width: 28px !important;
height: 28px !important;
}
.dpi-category-card-img {
width: 56px !important;
height: 56px !important;
}
.dpi-category-card-info h4 {
font-size: 11px !important;
}
.dpi-category-card-desc {
display: none !important;
}
.dpi-category-card-count {
font-size: 10px !important;
} .dpi-equip-grid-section {
padding: 14px 10px 12px !important;
}
.dpi-equip-grid-title {
font-size: 17px !important;
}
.dpi-equip-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.dpi-equip-card-name {
font-size: 10px !important;
padding: 6px 4px !important;
} .dpi-products-topbar {
padding: 6px 0 !important;
}
.dpi-sort-select {
font-size: 12px !important;
}
.dpi-products-count {
font-size: 12px !important;
} .dpi-pagination-numbers a,
.dpi-pagination-numbers span {
padding: 6px 10px !important;
font-size: 12px !important;
min-width: 36px;
min-height: 36px;
}
} @media screen and (max-width: 360px) {
.dpi-product-grid-wrapper {
padding: 8px 8px 32px !important;
}
.dpi-vehiculier-section {
padding: 16px 10px 20px !important;
}
.dpi-vehiculier-title h2 {
font-size: 15px !important;
}
.dpi-products-grid {
gap: 6px !important;
}
.dpi-product-title {
font-size: 11px !important;
}
.dpi-product-price {
font-size: 12px !important;
}
.dpi-product-add-to-cart {
font-size: 9px !important;
padding: 7px 6px !important;
}
.dpi-category-grid {
gap: 6px !important;
}
.dpi-category-card-icon-wrap {
width: 48px !important;
height: 48px !important;
}
.dpi-category-card-info h4 {
font-size: 10px !important;
}
} @media (pointer: coarse) { .dpi-vehiculier-btn,
.dpi-filters-toggle,
.dpi-product-add-to-cart,
.dpi-load-more-btn,
.dpi-vehicle-bar-action,
.dpi-filters-close,
.dpi-cat-toggle,
.dpi-back-all-cats {
min-height: 44px;
} .dpi-product-card:hover {
transform: none !important;
box-shadow: none !important;
}
.dpi-category-card:hover {
transform: none !important;
}
.dpi-equip-card:hover {
transform: none !important;
} .dpi-filter-checkbox-list,
.dpi-filters-sidebar {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
} .dpi-category-card,
.dpi-product-card,
.dpi-equip-card,
.dpi-cat-row,
.dpi-sidebar-subcat-item {
-webkit-tap-highlight-color: rgba(255, 0, 0, 0.08);
} .dpi-vehiculier-btn:active,
.dpi-product-add-to-cart:active,
.dpi-filters-toggle:active,
.dpi-load-more-btn:active {
opacity: 0.85;
transform: scale(0.98);
}
} @supports (padding-bottom: env(safe-area-inset-bottom)) {
@media screen and (max-width: 768px) {
.dpi-filters-sidebar {
padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
.dpi-products-pagination {
padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
}
} @media screen and (max-width: 768px) and (orientation: landscape) {
.dpi-vehiculier-section {
padding: 14px 14px 18px !important;
}
.dpi-vehiculier-row {
flex-direction: row !important;
flex-wrap: wrap;
}
.dpi-vehiculier-selects {
flex-direction: row !important;
flex-wrap: wrap;
}
.dpi-vehiculier-select,
.dpi-searchable-wrap {
flex: 1 !important;
min-width: 120px !important;
}
.dpi-vehiculier-btn {
width: auto !important;
flex: 0 0 auto !important;
}
.dpi-products-grid {
--dpi-cols: 3 !important;
grid-template-columns: repeat(3, 1fr) !important;
}
.dpi-category-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.dpi-equip-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
.dpi-filters-sidebar {
max-width: 300px !important;
}
} @media screen and (max-width: 768px) { .dpi-filters-toggle {
display: none !important;
} .dpi-mobile-subcats-btn {
padding: 8px 16px !important;
font-size: 11px !important;
border-radius: 100px !important;
min-height: 36px !important;
}
.dpi-mobile-subcats-arrow {
font-size: 7px !important;
margin-top: 1px !important;
}
.dpi-mobile-subcats-dropdown {
margin: 4px 0 !important;
} .dpi-products-topbar-right {
justify-content: flex-start !important;
}
}
@media screen and (max-width: 480px) {
.dpi-mobile-subcats-btn {
padding: 6px 12px !important;
font-size: 10px !important;
} .dpi-cat-reopen-link {
text-align: center !important;
padding: 10px 0 !important;
cursor: pointer !important;
margin-top: 5px !important;
}
.dpi-cat-reopen-link span {
color: #ff0000 !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
}.clearfix::before,.clearfix::after{content:" ";display:table;clear:both}.eael-testimonial-slider.nav-top-left,.eael-testimonial-slider.nav-top-right,.eael-team-slider.nav-top-left,.eael-team-slider.nav-top-right,.eael-logo-carousel.nav-top-left,.eael-logo-carousel.nav-top-right,.eael-post-carousel.nav-top-left,.eael-post-carousel.nav-top-right,.eael-product-carousel.nav-top-left,.eael-product-carousel.nav-top-right{padding-top:40px}.eael-contact-form input[type=text],.eael-contact-form input[type=email],.eael-contact-form input[type=url],.eael-contact-form input[type=tel],.eael-contact-form input[type=date],.eael-contact-form input[type=number],.eael-contact-form textarea{background:#fff;box-shadow:none;-webkit-box-shadow:none;float:none;height:auto;margin:0;outline:0;width:100%}.eael-contact-form input[type=submit]{border:0;float:none;height:auto;margin:0;padding:10px 20px;width:auto;-webkit-transition:all .25s linear 0s;transition:all .25s linear 0s}.eael-contact-form.placeholder-hide input::-webkit-input-placeholder,.eael-contact-form.placeholder-hide textarea::-webkit-input-placeholder{opacity:0;visibility:hidden}.eael-contact-form.placeholder-hide input::-moz-placeholder,.eael-contact-form.placeholder-hide textarea::-moz-placeholder{opacity:0;visibility:hidden}.eael-contact-form.placeholder-hide input:-ms-input-placeholder,.eael-contact-form.placeholder-hide textarea:-ms-input-placeholder{opacity:0;visibility:hidden}.eael-contact-form.placeholder-hide input:-moz-placeholder,.eael-contact-form.placeholder-hide textarea:-moz-placeholder{opacity:0;visibility:hidden}.eael-custom-radio-checkbox input[type=checkbox],.eael-custom-radio-checkbox input[type=radio]{-webkit-appearance:none;-moz-appearance:none;border-style:solid;border-width:0;outline:none;min-width:1px;width:15px;height:15px;background:#ddd;padding:3px}.eael-custom-radio-checkbox input[type=checkbox]:before,.eael-custom-radio-checkbox input[type=radio]:before{content:"";width:100%;height:100%;padding:0;margin:0;display:block}.eael-custom-radio-checkbox input[type=checkbox]:checked:before,.eael-custom-radio-checkbox input[type=radio]:checked:before{background:#999;-webkit-transition:all .25s linear 0s;transition:all .25s linear 0s}.eael-custom-radio-checkbox input[type=radio]{border-radius:50%}.eael-custom-radio-checkbox input[type=radio]:before{border-radius:50%}.eael-post-elements-readmore-btn{font-size:12px;font-weight:500;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;display:inline-block}.elementor-lightbox .dialog-widget-content{width:100%;height:100%}.eael-contact-form-align-left,.elementor-widget-eael-weform.eael-contact-form-align-left .eael-weform-container{margin:0 auto 0 0;display:inline-block;text-align:left}.eael-contact-form-align-center,.elementor-widget-eael-weform.eael-contact-form-align-center .eael-weform-container{float:none;margin:0 auto;display:inline-block;text-align:left}.eael-contact-form-align-right,.elementor-widget-eael-weform.eael-contact-form-align-right .eael-weform-container{margin:0 0 0 auto;display:inline-block;text-align:left}.eael-force-hide{display:none !important}.eael-d-none{display:none !important}.eael-d-block{display:block !important}.eael-h-auto{height:auto !important}.theme-martfury .elementor-wc-products .woocommerce ul.products li.product .product-inner .mf-rating .eael-star-rating.star-rating~.count{display:none}.theme-martfury .elementor-wc-products .woocommerce ul.products li.product .product-inner .mf-rating .eael-star-rating.star-rating{display:none}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.elementor-widget-eael-adv-tabs .eael-tab-content-item,.elementor-widget-eael-adv-accordion .eael-accordion-content,.elementor-widget-eael-data-table .td-content,.elementor-widget-eael-info-box .eael-infobox-template-wrapper,.elementor-widget-eael-countdown .eael-countdown-expiry-template,.elementor-widget-eael-countdown .eael-countdown-container,.elementor-widget-eael-cta-box .eael-cta-template-wrapper,.elementor-widget-eael-toggle .eael-toggle-primary-wrap,.elementor-widget-eael-toggle .eael-toggle-secondary-wrap,.elementor-widget-eael-protected-content .eael-protected-content-message,.elementor-widget-eael-protected-content .protected-content,.eael-offcanvas-content-visible .eael-offcanvas-body,.elementor-widget-eael-stacked-cards .eael-stacked-cards__item{position:relative}.elementor-widget-eael-adv-tabs .eael-tab-content-item:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-adv-accordion .eael-accordion-content:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-data-table .td-content:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-info-box .eael-infobox-template-wrapper:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-countdown .eael-countdown-expiry-template:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-countdown .eael-countdown-container:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-cta-box .eael-cta-template-wrapper:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-toggle .eael-toggle-primary-wrap:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-toggle .eael-toggle-secondary-wrap:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-protected-content .eael-protected-content-message:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-protected-content .protected-content:hover .eael-onpage-edit-template-wrapper,.eael-offcanvas-content-visible .eael-offcanvas-body:hover .eael-onpage-edit-template-wrapper,.elementor-widget-eael-stacked-cards .eael-stacked-cards__item:hover .eael-onpage-edit-template-wrapper{display:block}.eael-widget-otea-active .elementor-element:hover>.elementor-element-overlay,.eael-widget-otea-active .elementor-empty-view,.eael-widget-otea-active .elementor-add-section-inline,.eael-widget-otea-active .elementor-add-section{display:initial !important}.eael-onpage-edit-template-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:none;border:2px solid #5eead4}.eael-onpage-edit-template-wrapper::after{position:absolute;content:"";top:0;left:0;right:0;bottom:0;z-index:2;background:#5eead4;opacity:.3}.eael-onpage-edit-template-wrapper.eael-onpage-edit-activate{display:block}.eael-onpage-edit-template-wrapper.eael-onpage-edit-activate::after{display:none}.eael-onpage-edit-template-wrapper .eael-onpage-edit-template{background:#5eead4;color:#000;width:150px;text-align:center;height:30px;line-height:30px;font-size:12px;cursor:pointer;position:relative;z-index:3;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.eael-onpage-edit-template-wrapper .eael-onpage-edit-template::before{content:"";border-top:30px solid #5eead4;border-right:0;border-bottom:0;border-left:14px solid rgba(0,0,0,0);right:100%;position:absolute}.eael-onpage-edit-template-wrapper .eael-onpage-edit-template::after{content:"";border-top:0;border-right:0;border-bottom:30px solid rgba(0,0,0,0);border-left:14px solid #5eead4;left:100%;position:absolute}.eael-onpage-edit-template-wrapper .eael-onpage-edit-template>i{margin-right:8px}.elementor-edit-area-active .eael_wd_liquid_glass_shadow-effect1,.elementor-edit-area-active .eael_wd_liquid_glass_shadow-effect2,.elementor-edit-area-active .eael_wd_liquid_glass_shadow-effect3,.elementor-edit-area-active .eael_wd_liquid_glass_shadow-effect4{-webkit-box-shadow:inherit !important;box-shadow:inherit !important}