:root { --bs-primary: #ffac05;
--bs-primary-rgb: 255, 172, 5;
--bs-primary-dark: #e59a00;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529; --vt-gold: #ffac05;
--vt-gold-dark: #e59a00;
--vt-bg-light: #f4f4f5;
--vt-bg-darker: #96a3ad;
--vt-bg-dark: #141414;
--vt-surface-dark: #212121;
--vt-surface-light: #ffffff;
--vt-border-white: rgba(255, 255, 255, 0.1);
--vt-text-white-muted: rgba(255, 255, 255, 0.6);
--vt-text-white-dim: rgba(255, 255, 255, 0.4);
--vt-text-white-faint: rgba(255, 255, 255, 0.3); --vt-font-display: 'Space Grotesk', sans-serif;
--vt-font-body: 'Manrope', sans-serif; --vt-section-padding: 5rem;
} body {
background-color: var(--vt-bg-darker);
color: #ffffff;
font-family: var(--vt-font-body);
}  .container {
max-width: 1280px;
} h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
font-family: var(--vt-font-display);
font-weight: 700;
color: #ffffff;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
@media (min-width: 768px) {
h1 {
font-size: 4.5rem;
}
h2 {
font-size: 3rem;
}
} a {
color: var(--vt-gold);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--vt-gold-dark);
} .site-header {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
border-bottom: 1px solid var(--vt-border-white);
background-color: #1d2327;
backdrop-filter: blur(10px);
}
.site-header .navbar {
padding: 15px;
}
.site-header .navbar-brand {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--vt-font-display);
font-size: 1.25rem;
font-weight: 700;
color: #ffffff !important;
letter-spacing: -0.025em;
}
.site-header .brand-logo {
display: flex;
height: 2rem;
width: 2rem;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
background-color: var(--vt-gold);
color: var(--vt-bg-dark);
}
.site-header .brand-logo .material-symbols-outlined {
font-size: 1.25rem;
font-weight: 700;
}
.site-header .text-gold {
color: var(--vt-gold);
}
.site-header .nav-link {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 0.875rem;
font-weight: 500;
padding: 0.5rem 1rem !important;
transition: color 0.2s ease;
}
.site-header .nav-link:hover,
.site-header .nav-link.active {
color: #ffffff !important;
}
.site-header .nav-link.text-gold {
color: var(--vt-gold) !important;
}
.site-main {
background-color: var(--vt-bg-darker);
}
.site-main .border-bottom {
border-bottom: var(--bs-border-width) var(--bs-border-style) #a9b6c4 !important;
}
.category-bg {
position: absolute;
inset: 0;
opacity: 0.7;
background: #141414;
background: linear-gradient(180deg, rgba(20, 20, 20, 1) 0%, rgba(255, 172, 5, 0.38) 100%, rgba(20, 20, 20, 0.24) 17%);
}
.bg-pudra {
background-color: #d7d2d2 !important;
} .btn-primary {
position: relative;
overflow: hidden; --bs-btn-color: #000;
--bs-btn-bg: var(--vt-gold);
--bs-btn-border-color: var(--vt-gold);
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: var(--vt-gold);
--bs-btn-hover-border-color: var(--vt-gold);
--bs-btn-active-color: #000;
--bs-btn-active-bg: var(--vt-gold);
--bs-btn-active-border-color: var(--vt-gold);
--bs-btn-focus-shadow-rgb: 255, 172, 5;
background-color: var(--vt-gold) !important;
border-color: var(--vt-gold) !important;
color: #000 !important;
font-weight: 700;
padding: 0.5rem 1.5rem;
transition: all 0.3s ease; z-index: 0;
} .btn-primary::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--vt-gold);
z-index: -2;
border-radius: inherit;
} .btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.5),
transparent);
transition: left 0.5s ease;
z-index: -1;
pointer-events: none;
border-radius: inherit;
}
.btn-primary:hover::before {
left: 100%;
}
.product-overlay .btn-primary:hover {
background-color: transparent !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible {
background-color: var(--vt-gold) !important;
border-color: var(--vt-gold) !important;
color: #000 !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 172, 5, 0.4);
outline: none;
}
.btn-primary:hover::after {} .btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary *,
.btn-primary:hover *,
.btn-primary:active *,
.btn-primary:focus * {
color: #000 !important;
}
.btn-outline-light {
position: relative;
overflow: hidden;
border-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
font-weight: 700;
z-index: 1;
}
.btn-outline-light:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: var(--vt-gold);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
} .hero-section {
position: relative;
width: 100%;
height: 800px;
overflow: hidden; perspective: 1000px;
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
}
.hero-section .hero-bg {
position: absolute;
inset: 0;
background-color: var(--vt-bg-dark); background-image:
linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
}
.hero-section .hero-bg-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center; transform: translateZ(0) scale(1);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.8),
inset 0 0 100px rgba(255, 255, 255, 0.05);
filter: brightness(0.9) contrast(1.1); animation: heroZoomIn 20s ease-out forwards;
}
@keyframes heroZoomIn {
0% {
transform: translateZ(0) scale(1);
}
100% {
transform: translateZ(0) scale(1.15);
}
}
.hero-section .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--vt-bg-dark), rgba(20, 20, 20, 0.3), transparent); box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.5);
}
.hero-section .hero-content {
position: relative;
height: 100%;
display: flex;
align-items: center; transform: translateZ(30px);
z-index: 10;
}
.hero-section .hero-title {
font-size: 3rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: #ffffff;
}
@media (min-width: 768px) {
.hero-section .hero-title {
font-size: 4.5rem;
}
}
.hero-section .text-gold {
color: var(--vt-gold);
} .hero-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border: 1px solid rgba(255, 172, 5, 0.3);
background-color: rgba(255, 172, 5, 0.1);
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--vt-gold);
backdrop-filter: blur(4px);
}
.hero-badge .badge-dot {
margin-right: 0.25rem;
display: flex;
height: 0.5rem;
width: 0.5rem;
}
.hero-badge .badge-dot .badge-ping {
position: absolute;
display: inline-flex;
height: 0.5rem;
width: 0.5rem;
border-radius: 9999px;
background-color: var(--vt-gold);
opacity: 0.75;
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.hero-badge .badge-dot .badge-dot-static {
position: relative;
display: inline-flex;
height: 0.5rem;
width: 0.5rem;
border-radius: 9999px;
background-color: var(--vt-gold);
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
} @media (max-width: 767.98px) { .hero-section {
height: 100vh;
min-height: 500px;
max-height: 700px;
} .hero-section .hero-content {
padding: 0 1.5rem;
padding-left: 2rem;
align-items: flex-end;
padding-bottom: 6rem;
} .hero-section .hero-title {
font-size: 2rem;
line-height: 1.2;
margin-bottom: 1rem;
} .hero-section .lead {
font-size: 1rem;
margin-bottom: 1.5rem !important;
} .hero-section .d-flex.flex-wrap.gap-3 {
flex-direction: column;
gap: 0.75rem !important;
}
.hero-section .btn-lg {
padding: 0.625rem 1.25rem;
font-size: 0.9375rem;
width: 100%;
} .hero-badge {
font-size: 0.7rem;
padding: 0.2rem 0.6rem;
} .hero-section .position-absolute.bottom-0 {
margin-bottom: 1.5rem;
}
.hero-section .position-absolute button {
width: 2.5rem !important;
height: 2.5rem !important;
}
.hero-section .position-absolute button .material-symbols-outlined {
font-size: 1.25rem;
} .hero-section .hero-overlay {
background: linear-gradient(to bottom, rgba(20, 20, 20, 0.3), rgba(20, 20, 20, 0.8));
}
} @media (max-width: 575.98px) {
.hero-section .hero-title {
font-size: 1.75rem;
}
.hero-section .hero-content {
padding-left: 1.5rem;
padding-bottom: 5rem;
}
} .hero-section .carousel-control-prev,
.hero-section .carousel-control-next {
width: auto;
opacity: 1;
bottom: 2rem;
top: auto;
z-index: 100;
pointer-events: auto;
cursor: pointer;
}
.hero-section .carousel-control-prev {
left: 50%;
transform: translateX(-120px);
}
.hero-section .carousel-control-next {
right: 50%;
left: auto;
transform: translateX(120px);
}
.hero-section .carousel-control-prev span.btn,
.hero-section .carousel-control-next span.btn {
transition: all 0.3s ease;
}
.hero-section .carousel-control-prev:hover span.btn,
.hero-section .carousel-control-next:hover span.btn {
background-color: rgba(255, 172, 5, 0.75) !important;
border-color: rgba(255, 172, 5, 0.75) !important;
} .custom-hero-indicators {
bottom: 2.5rem;
margin-bottom: 0;
}
.custom-hero-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
border: none;
margin: 0 6px;
transition: all 0.3s ease;
}
.custom-hero-indicators button.active {
background-color: #ffac05;
width: 32px;
border-radius: 6px;
}
.custom-hero-indicators button:hover {
background-color: rgba(255, 172, 5, 0.7);
} .category-card {
position: relative;
overflow: hidden;
border-radius: 0.75rem;
aspect-ratio: 4 / 3;
cursor: pointer;
}
.category-card .category-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.5s ease;
}
.category-card:hover .category-bg {
transform: scale(1.1);
}
.category-card .category-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4), transparent);
}
.category-card .category-content {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
width: 100%;
}
.category-card .category-line {
height: 0.25rem;
width: 3rem;
background-color: var(--vt-gold);
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.category-card:hover .category-line {
width: 5rem;
}
.category-card .category-title {
font-family: var(--vt-font-display);
font-size: 1.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0.25rem;
}
.category-card .category-desc {
color: var(--vt-text-white-muted);
font-size: 0.875rem;
transform: translateY(1rem);
opacity: 0;
transition: all 0.3s ease;
}
.category-card:hover .category-desc {
transform: translateY(0);
opacity: 1;
} .product-card {
border-radius: 0.75rem;
background-color: #1d2327;
overflow: hidden;
transition: all 0.3s ease;
}
.product-card:hover {
box-shadow: 0 10px 40px -10px rgba(255, 172, 5, 0.1);
transform: translateY(-0.25rem);
}
.product-card .product-image-wrapper {
width: 100%;
aspect-ratio: 2 / 3;
background-color: #d7d2d2;
position: relative;
overflow: hidden;
padding: 1rem;
}
.product-card .product-image-wrapper a {
display: block;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent !important;
border: none !important;
text-decoration: none !important;
}
.product-card .product-image-wrapper a:hover {
background-color: transparent !important;
}
.product-card .product-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: opacity 0.3s ease;
opacity: 0.9;
}
.product-card:hover .product-image {
opacity: 1;
}
.product-card .product-badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 10;
background-color: var(--vt-gold);
color: #000000;
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
.product-card .product-overlay {
position: absolute;
inset: 0;
background-color: rgba(255, 172, 5, 0.35);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.product-card:hover .product-overlay {
opacity: 0;
pointer-events: none;
}
.product-card .product-overlay .btn {
position: relative;
overflow: hidden;
z-index: 0;
transform: translateY(1rem);
transition: all 0.3s ease;
background-color: #ffac05 !important;
border-color: #ffac05 !important;
color: #141414 !important;
} .product-card .product-overlay .btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffac05;
z-index: -2;
border-radius: inherit;
} .product-card .product-overlay .btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.5),
transparent);
transition: left 0.5s ease;
z-index: -1;
pointer-events: none;
border-radius: inherit;
}
.product-card:hover .product-overlay .btn {
transform: translateY(0);
}
.product-card:hover .product-overlay .btn:hover::before {
left: 100%;
}
.product-card:hover .product-overlay .btn:hover {
background-color: #ffac05 !important;
border-color: #ffac05 !important;
color: #141414 !important;
box-shadow: 0 8px 25px rgba(255, 172, 5, 0.4);
}
.product-card:hover .product-overlay .btn:hover::after {
background-color: #e59a00;
} .product-card .product-overlay .btn,
.product-card:hover .product-overlay .btn,
.product-card .product-overlay .btn:hover,
.product-card:hover .product-overlay .btn:hover {
color: #141414 !important;
}
.product-card .product-content {
padding: 1.25rem;
}
.product-card .product-title {
font-family: var(--vt-font-display);
font-size: 1.125rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0.25rem;
}
.product-card .product-desc {
color: var(--vt-text-white-dim);
font-size: 0.875rem;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-card .product-footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 1rem;
}
.product-card .product-price {
color: var(--vt-gold);
font-weight: 700;
font-family: monospace;
font-size: 1.125rem;
}
.product-card .product-favorite {
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: color 0.2s ease;
}
.product-card .product-favorite:hover {
color: var(--vt-gold);
} .cta-section {
position: relative;
padding: 6rem 0;
background-color: var(--vt-surface-dark);
overflow: hidden;
}
.cta-section .cta-bg {
position: absolute;
inset: 0;
opacity: 0.1;
background: radial-gradient(circle at center, var(--vt-gold), var(--vt-bg-dark), var(--vt-bg-dark));
}
.cta-section .cta-content {
position: relative;
}
.cta-section .cta-title {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
color: #ffffff;
}
@media (min-width: 768px) {
.cta-section .cta-title {
font-size: 3.5rem;
}
}
.cta-section .cta-form-wrapper {
position: relative;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: var(--vt-bg-dark);
padding: 0rem;
}
.cta-section .cta-glow {
position: absolute;
top: -1rem;
right: -1rem;
height: 6rem;
width: 6rem;
background-color: rgba(255, 172, 5, 0.2);
border-radius: 9999px;
filter: blur(2rem);
} .form-control,
.form-select {
background-color: var(--vt-surface-dark);
border-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.form-control:focus,
.form-select:focus {
border-color: var(--vt-gold);
box-shadow: 0 0 0 0.25rem rgba(255, 172, 5, 0.25);
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.form-label {
color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem;
font-weight: 500;
} .site-footer {
background-color: #0f0f0f;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 4rem;
padding-bottom: 2rem;
}
.site-footer .footer-logo {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.site-footer .footer-logo .custom-logo-link {
display: block;
}
.site-footer .footer-logo .custom-logo-link img {
max-width: 180px;
max-height: 60px;
width: auto;
height: auto;
}
.site-footer .footer-logo-icon {
display: flex;
height: 1.5rem;
width: 1.5rem;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
background-color: rgba(255, 255, 255, 0.1);
color: var(--vt-gold);
}
.site-footer .footer-logo-icon .material-symbols-outlined {
font-size: 0.875rem;
font-weight: 700;
}
.site-footer .footer-logo-text {
font-family: var(--vt-font-display);
font-size: 1.125rem;
font-weight: 700;
color: #ffffff;
}
.site-footer .footer-desc {
color: rgba(255, 255, 255, 0.4);
font-size: 0.875rem;
line-height: 1.6;
}
.site-footer .footer-title {
font-family: var(--vt-font-display);
color: #ffffff !important;
font-weight: 700;
margin-bottom: 1.5rem;
}
.site-footer .footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-links li {
margin-bottom: 0.75rem;
}
.site-footer .footer-links a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
transition: color 0.2s ease;
}
.site-footer .footer-links a:hover {
color: var(--vt-gold);
}
.site-footer .footer-contact-item {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
}
.site-footer .footer-contact-icon {
color: var(--vt-gold);
}
.site-footer .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 2rem;
margin-top: 4rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.site-footer .footer-copyright {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3);
}
.site-footer .footer-legal a {
color: rgba(255, 255, 255, 0.3);
font-size: 0.75rem;
margin-left: 1.5rem;
transition: color 0.2s ease;
}
.site-footer .footer-legal a:hover {
color: #ffffff;
}
#back-to-top span {
text-align: center;
justify-content: center;
align-items: center;
display: flex;
} .material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .text-white-muted {
color: rgba(255, 255, 255, 0.6) !important;
}
.text-white-dim {
color: rgba(255, 255, 255, 0.4) !important;
}
.text-white-faint {
color: rgba(255, 255, 255, 0.3) !important;
}
.bg-surface-dark {
background-color: var(--vt-surface-dark) !important;
}
.bg-surface-light {
background-color: var(--vt-surface-light) !important;
}
.section-padding {
padding-top: var(--vt-section-padding);
padding-bottom: var(--vt-section-padding);
}
.border-white-10 {
border-color: rgba(255, 255, 255, 0.1) !important;
}
.border-white-5 {
border-color: rgba(255, 255, 255, 0.05) !important;
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out;
} @media (max-width: 767.98px) {
.footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-legal {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-legal a {
margin-left: 0;
}
}  .single-product-page {
background-color: #96a3ad !important;
color: #000000 !important;
font-family: 'Public Sans', 'Noto Sans', sans-serif !important;
}
.single-product-page .site-header {
background-color: #1d2327 !important;
border-bottom: 1px solid #1d2327 !important;
}
.single-product-page .brand-logo {
background-color: #FFD700 !important;
}
.single-product-page .text-gold {
color: #FFD700 !important;
} .single-product-page h1,
.single-product-page h2,
.single-product-page h3,
.single-product-page h4,
.single-product-page h5,
.single-product-page h6,
.single-product-page .h1,
.single-product-page .h2,
.single-product-page .h3,
.single-product-page .h4,
.single-product-page .h5,
.single-product-page .h6 {
color: #000000 !important;
} .single-product-page p,
.single-product-page span,
.single-product-page div,
.single-product-page li,
.single-product-page td,
.single-product-page th {
color: inherit;
}
.single-product-page .text-secondary,
.single-product-page .text-muted {
color: #53575e !important;
}
.single-product-page .text-primary {
color: #ffac05 !important;
} .breadcrumb {
background-color: transparent;
padding: 0;
margin-bottom: 1rem;
}
.breadcrumb-item a {
color: #6b7280;
text-decoration: none;
}
.breadcrumb-item a:hover {
color: var(--vt-gold);
}
.breadcrumb-item+.breadcrumb-item::before {
color: #9ca3af;
content: "/";
}
.breadcrumb-item.active {
color: #000000;
font-weight: 600;
} .product-main-image {
position: relative;
width: 100%;
}
.product-main-image .position-relative {
max-height: 700px;
overflow: hidden;
border-radius: 0.75rem;
border: 1px solid #d7d2d2;
background-color: #ffffff;
}
.product-main-image img {
width: 100%;
height: auto;
max-height: 600px;
object-fit: contain;
transition: transform 0.5s ease;
}
.product-main-image:hover img {
transform: scale(1.02);
} .product-main-image .bg-primary {
background-color: #FFD700 !important;
color: #000000;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid #E6C200;
} .product-thumbnails {
display: flex;
gap: 1rem;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 0.5rem;
}
.product-thumbnails::-webkit-scrollbar {
display: none;
}
.thumbnail-btn {
flex-shrink: 0;
width: 6rem;
height: 6rem;
border-radius: 0.5rem;
overflow: hidden;
border: 2px solid transparent;
padding: 0;
background-color: #fff;
transition: border-color 0.2s ease;
}
.thumbnail-btn.border-primary {
border-color: var(--vt-gold) !important;
}
.thumbnail-btn:hover {
border-color: #d1d5db;
}
.thumbnail-btn img {
width: 100%;
height: 100%;
object-fit: cover;
} .sticky-top {
position: sticky;
top: 6rem;
z-index: 10;
}
.text-xs {
font-size: 0.75rem;
} .material-symbols-outlined.star-filled {
color: var(--vt-gold);
}
.material-symbols-outlined.star-empty {
color: #d1d5db;
} .bg-primary.text-black {
background-color: var(--bs-primary) !important;
color: #000000;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 700;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} .btn-outline-success {
border-color: #25D366;
color: #25D366;
}
.btn-outline-success:hover {
background-color: rgba(37, 211, 102, 0.1);
border-color: #25D366;
color: #25D366;
} .bg-light.border {
background-color: #f9fafb !important;
border: 1px solid #e5e7eb !important;
} .nav-tabs {
border-bottom: 1px solid #e5e7eb;
}
.nav-tabs .nav-link {
color: #6b7280;
border-bottom: 4px solid transparent;
padding-bottom: 1rem;
transition: color 0.2s ease;
}
.nav-tabs .nav-link:hover {
color: var(--vt-gold);
}
.nav-tabs .nav-link.active {
color: #000000;
font-weight: 700;
border-bottom-color: var(--vt-gold);
} .table {
background-color: #ffffff;
}
.table> :not(caption)>*>* {
padding: 0.75rem 1rem;
}
.table th {
font-weight: 600;
color: #000000;
width: 50%;
}
.table td {
color: #6b7280;
}
.table tbody tr.bg-light {
background-color: #f9fafb !important;
} .card {
border: 1px solid #e5e7eb;
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.card-img-top {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.card-body {
padding: 1rem;
}
.card-title a {
color: #000000;
text-decoration: none;
}
.card-title a:hover {
color: var(--vt-gold);
} .hover-shadow-lg:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.transition-shadow {
transition: box-shadow 0.3s ease;
} .modal-content {
border-radius: 0.75rem;
border: none;
}
.modal-header {
border-bottom: 1px solid #e5e7eb;
} .border-2 {
border-width: 2px;
}
.border-transparent {
border-color: transparent;
}
.hover-text-primary:hover {
color: var(--vt-gold) !important;
} .material-symbols-outlined.text-sm {
font-size: 14px;
}
.material-symbols-outlined.text-lg {
font-size: 24px;
} .aspect-ratio-4x3 {
aspect-ratio: 4 / 3;
} .bg-cover {
background-size: cover;
}
.bg-contain {
background-size: contain;
}
.bg-center {
background-position: center;
} #relatedProductsCarousel .carousel-control-prev,
#relatedProductsCarousel .carousel-control-next {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 1;
transition: all 0.3s ease;
}
#relatedProductsCarousel .carousel-control-prev:hover,
#relatedProductsCarousel .carousel-control-next:hover {
background-color: var(--vt-gold);
width: 55px;
height: 55px;
}
#relatedProductsCarousel .carousel-control-prev {
left: -25px;
}
#relatedProductsCarousel .carousel-control-next {
right: -25px;
}
#relatedProductsCarousel .carousel-control-prev-icon,
#relatedProductsCarousel .carousel-control-next-icon {
width: 20px;
height: 20px;
} #relatedProductsCarousel .carousel-indicators {
bottom: -30px;
}
#relatedProductsCarousel .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
border: 2px solid transparent;
margin: 0 4px;
}
#relatedProductsCarousel .carousel-indicators button.active {
background-color: var(--vt-gold);
border-color: var(--vt-gold);
}
#relatedProductsCarousel .carousel-indicators button:hover {
background-color: rgba(0, 0, 0, 0.5);
} .product-details-section {
background-color: #fdfdfd;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.modern-tabs-wrapper {
position: relative;
} .modern-tabs {
display: flex;
gap: 1rem;
border-bottom: 3px solid rgb(255, 172, 1);
padding-bottom: 0;
flex-wrap: wrap;
}
.modern-tabs .nav-item {
margin-bottom: 0;
}
.modern-tabs .nav-link {
background: transparent;
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
color: #6c757d;
font-weight: 600;
font-size: 1rem;
padding: 1rem 1.5rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.modern-tabs .nav-link:hover {
color: var(--vt-gold);
background: rgba(255, 172, 5, 0.05);
}
.modern-tabs .nav-link:hover::before {
width: 100%;
}
.modern-tabs .nav-link.active {
color: #1d2327;
background: rgba(255, 172, 5, 1);
border-bottom-color: transparent;
}
.modern-tabs .nav-link.active::before {
width: 100%;
}
.modern-tabs .nav-link .material-symbols-outlined {
font-size: 1.25rem;
transition: transform 0.3s ease;
}
.modern-tabs .nav-link:hover .material-symbols-outlined,
.modern-tabs .nav-link.active .material-symbols-outlined {
transform: scale(1.1);
} .modern-tab-content {
margin-top: 2rem;
}
.tab-content-inner {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .specifications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.spec-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
background: linear-gradient(135deg, rgba(255, 172, 5, 0.03) 0%, rgba(255, 172, 5, 0.01) 100%);
border-radius: 8px;
border-left: 3px solid var(--vt-gold);
transition: all 0.3s ease;
}
.spec-item:hover {
background: linear-gradient(135deg, rgba(255, 172, 5, 0.08) 0%, rgba(255, 172, 5, 0.03) 100%);
transform: translateX(4px);
box-shadow: 0 2px 8px rgba(255, 172, 5, 0.15);
}
.spec-label {
font-weight: 600;
color: #495057;
font-size: 0.95rem;
}
.spec-value {
font-weight: 500;
color: var(--vt-gold-dark);
font-size: 0.95rem;
text-align: right;
} .product-full-description {
line-height: 1.8;
color: #495057;
}
.product-full-description h1,
.product-full-description h2,
.product-full-description h3 {
color: #212529;
margin-top: 1.5rem;
margin-bottom: 1rem;
font-weight: 700;
}
.product-full-description h2 {
font-size: 1.75rem;
border-bottom: 2px solid rgba(255, 172, 5, 0.2);
padding-bottom: 0.5rem;
}
.product-full-description p {
margin-bottom: 1rem;
}
.product-full-description ul,
.product-full-description ol {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.product-full-description li {
margin-bottom: 0.5rem;
} @media (max-width: 768px) {
.product-details-section {
padding: 1.5rem;
}
.modern-tabs {
gap: 0.5rem;
}
.modern-tabs .nav-link {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.modern-tabs .nav-link .material-symbols-outlined {
font-size: 1.1rem;
}
.tab-content-inner {
padding: 1.5rem;
}
.specifications-grid {
grid-template-columns: 1fr;
}
.spec-item {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.spec-value {
text-align: left;
}
}
.archive.category .product-price,
body.home .product-price {
background-color: transparent !important;
} .hero-section .position-absolute button {
position: relative; box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1); transform: translateZ(0);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}
.hero-section .position-absolute button:hover { transform: translateZ(20px) translateY(-4px);
box-shadow:
0 12px 48px rgba(0, 0, 0, 0.6),
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 20px rgba(255, 172, 5, 0.3);
border-color: rgba(255, 172, 5, 0.5);
}
.hero-section .position-absolute button:active { transform: translateZ(0) translateY(0);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hero-section .position-absolute button .material-symbols-outlined { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}  article.product-card .product-image-wrapper .product-overlay button.btn,
article.product-card:hover .product-image-wrapper .product-overlay button.btn {
position: relative;
overflow: hidden;
z-index: 0;
color: #141414 !important;
background-color: #ffac05 !important;
border-color: #ffac05 !important;
} article.product-card .product-image-wrapper .product-overlay button.btn::after,
article.product-card:hover .product-image-wrapper .product-overlay button.btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffac05;
z-index: -2;
border-radius: inherit;
} article.product-card .product-image-wrapper .product-overlay button.btn::before,
article.product-card:hover .product-image-wrapper .product-overlay button.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.5),
transparent);
transition: left 0.5s ease;
z-index: -1;
pointer-events: none;
border-radius: inherit;
} article.product-card .product-image-wrapper .product-overlay button.btn:hover,
article.product-card:hover .product-image-wrapper .product-overlay button.btn:hover {
background-color: #ffac05 !important;
border-color: #ffac05 !important;
color: #141414 !important;
box-shadow: 0 8px 25px rgba(255, 172, 5, 0.4);
} article.product-card .product-image-wrapper .product-overlay button.btn:hover::before,
article.product-card:hover .product-image-wrapper .product-overlay button.btn:hover::before {
left: 100%;
} article.product-card .product-image-wrapper .product-overlay button.btn:hover::after,
article.product-card:hover .product-image-wrapper .product-overlay button.btn:hover::after {
background-color: #e59a00;
}  .site-header .navbar .container {
position: relative;
} .site-header .d-lg-none .btn-link.text-white {
color: #ffffff !important;
text-decoration: none !important;
padding: 0.5rem;
z-index: 1000;
position: relative;
}
.site-header .d-lg-none .btn-link.text-white:hover {
color: var(--vt-gold) !important;
}
.site-header .d-lg-none .btn-link.text-white .material-symbols-outlined {
font-size: 28px;
} .site-header .d-lg-none .navbar-brand.position-absolute {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.site-header .d-lg-none .navbar-brand.position-absolute .custom-logo-link {
max-width: 150px !important;
max-height: 40px !important;
}
.site-header .d-lg-none .navbar-brand.position-absolute .custom-logo-link img {
max-width: 150px !important;
max-height: 40px !important;
width: auto;
height: auto;
}  @media (min-width: 768px) { .site-header .navbar .container {
display: flex !important;
align-items: center;
gap: 1.5rem;
flex-wrap: nowrap;
} .site-header .navbar .navbar-brand {
flex-shrink: 0;
order: 1 !important;
} .site-header .navbar .mega-menu-wrap,
.site-header .navbar>div>div[class*="order-lg"] {
flex: 1 0 auto;
order: 2 !important;
width: auto !important;
max-width: none;
} .site-header .mega-menu-toggle {
display: none !important;
} .site-header .mega-menu {
display: flex;
align-items: center;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: nowrap;
white-space: nowrap;
width: auto;
}
.site-header .mega-menu>li {
position: relative;
flex-shrink: 0;
}
.site-header .mega-menu>li>a {
padding: 0.5rem 0.75rem;
color: #ffffff;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
white-space: nowrap;
}
.site-header .mega-menu>li>a:hover,
.site-header .mega-menu>li>a:focus {
color: var(--vt-gold);
} .site-header .mega-menu .mega-sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background-color: var(--vt-surface-dark);
border: 1px solid var(--vt-border-white);
border-radius: 0.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
padding: 0.5rem 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1000;
list-style: none;
}
.site-header .mega-menu li:hover>.mega-sub-menu,
.site-header .mega-menu li:focus-within>.mega-sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-header .mega-menu .mega-sub-menu li {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.site-header .mega-menu .mega-sub-menu li:last-child {
border-bottom: none;
}
.site-header .mega-menu .mega-sub-menu a {
padding: 0.75rem 1rem;
display: block;
color: #ffffff;
text-decoration: none;
font-size: 0.9375rem;
}
.site-header .mega-menu .mega-sub-menu a:hover,
.site-header .mega-menu .mega-sub-menu a:focus {
background-color: rgba(255, 172, 5, 0.1);
color: var(--vt-gold);
} .site-header .navbar .order-lg-3 {
flex-shrink: 0;
order: 3 !important;
}
} @media (max-width: 767px) {
.site-header .navbar .container {
flex-wrap: wrap;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
position: relative;
} .site-header .navbar .navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 5;
order: 1 !important; margin-right: 0 !important;
} .site-header .navbar .navbar-brand .custom-logo-link img {
max-width: 150px;
max-height: 40px;
} .mega-menu-toggle {
position: relative;
z-index: 10;
order: 0 !important;
} .site-header .navbar .order-3 .btn-link[data-bs-toggle="modal"] {
z-index: 10;
} .site-header .navbar #mega-menu-wrap-primary {
width: auto !important;
max-width: none !important;
order: 1 !important;
clear: both;
} .site-header .navbar #mega-menu-primary {
background-color: var(--vt-surface-dark);
list-style: none;
padding: 0;
margin: 1rem 0 0 0;
}
.site-header .mega-menu li {
border-bottom: 1px solid var(--vt-border-white);
}
.site-header .mega-menu a {
display: block;
padding: 1rem;
color: #ffffff;
text-decoration: none;
font-size: 1.125rem;
}
.site-header .mega-menu a:hover,
.site-header .mega-menu a:focus {
background-color: rgba(255, 172, 5, 0.1);
color: var(--vt-gold);
} .site-header .mega-menu .mega-sub-menu {
background-color: rgba(0, 0, 0, 0.2);
list-style: none;
padding-left: 0;
}
.site-header .mega-menu .mega-sub-menu a {
padding-left: 2rem;
font-size: 1rem;
}
} #searchModal .modal-content {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
}
#searchModal .modal-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#searchModal .btn-close {
opacity: 1;
}
#searchModal .live-search-dropdown {
position: relative;
margin-top: 1rem;
max-height: 400px;
overflow-y: auto;
} .site-header .live-search-dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: auto !important;
min-width: 320px;
z-index: 9999 !important;
background: #212121 !important;
opacity: 1 !important;
}
.site-header .live-search-results-container {
opacity: 1 !important;
}
.site-header .live-search-result-item {
opacity: 1 !important;
}
.site-header .live-search-result-title {
color: #ffffff !important;
opacity: 1 !important;
}
.site-header .live-search-result-category {
color: #ffac05 !important;
opacity: 1 !important;
}
.site-header .live-search-result-price {
color: #ffffff !important;
opacity: 1 !important;
} @media (min-width: 768px) {
.site-header .btn.btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
}
}  .contact-hero {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-top: 6rem;
}
.contact-hero h1{color: #ffffff !important;} .contact-card {
background: var(--vt-gold);
border: 1px solid var(--vt-border-white);
border-radius: 1rem;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
}
.contact-card a { color: var(--vt-bg-dark) !important; }
.contact-card:hover {
border-color: var(--vt-gold);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(255, 172, 5, 0.1);
}
.contact-card-icon {
width: 4rem;
height: 4rem;
background: linear-gradient(135deg, var(--vt-gold), var(--vt-gold-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
-webkit-box-shadow: 5px 5px 36px 2px rgba(236,159,1,0.16); 
box-shadow: 5px 5px 36px 2px rgba(236,159,1,0.16);
}
.contact-card-icon .material-symbols-outlined {
font-size: 2rem;
color: var(--vt-bg-dark);
}
.contact-card-title {
color: #fff;
font-weight: 700;
margin-bottom: 0.75rem;
}
.contact-card-text a {
text-decoration: none;
transition: color 0.2s;
}
.contact-card-text a:hover {
color: var(--vt-bg-dark) !important;
} .city-filter-wrapper {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
padding: 1rem;
background: var(--vt-surface-dark);
border-radius: 0.75rem;
}
.city-filter-btn {
padding: 0.5rem 1.25rem;
border: 1px solid var(--vt-border-white);
background: transparent;
color: var(--vt-text-white-muted);
border-radius: 2rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.city-filter-btn:hover {
border-color: var(--vt-gold);
color: var(--vt-gold);
}
.city-filter-btn.active {
background: var(--vt-gold);
border-color: var(--vt-gold);
color: var(--vt-bg-dark);
} .store-card {
background: var(--vt-surface-dark);
border: 1px solid var(--vt-border-white);
border-radius: 1rem;
overflow: hidden;
height: 100%;
transition: all 0.3s ease;
}
.store-card:hover {
border-color: var(--vt-gold);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.store-card.featured {
border-color: var(--vt-gold);
box-shadow: 0 5px 20px rgba(255, 172, 5, 0.15);
}
.store-card-header {
background: linear-gradient(185deg, rgba(255, 172, 5, 0.9), #ffac05);
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--vt-border-white);
}
.store-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.75rem;
background: var(--vt-gold);
color: var(--vt-bg-dark);
border-radius: 2rem;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.store-badge .material-symbols-outlined {
font-size: 1rem;
}
.store-badge.warehouse {
background: rgba(255, 255, 255, 0.1);
color: var(--vt-gold);
}
.store-city {
color: #fff;
font-weight: 700;
font-size: 1rem;
margin: 0;
line-height: 1.4;
}
.store-card-body {
padding: 1.5rem;
}
.store-info-item {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
}
.store-info-item:last-child {
margin-bottom: 0;
}
.store-info-item .material-symbols-outlined {
color: var(--vt-gold);
font-size: 1.25rem;
flex-shrink: 0;
margin-top: 0.125rem;
}
.store-info-item div,
.store-info-item a {
color: var(--vt-text-white-muted);
font-size: 0.9rem;
line-height: 1.5;
}
.store-info-item a:hover {
color: var(--vt-gold);
}
.store-info-item small {
color: var(--vt-text-white-dim);
}
.store-card-footer {
padding: 1rem 1.5rem;
background: rgba(255, 172, 5, 0.9);
border-top: 1px solid var(--vt-border-white);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--vt-text-white-dim);
}
.store-card-footer .material-symbols-outlined {
font-size: 1rem;
color: var(--vt-bg-dark);
} .distributor-card {
background: linear-gradient(115deg, var(--vt-surface-dark), rgba(255, 172, 5, 0.9));
border: 1px solid var(--vt-gold);
border-radius: 1rem;
padding: 2rem;
display: flex;
align-items: center;
gap: 1.5rem;
text-align: center;
justify-content: center;
}
.distributor-icon {
width: 4rem;
height: 4rem;
background: var(--vt-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.distributor-icon .material-symbols-outlined {
font-size: 2rem;
color: var(--vt-bg-dark);
}
.distributor-content h5 {
color: #fff;
font-weight: 700;
}
#breadcrumb {
padding: 0;   
}
#breadcrumb a{
color: #1d2327 !important;
} .contact-form-section {
background: var(--vt-surface-dark);
}
.contact-form .form-control,
.contact-form .form-select {
background: var(--vt-bg-dark);
border: 1px solid var(--vt-border-white);
color: #fff;
padding: 0.875rem 1rem;
border-radius: 0.5rem;
}
.contact-form .form-control:focus,
.contact-form .form-select:focus {
background: var(--vt-bg-dark);
border-color: var(--vt-gold);
color: #fff;
box-shadow: 0 0 0 3px rgba(255, 172, 5, 0.1);
}
.contact-form .form-label {
color: var(--vt-text-white-muted);
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.contact-form .btn-primary {
display: inline-flex;
align-items: center;
} .contact-info-sidebar {
background: var(--vt-bg-dark);
border: 1px solid var(--vt-border-white);
border-radius: 1rem;
padding: 2rem;
}
.feature-item {
display: flex;
gap: 1rem;
}
.feature-icon {
width: 3rem;
height: 3rem;
background: linear-gradient(135deg, var(--vt-gold), var(--vt-gold-dark));
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feature-icon .material-symbols-outlined {
font-size: 1.5rem;
color: var(--vt-bg-dark);
} .store-item.fade-in {
animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @media (max-width: 767.98px) {
.contact-hero {
padding-top: 4rem;
}
.contact-hero h1 {
font-size: 2rem;
}
.city-filter-wrapper {
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
padding: 0.75rem;
}
.city-filter-btn {
flex-shrink: 0;
}
.distributor-card {
flex-direction: column;
text-align: center;
}
} .bg-vt-dark {
background-color: var(--vt-bg-dark) !important;
}
.bg-vt-surface {
background-color: var(--vt-surface-dark) !important;
}.wp-block-table{overflow-x:auto}.wp-block-table table{border-collapse:collapse;width:100%}.wp-block-table thead{border-bottom:3px solid}.wp-block-table tfoot{border-top:3px solid}.wp-block-table td,.wp-block-table th{border:1px solid;padding:.5em}.wp-block-table .has-fixed-layout{table-layout:fixed;width:100%}.wp-block-table .has-fixed-layout td,.wp-block-table .has-fixed-layout th{word-break:break-word}.wp-block-table.aligncenter,.wp-block-table.alignleft,.wp-block-table.alignright{display:table;width:auto}.wp-block-table.aligncenter td,.wp-block-table.aligncenter th,.wp-block-table.alignleft td,.wp-block-table.alignleft th,.wp-block-table.alignright td,.wp-block-table.alignright th{word-break:break-word}.wp-block-table .has-subtle-light-gray-background-color{background-color:#f3f4f5}.wp-block-table .has-subtle-pale-green-background-color{background-color:#e9fbe5}.wp-block-table .has-subtle-pale-blue-background-color{background-color:#e7f5fe}.wp-block-table .has-subtle-pale-pink-background-color{background-color:#fcf0ef}.wp-block-table.is-style-stripes{background-color:initial;border-collapse:inherit;border-spacing:0}.wp-block-table.is-style-stripes tbody tr:nth-child(odd){background-color:#f0f0f0}.wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd){background-color:#f3f4f5}.wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd){background-color:#e9fbe5}.wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd){background-color:#e7f5fe}.wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd){background-color:#fcf0ef}.wp-block-table.is-style-stripes td,.wp-block-table.is-style-stripes th{border-color:#0000}.wp-block-table.is-style-stripes{border-bottom:1px solid #f0f0f0}.wp-block-table .has-border-color td,.wp-block-table .has-border-color th,.wp-block-table .has-border-color tr,.wp-block-table .has-border-color>*{border-color:inherit}.wp-block-table table[style*=border-top-color] tr:first-child,.wp-block-table table[style*=border-top-color] tr:first-child td,.wp-block-table table[style*=border-top-color] tr:first-child th,.wp-block-table table[style*=border-top-color]>*,.wp-block-table table[style*=border-top-color]>* td,.wp-block-table table[style*=border-top-color]>* th{border-top-color:inherit}.wp-block-table table[style*=border-top-color] tr:not(:first-child){border-top-color:initial}.wp-block-table table[style*=border-right-color] td:last-child,.wp-block-table table[style*=border-right-color] th,.wp-block-table table[style*=border-right-color] tr,.wp-block-table table[style*=border-right-color]>*{border-right-color:inherit}.wp-block-table table[style*=border-bottom-color] tr:last-child,.wp-block-table table[style*=border-bottom-color] tr:last-child td,.wp-block-table table[style*=border-bottom-color] tr:last-child th,.wp-block-table table[style*=border-bottom-color]>*,.wp-block-table table[style*=border-bottom-color]>* td,.wp-block-table table[style*=border-bottom-color]>* th{border-bottom-color:inherit}.wp-block-table table[style*=border-bottom-color] tr:not(:last-child){border-bottom-color:initial}.wp-block-table table[style*=border-left-color] td:first-child,.wp-block-table table[style*=border-left-color] th,.wp-block-table table[style*=border-left-color] tr,.wp-block-table table[style*=border-left-color]>*{border-left-color:inherit}.wp-block-table table[style*=border-style] td,.wp-block-table table[style*=border-style] th,.wp-block-table table[style*=border-style] tr,.wp-block-table table[style*=border-style]>*{border-style:inherit}.wp-block-table table[style*=border-width] td,.wp-block-table table[style*=border-width] th,.wp-block-table table[style*=border-width] tr,.wp-block-table table[style*=border-width]>*{border-style:inherit;border-width:inherit}