.api-wc-custom-frontend {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
line-height: 1.6;
color: #333;
} .api-wc-custom-status {
padding: 12px 16px;
border-radius: 4px;
margin: 10px 0;
font-size: 14px;
border-left: 4px solid;
}
.api-wc-custom-status.success {
background-color: #d4edda;
border-color: #28a745;
color: #155724;
}
.api-wc-custom-status.error {
background-color: #f8d7da;
border-color: #dc3545;
color: #721c24;
}
.api-wc-custom-status.warning {
background-color: #fff3cd;
border-color: #ffc107;
color: #856404;
}
.api-wc-custom-status.info {
background-color: #d1ecf1;
border-color: #17a2b8;
color: #0c5460;
} .api-wc-custom-loader {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid #0073aa;
border-radius: 50%;
animation: api-wc-spin 1s linear infinite;
margin-right: 8px;
vertical-align: middle;
}
@keyframes api-wc-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .api-wc-custom-code {
background: #f4f4f4;
border: 1px solid #ddd;
border-radius: 4px;
padding: 12px;
font-family: 'Courier New', monospace;
font-size: 13px;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
.api-wc-custom-code.json {
background: #2d3748;
color: #e2e8f0;
border-color: #4a5568;
} .api-wc-custom-button {
display: inline-block;
padding: 8px 16px;
background: #0073aa;
color: #fff;
text-decoration: none;
border-radius: 4px;
border: none;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s ease;
}
.api-wc-custom-button:hover {
background: #005a87;
color: #fff;
text-decoration: none;
}
.api-wc-custom-button:focus {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
.api-wc-custom-button.secondary {
background: #6c757d;
}
.api-wc-custom-button.secondary:hover {
background: #545b62;
}
.api-wc-custom-button.small {
padding: 4px 8px;
font-size: 12px;
}
.api-wc-custom-button.large {
padding: 12px 24px;
font-size: 16px;
} .api-wc-custom-form {
max-width: 600px;
margin: 20px 0;
}
.api-wc-custom-form .form-group {
margin-bottom: 16px;
}
.api-wc-custom-form label {
display: block;
margin-bottom: 4px;
font-weight: 600;
color: #333;
}
.api-wc-custom-form input[type="text"],
.api-wc-custom-form input[type="email"],
.api-wc-custom-form input[type="password"],
.api-wc-custom-form textarea,
.api-wc-custom-form select {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.2s ease;
}
.api-wc-custom-form input:focus,
.api-wc-custom-form textarea:focus,
.api-wc-custom-form select:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}
.api-wc-custom-form .form-help {
font-size: 12px;
color: #666;
margin-top: 4px;
} .api-wc-custom-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.api-wc-custom-table th,
.api-wc-custom-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #eee;
}
.api-wc-custom-table th {
background: #f8f9fa;
font-weight: 600;
color: #333;
}
.api-wc-custom-table tr:hover {
background: #f8f9fa;
} @media (max-width: 768px) {
.api-wc-custom-table {
font-size: 14px;
}
.api-wc-custom-table th,
.api-wc-custom-table td {
padding: 8px;
}
.api-wc-custom-form {
max-width: 100%;
}
.api-wc-custom-button {
width: 100%;
text-align: center;
}
} .api-wc-custom-badge {
display: inline-block;
padding: 2px 8px;
background: #e9ecef;
color: #495057;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
border-radius: 12px;
margin: 0 4px 4px 0;
}
.api-wc-custom-badge.success {
background: #d4edda;
color: #155724;
}
.api-wc-custom-badge.error {
background: #f8d7da;
color: #721c24;
}
.api-wc-custom-badge.warning {
background: #fff3cd;
color: #856404;
}
.api-wc-custom-badge.info {
background: #d1ecf1;
color: #0c5460;
} .api-wc-custom-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin: 16px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.api-wc-custom-card-header {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #e0e0e0;
}
.api-wc-custom-card-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.api-wc-custom-card-body {
color: #666;
line-height: 1.6;
} .api-wc-custom-tooltip {
position: relative;
display: inline-block;
cursor: help;
}
.api-wc-custom-tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
z-index: 1000;
margin-bottom: 4px;
}
.api-wc-custom-tooltip:hover::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: #333;
z-index: 1000;
} .api-wc-custom-fade-in {
animation: api-wc-fade-in 0.3s ease-in;
}
@keyframes api-wc-fade-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.api-wc-custom-slide-in {
animation: api-wc-slide-in 0.3s ease-out;
}
@keyframes api-wc-slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
} .api-wc-custom-text-center {
text-align: center;
}
.api-wc-custom-text-right {
text-align: right;
}
.api-wc-custom-text-left {
text-align: left;
}
.api-wc-custom-hidden {
display: none;
}
.api-wc-custom-visible {
display: block;
}
.api-wc-custom-margin-top {
margin-top: 20px;
}
.api-wc-custom-margin-bottom {
margin-bottom: 20px;
}
.api-wc-custom-padding {
padding: 20px;
} .api-wc-custom-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .api-wc-custom-button:focus,
.api-wc-custom-form input:focus,
.api-wc-custom-form textarea:focus,
.api-wc-custom-form select:focus {
outline: 2px solid #0073aa;
outline-offset: 2px;
} @media print {
.api-wc-custom-button,
.api-wc-custom-loader {
display: none;
}
.api-wc-custom-card {
box-shadow: none;
border: 1px solid #000;
}
.api-wc-custom-code {
background: #f9f9f9;
border: 1px solid #000;
}
}#place_order.ppcp-hidden{display:none!important}.ppcp-disabled{cursor:not-allowed;filter:grayscale(100%)}.ppcp-disabled *{pointer-events:none}.ppc-button-wrapper .ppcp-messages:first-child{padding-top:10px}.woocommerce-SavedPaymentMethods-token:has(#ppcp-vault-component){align-items:center;display:flex;gap:8px}.woocommerce-SavedPaymentMethods-token:has(#ppcp-vault-component) #ppcp-vault-component{flex:1;overflow:hidden}#ppc-button-ppcp-gateway{line-height:0}#ppc-button-ppcp-gateway div[class^=item-]{margin-top:14px}#ppc-button-ppcp-gateway div[class^=item-]:first-child{margin-top:0}#ppc-button-minicart{display:block;line-height:0}.ppcp-button-apm{--apm-button-border-radius:4px;border-radius:var(--apm-button-border-radius);height:45px;line-height:0;margin-top:14px;max-width:750px;min-width:0;overflow:hidden}.ppcp-button-apm.ppcp-button-pill{--apm-button-border-radius:50px}.ppcp-button-apm.ppcp-button-minicart{display:block}.ppcp-width-min .ppcp-button-apm{height:35px}.ppcp-width-300 .ppcp-button-apm{height:45px}.ppcp-width-500 .ppcp-button-apm{height:55px}.wp-block-woocommerce-cart .ppcp-button-apm,.wp-block-woocommerce-checkout .ppcp-button-apm{margin:0;min-width:0}.wp-admin .ppcp-button-apm{pointer-events:none}.tax-product_brand .brand-description{overflow:hidden;zoom:1}.tax-product_brand .brand-description img.brand-thumbnail{width:25%;float:right}.tax-product_brand .brand-description .text{width:72%;float:left}.widget_brand_description img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0 0 1em}:where(.brand-thumbnails-description),ul.brand-thumbnails{margin-left:0;margin-bottom:0;clear:both;list-style:none}:where(.brand-thumbnails-description)::before,ul.brand-thumbnails:before{clear:both;content:"";display:table}:where(.brand-thumbnails-description)::after,ul.brand-thumbnails:after{clear:both;content:"";display:table}ul.brand-thumbnails li{float:left;margin:0 3.8% 1em 0;padding:0;position:relative;width:22.05%}ul.brand-thumbnails.fluid-columns li{width:auto}:where(.brand-thumbnails-description li.first),ul.brand-thumbnails:not(.fluid-columns) li.first{clear:both}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:0}ul.brand-thumbnails.columns-1 li{width:100%;margin-right:0}ul.brand-thumbnails.columns-2 li{width:48%}ul.brand-thumbnails.columns-3 li{width:30.75%}ul.brand-thumbnails.columns-5 li{width:16.95%}ul.brand-thumbnails.columns-6 li{width:13.5%}.brand-thumbnails li img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0}@media screen and (max-width:768px){ul.brand-thumbnails:not(.fluid-columns) li{width:48%!important}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:none}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:3.8%}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd){clear:both}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(2n){margin-right:0}}:where(.brand-thumbnails-description li){float:left;margin:0 2% 1em 0;padding:0;position:relative;text-align:center}:where(.brand-thumbnails-description li.last),:where(.brand-thumbnails-description.columns-1 li){margin-right:0}:where(.brand-thumbnails-description li .term-thumbnail img){width:100%;display:inline}:where(.brand-thumbnails-description li .term-description){margin-top:1em;text-align:left}#brands_a_z h3:target{text-decoration:underline}ul.brands_index{list-style:none outside;overflow:hidden;zoom:1}ul.brands_index li{float:left;margin:0 2px 2px 0}ul.brands_index li a,ul.brands_index li span{border:1px solid #ccc;padding:6px;line-height:1em;float:left;text-decoration:none}ul.brands_index li span{border-color:#eee;color:#ddd}ul.brands_index li a:hover{border-width:2px;padding:5px;text-decoration:none}ul.brands_index li a.active{border-width:2px;padding:5px}div#brands_a_z a.top{border:1px solid #ccc;padding:4px;line-height:1em;float:right;text-decoration:none;font-size:.8em}@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap"); :root { --primary: #0f172a;
--primary-light: #1e293b;
--primary-dark: #020617;
--secondary: #ffffff;
--accent: #0ea5e9;
--accent-light: #38bdf8;
--accent-dark: #0284c7; --gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a; --success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6; --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem; --spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem; --radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.06);
--shadow-lg: 0 8px 24px rgb(0 0 0 / 0.08);
--shadow-xl: 0 16px 40px rgb(0 0 0 / 0.08);
--shadow-2xl: 0 24px 48px rgb(0 0 0 / 0.1); --transition-fast: 180ms ease;
--transition-normal: 280ms ease;
--transition-slow: 380ms ease; --container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1400px;
} *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: 1.65;
color: var(--gray-700);
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} @media (min-width: 1440px) {
body {
font-size: 1.0625rem;
}
}
@media (min-width: 1920px) {
body {
font-size: 1.125rem;
}
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
ul,
ol {
list-style: none;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
} .container {
width: 100%;
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
@media (min-width: 480px) {
.container {
padding: 0 var(--spacing-5);
}
}
@media (min-width: 768px) {
.container {
padding: 0 var(--spacing-6);
}
} @media (min-width: 1440px) {
.container {
max-width: var(--container-2xl);
padding: 0 var(--spacing-8);
}
}
@media (min-width: 1600px) {
.container {
max-width: 1520px;
padding: 0 var(--spacing-10);
}
}
@media (min-width: 1920px) {
.container {
max-width: 1680px;
padding: 0 var(--spacing-12);
}
}
.section {
padding: var(--spacing-6) 0;
}
@media (min-width: 480px) {
.section {
padding: var(--spacing-8) 0;
}
}
@media (min-width: 640px) {
.section {
padding: var(--spacing-12) 0;
}
}
@media (min-width: 1024px) {
.section {
padding: var(--spacing-16) 0;
}
}
@media (min-width: 1440px) {
.section {
padding: var(--spacing-20) 0;
}
}
@media (min-width: 1920px) {
.section {
padding: 5rem 0 6rem;
}
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-8);
padding: 0 var(--spacing-2);
}
@media (min-width: 480px) {
.section-header {
margin-bottom: var(--spacing-10);
}
}
@media (min-width: 768px) {
.section-header {
margin-bottom: var(--spacing-12);
}
}
@media (min-width: 1440px) {
.section-header {
margin-bottom: var(--spacing-16);
}
}
@media (min-width: 1920px) {
.section-header {
margin-bottom: var(--spacing-20);
}
}
.section-title {
font-size: var(--font-size-2xl);
font-weight: 600;
color: var(--gray-900);
margin-bottom: var(--spacing-3);
letter-spacing: -0.02em;
}
@media (min-width: 768px) {
.section-title {
font-size: var(--font-size-3xl);
}
}
@media (min-width: 1440px) {
.section-title {
font-size: 2rem;
margin-bottom: var(--spacing-4);
}
}
.section-subtitle {
font-size: var(--font-size-base);
color: var(--gray-500);
max-width: 520px;
margin: 0 auto;
font-weight: 400;
}
@media (min-width: 1440px) {
.section-subtitle {
font-size: 1.25rem;
max-width: 640px;
}
}
@media (min-width: 1920px) {
.section-subtitle {
font-size: 1.375rem;
max-width: 700px;
}
} .header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--gray-100);
transition: var(--transition-normal);
}
.header.scrolled {
border-bottom-color: var(--gray-200);
box-shadow: var(--shadow-sm);
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
@media (min-width: 1024px) {
.header-container {
height: 76px;
}
}
.logo {
display: flex;
align-items: center;
gap: var(--spacing-3);
}
.logo img {
height: 38px;
width: auto;
}
@media (min-width: 768px) {
.logo img {
height: 42px;
}
}
.logo-text {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--primary);
}
.nav {
display: none;
}
@media (min-width: 1024px) {
.nav {
display: flex;
align-items: center;
gap: var(--spacing-8);
}
}
@media (min-width: 1440px) {
.nav {
gap: var(--spacing-10);
}
}
@media (min-width: 1920px) {
.nav {
gap: var(--spacing-12);
}
}
.nav-link {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--gray-600);
padding: var(--spacing-2) var(--spacing-3);
border-radius: var(--radius-md);
transition: var(--transition-fast);
}
.nav-link:hover {
color: var(--gray-900);
}
.nav-link.active {
color: var(--gray-900);
} .nav-list {
display: flex;
align-items: center;
gap: var(--spacing-8);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 1440px) {
.nav-list {
gap: var(--spacing-10);
}
}
@media (min-width: 1920px) {
.nav-list {
gap: var(--spacing-12);
}
}
.nav-list .nav-item {
list-style: none;
margin: 0;
padding: 0;
} .mobile-nav-list {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav-list li {
list-style: none;
}
.mobile-nav-list li a {
font-size: var(--font-size-lg);
font-weight: 500;
color: var(--gray-800);
padding: var(--spacing-4) 0;
border-bottom: 1px solid var(--gray-200);
display: block;
transition: var(--transition-fast);
}
@media (min-width: 480px) {
.mobile-nav-list li a {
padding: var(--spacing-5) 0;
}
}
.mobile-nav-list li a:hover {
color: var(--accent);
} .nav-list .menu-item-has-children {
position: relative;
}
.nav-list .menu-item-has-children>a::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
margin-left: 6px;
vertical-align: middle;
transition: var(--transition-fast);
}
.nav-list .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
border: 1px solid var(--gray-200);
padding: var(--spacing-2) 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
z-index: 1001;
list-style: none;
margin: 0;
}
.nav-list .menu-item-has-children:hover>.sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-list .sub-menu li {
list-style: none;
margin: 0;
padding: 0;
}
.nav-list .sub-menu li a {
display: block;
padding: var(--spacing-2) var(--spacing-5);
font-size: var(--font-size-sm);
font-weight: 400;
color: var(--gray-700);
transition: var(--transition-fast);
white-space: nowrap;
}
.nav-list .sub-menu li a::after {
display: none !important;
}
.nav-list .sub-menu li a:hover {
background: var(--gray-50);
color: var(--accent);
} .nav-list .sub-menu .sub-menu {
top: 0;
left: 100%;
} .mobile-nav-list .sub-menu {
list-style: none;
margin: 0;
padding: 0 0 0 var(--spacing-4);
}
.mobile-nav-list .sub-menu li {
list-style: none;
}
.mobile-nav-list .sub-menu li a {
font-size: var(--font-size-base);
font-weight: 400;
color: var(--gray-600);
padding: var(--spacing-2) 0;
border-bottom: 1px solid var(--gray-100);
display: block;
}
.mobile-nav-list .sub-menu li a:hover {
color: var(--accent);
} .page-content {
max-width: 900px;
margin: 0 auto;
line-height: 1.8;
color: var(--gray-700);
}
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
color: var(--primary);
margin-bottom: var(--spacing-4);
margin-top: var(--spacing-8);
font-weight: 700;
line-height: 1.3;
}
.page-content h2 {
font-size: var(--font-size-3xl);
}
.page-content h3 {
font-size: var(--font-size-2xl);
}
.page-content p {
margin-bottom: var(--spacing-4);
}
.page-content ul,
.page-content ol {
margin-bottom: var(--spacing-4);
padding-left: var(--spacing-6);
list-style: disc;
}
.page-content ol {
list-style: decimal;
}
.page-content li {
margin-bottom: var(--spacing-2);
}
.page-content img {
border-radius: var(--radius-lg);
margin: var(--spacing-6) 0;
box-shadow: var(--shadow-md);
}
.page-content a {
color: var(--accent);
text-decoration: underline;
transition: var(--transition-fast);
}
.page-content a:hover {
color: var(--accent-dark);
}
.page-content blockquote {
border-left: 4px solid var(--accent);
padding: var(--spacing-4) var(--spacing-6);
margin: var(--spacing-6) 0;
background: var(--gray-50);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-style: italic;
color: var(--gray-600);
} .page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content input[type="url"],
.page-content textarea,
.page-content select {
width: 100%;
padding: var(--spacing-3) var(--spacing-4);
border: 1px solid var(--gray-200);
border-radius: var(--radius-md);
font-family: var(--font-family);
font-size: var(--font-size-base);
transition: var(--transition-fast);
margin-bottom: var(--spacing-4);
}
.page-content input:focus,
.page-content textarea:focus,
.page-content select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.15);
}
.page-content input[type="submit"],
.page-content button[type="submit"] {
background: var(--accent);
color: white;
padding: var(--spacing-3) var(--spacing-8);
border: none;
border-radius: var(--radius-lg);
font-weight: 600;
cursor: pointer;
transition: var(--transition-fast);
}
.page-content input[type="submit"]:hover,
.page-content button[type="submit"]:hover {
background: var(--accent-dark);
transform: translateY(-2px);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--spacing-4);
}
.search-toggle,
.cart-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: var(--gray-100);
color: var(--gray-700);
transition: var(--transition-fast);
}
@media (min-width: 1440px) {
.search-toggle,
.cart-toggle {
width: 48px;
height: 48px;
}
}
@media (min-width: 1920px) {
.search-toggle,
.cart-toggle {
width: 52px;
height: 52px;
}
}
.search-toggle:hover,
.cart-toggle:hover {
background: var(--primary);
color: white;
}
.cart-toggle {
position: relative;
}
.cart-count {
position: absolute;
top: -4px;
right: -4px;
background: var(--accent);
color: white;
font-size: 11px;
font-weight: 600;
width: 20px;
height: 20px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
}
.mobile-menu-toggle {
display: flex;
flex-direction: column;
gap: 5px;
padding: var(--spacing-2);
}
@media (min-width: 1024px) {
.mobile-menu-toggle {
display: none;
}
}
.mobile-menu-toggle span {
width: 24px;
height: 2px;
background: var(--gray-700);
border-radius: var(--radius-full);
transition: var(--transition-fast);
} .mobile-menu {
position: fixed;
top: 72px;
left: 0;
right: 0;
bottom: 0;
background: white;
padding: var(--spacing-6) var(--spacing-5);
transform: translateX(-100%);
transition: var(--transition-normal);
z-index: 999;
overflow-y: auto;
}
@media (min-width: 480px) {
.mobile-menu {
padding: var(--spacing-8) var(--spacing-6);
}
}
.mobile-menu.active {
transform: translateX(0);
}
.mobile-nav {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.mobile-nav-link {
font-size: var(--font-size-lg);
font-weight: 500;
color: var(--gray-800);
padding: var(--spacing-3) 0;
border-bottom: 1px solid var(--gray-200);
} .hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 72px;
}
.hero-video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.5) 50%, rgba(15, 23, 42, 0.6) 100%);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
@media (min-width: 1440px) {
.hero-content {
max-width: 780px;
}
}
@media (min-width: 1920px) {
.hero-content {
max-width: 880px;
}
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
background: rgba(255, 255, 255, 0.12);
padding: var(--spacing-1) var(--spacing-3);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--spacing-5);
letter-spacing: 0.02em;
}
@media (min-width: 768px) {
.hero-badge {
font-size: var(--font-size-sm);
padding: var(--spacing-2) var(--spacing-4);
margin-bottom: var(--spacing-6);
}
}
.hero-slider {
position: relative; display: grid;
grid-template-columns: 1fr; min-height: auto;
}
@media (min-width: 768px) {
.hero-slider {
min-height: 300px;
}
}
@media (min-width: 1440px) {
.hero-slider {
min-height: 360px;
}
}
@media (min-width: 1920px) {
.hero-slider {
min-height: 420px;
}
}
.hero-slide { grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease-in-out, visibility 0.8s; transform: none;
}
.hero-slide.active {
opacity: 1;
visibility: visible; transform: none;
transition: opacity 0.8s ease-in-out;
}
.hero-title {
font-size: var(--font-size-4xl);
font-weight: 700;
color: #fff;
line-height: 1.15;
margin-bottom: var(--spacing-5);
text-align: left;
letter-spacing: -0.03em;
}
@media (min-width: 768px) {
.hero-title {
font-size: 3.25rem;
margin-bottom: var(--spacing-6);
}
}
@media (min-width: 1024px) {
.hero-title {
font-size: 3.75rem;
}
}
.hero-title span {
color: var(--accent-light);
font-weight: 600;
}
.hero-description {
font-size: var(--font-size-lg);
color: rgba(255, 255, 255, 0.88);
margin-bottom: 0;
text-align: left;
max-width: 540px;
font-weight: 400;
line-height: 1.6;
}
@media (min-width: 768px) {
.hero-description {
font-size: var(--font-size-xl);
max-width: 560px;
}
} .hero-slide .hero-title,
.hero-slide .hero-description {
animation: none;
}
.hero-container-inner {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 var(--spacing-2);
}
@media (min-width: 480px) {
.hero-container-inner {
padding: 0;
}
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-6);
margin-top: var(--spacing-12);
padding-top: var(--spacing-8);
border-top: 1px solid rgba(255, 255, 255, 0.2);
animation: fadeInUp 0.6s ease 0.4s both;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: var(--font-size-3xl);
font-weight: 700;
color: white;
}
.stat-label {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.7);
margin-top: var(--spacing-1);
} .hero-scroll-btn {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
color: rgba(255, 255, 255, 0.7);
animation: bounce 2.5s infinite;
opacity: 1;
}
@media (min-width: 1440px) {
.hero-scroll-btn {
bottom: 48px;
}
}
@media (min-width: 1920px) {
.hero-scroll-btn {
bottom: 56px;
}
}
.hero-scroll-btn svg {
width: 32px;
height: 32px;
}
@media (min-width: 1440px) {
.hero-scroll-btn svg {
width: 40px;
height: 40px;
}
}
@media (min-width: 1920px) {
.hero-scroll-btn svg {
width: 48px;
height: 48px;
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-10px);
}
60% {
transform: translateX(-50%) translateY(-5px);
}
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--font-size-sm);
font-weight: 600;
border-radius: var(--radius-lg);
transition: var(--transition-fast);
cursor: pointer;
border: 1px solid transparent;
}
.btn-primary {
background: var(--gray-900);
color: white;
}
.btn-primary:hover {
background: var(--gray-800);
opacity: 0.95;
}
.btn-secondary {
background: #fff;
color: var(--gray-800);
border-color: var(--gray-200);
}
.btn-secondary:hover {
background: var(--gray-50);
border-color: var(--gray-300);
}
.btn-outline {
background: transparent;
color: white;
border-color: rgba(255, 255, 255, 0.5);
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
}
.btn-lg {
padding: var(--spacing-4) var(--spacing-8);
font-size: var(--font-size-base);
}
@media (min-width: 1440px) {
.btn-lg {
padding: var(--spacing-5) var(--spacing-10);
font-size: var(--font-size-lg);
}
}
@media (min-width: 1920px) {
.btn-lg {
padding: var(--spacing-6) var(--spacing-12);
font-size: 1.25rem;
}
}
.btn-icon {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--radius-full);
} .categories {
background: var(--gray-50);
}
.categories-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-3);
}
@media (min-width: 480px) {
.categories-grid {
gap: var(--spacing-4);
}
}
@media (min-width: 768px) {
.categories-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.categories-grid {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 1440px) {
.categories-grid {
gap: var(--spacing-8);
}
}
@media (min-width: 1920px) {
.categories-grid {
gap: var(--spacing-10);
}
}
.category-card {
position: relative;
border-radius: var(--radius-xl);
height: 200px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--spacing-4);
text-align: left;
transition: var(--transition-normal);
cursor: pointer;
overflow: hidden;
border: 1px solid var(--gray-200);
background-size: cover;
background-position: center;
}
@media (min-width: 480px) {
.category-card {
height: 220px;
padding: var(--spacing-5);
}
}
@media (min-width: 768px) {
.category-card {
height: 240px;
}
}
@media (min-width: 1024px) {
.category-card {
height: 260px;
padding: var(--spacing-6);
}
}
.category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
transition: var(--transition-normal);
z-index: 1;
}
.category-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--gray-300);
}
.category-card:hover::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 45%);
}
.category-card .category-icon {
display: none; }
.category-name {
position: relative;
z-index: 2;
font-size: var(--font-size-lg);
font-weight: 600;
color: #fff;
margin-bottom: var(--spacing-1);
transition: var(--transition-normal);
}
@media (min-width: 1440px) {
.category-name {
font-size: 1.375rem;
}
}
@media (min-width: 1920px) {
.category-name {
font-size: 1.5rem;
}
}
.category-count {
position: relative;
z-index: 2;
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.8);
transition: var(--transition-normal);
}
@media (min-width: 1440px) {
.category-count {
font-size: var(--font-size-base);
}
}
@media (min-width: 1920px) {
.category-count {
font-size: var(--font-size-lg);
}
}
.category-card:hover .category-count {
color: white;
} .products {
background: #fff;
}
.products-header {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
margin-bottom: var(--spacing-6);
padding: 0 var(--spacing-1);
}
@media (min-width: 480px) {
.products-header {
margin-bottom: var(--spacing-8);
}
}
@media (min-width: 768px) {
.products-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0;
}
}
@media (min-width: 1440px) {
.products-header {
margin-bottom: var(--spacing-12);
}
}
@media (min-width: 1920px) {
.products-header {
margin-bottom: var(--spacing-16);
}
}
.products-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
}
.products-tab {
padding: var(--spacing-2) var(--spacing-4);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--gray-600);
background: #fff;
border-radius: var(--radius-full);
border: 1px solid var(--gray-200);
transition: var(--transition-fast);
}
.products-tab:hover,
.products-tab.active {
background: var(--gray-900);
color: #fff;
border-color: var(--gray-900);
}
.products-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--spacing-5);
}
@media (min-width: 480px) {
.products-grid {
gap: var(--spacing-6);
}
}
@media (min-width: 640px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.products-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1440px) {
.products-grid {
gap: var(--spacing-8);
}
}
@media (min-width: 1920px) {
.products-grid {
gap: var(--spacing-10);
}
}
.products-cta {
text-align: center;
margin-top: var(--spacing-8);
padding: 0 var(--spacing-2);
}
@media (min-width: 480px) {
.products-cta {
margin-top: var(--spacing-10);
padding: 0;
}
} .product-card {
background: #fff;
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition-normal);
border: 1px solid var(--gray-200);
}
.product-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--gray-300);
}
.product-image {
position: relative;
aspect-ratio: 1;
background: var(--gray-100);
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-badge {
position: absolute;
top: var(--spacing-3);
left: var(--spacing-3);
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
border-radius: var(--radius-md);
}
.product-badge.sale {
background: var(--error);
color: white;
}
.product-badge.new {
background: var(--success);
color: white;
}
.product-actions {
position: absolute;
top: var(--spacing-3);
right: var(--spacing-3);
display: flex;
flex-direction: column;
gap: var(--spacing-2);
opacity: 0;
transform: translateX(10px);
transition: var(--transition-normal);
}
.product-card:hover .product-actions {
opacity: 1;
transform: translateX(0);
}
.product-action-btn {
width: 36px;
height: 36px;
background: white;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
color: var(--gray-600);
transition: var(--transition-fast);
}
.product-action-btn:hover {
background: var(--accent);
color: white;
}
.product-info {
padding: var(--spacing-4);
}
@media (min-width: 480px) {
.product-info {
padding: var(--spacing-5);
}
}
@media (min-width: 1440px) {
.product-info {
padding: var(--spacing-6);
}
}
@media (min-width: 1920px) {
.product-info {
padding: var(--spacing-6) var(--spacing-8);
}
}
.product-category {
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--spacing-2);
}
.product-name {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--gray-800);
margin-bottom: var(--spacing-2);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 1440px) {
.product-name {
font-size: var(--font-size-lg);
}
}
@media (min-width: 1920px) {
.product-name {
font-size: 1.125rem;
}
}
.product-name a:hover {
color: var(--accent);
}
.product-rating {
display: flex;
align-items: center;
gap: var(--spacing-2);
margin-bottom: var(--spacing-3);
}
.product-stars {
display: flex;
gap: 2px;
color: var(--warning);
}
.product-reviews {
font-size: var(--font-size-xs);
color: var(--gray-500);
}
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.product-price {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.price-current {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--primary);
}
@media (min-width: 1440px) {
.price-current {
font-size: 1.25rem;
}
}
@media (min-width: 1920px) {
.price-current {
font-size: 1.375rem;
}
}
.price-old {
font-size: var(--font-size-sm);
color: var(--gray-400);
text-decoration: line-through;
}
.add-to-cart-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-900);
color: #fff;
border-radius: var(--radius-lg);
transition: var(--transition-fast);
}
.add-to-cart-btn:hover {
background: var(--gray-800);
opacity: 0.95;
} .features {
background: white;
}
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
@media (min-width: 768px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.features-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.feature-card {
text-align: center;
padding: var(--spacing-8);
background: var(--gray-50);
border-radius: var(--radius-xl);
transition: var(--transition-normal);
}
.feature-card:hover {
background: var(--primary);
}
.feature-card:hover .feature-icon,
.feature-card:hover .feature-title,
.feature-card:hover .feature-description {
color: white;
}
.feature-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--spacing-4);
display: flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: white;
font-size: 28px;
border-radius: var(--radius-xl);
transition: var(--transition-normal);
}
.feature-card:hover .feature-icon {
background: white;
color: var(--primary);
}
.feature-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--gray-800);
margin-bottom: var(--spacing-2);
transition: var(--transition-normal);
}
.feature-description {
font-size: var(--font-size-sm);
color: var(--gray-600);
transition: var(--transition-normal);
} .about {
background: var(--gray-50);
color: var(--gray-700);
}
.about-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-6);
align-items: center;
}
@media (min-width: 480px) {
.about-grid {
gap: var(--spacing-8);
}
}
@media (min-width: 640px) {
.about-grid {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-6);
}
}
@media (min-width: 768px) {
.about-grid {
gap: var(--spacing-8);
}
}
@media (min-width: 1024px) {
.about-grid {
gap: var(--spacing-12);
}
}
.about-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--spacing-4) 0;
}
@media (min-width: 480px) {
.about-content {
padding: var(--spacing-5) 0;
}
}
@media (min-width: 640px) {
.about-content {
padding: var(--spacing-4);
}
}
@media (min-width: 1024px) {
.about-content {
padding: 0;
}
}
.about-content h2 {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-2);
color: var(--gray-900);
line-height: 1.25;
letter-spacing: -0.02em;
}
@media (min-width: 640px) {
.about-content h2 {
font-size: var(--font-size-2xl);
margin-bottom: var(--spacing-4);
}
}
@media (min-width: 1024px) {
.about-content h2 {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-6);
}
}
@media (min-width: 1440px) {
.about-content h2 {
font-size: 2.25rem;
margin-bottom: var(--spacing-8);
}
}
@media (min-width: 1920px) {
.about-content h2 {
font-size: 2.5rem;
margin-bottom: var(--spacing-10);
}
}
.about-content p {
font-size: var(--font-size-xs);
color: var(--gray-600);
margin-bottom: var(--spacing-2);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 640px) {
.about-content p {
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-3);
line-height: 1.6;
-webkit-line-clamp: 4;
}
}
@media (min-width: 1024px) {
.about-content p {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-6);
line-height: 1.8;
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
}
@media (min-width: 1440px) {
.about-content p {
font-size: 1.125rem;
margin-bottom: var(--spacing-8);
}
}
@media (min-width: 1920px) {
.about-content p {
font-size: 1.25rem;
margin-bottom: var(--spacing-10);
}
}
.about-features {
display: none;
}
@media (min-width: 640px) {
.about-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-2);
margin-top: var(--spacing-4);
}
}
@media (min-width: 1024px) {
.about-features {
gap: var(--spacing-4);
margin-top: var(--spacing-8);
}
}
.about-feature {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-sm);
}
@media (min-width: 640px) {
.about-feature {
gap: var(--spacing-3);
font-size: var(--font-size-base);
}
}
.about-feature-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-800);
color: #fff;
border-radius: var(--radius-full);
font-size: 12px;
flex-shrink: 0;
}
@media (min-width: 640px) {
.about-feature-icon {
width: 24px;
height: 24px;
font-size: 14px;
}
}
.about-image {
position: relative;
order: -1;
}
@media (min-width: 1024px) {
.about-image {
order: 0;
}
}
.about-image>div {
padding: var(--spacing-2) !important;
}
@media (min-width: 640px) {
.about-image>div {
padding: var(--spacing-4) !important;
}
}
@media (min-width: 1024px) {
.about-image>div {
padding: var(--spacing-8) !important;
}
}
.about-image img {
max-height: 200px !important;
width: 100%;
object-fit: cover;
border-radius: var(--radius-xl) !important;
box-shadow: var(--shadow-md);
}
@media (min-width: 640px) {
.about-image img {
max-height: 280px !important;
border-radius: var(--radius-xl) !important;
}
}
@media (min-width: 768px) {
.about-image img {
max-height: 350px !important;
}
}
@media (min-width: 1024px) {
.about-image img {
max-height: 500px !important;
border-radius: var(--radius-2xl) !important;
}
}
@media (min-width: 1440px) {
.about-image img {
max-height: 560px !important;
}
}
@media (min-width: 1920px) {
.about-image img {
max-height: 620px !important;
}
}
.about-content .btn {
display: none;
}
@media (min-width: 640px) {
.about-content .btn {
display: inline-flex;
margin-top: var(--spacing-3) !important;
width: auto;
font-size: var(--font-size-sm);
padding: var(--spacing-2) var(--spacing-4);
}
}
@media (min-width: 1024px) {
.about-content .btn {
margin-top: var(--spacing-6) !important;
font-size: var(--font-size-base);
padding: var(--spacing-3) var(--spacing-6);
}
}
.about-image-main {
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2xl);
}
.about-stats-card {
position: absolute;
bottom: -30px;
right: -30px;
background: white;
padding: var(--spacing-6);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
}
.about-stats-card h4 {
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--accent);
}
.about-stats-card p {
color: var(--gray-600);
font-size: var(--font-size-sm);
} .cta {
background: var(--gray-50);
}
.cta-card {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
padding: var(--spacing-12) var(--spacing-8);
border-radius: var(--radius-2xl);
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.cta-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}
.cta-title {
font-size: var(--font-size-3xl);
font-weight: 700;
margin-bottom: var(--spacing-4);
position: relative;
}
.cta-description {
font-size: var(--font-size-lg);
opacity: 0.9;
margin-bottom: var(--spacing-8);
max-width: 500px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.cta-form {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
max-width: 500px;
margin: 0 auto;
position: relative;
}
@media (min-width: 768px) {
.cta-form {
flex-direction: row;
}
}
.cta-input {
flex: 1;
padding: var(--spacing-4);
border: none;
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
outline: none;
}
.cta-input::placeholder {
color: var(--gray-400);
} .footer-newsletter-form {
display: none;
}
@media (min-width: 640px) {
.footer-newsletter-form {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-3);
}
}
@media (min-width: 1024px) {
.footer-newsletter-form {
margin-top: var(--spacing-4);
}
}
.footer-newsletter-input {
width: 100%;
padding: var(--spacing-2) var(--spacing-3);
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
color: white;
font-size: var(--font-size-sm);
outline: none;
transition: var(--transition-fast);
}
.footer-newsletter-input:focus {
border-color: var(--accent);
background: rgba(255, 255, 255, 0.2);
}
.footer-newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.5);
} .footer {
background: var(--gray-900);
color: rgba(255, 255, 255, 0.9);
padding-top: var(--spacing-8);
}
@media (min-width: 480px) {
.footer {
padding-top: var(--spacing-10);
}
}
@media (min-width: 640px) {
.footer {
padding-top: var(--spacing-12);
}
}
@media (min-width: 1024px) {
.footer {
padding-top: var(--spacing-16);
}
}
@media (min-width: 1440px) {
.footer {
padding-top: var(--spacing-20);
}
}
@media (min-width: 1920px) {
.footer {
padding-top: 5.5rem;
}
}
.footer-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-6);
padding-bottom: var(--spacing-8);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 480px) {
.footer-grid {
gap: var(--spacing-8);
padding-bottom: var(--spacing-10);
}
}
@media (min-width: 640px) {
.footer-grid {
gap: var(--spacing-6);
padding-bottom: var(--spacing-8);
}
}
@media (min-width: 768px) {
.footer-grid {
gap: var(--spacing-8);
padding-bottom: var(--spacing-10);
}
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--spacing-10);
padding-bottom: var(--spacing-12);
}
}
@media (min-width: 1440px) {
.footer-grid {
gap: var(--spacing-12);
padding-bottom: var(--spacing-16);
}
}
@media (min-width: 1920px) {
.footer-grid {
gap: var(--spacing-16);
padding-bottom: var(--spacing-20);
}
}
.footer-brand {
grid-column: 1 / -1;
max-width: 100%;
margin-bottom: var(--spacing-2);
}
@media (max-width: 767px) {
.footer .footer-column {
margin-bottom: var(--spacing-4);
}
.footer .footer-column:last-of-type {
margin-bottom: 0;
}
}
@media (min-width: 640px) {
.footer-brand {
grid-column: 1 / 2;
max-width: 100%;
margin-bottom: 0;
}
}
@media (min-width: 1024px) {
.footer-brand {
grid-column: 1;
max-width: 300px;
}
}
@media (min-width: 1440px) {
.footer-brand {
max-width: 360px;
}
}
@media (min-width: 1920px) {
.footer-brand {
max-width: 400px;
}
}
.footer-logo {
display: flex;
align-items: center;
gap: var(--spacing-3);
margin-bottom: var(--spacing-4);
}
.footer-logo img {
height: 50px;
background: white;
padding: 8px;
border-radius: var(--radius-md);
}
.footer-description {
font-size: var(--font-size-xs);
opacity: 0.8;
line-height: 1.6;
margin-bottom: var(--spacing-3);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 640px) {
.footer-description {
font-size: var(--font-size-sm);
line-height: 1.7;
margin-bottom: var(--spacing-4);
-webkit-line-clamp: 4;
}
}
@media (min-width: 1024px) {
.footer-description {
line-height: 1.8;
margin-bottom: var(--spacing-6);
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
}
.footer-social {
display: flex;
gap: var(--spacing-2);
margin-top: var(--spacing-2) !important;
}
@media (min-width: 640px) {
.footer-social {
gap: var(--spacing-3);
margin-top: var(--spacing-3) !important;
}
}
@media (min-width: 1024px) {
.footer-social {
margin-top: var(--spacing-4) !important;
}
}
.social-link {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-full);
transition: var(--transition-fast);
}
@media (min-width: 640px) {
.social-link {
width: 40px;
height: 40px;
}
}
.social-link svg {
width: 16px;
height: 16px;
}
@media (min-width: 640px) {
.social-link svg {
width: 18px;
height: 18px;
}
}
.social-link:hover {
background: rgba(255, 255, 255, 0.2);
}
.footer-title {
font-size: var(--font-size-xs);
font-weight: 600;
margin-bottom: var(--spacing-2);
}
@media (min-width: 640px) {
.footer-title {
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-3);
}
}
@media (min-width: 1024px) {
.footer-title {
font-size: var(--font-size-base);
margin-bottom: var(--spacing-6);
}
}
.footer-links {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
}
@media (min-width: 640px) {
.footer-links {
gap: var(--spacing-3);
}
}
.footer-link {
font-size: var(--font-size-xs);
opacity: 0.8;
transition: var(--transition-fast);
}
@media (min-width: 640px) {
.footer-link {
font-size: var(--font-size-sm);
}
}
.footer-link:hover {
opacity: 1;
color: #fff;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-2);
margin-bottom: var(--spacing-2);
font-size: var(--font-size-xs);
opacity: 0.8;
line-height: 1.4;
}
@media (min-width: 640px) {
.footer-contact-item {
gap: var(--spacing-3);
margin-bottom: var(--spacing-3);
font-size: var(--font-size-sm);
line-height: 1.5;
}
}
@media (min-width: 1024px) {
.footer-contact-item {
margin-bottom: var(--spacing-4);
}
}
.footer-contact-item svg {
flex-shrink: 0;
margin-top: 2px;
width: 14px;
height: 14px;
}
@media (min-width: 640px) {
.footer-contact-item svg {
width: 16px;
height: 16px;
}
}
.footer-bottom {
padding: var(--spacing-6) 0;
display: flex;
flex-direction: column;
gap: var(--spacing-4);
align-items: center;
text-align: center;
}
@media (min-width: 640px) {
.footer-bottom {
padding: var(--spacing-6) 0;
gap: var(--spacing-4);
}
}
@media (min-width: 768px) {
.footer-bottom {
flex-direction: row;
justify-content: space-between;
align-items: center;
text-align: left;
}
}
.footer-copyright {
font-size: var(--font-size-xs);
opacity: 0.7;
}
@media (min-width: 640px) {
.footer-copyright {
font-size: var(--font-size-sm);
}
}
.footer-payments {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
justify-content: center;
align-items: center;
}
@media (min-width: 640px) {
.footer-payments {
gap: var(--spacing-3);
}
}
.footer-payments span {
font-size: var(--font-size-xs);
white-space: nowrap;
}
@media (min-width: 640px) {
.footer-payments span {
font-size: var(--font-size-sm);
}
}
.payment-icon {
height: 24px;
opacity: 0.7;
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
} .cart-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: var(--transition-normal);
z-index: 2000;
}
.cart-overlay.active {
opacity: 1;
visibility: visible;
}
.cart-sidebar {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 420px;
height: 100%;
background: white;
transform: translateX(100%);
transition: var(--transition-normal);
z-index: 2001;
display: flex;
flex-direction: column;
}
.cart-sidebar.active {
transform: translateX(0);
}
.cart-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-6);
border-bottom: 1px solid var(--gray-200);
}
.cart-title {
font-size: var(--font-size-lg);
font-weight: 600;
}
.cart-close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
border-radius: var(--radius-full);
transition: var(--transition-fast);
}
.cart-close:hover {
background: var(--gray-200);
}
.cart-items {
flex: 1;
overflow-y: auto;
padding: var(--spacing-6);
}
.cart-item {
display: flex;
gap: var(--spacing-4);
padding-bottom: var(--spacing-4);
margin-bottom: var(--spacing-4);
border-bottom: 1px solid var(--gray-200);
}
.cart-item-image {
width: 80px;
height: 80px;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--gray-100);
}
.cart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-item-info {
flex: 1;
}
.cart-item-name {
font-size: var(--font-size-sm);
font-weight: 500;
margin-bottom: var(--spacing-2);
}
.cart-item-price {
font-size: var(--font-size-sm);
color: var(--accent);
font-weight: 600;
}
.cart-item-quantity {
display: flex;
align-items: center;
gap: var(--spacing-2);
margin-top: var(--spacing-2);
}
.quantity-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
transition: var(--transition-fast);
}
.quantity-btn:hover {
background: var(--gray-200);
}
.quantity-value {
font-size: var(--font-size-sm);
font-weight: 500;
min-width: 24px;
text-align: center;
}
.cart-item-remove {
color: var(--gray-400);
transition: var(--transition-fast);
}
.cart-item-remove:hover {
color: var(--error);
}
.cart-empty {
text-align: center;
padding: var(--spacing-12);
}
.cart-empty-icon {
font-size: 64px;
margin-bottom: var(--spacing-4);
}
.cart-empty-text {
color: var(--gray-500);
margin-bottom: var(--spacing-6);
}
.cart-footer {
padding: var(--spacing-6);
border-top: 1px solid var(--gray-200);
}
.cart-total {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-4);
}
.cart-total-label {
font-weight: 500;
}
.cart-total-value {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--primary);
}
.cart-checkout-btn {
width: 100%;
} .search-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 15vh;
opacity: 0;
visibility: hidden;
transition: var(--transition-normal);
z-index: 3000;
}
.search-modal.active {
opacity: 1;
visibility: visible;
}
.search-container {
width: 100%;
max-width: 600px;
padding: 0 var(--spacing-4);
transform: translateY(-20px);
transition: var(--transition-normal);
}
.search-modal.active .search-container {
transform: translateY(0);
}
.search-input-wrapper {
position: relative;
}
.search-input {
width: 100%;
padding: var(--spacing-5) var(--spacing-6);
padding-left: 56px;
font-size: var(--font-size-lg);
border: none;
border-radius: var(--radius-xl);
outline: none;
box-shadow: var(--shadow-2xl);
}
.search-input::placeholder {
color: var(--gray-400);
}
.search-icon {
position: absolute;
left: var(--spacing-5);
top: 50%;
transform: translateY(-50%);
color: var(--gray-400);
}
.search-close {
position: absolute;
right: var(--spacing-4);
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
border-radius: var(--radius-full);
color: var(--gray-500);
transition: var(--transition-fast);
}
.search-close:hover {
background: var(--gray-200);
} .back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--accent);
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
background: var(--accent-dark);
}
.back-to-top:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.back-to-top svg {
width: 22px;
height: 22px;
}
@media (min-width: 768px) {
.back-to-top {
bottom: 32px;
right: 32px;
width: 52px;
height: 52px;
}
.back-to-top svg {
width: 24px;
height: 24px;
}
} .contact-page-header {
background: linear-gradient(160deg, var(--gray-900) 0%, var(--primary-light) 100%);
padding: var(--spacing-12) var(--spacing-4) var(--spacing-10);
margin-top: 72px;
text-align: center;
}
@media (min-width: 768px) {
.contact-page-header {
padding: var(--spacing-16) var(--spacing-6) var(--spacing-12);
}
}
.contact-page-eyebrow {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--accent-light);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--spacing-2);
}
.contact-page-title {
font-size: var(--font-size-4xl);
font-weight: 700;
color: #fff;
margin-bottom: var(--spacing-4);
letter-spacing: -0.02em;
}
@media (min-width: 768px) {
.contact-page-title {
font-size: 2.75rem;
}
}
.contact-page-lead {
font-size: var(--font-size-lg);
color: rgba(255, 255, 255, 0.85);
max-width: 560px;
margin: 0 auto;
line-height: 1.6;
}
.contact-quick-actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-3);
justify-content: center;
padding: var(--spacing-4) var(--spacing-4) var(--spacing-6);
}
@media (max-width: 767px) {
.contact-quick-actions {
padding: var(--spacing-4);
}
}
.contact-quick-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-5);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--gray-800);
background: #fff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
transition: var(--transition-fast);
}
.contact-quick-btn:hover {
background: var(--gray-50);
border-color: var(--gray-300);
color: var(--gray-900);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.contact-quick-whatsapp:hover {
background: #25d366;
border-color: #25d366;
color: #fff;
}
.contact-quick-icon {
display: flex;
align-items: center;
justify-content: center;
}
.contact-page-main {
padding: 0 var(--spacing-4) var(--spacing-16);
}
@media (min-width: 768px) {
.contact-page-main {
padding: 0 var(--spacing-6) var(--spacing-20);
}
}
.contact-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
max-width: 1100px;
margin: 0 auto;
}
@media (min-width: 1024px) {
.contact-layout {
grid-template-columns: 380px 1fr;
gap: var(--spacing-12);
align-items: start;
}
}
.contact-info-card {
background: var(--gray-50);
border-radius: var(--radius-2xl);
border: 1px solid var(--gray-200);
overflow: hidden;
}
.contact-info-inner {
padding: var(--spacing-8);
}
@media (min-width: 768px) {
.contact-info-inner {
padding: var(--spacing-10);
}
}
.contact-info-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.06em;
display: block;
margin-bottom: var(--spacing-2);
}
.contact-info-title {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--spacing-3);
letter-spacing: -0.02em;
}
.contact-info-desc {
color: var(--gray-600);
font-size: var(--font-size-base);
line-height: 1.6;
margin-bottom: var(--spacing-8);
}
.contact-blocks {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.contact-block {
display: flex;
align-items: flex-start;
gap: var(--spacing-4);
padding: var(--spacing-4);
border-radius: var(--radius-xl);
background: #fff;
border: 1px solid var(--gray-100);
transition: var(--transition-fast);
text-decoration: none;
color: inherit;
}
.contact-block:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.contact-block-icon {
width: 48px;
height: 48px;
min-width: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-900);
color: #fff;
border-radius: var(--radius-lg);
}
.contact-block:hover .contact-block-icon {
background: var(--accent);
}
.contact-block-text {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.contact-block-text strong {
font-size: var(--font-size-sm);
color: var(--gray-800);
}
.contact-block-text span {
font-size: var(--font-size-base);
color: var(--gray-600);
line-height: 1.5;
}
.contact-block:hover .contact-block-text span {
color: var(--gray-700);
}
.contact-social-wrap {
margin-top: var(--spacing-8);
padding-top: var(--spacing-6);
border-top: 1px solid var(--gray-200);
}
.contact-social-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.05em;
display: block;
margin-bottom: var(--spacing-3);
}
.contact-social {
display: flex;
gap: var(--spacing-3);
}
.contact-social-btn {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-full);
color: var(--gray-600);
transition: var(--transition-fast);
}
.contact-social-btn:hover {
background: var(--gray-900);
color: #fff;
border-color: var(--gray-900);
transform: translateY(-2px);
}
.contact-social-whatsapp:hover {
background: #25d366;
border-color: #25d366;
color: #fff;
}
.contact-form-card {
background: #fff;
border-radius: var(--radius-2xl);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.contact-form-inner {
padding: var(--spacing-8);
}
@media (min-width: 768px) {
.contact-form-inner {
padding: var(--spacing-10);
}
}
.contact-form-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.06em;
display: block;
margin-bottom: var(--spacing-2);
}
.contact-form-title {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--spacing-8);
letter-spacing: -0.02em;
}
.contact-field {
margin-bottom: var(--spacing-5);
}
.contact-field label {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--gray-800);
margin-bottom: var(--spacing-2);
}
.contact-form-inner input[type="text"],
.contact-form-inner input[type="email"],
.contact-form-inner input[type="tel"],
.contact-form-inner textarea,
.contact-form-inner .wpcf7-form-control,
.contact-form-container .wpcf7-form-control {
width: 100%;
padding: var(--spacing-4);
font-size: var(--font-size-base);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
font-family: var(--font-family);
transition: var(--transition-fast);
background: #fff;
}
.contact-form-inner input:focus,
.contact-form-inner textarea:focus,
.contact-form-inner .wpcf7-form-control:focus,
.contact-form-container .wpcf7-form-control:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}
.contact-form-inner textarea {
resize: vertical;
min-height: 140px;
}
.contact-submit,
.contact-form-inner .wpcf7-submit,
.contact-form-container .wpcf7-submit {
width: 100%;
padding: var(--spacing-4) var(--spacing-6);
font-size: var(--font-size-base);
font-weight: 600;
color: #fff;
background: var(--gray-900);
border: none;
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--transition-fast);
margin-top: var(--spacing-2);
}
.contact-submit:hover,
.contact-form-inner .wpcf7-submit:hover,
.contact-form-container .wpcf7-submit:hover {
background: var(--gray-800);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.contact-form-message {
padding: var(--spacing-5);
border-radius: var(--radius-xl);
margin-bottom: var(--spacing-6);
}
.contact-form-success {
background: #ecfdf5;
color: #065f46;
border: 1px solid #a7f3d0;
}
.contact-form-success p { margin: 0; }
.contact-form-error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.contact-form-error a { color: #b91c1c; text-decoration: underline; }
.contact-form-error p { margin: 0; }
.contact-form-footer {
margin-top: var(--spacing-6);
font-size: var(--font-size-sm);
color: var(--gray-500);
}
.contact-form-footer a {
color: var(--accent);
text-decoration: underline;
}
.contact-form-footer a:hover {
color: var(--accent-dark);
} .page-header {
background: var(--gray-900);
padding: var(--spacing-12) var(--spacing-4) var(--spacing-8);
margin-top: 72px;
}
@media (min-width: 480px) {
.page-header {
padding: var(--spacing-14) var(--spacing-5) var(--spacing-9);
}
}
@media (min-width: 768px) {
.page-header {
padding: var(--spacing-16) 0 var(--spacing-10);
}
}
.page-title {
font-size: var(--font-size-2xl);
font-weight: 600;
color: #fff;
margin-bottom: var(--spacing-3);
letter-spacing: -0.02em;
}
@media (min-width: 480px) {
.page-title {
font-size: var(--font-size-3xl);
}
}
.breadcrumb {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.7);
}
.breadcrumb a:hover {
color: white;
}
.breadcrumb-separator {
margin: 0 var(--spacing-1);
} @media (max-width: 767px) {
.container.section,
.page-content {
padding-top: var(--spacing-4);
padding-bottom: var(--spacing-6);
}
.container.section.page-content {
padding-top: var(--spacing-5);
padding-bottom: var(--spacing-8);
}
.btn {
min-height: 48px;
padding: var(--spacing-4) var(--spacing-6);
}
.btn-lg {
min-height: 52px;
padding: var(--spacing-5) var(--spacing-8);
}
.hide-mobile {
display: none !important;
}
}
@media (max-width: 479px) {
.container.section,
.page-content {
padding-top: var(--spacing-3);
padding-bottom: var(--spacing-5);
}
.container.section.page-content {
padding-top: var(--spacing-4);
padding-bottom: var(--spacing-6);
}
}
@media (min-width: 768px) {
.hide-desktop {
display: none !important;
}
} .animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
will-change: opacity, transform;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
} .delay-100 {
transition-delay: 100ms;
}
.delay-200 {
transition-delay: 200ms;
}
.delay-300 {
transition-delay: 300ms;
}
.delay-400 {
transition-delay: 400ms;
}
.delay-500 {
transition-delay: 500ms;
}