:root {
    --bg-default: #fff;
    --bg-success: #17b530;
    --bg-surface: #f8f9fb;
    --bg-success-surface: #d5f0dc;
    --bg-hover: #d8d8da;
    --bg-warning: #ffbe18;
    --bg-disabled: #e9e9eb;
    --bg-warning-surface: #fdfaf3;
    --bg-primary: #1ca7db;
    --bg-error: #f73b3b;
    --bg-primary-hover: #0e86bb;
    --bg-error-surface: #fbdbde;
    --bg-primary-disable: #bee7f9;
    --bg-primary-surface: #f1f9fe;
    --bg-secondary: #20bc32;
    --bg-secondary-hover: #16a326;
    --bg-secondary-disable: #bbf7c1;
    --bg-secondary-surface: #f0fdf1;
    --bg-tertiary: #ff7918;
    --bg-tertiary-hover: #c55d12;
    --bg-tertiary-disable: #fdd3b7;
    --bg-tertiary-surface: #fde6d7;
    --text-black-default: #202020;
    --text-success: #17b530;
    --text-black-second: #89898a;
    --text-warning: #ffbe18;
    --text-black-third: #c3c3c5;
    --text-error: #f73b3b;
    --text-primary: #2d70ff;
    --text-primary-hover: #143ee1;
    --text-primary-disable: #bcd7ff;
    --text-on-primary: #fff;
    --icon-black-hover: #202020;
    --icon-success: #17b530;
    --icon-black-default: #49494a;
    --icon-warning: #ffbe18;
    --icon-black-disable: #c3c3c5;
    --icon-error: #f73b3b;
    --icon-primary: #2d70ff;
    --icon-secondary: #16c79a;
    --icon-on-primary: #fff;
    --icon-tertiary: #ff7918;
    --border-default: #e9e9eb;
    --border-success: #17b530;
    --border-second: #d8d8da;
    --border-warning: #ffbe18;
    --border-hover: #89898b;
    --border-error: #f73b3b;
    --border-primary: #3e79f7;
    --border-disable: #c1d3fc;
    --border-secondary: #16c79a;
    --border-tertiary: #ff7918;
    --primary-color: var(--bg-primary);
    --primary-dark: var(--bg-primary-hover);
    --primary-light: var(--text-primary);
    --secondary-color: var(--bg-secondary);
    --accent-color: var(--bg-tertiary);
    --success-color: var(--bg-success);
    --warning-color: var(--bg-warning);
    --error-color: var(--bg-error);
    --text-color: var(--text-black-default);
    --text-light: var(--text-black-second);
    --text-lighter: var(--text-black-third);
    --background-color: var(--bg-surface);
    --white: var(--bg-default);
    --border-color: var(--border-default);
    --font-family: "Helvena", Helvetica, Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --h1-font-size: 32px;
    --h1-line-height: 40px;
    --h1-font-weight: var(--font-weight-medium);
    --h1-letter-spacing: 0px;
    --h2-font-size: 24px;
    --h2-line-height: 32px;
    --h2-font-weight: var(--font-weight-medium);
    --h2-letter-spacing: 0px;
    --h3-font-size: 18px;
    --h3-line-height: 26px;
    --h3-font-weight: var(--font-weight-medium);
    --h3-letter-spacing: 0px;
    --h4-font-size: 16px;
    --h4-line-height: 24px;
    --h4-font-weight: var(--font-weight-semibold);
    --h4-letter-spacing: 0px;
    --body1-medium-font-size: 16px;
    --body1-medium-line-height: 24px;
    --body1-medium-font-weight: var(--font-weight-medium);
    --body1-medium-letter-spacing: 0px;
    --body1-regular-font-size: 16px;
    --body1-regular-line-height: 24px;
    --body1-regular-font-weight: var(--font-weight-regular);
    --body1-regular-letter-spacing: 0px;
    --body2-medium-font-size: 14px;
    --body2-medium-line-height: 22px;
    --body2-medium-font-weight: var(--font-weight-medium);
    --body2-medium-letter-spacing: 0px;
    --body2-regular-font-size: 14px;
    --body2-regular-line-height: 22px;
    --body2-regular-font-weight: var(--font-weight-regular);
    --body2-regular-letter-spacing: 0px;
    --body3-medium-font-size: 12px;
    --body3-medium-line-height: 16px;
    --body3-medium-font-weight: var(--font-weight-medium);
    --body3-medium-letter-spacing: 0px;
    --body3-regular-font-size: 12px;
    --body3-regular-line-height: 16px;
    --body3-regular-font-weight: var(--font-weight-regular);
    --body3-regular-letter-spacing: 0px;
    --label-medium-font-size: 10px;
    --label-medium-line-height: 12px;
    --label-medium-font-weight: var(--font-weight-medium);
    --label-medium-letter-spacing: 0px;
    --label-regular-font-size: 10px;
    --label-regular-line-height: 12px;
    --label-regular-font-weight: var(--font-weight-regular);
    --label-regular-letter-spacing: 0px;
    --button1-font-size: 16px;
    --button1-line-height: 24px;
    --button1-font-weight: var(--font-weight-semibold);
    --button1-letter-spacing: 0px;
    --button2-font-size: 14px;
    --button2-line-height: 22px;
    --button2-font-weight: var(--font-weight-semibold);
    --button2-letter-spacing: 0px;
    --button3-font-size: 12px;
    --button3-line-height: 16px;
    --button3-font-weight: var(--font-weight-semibold);
    --button3-letter-spacing: 0px;
    --link1-medium-font-size: 14px;
    --link1-medium-line-height: 22px;
    --link1-medium-font-weight: var(--font-weight-medium);
    --link1-medium-letter-spacing: 0px;
    --link1-regular-font-size: 12px;
    --link1-regular-line-height: 16px;
    --link1-regular-font-weight: var(--font-weight-regular);
    --link1-regular-letter-spacing: 0px;
    --link2-medium-font-size: 12px;
    --link2-medium-line-height: 16px;
    --link2-medium-font-weight: var(--font-weight-medium);
    --link2-medium-letter-spacing: 0px;
    --link2-regular-font-size: 12px;
    --link2-regular-line-height: 16px;
    --link2-regular-font-weight: var(--font-weight-regular);
    --link2-regular-letter-spacing: 0px;
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 36px;
    --space-0: 0px;
    --space-1: 1px;
    --space-2: 2px;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-110: 110px;
    --space-200: 200px;
    --space-0-rem: 0.0rem;
    --space-2-rem: 0.25rem;
    --space-4-rem: 0.5rem;
    --space-8-rem: 1.0rem;
    --space-12-rem: 0.75rem;
    --space-16-rem: 1.0rem;
    --space-20-rem: 1.25rem;
    --space-24-rem: 1.5rem;
    --space-32-rem: 2.0rem;
    --space-40-rem: 2.5rem;
    --space-48-rem: 3.0rem;
    --space-56-rem: 3.438rem;
    --space-64-rem: 4.0rem;
    --space-80-rem: 5.0rem;
    --space-96-rem: 6.0rem;
    --space-110-rem: 6.875rem;
    --space-200-rem: 12.5rem;
    --spacing-none: var(--space-0);
    --spacing-xxsm: var(--space-1);
    --spacing-xsm: var(--space-2);
    --spacing-sm: var(--space-4);
    --spacing-lg: var(--space-8);
    --spacing-xlg: var(--space-12);
    --spacing-xxlg: var(--space-16);
    --spacing-xxxlg: var(--space-20);
    --spacing-half: 50%;
    --spacing-xs: var(--space-4);
    --spacing-sm: var(--space-8);
    --spacing-md: var(--space-16);
    --spacing-lg: var(--space-24);
    --spacing-xl: var(--space-32);
    --spacing-2xl: var(--space-48);
    --spacing-3xl: var(--space-64);
    --border-radius-0: 0px;
    --border-radius-1: 1px;
    --border-radius-2: 2px;
    --border-radius-4: 4px;
    --border-radius-8: 8px;
    --border-radius-12: 12px;
    --border-radius-16: 16px;
    --border-radius-20: 20px;
    --border-radius-24: 24px;
    --border-radius-32: 32px;
    --border-radius-40: 40px;
    --border-radius-48: 48px;
    --border-radius-56: 56px;
    --border-radius-64: 64px;
    --border-radius-80: 80px;
    --border-radius-96: 96px;
    --border-radius-110: 110px;
    --border-radius-200: 200px;
    --border-radius-none: var(--border-radius-0);
    --border-radius-xs: var(--border-radius-2);
    --border-radius-sm: var(--border-radius-4);
    --border-radius-md: var(--border-radius-8);
    --border-radius-lg: var(--border-radius-12);
    --border-radius-xl: var(--border-radius-16);
    --border-radius-2xl: var(--border-radius-20);
    --border-radius-3xl: var(--border-radius-24);
    --border-radius-4xl: var(--border-radius-32);
    --border-radius-full: 9999px;
    --shadow-sm: 0 1px 2px #0000000d;
    --shadow-md: 0 2px 8px #0000001a;
    --shadow-lg: 0 4px 16px #00000026;
    --shadow-xl: 0 8px 32px #0003;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 16px;
    scroll-behavior: smooth;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
    background-color: var(--white);
    color: #202020;
    color: var(--text-color);
    line-height: 1.5;
}
body, h1, h2, h3, h4, h5, h6 {
    font-family: Helvena, Helvetica, Arial, sans-serif;
    font-family: var(--font-family);
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}
h1 {
    font-size: 32px;
    font-size: var(--h1-font-size);
    font-weight: 500;
    font-weight: var(--h1-font-weight);
    letter-spacing: 0;
    letter-spacing: var(--h1-letter-spacing);
    line-height: 40px;
    line-height: var(--h1-line-height);
}
h2 {
    font-size: 24px;
    font-size: var(--h2-font-size);
    font-weight: 500;
    font-weight: var(--h2-font-weight);
    letter-spacing: 0;
    letter-spacing: var(--h2-letter-spacing);
    line-height: 32px;
    line-height: var(--h2-line-height);
}
h3 {
    font-size: 18px;
    font-size: var(--h3-font-size);
    font-weight: 500;
    font-weight: var(--h3-font-weight);
    letter-spacing: 0;
    letter-spacing: var(--h3-letter-spacing);
    line-height: 26px;
    line-height: var(--h3-line-height);
}
h4 {
    font-size: 16px;
    font-size: var(--h4-font-size);
    font-weight: 600;
    font-weight: var(--h4-font-weight);
    letter-spacing: 0;
    letter-spacing: var(--h4-letter-spacing);
    line-height: 24px;
    line-height: var(--h4-line-height);
}
h5 {
    font-size: 16px;
    font-size: var(--body1-medium-font-size);
    font-weight: 500;
    font-weight: var(--body1-medium-font-weight);
    letter-spacing: 0;
    letter-spacing: var(--body1-medium-letter-spacing);
    line-height: 24px;
    line-height: var(--body1-medium-line-height);
}
h6 {
    font-size: 14px;
    font-size: var(--body2-medium-font-size);
    font-weight: 500;
    font-weight: var(--body2-medium-font-weight);
    letter-spacing: 0;
    letter-spacing: var(--body2-medium-letter-spacing);
    line-height: 22px;
    line-height: var(--body2-medium-line-height);
}
p {
    margin-bottom: 1rem;
}
a {
    color: #1ca7db;
    color: var(--primary-color);
    text-decoration: none;
    transition: color .3s ease;
    transition: color var(--transition-normal);
}
a:hover {
    color: #0e86bb;
    color: var(--primary-dark);
}
ol, ul {
    margin-bottom: 1rem;
    padding-left: 2rem;
}
li {
    margin-bottom: .5rem;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button {
    background: none;
    border: none;
    cursor: pointer;
}
table {
    border-collapse: collapse;
    margin-bottom: 1rem;
    width: 100%}
td, th {
    border-bottom: 1px solid #e9e9eb;
    border-bottom: 1px solid var(--border-color);
    padding: .75rem;
    text-align: left;
}
th {
    font-weight: 600;
}
code, th {
    background-color: #f8f9fb;
    background-color: var(--background-color);
}
code {
    border-radius: 4px;
    border-radius: var(--border-radius-sm);
    font-family: Monaco, Menlo, Ubuntu Mono, monospace;
    font-size: .875em;
    padding: .2rem .4rem;
}
pre {
    background-color: #f8f9fb;
    background-color: var(--background-color);
    border-radius: 8px;
    border-radius: var(--border-radius-md);
    overflow-x: auto;
    padding: 1rem;
}
pre code {
    background: none;
    padding: 0;
}
.container {
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 20px;
}
.sr-only {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.d-block {
    display: block;
}
.d-inline {
    display: inline;
}
.d-inline-block {
    display: inline-block;
}
.d-flex {
    display: flex;
}
.d-none {
    display: none;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.align-center {
    align-items: center;
}
.flex-column {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.w-100 {
    width: 100%}
.h-100 {
    height: 100%}
.btn {
    align-items: center;
    border: 1px solid #0000;
    border-radius: 4px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    display: inline-flex;
    font-family: Helvena, Helvetica, Arial, sans-serif;
    font-family: var(--font-family);
    font-size: 14px;
    font-size: var(--button2-font-size);
    font-weight: 600;
    font-weight: var(--button2-font-weight);
    justify-content: center;
    letter-spacing: 0;
    letter-spacing: var(--button2-letter-spacing);
    line-height: 22px;
    line-height: var(--button2-line-height);
    padding: .75rem 1.5rem;
    text-decoration: none;
    transition: all .3s ease;
    transition: all var(--transition-normal);
    white-space: nowrap;
}
.btn--large {
    font-size: 16px;
    font-size: var(--button1-font-size);
    font-weight: 600;
    font-weight: var(--button1-font-weight);
    letter-spacing: 0;
    letter-spacing: var(--button1-letter-spacing);
    line-height: 24px;
    line-height: var(--button1-line-height);
    padding: 1rem 2rem;
}
.btn--small {
    font-size: 12px;
    font-size: var(--button3-font-size);
    font-weight: 600;
    font-weight: var(--button3-font-weight);
    letter-spacing: 0;
    letter-spacing: var(--button3-letter-spacing);
    line-height: 16px;
    line-height: var(--button3-line-height);
    padding: .5rem 1rem;
}
.btn--primary {
    background-color: #1ca7db;
    background-color: var(--bg-primary);
    color: #fff;
    color: var(--text-on-primary);
}
.btn--primary, .btn--primary:hover {
    border-color: #3e79f7;
    border-color: var(--border-primary);
}
.btn--primary:hover {
    background-color: #0e86bb;
    background-color: var(--bg-primary-hover);
}
.btn--primary:focus {
    background-color: #1ca7db;
    background-color: var(--bg-primary);
    outline: 2px solid #3e79f7;
    outline: 2px solid var(--border-primary);
    outline-offset: 2px;
}
.btn--primary:disabled, .btn--primary:focus {
    border-color: #3e79f7;
    border-color: var(--border-primary);
}
.btn--primary:disabled {
    background-color: #bee7f9;
    background-color: var(--bg-primary-disable);
    cursor: not-allowed;
    opacity: .6;
}
.btn--primary:disabled, .btn--secondary {
    color: #fff;
    color: var(--text-on-primary);
}
.btn--secondary {
    background-color: #20bc32;
    background-color: var(--bg-secondary);
}
.btn--secondary, .btn--secondary:hover {
    border-color: #16c79a;
    border-color: var(--border-secondary);
}
.btn--secondary:hover {
    background-color: #16a326;
    background-color: var(--bg-secondary-hover);
}
.btn--secondary:focus {
    background-color: #20bc32;
    background-color: var(--bg-secondary);
    outline: 2px solid #16c79a;
    outline: 2px solid var(--border-secondary);
    outline-offset: 2px;
}
.btn--secondary:disabled, .btn--secondary:focus {
    border-color: #16c79a;
    border-color: var(--border-secondary);
}
.btn--secondary:disabled {
    background-color: #bbf7c1;
    background-color: var(--bg-secondary-disable);
    color: #fff;
    color: var(--text-on-primary);
    cursor: not-allowed;
    opacity: .6;
}
.btn--outline {
    background-color: initial;
    border-color: #e9e9eb;
    border-color: var(--border-color);
    color: #202020;
    color: var(--text-color);
}
.btn--outline:hover {
    background-color: #f8f9fb;
    background-color: var(--background-color);
    border-color: #89898b;
    border-color: var(--border-hover);
}
.btn:disabled {
    cursor: not-allowed;
    opacity: .6;
    transform: none;
}
.alert {
    border: 1px solid;
    border-radius: 4px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
    padding: 1rem;
}
.alert--success {
    background-color: var(--green-100);
    border-color: var(--green-200);
    color: var(--green-800);
}
.alert--error {
    background-color: var(--red-100);
    border-color: var(--red-200);
    color: var(--red-800);
}
.alert--warning {
    background-color: var(--yellow-100);
    border-color: var(--yellow-200);
    color: var(--yellow-800);
}
.alert--info {
    background-color: var(--primary-100);
    border-color: var(--primary-200);
    color: var(--primary-800);
}
.loading-spinner {
    animation: spin 1s linear infinite;
    border-top: 4px solid #1ca7db;
    border: 4px solid var(--neutral-200);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    height: 40px;
    width: 40px;
}
@media (max-width:768px) {
    html {
    font-size: 14px;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.25rem;
}
.container {
    padding: 0 15px;
}
}@media (max-width:480px) {
    html {
    font-size: 13px;
}
.container {
    padding: 0 12px;
}
}@media print {
    * {
    background: #0000!important;
    box-shadow: none!important;
    color: #000!important;
    text-shadow: none!important;
}
a, a:visited {
    text-decoration: underline;
}
.btn {
    display: none;
}
}@media (max-width:768px) {
    .container {
    padding: 0 16px;
}
h1 {
    font-size: 1.5rem;
}
h2 {
    font-size: 1.25rem;
}
h3 {
    font-size: 1.1rem;
}
.cart-page__layout, .faq__layout, .shop__layout {
    flex-direction: column!important;
}
.cart-page__sidebar, .faq__sidebar, .shop__sidebar {
    max-width: 100%!important;
    order: -1;
    position: static!important;
    width: 100%!important;
}
.cart-page__main, .shop__main {
    width: 100%!important;
}
.product-grid {
    gap: 12px!important;
    grid-template-columns: repeat(2, 1fr)!important;
}
.about__container, .article-detail__container, .b2b-container, .bestdeal-container, .blog-detail__container, .blog-page__container, .cart-page__container, .contact__container, .faq__container, .help__container, .industry-hero-section, .popular-search-container, .shop__container {
    padding-left: 16px!important;
    padding-right: 16px!important;
}
.team-grid {
    grid-template-columns: repeat(2, 1fr)!important;
}
.bestdeal-categories-grid, .features-grid, .industry-features-grid, .stats-grid, .wall-row {
    gap: 12px!important;
    grid-template-columns: repeat(2, 1fr)!important;
}
.articles-grid, .blog-grid {
    grid-template-columns: repeat(2, 1fr)!important;
}
.account-layout {
    flex-direction: column!important;
}
.account-sidebar {
    width: 100%!important;
}
.b2b-rfq-grid {
    grid-template-columns: 1fr!important;
}
.b2b-sidebar {
    display: none!important;
}
}@media (max-width:480px) {
    .container {
    padding: 0 12px;
}
h1 {
    font-size: 1.25rem;
}
h2 {
    font-size: 1.1rem;
}
h3 {
    font-size: 1rem;
}
.articles-grid, .bestdeal-categories-grid, .blog-grid, .contact-cards, .features-grid, .industry-features-grid, .product-grid, .stats-grid, .team-grid, .wall-row {
    grid-template-columns: 1fr!important;
}
.cart-item {
    align-items: flex-start!important;
    flex-direction: column!important;
    gap: 12px!important;
}
.cart-item__quantity, .cart-item__total, .order-summary {
    width: 100%!important;
}
.pagination {
    flex-wrap: wrap!important;
    gap: 4px!important;
}
.b2b-hero, .bestdeal-hero, .industry-hero {
    padding: 24px 16px!important;
}
.b2b-hero h1, .bestdeal-hero h1, .industry-hero h1 {
    font-size: 1.25rem!important;
}
}.top-header {
    background: #81c862;
    color: var(--text-on-primary);
    font-size: var(--body3-regular-font-size);
    font-weight: var(--body3-regular-font-weight);
    line-height: var(--body3-regular-line-height);
}
.top-header__container {
    height: 40px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 var(--space-20);
}
.top-header__container, .top-header__left {
    align-items: center;
    display: flex;
}
.top-header__welcome {
    color: #fff;
    font-family: var(--font-family);
    font-size: var(--body3-regular-font-size);
    font-weight: var(--body3-regular-font-weight);
    line-height: var(--body3-regular-line-height);
}
.top-header__follow, .top-header__right {
    align-items: center;
    display: flex;
}
.top-header__follow {
    gap: var(--space-8);
}
.top-header__follow-text {
    color: #fff;
    font-family: var(--font-family);
    font-size: var(--body3-regular-font-size);
    font-weight: var(--body3-regular-font-weight);
    line-height: var(--body3-regular-line-height);
}
.top-header__social {
    align-items: center;
    display: flex;
    gap: var(--space-12);
}
.top-header__social-link {
    align-items: center;
    color: #fff;
    display: flex;
    height: 24px;
    justify-content: center;
    transition: color var(--transition-fast);
    width: 24px;
}
.top-header__social-link:hover {
    color: var(--bg-hover);
}
.top-header__social-link svg {
    height: 16px;
    width: 16px;
}
.middle-header {
    background: #fff;
    border-bottom: 1px solid #cecece;
    box-shadow: 0 4px 4px 0 #0000001a;
}
.middle-header__container {
    align-items: center;
    display: flex;
    gap: var(--space-20);
    height: 60px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 var(--space-20);
}
.middle-header__logo {
    flex-shrink: 0;
}
.middle-header__logo-img {
    display: block;
    height: 40px;
    width: auto;
}
.middle-header__center {
    align-items: center;
    display: flex;
    flex: 1 1;
    gap: var(--space-16);
    justify-content: space-around;
}
.middle-header__location-section {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.middle-header__location {
    align-items: center;
    color: #191c1f;
    display: flex;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    gap: 4px;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}
.middle-header__search {
    align-items: center;
    display: flex;
    position: relative;
    width: 500px;
}
.middle-header__search-input {
    background: var(--bg-default);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-md);
    color: #191c1f;
    font-family: var(--font-family);
    font-size: var(--body2-regular-font-size);
    font-weight: 500;
    height: 36px;
    line-height: var(--body2-regular-line-height);
    padding: 0 40px 0 var(--space-16);
    width: 100%}
.middle-header__search-input::placeholder {
    color: var(--text-black-third);
}
.middle-header__search-btn {
    background: none;
    border: none;
    color: var(--text-black-second);
    cursor: pointer;
    padding: var(--space-4);
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
}
.middle-header__search-btn svg {
    stroke-width: 2;
    height: 18px;
    width: 18px;
}
.middle-header__right {
    align-items: center;
    display: flex;
    gap: var(--space-12);
}
.middle-header__location-btn {
    background: none;
    border: none;
    color: #4abce8;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    transition: color var(--transition-fast);
}
.middle-header__location-btn:hover {
    color: #4abce8;
}
.middle-header__location-icon {
    stroke-width: 2;
    height: 14px;
    width: 14px;
}
.middle-header__login, .middle-header__track {
    align-items: center;
    background: none;
    border: none;
    border-radius: var(--border-radius-sm);
    color: #191c1f;
    cursor: pointer;
    display: flex;
    font-family: var(--font-family);
    font-size: var(--body2-regular-font-size);
    font-weight: 500;
    gap: 4px;
    line-height: var(--body2-regular-line-height);
    padding: var(--space-6) var(--space-8);
    transition: background-color var(--transition-fast);
}
.middle-header__login:hover, .middle-header__track:hover {
    background-color: var(--bg-hover);
}
.middle-header__login-icon {
    height: 14px;
    width: 14px;
}
.middle-header__cart {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    position: relative;
}
.middle-header__cart-icon {
    font-size: 20px;
}
.middle-header__cart-text {
    color: #191c1f;
    font-family: var(--font-family);
    font-size: var(--body2-regular-font-size);
    font-weight: 500;
    line-height: var(--body2-regular-line-height);
}
.middle-header__menu-toggle {
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    flex-direction: column;
    height: 32px;
    justify-content: center;
    padding: var(--space-4);
    width: 32px;
}
.middle-header__menu-line {
    background: var(--text-black-default);
    height: 2px;
    margin: 2px 0;
    transition: all var(--transition-fast);
    width: 20px;
}
.bottom-header {
    background: #fff;
    border-bottom: 1px solid var(--border-default);
}
.bottom-header__container {
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 var(--space-20);
    position: relative;
}
.bottom-header__nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: var(--space-12) 0;
}
.bottom-header__nav-item {
    border-radius: 5px;
    color: #334155;
    cursor: pointer;
    flex: 1 1;
    font-family: var(--font-family);
    font-size: 11.5px;
    font-weight: 600;
    height: 48px;
    line-height: 1.25;
    opacity: 1;
    padding: 0 4px;
    text-align: center;
    transition: all var(--transition-fast);
    white-space: normal;
}
.bottom-header__nav-item, .bottom-header__nav-link {
    align-items: center;
    display: flex;
    justify-content: center;
}
.bottom-header__nav-link {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    height: 100%;
    text-decoration: none;
    width: 100%}
.bottom-header__nav-item:hover {
    background-color: #eef9ff;
    color: #000;
}
header.header {
    background: #fff!important;
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    z-index: 1000;
}
.header__container {
    align-items: center;
    display: flex;
    gap: var(--space-40);
    height: 80px;
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 var(--space-20);
}
.header__logo {
    flex-shrink: 0;
}
.header__logo-img {
    display: block;
    height: 40px;
    width: auto;
}
.header__nav {
    display: flex;
    flex: 1 1;
    justify-content: center;
}
.header__nav-list {
    align-items: center;
    display: flex;
    gap: var(--space-32);
    list-style: none;
    margin: 0;
    padding: 0;
}
.header__nav-link {
    color: var(--text-black-default);
    font-family: var(--font-family);
    font-size: var(--body2-medium-font-size);
    font-weight: var(--body2-medium-font-weight);
    line-height: var(--body2-medium-line-height);
    position: relative;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.header__nav-link:hover {
    color: var(--text-primary);
}
.header__nav-link:after {
    background: var(--text-primary);
    bottom: -4px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transition: width var(--transition-fast);
    width: 0;
}
.header__nav-link:hover:after {
    width: 100%}
.header__search {
    flex: 0 0 300px;
}
.header__search-form {
    align-items: center;
    display: flex;
    position: relative;
}
.header__search-input {
    background: var(--bg-default);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-lg);
    color: var(--text-black-default);
    font-family: var(--font-family);
    font-size: var(--body2-regular-font-size);
    font-weight: var(--body2-regular-font-weight);
    height: 40px;
    line-height: var(--body2-regular-line-height);
    padding: 0 var(--space-12) 0 var(--space-12);
    transition: border-color var(--transition-fast);
    width: 100%}
.header__search-input::placeholder {
    color: var(--text-black-third);
}
.header__search-input:focus {
    border-color: var(--border-primary);
    outline: none;
}
.header__search-btn {
    background: none;
    border: none;
    color: var(--text-black-second);
    cursor: pointer;
    padding: var(--space-4);
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    transition: color var(--transition-fast);
}
.header__search-btn:hover {
    color: var(--text-primary);
}
.header__search-icon {
    stroke-width: 2;
    height: 20px;
    width: 20px;
}
.header__actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--space-12);
}
.header__sign-in {
    background: none;
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--text-black-default);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--body2-medium-font-size);
    font-weight: var(--body2-medium-font-weight);
    line-height: var(--body2-medium-line-height);
    padding: var(--space-8) var(--space-12);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.header__sign-in:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.header__demo-btn {
    display: inline-flex;
    font-size: var(--button2-font-size);
    font-weight: var(--button2-font-weight);
    line-height: var(--button2-line-height);
    padding: var(--space-8) var(--space-16);
    text-decoration: none;
}
.header__demo-btn, .header__menu-toggle {
    align-items: center;
    justify-content: center;
}
.header__menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    flex-direction: column;
    height: 32px;
    width: 32px;
}
.mega-menu {
    border-top: 1px solid #0000000d;
    box-shadow: 0 20px 50px #0000001f;
    left: 0;
    padding: var(--space-24) 0;
    width: 100%;
    z-index: 100;
}
.mega-menu__inner {
    grid-gap: var(--space-24);
    display: grid;
    gap: var(--space-24);
    grid-template-columns: 280px minmax(420px, 1fr) 260px;
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 var(--space-20);
}
.mega-menu__featured, .mega-menu__promo, .mega-menu__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}
.mega-menu__sidebar-title {
    color: #191c1f;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: var(--space-8);
}
.mega-menu__cat-list {
    grid-gap: 8px;
    display: grid;
    gap: 8px;
}
.mega-menu__cat-link {
    align-items: center;
    background: #f9fafb;
    border-radius: var(--border-radius-sm);
    color: #191c1f;
    display: flex;
    padding: 10px 14px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mega-menu__cat-link:hover {
    background: #eef2f5;
}
.mega-menu__search-wrap {
    position: relative;
}
.mega-menu__search-input {
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family);
    font-size: var(--body2-regular-font-size);
    padding: 14px 16px;
    width: 100%}
.mega-menu__featured-title {
    color: #191c1f;
    font-size: 16px;
    font-weight: 700;
}
.mega-menu__subcat-grid {
    grid-gap: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mega-menu__subcat-card {
    align-items: center;
    background: #fff;
    border: 1px solid #f1f3f5;
    border-radius: var(--border-radius-md);
    color: #191c1f;
    display: flex;
    padding: 12px 16px;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.mega-menu__subcat-card:hover {
    box-shadow: 0 12px 30px #00000014;
    transform: translateY(-2px);
}
.mega-menu__quick-links {
    grid-gap: 10px;
    display: grid;
    gap: 10px;
}
.mega-menu__quick-link {
    color: #0f63ff;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
}
.mega-menu__promo-img-wrap {
    background: #f6f8fa;
    border-radius: var(--border-radius-lg);
    width: 100%}
.mega-menu__promo-img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}
.mega-menu__promo-discount {
    color: #ef4f4f;
    font-size: 12px;
    font-weight: 700;
}
.mega-menu__promo-desc {
    color: #4b4b4b;
    font-size: 14px;
}
.mega-menu__promo-label {
    color: #6b7280;
    font-size: 13px;
}
.mega-menu__promo-price {
    color: #191c1f;
    font-size: 16px;
}
.mega-menu__promo-btn {
    align-items: center;
    background: #0f63ff;
    border-radius: var(--border-radius-md);
    display: inline-flex;
    font-weight: 600;
    justify-content: center;
    padding: 10px 16px;
}
.bottom-header__nav-item--active {
    background-color: #f7fbff;
}
.header__menu-line {
    background: var(--text-black-default);
    height: 2px;
    transition: all var(--transition-fast);
    width: 20px;
}
@media (max-width:1024px) {
    .header__container {
    gap: var(--space-16);
    padding: 0 var(--space-16);
}
.header__search {
    flex: 0 0 250px;
}
}@media (max-width:768px) {
    .bottom-header, .top-header {
    display: none;
}
.middle-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.middle-header__container {
    height: 64px;
    padding: 0 var(--space-12);
}
.middle-header__logo-img {
    height: 32px;
}
.middle-header__center {
    display: none;
}
.middle-header__right {
    gap: var(--space-8);
}
.middle-header__location-btn, .middle-header__login, .middle-header__track {
    font-size: var(--body3-medium-font-size);
    font-weight: var(--body3-medium-font-weight);
    line-height: var(--body3-medium-line-height);
    padding: var(--space-6) var(--space-8);
}
.middle-header__cart-icon {
    font-size: 18px;
}
.middle-header__menu-toggle {
    display: flex;
}
.bottom-header__nav {
    -webkit-overflow-scrolling: touch;
    gap: 0;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
}
.bottom-header__nav::-webkit-scrollbar {
    display: none;
}
.bottom-header__nav-item {
    flex-shrink: 0;
    padding: 0 12px;
}
}@media (max-width:480px) {
    .top-header {
    display: none;
}
.header__container {
    padding: 0 var(--space-8);
}
.header__actions {
    gap: var(--space-4);
}
.header__sign-in, .middle-header__cart-text, .middle-header__track {
    display: none;
}
.middle-header__login span:not(.middle-header__login-icon) {
    font-size: 11px;
}
.bottom-header__nav-item {
    font-size: 11px;
    padding: 0 8px;
}
}.mh-user {
    position: relative;
}
.middle-header__login {
    align-items: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: #111827;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    padding: 6px 10px;
    transition: background .15s;
    white-space: nowrap;
}
.middle-header__login:hover {
    background: #f3f4f6;
}
.middle-header__login-icon {
    stroke-width: 2;
    color: #4abce8;
    height: 18px;
    width: 18px;
}
.mh-chevron {
    flex-shrink: 0;
    height: 14px;
    transition: transform .2s;
    width: 14px;
}
.mh-chevron--open {
    transform: rotate(180deg);
}
.mh-dropdown {
    animation: mh-drop-in .18s ease;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 40px #00000024;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 240px;
    z-index: 9999;
}
@keyframes mh-drop-in {
    0% {
    opacity: 0;
    transform: translateY(-8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}.mh-dropdown__header {
    align-items: center;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    display: flex;
    gap: 12px;
    padding: 16px;
}
.mh-dropdown__avatar {
    align-items: center;
    background: #4abce8;
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    width: 40px;
}
.mh-dropdown__name {
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}
.mh-dropdown__email {
    color: #6b7280;
    font-size: 11px;
    margin-top: 2px;
    word-break: break-all;
}
.mh-dropdown__divider {
    background: #f3f4f6;
    height: 1px;
    margin: 4px 0;
}
.mh-dropdown__item {
    align-items: center;
    background: none;
    border: none;
    color: #374151;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    gap: 10px;
    padding: 10px 16px;
    text-align: left;
    text-decoration: none;
    transition: background .15s, color .15s;
    width: 100%}
.mh-dropdown__item svg {
    stroke-width: 2;
    color: #6b7280;
    flex-shrink: 0;
    height: 16px;
    width: 16px;
}
.mh-dropdown__item:hover {
    background: #f0f9ff;
    color: #4abce8;
}
.mh-dropdown__item:hover svg {
    color: #4abce8;
}
.mh-dropdown__item--logout, .mh-dropdown__item--logout svg {
    color: #ef4444;
}
.mh-dropdown__item--logout:hover {
    background: #fef2f2;
    color: #dc2626;
}
.mh-dropdown__guest-title {
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 16px 4px;
}
.mh-dropdown__guest-sub {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    padding: 0 16px 12px;
}
.mh-dropdown__guest-btns {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px;
}
.mh-btn {
    border: none;
    border-radius: 7px;
    cursor: pointer;
    flex: 1 1;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 0;
    text-align: center;
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.mh-btn--primary {
    background: #4abce8;
    color: #fff;
}
.mh-btn--primary:hover {
    background: #2aa8d8;
}
.mh-btn--outline {
    background: #fff;
    border: 1.5px solid #4abce8;
    color: #4abce8;
}
.mh-btn--outline:hover {
    background: #f0f9ff;
}
.acct-dropdown {
    animation: mh-drop-in .18s ease;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 40px #0000001f;
    overflow: hidden;
    padding: 8px 0;
    position: absolute;
    right: -40px;
    top: calc(100% + 10px);
    width: 260px;
    z-index: 9999;
}
.acct-dropdown__item {
    align-items: center;
    background: #fff;
    border: none;
    color: #5f6c72!important;
    cursor: pointer;
    display: flex;
    font-size: 15px;
    font-weight: 500;
    gap: 14px;
    padding: 14px 20px;
    text-align: left;
    text-decoration: none!important;
    transition: background .15s, color .15s;
    width: 100%}
.acct-dropdown__item svg {
    color: #5f6c72;
    flex-shrink: 0;
    height: 24px;
    transition: color .15s;
    width: 24px;
}
.acct-dropdown__item:active, .acct-dropdown__item:hover {
    background: #f2f4f5!important;
    color: #191c1f!important;
}
.acct-dropdown__item:active svg, .acct-dropdown__item:hover svg {
    color: #191c1f;
}
.login-popup-overlay {
    align-items: center;
    animation: lp-fade-in .2s ease;
    background: #0000008c;
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 99999;
}
@keyframes lp-fade-in {
    0% {
    opacity: 0;
}
to {
    opacity: 1;
}
}.login-popup {
    animation: lp-slide-up .25s ease;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 60px #0003;
    max-width: 92vw;
    padding: 32px 28px 24px;
    position: relative;
    width: 360px;
}
@keyframes lp-slide-up {
    0% {
    opacity: 0;
    transform: translateY(24px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}.login-popup__close {
    background: none;
    border: none;
    border-radius: 4px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    position: absolute;
    right: 14px;
    top: 14px;
    transition: color .15s, background .15s;
}
.login-popup__close:hover {
    background: #f3f4f6;
    color: #111827;
}
.login-popup__title {
    color: #111827;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 4px;
}
.login-popup__title span {
    color: #6b7280;
    font-weight: 400;
}
.login-popup__subtitle {
    color: #6b7280;
    font-size: 13px;
    margin: 0 0 20px;
}
.login-popup__label {
    color: #111827;
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
.login-popup__input-wrap {
    align-items: center;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    display: flex;
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color .15s;
}
.login-popup__input-wrap:focus-within {
    border-color: #4abce8;
    box-shadow: 0 0 0 3px #4abce81f;
}
.login-popup__prefix {
    align-items: center;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    color: #374151;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    height: 44px;
    padding: 0 12px;
    -webkit-user-select: none;
    user-select: none;
}
.login-popup__input {
    background: #0000;
    border: none;
    color: #111827;
    flex: 1 1;
    font-size: 14px;
    outline: none;
    padding: 12px 14px;
}
.login-popup__input::placeholder {
    color: #9ca3af;
}
.login-popup__login-btn {
    align-items: center;
    background: linear-gradient(135deg, #4abce8, #2da5f3);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    letter-spacing: 1px;
    padding: 13px;
    transition: background .2s, transform .1s;
    width: 100%}
.login-popup__login-btn:hover {
    background: linear-gradient(135deg, #2da5f3, #1a8fd4);
    transform: translateY(-1px);
}
.login-popup__login-btn:active {
    transform: translateY(0);
}
.login-popup__or {
    align-items: center;
    display: flex;
    margin: 16px 0;
}
.login-popup__or:after, .login-popup__or:before {
    background: #e5e7eb;
    content: "";
    flex: 1 1;
    height: 1px;
}
.login-popup__or span {
    color: #9ca3af;
    font-size: 12px;
    padding: 0 12px;
}
.login-popup__email-btn {
    align-items: center;
    background: #111827;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
    padding: 12px;
    transition: background .2s, transform .1s;
    width: 100%}
.login-popup__email-btn:hover {
    background: #1f2937;
    transform: translateY(-1px);
}
.login-popup__google-btn {
    align-items: center;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    color: #374151;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    padding: 12px;
    transition: background .15s, border-color .15s, transform .1s;
    width: 100%}
.login-popup__google-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    transform: translateY(-1px);
}
.login-popup__safe {
    align-items: center;
    color: #9ca3af;
    display: flex;
    font-size: 12px;
    gap: 6px;
    justify-content: center;
    margin: 18px 0 0;
}
.login-popup__safe svg {
    color: #81c862;
}
.bottom-header__nav-item--active {
    background-color: #eef9ff;
    color: #000;
}
.bh-chevron {
    flex-shrink: 0;
    height: 12px;
    margin-left: 3px;
    transition: transform .2s;
    vertical-align: middle;
    width: 12px;
}
.bottom-header__nav-item--active .bh-chevron {
    transform: rotate(180deg);
}
.mega-menu {
    animation: mega-slide-down .18s cubic-bezier(.4, 0, .2, 1);
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 8px 32px #00000021;
    left: var(--space-20);
    overflow: hidden;
    position: absolute;
    text-align: left;
    top: 100%;
    width: 820px;
    z-index: 9000;
}
@keyframes mega-slide-down {
    0% {
    opacity: 0;
    transform: translateY(-6px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}.mega-menu__inner {
    display: flex;
    min-height: 360px;
}
.mega-menu__sidebar {
    background: #fff;
    border-right: 1px solid #f0f0f0;
    flex: 0 0 185px;
    padding: 12px 0;
}
.mega-menu__cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mega-menu__cat-item {
    margin: 0;
}
.mega-menu__cat-link {
    color: #333;
    display: block;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    padding: 10px 20px;
    text-align: left;
    text-decoration: none;
    transition: background .12s;
    white-space: nowrap;
}
.mega-menu__cat-link:hover {
    background: #f5f5f5;
    color: #111;
}
.mega-menu__cat-item--active .mega-menu__cat-link {
    background: #f0f0f0;
    border-left: 3px solid #333;
    color: #111;
    font-weight: 700;
    padding-left: 17px;
}
.mega-menu__featured {
    border-right: 1px solid #f0f0f0;
    flex: 1 1;
    padding: 16px 20px;
}
.mega-menu__featured-title {
    color: #111827;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    margin: 0 0 14px;
    text-transform: uppercase;
}
.mega-menu__product-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mega-menu__product-card {
    align-items: center;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    padding: 12px 10px;
    text-decoration: none;
    transition: box-shadow .15s, border-color .15s;
}
.mega-menu__product-card:hover {
    border-color: #d0d0d0;
    box-shadow: 0 2px 12px #00000017;
}
.mega-menu__product-img-wrap {
    align-items: center;
    background: #f8f8f8;
    border-radius: 6px;
    display: flex;
    flex: 0 0 56px;
    height: 56px;
    justify-content: center;
    overflow: hidden;
}
.mega-menu__product-img {
    height: 52px;
    object-fit: contain;
    width: 52px;
}
.mega-menu__product-info {
    flex: 1 1;
}
.mega-menu__product-name {
    color: #222;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 5px;
}
.mega-menu__product-prices {
    align-items: center;
    display: flex;
    gap: 8px;
}
.mega-menu__product-price {
    color: #4abce8;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
}
.mega-menu__product-price-old {
    color: #999;
    font-family: var(--font-family);
    font-size: 12px;
    text-decoration: line-through;
}
.mega-menu__promo {
    background: #d6eef8;
    flex: 0 0 220px;
    flex-direction: column;
    gap: 10px;
    padding: 24px 20px;
    text-align: center;
}
.mega-menu__promo, .mega-menu__promo-img-wrap {
    align-items: center;
    display: flex;
    justify-content: center;
}
.mega-menu__promo-img-wrap {
    height: 160px;
    margin-bottom: 8px;
    width: 180px;
}
.mega-menu__promo-img {
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .12));
    height: 150px;
    object-fit: contain;
    transition: transform .3s ease;
    width: 170px;
}
.mega-menu__promo-img:hover {
    transform: scale(1.08);
}
.mega-menu__promo-discount {
    color: #111827;
    font-family: var(--font-family);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}
.mega-menu__promo-desc {
    color: #555;
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}
.mega-menu__promo-price-row {
    align-items: center;
    background: #fff;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 14px;
    width: 100%}
.mega-menu__promo-label {
    color: #555;
    font-family: var(--font-family);
    font-size: 12px;
}
.mega-menu__promo-price {
    color: #111827;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 700;
}
.mega-menu__promo-btn {
    background: #4abce8;
    border-radius: 8px;
    color: #fff;
    display: block;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    transition: background .15s, transform .1s;
    width: 100%}
.mega-menu__promo-btn:hover {
    background: #2aa8d8;
    transform: translateY(-1px);
}
@media (max-width:768px) {
    .bh-chevron, .mega-menu {
    display: none;
}
}nav.breadcrumb {
    background: #fff!important;
    border-bottom: 1px solid #e5e7eb!important;
    text-align: left!important;
    width: 100%!important;
}
nav.breadcrumb .breadcrumb__container {
    align-items: center!important;
    display: flex!important;
    font-family: Helvena, Helvetica, Arial, sans-serif;
    font-family: var(--font-family, "Helvena", Helvetica, Arial, sans-serif);
    font-size: 12px;
    gap: 0;
    justify-content: flex-start!important;
    margin: 0 auto;
    max-width: 1520px;
    padding: 10px 20px;
    text-align: left!important;
}
nav.breadcrumb .breadcrumb__item {
    align-items: center!important;
    color: #6b7280;
    display: inline-flex!important;
    gap: 0;
    white-space: nowrap;
}
nav.breadcrumb .breadcrumb__link, nav.breadcrumb a.breadcrumb__link, nav.breadcrumb a.breadcrumb__link:visited {
    align-items: center;
    color: #111827!important;
    display: inline-flex;
    font-weight: 500;
    gap: 4px;
    text-decoration: none!important;
    transition: color .15s;
}
nav.breadcrumb .breadcrumb__home-icon {
    flex-shrink: 0;
    height: 14px;
    width: 14px;
}
nav.breadcrumb .breadcrumb__link:hover, nav.breadcrumb a.breadcrumb__link:hover {
    color: #2da5f3!important;
    text-decoration: underline!important;
}
nav.breadcrumb .breadcrumb__separator {
    color: #d1d5db;
    font-size: 10px;
    margin: 0 8px;
    -webkit-user-select: none;
    user-select: none;
}
nav.breadcrumb .breadcrumb__current {
    align-items: center;
    color: #2da5f3!important;
    display: inline-flex;
    font-weight: 600;
    gap: 4px;
}
.footer {
    background-color: #191c1f;
    color: #fff;
    font-family: sans-serif;
    font-family: var(--font-family, sans-serif);
    padding: 60px 0 20px;
    width: 100%}
.footer__container {
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 40px;
}
.footer__top {
    display: flex;
    gap: 60px;
    margin-bottom: 40px;
}
.footer__brand {
    flex: 0 0 350px;
}
.footer__logo-img-link {
    display: block;
    margin-bottom: 24px;
}
.footer__logo-img {
    display: block;
    height: auto;
    max-width: 180px;
}
.footer__customer-supports {
    margin-bottom: 24px;
}
.footer__customer-supports-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 0;
}
.footer__customer-supports-text {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.footer__social-links {
    display: flex;
    gap: 12px;
}
.footer__social-link {
    align-items: center;
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 36px;
    justify-content: center;
    transition: background-color .2s ease;
    width: 36px;
}
.footer__social-link:hover {
    background-color: #f97316;
}
.footer__links-container {
    display: flex;
    flex: 1 1;
    justify-content: space-between;
}
.footer__section {
    flex: 1 1;
}
.footer__section-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
    margin-top: 0;
}
.footer__section-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer__link {
    color: #9ca3af;
    font-size: 14px;
    text-decoration: none;
    transition: color .2s ease;
}
.footer__link:hover {
    color: #f97316;
}
.footer__bottom {
    align-items: center;
    border-top: 1px solid #374151;
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
}
.footer__bottom-links {
    align-items: center;
    color: #9ca3af;
    display: flex;
    font-size: 14px;
}
.footer__bottom-links a {
    color: #9ca3af;
    text-decoration: none;
    transition: color .2s ease;
}
.footer__bottom-links a:hover {
    color: #fff;
}
.footer__separator {
    color: #374151;
    margin: 0 12px;
}
.footer__copyright {
    color: #9ca3af;
    font-size: 14px;
    margin: 0;
}
@media (max-width:1024px) {
    .footer__top {
    flex-direction: column;
    gap: 40px;
}
.footer__brand {
    flex: auto;
}
}@media (max-width:768px) {
    .footer__links-container {
    flex-direction: column;
    gap: 40px;
}
.footer__bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
}
.footer__payment-methods {
    flex-wrap: wrap;
    justify-content: center;
}
}.auth-modal-overlay {
    align-items: center;
    animation: authFadeIn .2s ease-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0f172aa6;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}
@keyframes authFadeIn {
    0% {
    opacity: 0;
}
to {
    opacity: 1;
}
}.auth-modal-card {
    animation: authSlideUp .25s cubic-bezier(.16, 1, .3, 1);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px #00000040;
    max-width: 440px;
    overflow: hidden;
    position: relative;
    width: 100%}
@keyframes authSlideUp {
    0% {
    opacity: 0;
    transform: translateY(20px) scale(.96);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}.auth-modal-close {
    align-items: center;
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 14px;
    top: 14px;
    transition: all .15s;
    width: 32px;
    z-index: 10;
}
.auth-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.auth-modal-banner {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
    padding: 24px 28px;
}
.auth-modal-banner__tag {
    align-items: center;
    background: #df202733;
    border: 1px solid #df202766;
    border-radius: 20px;
    color: #ff6b6b;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    gap: 6px;
    letter-spacing: .05em;
    margin-bottom: 10px;
    padding: 4px 10px;
    text-transform: uppercase;
}
.auth-modal-banner__title {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 6px;
}
.auth-modal-banner__sub {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}
.auth-modal-body {
    padding: 24px 28px;
}
.auth-modal-msg {
    align-items: center;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    color: #991b1b;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    margin-bottom: 18px;
    padding: 10px 14px;
}
.auth-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.auth-modal-field label {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}
.auth-modal-field input {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 14px;
    outline: none;
    padding: 10px 14px;
    transition: border-color .15s;
    width: 100%}
.auth-modal-field input:focus {
    border-color: #4abce8;
    box-shadow: 0 0 0 3px #4abce826;
}
.auth-modal-submit {
    background: #df2027;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
    padding: 12px;
    transition: background .15s;
    width: 100%}
.auth-modal-submit:hover {
    background: #b91c1c;
}
.auth-modal-demo-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #334155;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    margin-top: 10px;
    padding: 10px;
    transition: background .15s;
    width: 100%}
.auth-modal-demo-btn:hover {
    background: #e2e8f0;
}
.auth-modal-footer {
    color: #64748b;
    font-size: 13px;
    margin-top: 16px;
    text-align: center;
}
.auth-modal-footer a {
    color: #4abce8;
    font-weight: 700;
    text-decoration: none;
}
.auth-modal-footer a:hover {
    text-decoration: underline;
}
.global-toast-container {
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    position: fixed;
    right: 24px;
    z-index: 9999;
}
.global-toast-message {
    align-items: flex-start;
    animation: slideInUp .3s ease-out;
    background-color: #333;
    border-left: 4px solid #0000;
    border-radius: 8px;
    box-shadow: 0 4px 12px #00000026;
    color: #fff;
    display: flex;
    justify-content: space-between;
    max-width: 350px;
    min-width: 250px;
    padding: 12px 16px;
    pointer-events: auto;
}
.toast-success {
    border-left-color: #10b981;
}
.toast-error {
    border-left-color: #ef4444;
}
.toast-warning {
    border-left-color: #f59e0b;
}
.toast-info {
    border-left-color: #3b82f6;
}
.toast-content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 4px;
}
.toast-title {
    font-size: 14px;
    font-weight: 700;
}
.toast-text {
    font-size: 13px;
    line-height: 1.4;
}
.toast-close-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    margin-left: 12px;
    opacity: .6;
    padding: 0;
    transition: opacity .2s;
}
.toast-close-btn:hover {
    opacity: 1;
}
@keyframes slideInUp {
    0% {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}.main-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.main-layout__content {
    background: #f8f9fa;
    flex: 1 1;
}
.home-page-redesign {
    background-color: #fff;
    color: #191c1f;
    font-family: Outfit, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}
.home-inner-centered-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 16px;
    position: relative;
    width: 100%}
.horizontal-category-flyout-wrapper {
    background-color: #fff;
    border-bottom: 1.5px solid #f2f4f5;
    overflow-x: auto;
    padding: 14px 16px;
    scrollbar-width: none;
}
.horizontal-category-flyout-wrapper::-webkit-scrollbar {
    display: none;
}
.horizontal-category-flyout {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1600px;
}
.categories-text-only-item {
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: color .2s ease;
    white-space: nowrap;
}
.categories-text-only-item:hover {
    color: #2da5f3;
}
.banner-full-width-wrapper {
    background-color: #fff;
    padding: 24px 0;
    width: 100%}
.banner-hero-split-grid {
    grid-gap: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns: 2.1fr 1fr;
}
.banner-slider-carousel-col {
    border-radius: 8px;
    height: 340px;
    overflow: hidden;
    position: relative;
}
.banner-carousel-window {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%}
.banner-carousel-track {
    display: flex;
    height: 100%;
    transition: transform .4s cubic-bezier(.25, 1, .5, 1);
    width: 100%}
.banner-slide-item {
    flex-shrink: 0;
    height: 100%;
    min-width: 100%}
.banner-slide-img {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%}
.banner-side-stacked-banners {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 340px;
}
.side-banner-card-item {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    cursor: pointer;
    flex: 1 1;
    transition: transform .2s;
}
.side-banner-card-item:hover {
    transform: translateY(-2px);
}
.banner-nav-arrow-btn {
    align-items: center;
    background-color: #ffffffe6;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 10px #0000001a;
    color: #191c1f;
    cursor: pointer;
    display: flex;
    height: 36px;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .2s, transform .2s;
    width: 36px;
    z-index: 10;
}
.banner-nav-arrow-btn:hover {
    background-color: #fff;
    transform: translateY(-50%) scale(1.05);
}
.prev-arrow-btn {
    left: 12px;
}
.next-arrow-btn {
    right: 12px;
}
.carousel-progress-bars {
    bottom: 12px;
    display: flex;
    gap: 6px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 10;
}
.progress-item-bar {
    background-color: #fff6;
    border-radius: 2px;
    cursor: pointer;
    height: 3px;
    overflow: hidden;
    position: relative;
    width: 24px;
}
.progress-bar-fill {
    background-color: #2da5f3;
    height: 100%;
    transition: width .1s linear;
    width: 0;
}
.progress-item-bar.active .progress-bar-fill {
    transition: width 5s linear;
    width: 100%}
.home-banner-caption-tabs {
    grid-gap: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 12px;
}
.banner-subCard-item {
    background-color: #f8f9fa;
    border: 1.5px solid #0000;
    border-radius: 6px;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    transition: all .2s ease;
}
.banner-subCard-item.active {
    background-color: #fff;
    border-color: #2da5f3;
    box-shadow: 0 4px 12px #2da5f314;
}
.banner-subCard-item .bold-caption {
    color: #191c1f;
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 2px;
}
.banner-subCard-item .sub-caption {
    color: #5f6c72;
    font-size: 9px;
    margin: 0;
}
.pwa-features-unified-strip {
    background-color: #fff;
    border: 1px solid #e4e7e9;
    border-radius: 8px;
    box-shadow: 0 4px 12px #00000005;
    margin-top: 24px;
    padding: 16px 20px;
}
.pwa-features-unified-strip .features-bar-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}
.pwa-features-unified-strip .f-item {
    align-items: center;
    border-right: 1px solid #efefef;
    display: flex;
    gap: 12px;
    padding-right: 32px;
}
.pwa-features-unified-strip .f-item:last-child {
    border-right: none;
    padding-right: 0;
}
.f-icon-box {
    align-items: center;
    background-color: #f0f9ff;
    border-radius: 50%;
    color: #2da5f3;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}
.f-text-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.f-text-box .title {
    color: #191c1f;
    font-size: 13px;
    font-weight: 700;
}
.f-text-box .desc {
    color: #5f6c72;
    font-size: 11px;
    font-weight: 500;
}
.journey-continue-journey {
    background: linear-gradient(87.29deg, #c4efff -1.77%, #e2ffd5 99.62%);
    padding: 40px 0;
}
.journey-section-title {
    color: #191c1f;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
}
.journey-grid-products {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
}
.journey-square-product {
    align-items: center;
    background-color: #fff;
    border: 12px solid #f7e99e;
    border-radius: 5px;
    box-shadow: 0 4px 10px #00000008;
    cursor: pointer;
    display: flex;
    height: 260px;
    justify-content: center;
    padding: 12px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    width: 260px;
}
.journey-square-product:hover {
    border-color: #fbbf24;
    box-shadow: 0 8px 24px #00000014;
    transform: translateY(-4px);
}
.journey-img-box {
    align-items: center;
    background: #0000;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%}
.journey-img-box img {
    height: 100%;
    object-fit: contain;
    width: 100%}
.journey-related-viewed {
    background: linear-gradient(90deg, #c4efff, #e2ffd5);
    padding: 45px 0;
}
.viewed-grid-categories {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
    margin-bottom: 40px;
}
.viewed-category-card {
    align-items: center;
    background-color: #fff;
    border: 8px solid #f7e99e;
    border-radius: 5px;
    box-shadow: 0 4px 10px #00000008;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 230px;
    justify-content: space-between;
    padding: 12px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    width: 205px;
}
.viewed-category-card.active {
    border-color: #ff7a50;
    box-shadow: 0 6px 18px #ff7a5026;
}
.viewed-category-card:hover {
    box-shadow: 0 8px 20px #00000014;
    transform: translateY(-4px);
}
.viewed-category-img-box {
    align-items: center;
    background: #0000;
    display: flex;
    height: 130px;
    justify-content: center;
    padding: 4px;
    width: 100%}
.viewed-category-img-box img {
    height: 100%;
    object-fit: contain;
    width: 100%}
.viewed-category-divider {
    background-color: #e4e7eb;
    height: 1px;
    margin: 0;
    width: 100%}
.viewed-category-stat-row {
    align-items: center;
    color: #191c1f;
    display: flex;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    height: 36px;
    justify-content: center;
}
.viewed-category-stat-row svg {
    color: #5f6c72;
}
.slider-relative-container {
    position: relative;
    width: 100%}
.slider-nav-circle-btn {
    align-items: center;
    background-color: #22c55e;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 10px #00000026;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 38px;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .2s, background-color .2s;
    width: 38px;
    z-index: 5;
}
.slider-nav-circle-btn:hover {
    background-color: #16a34a;
    transform: translateY(-50%) scale(1.05);
}
.slider-nav-circle-btn.prev-btn {
    left: -19px;
}
.slider-nav-circle-btn.next-btn {
    right: -19px;
}
.products-scroll-section-layout {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 6px 0;
    scroll-behavior: smooth;
}
.hidden-scrollbar::-webkit-scrollbar {
    display: none;
}
.hidden-scrollbar {
    scrollbar-width: none;
}
.product-vertical-grid-card {
    background-color: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    max-width: calc(20% - 12.8px);
    min-width: calc(20% - 12.8px);
    overflow: hidden;
    position: relative;
    transition: all .2s ease;
}
.product-vertical-grid-card:hover {
    border-color: #2da5f3;
    box-shadow: 0 12px 24px #0000001f;
    transform: translateY(-4px);
}
.pwa-deal-badge {
    background: #e87722;
    border-radius: 4px;
    box-shadow: 0 2px 6px #e8772233;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    left: 10px;
    letter-spacing: .05em;
    padding: 4px 8px;
    position: absolute;
    text-transform: uppercase;
    top: 10px;
    z-index: 5;
}
.product-card-upper {
    height: 220px;
    padding: 16px;
}
.product-card-upper, .pwa-image {
    align-items: center;
    display: flex;
    justify-content: center;
}
.pwa-image {
    height: 100%;
    width: 100%}
.pwa-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.product-card-lower {
    border-top: 1.5px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    padding: 12px;
}
.product-card-lower-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rating {
    align-items: center;
    display: flex;
    gap: 4px;
}
.avgrating {
    align-items: center;
    background-color: #ff9800;
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    font-size: 9px;
    font-weight: 700;
    gap: 2px;
    padding: 2px 5px;
}
.count {
    color: #64748b;
    font-size: 9px;
}
.name {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #1e293b;
    display: -webkit-box;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    line-height: 1.4;
    overflow: hidden;
}
.brand-pwa-name {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.prod-price-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.prod-selling-price {
    color: #16a34a;
    font-size: 18px;
    font-weight: 700;
}
.price {
    align-items: center;
    display: flex;
    gap: 6px;
}
.prod-mrp {
    color: #64748b;
    font-size: 12px;
    text-decoration: line-through;
}
.prod-discount {
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
}
.taxes-inc {
    color: #64748b;
    font-size: 8px;
    font-weight: 600;
}
.right-btn-container {
    margin-top: 10px;
}
.btn.tertiary-btn {
    background-color: #39c;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 0;
    transition: background-color .2s;
    width: 100%}
.btn.tertiary-btn:hover {
    background-color: #2580ad;
}
.category-section-block {
    background-color: #fff;
    padding: 40px 0;
    width: 100%}
.view-all-strip-header {
    align-items: center;
    border-bottom: 2.5px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
.view-all-strip-header h2 {
    color: #1e293b;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.view-all-blue-link {
    color: #0284c7;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: color .2s;
}
.view-all-blue-link:hover {
    color: #0369a1;
}
.brand-strip-full-row {
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
}
.brand-head-label {
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: none;
}
.brand-logos-row-container {
    align-items: center;
    display: flex;
    gap: 20px;
}
.brand-strip-logo-img {
    align-items: center;
    display: flex;
    height: 20px;
}
.brand-strip-logo-img img {
    height: 100%;
    object-fit: contain;
}
.brand-strip-stacked-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    width: 100%}
.brand-logos-grid-container {
    background-color: #fff;
    border: 1px solid #d2e4f0;
    border-radius: 4px;
    box-shadow: 0 1px 3px #00000005;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    overflow: hidden;
}
.brand-grid-logo-item {
    align-items: center;
    background-color: #fff;
    border-right: 1px solid #d2e4f0;
    display: flex;
    height: 55px;
    justify-content: center;
    padding: 0;
    transition: background-color .2s ease;
}
.brand-grid-logo-item:last-child {
    border-right: none;
}
.brand-grid-logo-item:hover {
    background-color: #f8fafc;
    box-shadow: 0 8px 16px #0000001a;
    z-index: 1;
}
.brand-grid-logo-item img {
    height: 100%;
    object-fit: contain;
    width: 100%}
.sub-category-blue-tiles-grid {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
    margin-top: 32px;
}
.subcategory-column-wrapper {
    gap: 16px;
}
.subcategory-column-wrapper, .subcategory-white-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 272px;
}
.subcategory-white-card {
    background-color: #fff;
    border: 12px solid #cbeeff;
    border-radius: 5px;
    box-shadow: 0 4px 12px #57baea14;
    box-sizing: border-box;
    cursor: pointer;
    height: 376px;
    justify-content: space-between;
    padding: 16px;
    transition: transform .2s, box-shadow .2s;
}
.subcategory-column-wrapper:hover .subcategory-white-card {
    box-shadow: 0 8px 24px #57baea38;
    transform: translateY(-4px);
}
.tile-img-wrapper {
    align-items: center;
    background-color: #fff;
    display: flex;
    height: 200px;
    justify-content: center;
    width: 100%}
.tile-img-wrapper img {
    height: 100%;
    object-fit: contain;
    transition: transform .2s ease-in-out;
    width: 100%}
.subcategory-column-wrapper:hover .tile-img-wrapper img {
    transform: scale(1.05);
}
.tile-card-divider {
    background-color: #e2e8f0;
    height: 1px;
    margin: 8px 0;
    width: 100%}
.tile-title-name {
    color: #191c1f;
    font-size: 20px;
    font-weight: 700;
    margin: 4px 0 8px;
    text-align: center;
}
.tile-solid-blue-btn {
    align-items: center;
    background-color: #57baea;
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 6px #57baea26;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    letter-spacing: .5px;
    padding: 12px 0;
    transition: background-color .2s, transform .2s;
    width: 100%}
.tile-solid-blue-btn:hover {
    background-color: #3fa6d6;
    transform: translateY(-2px);
}
.about-us-info-block-home {
    padding: 40px 0;
    width: 100%}
.about-us-info-block-home h2 {
    border-bottom: 2.5px solid #e2e8f0;
    color: #1e293b;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 10px;
}
.about-us-info-block-home .lead-text {
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.about-us-grid-details {
    grid-gap: 24px;
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 1fr;
}
.about-col h4 {
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}
.about-col p, .about-col ul li, .about-mission-block p {
    color: #64748b;
    font-size: 11px;
    line-height: 1.6;
}
.about-mission-block h4 {
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    margin-top: 16px;
}
.bg-grey-section {
    background-color: #f7f7f7!important;
}
@media (max-width:1024px) {
    .banner-hero-split-grid {
    grid-template-columns: 1fr;
}
.banner-side-stacked-banners {
    flex-direction: row;
    height: 160px;
}
.sub-category-blue-tiles-grid {
    grid-template-columns: repeat(3, 1fr);
}
}@media (max-width:768px) {
    .home-banner-caption-tabs, .viewed-grid-categories {
    grid-template-columns: repeat(3, 1fr);
}
.sub-category-blue-tiles-grid {
    grid-template-columns: repeat(2, 1fr);
}
.about-us-grid-details {
    grid-template-columns: 1fr;
}
}@media (max-width:480px) {
    .home-banner-caption-tabs, .journey-grid-products, .viewed-grid-categories {
    grid-template-columns: repeat(2, 1fr);
}
.sub-category-blue-tiles-grid {
    grid-template-columns: 1fr;
}
}.sp-page {
    background: #f5f5f5;
    font-family: Inter, sans-serif;
    font-family: var(--font-family, "Inter", sans-serif);
    min-height: 100vh;
}
.sp-container {
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 20px 60px;
}
.sp-breadcrumb {
    align-items: center;
    color: #6b7280;
    display: flex;
    font-size: 12px;
    gap: 6px;
    justify-content: flex-start;
    padding: 14px 0;
    text-align: left;
}
.sp-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}
.sp-breadcrumb a:hover {
    color: #4abce8;
}
.sp-breadcrumb span {
    color: #9ca3af;
}
.sp-breadcrumb__current {
    color: #4abce8;
    font-weight: 600;
}
.sp-layout {
    align-items: flex-start;
    display: flex;
    gap: 20px;
}
.sp-sidebar {
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex: 0 0 195px;
    flex-direction: column;
    gap: 0;
    padding: 16px;
    position: -webkit-sticky;
    position: sticky;
    top: 12px;
}
.sp-filter {
    border-bottom: 1px solid #f0f0f0;
    padding: 14px 0;
}
.sp-filter:last-child {
    border-bottom: none;
}
.sp-filter__title {
    color: #111827;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    margin: 0 0 10px;
    text-transform: uppercase;
}
.sp-filter__check {
    align-items: center;
    color: #374151;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    gap: 8px;
    line-height: 1.3;
    margin-bottom: 7px;
}
.sp-filter__check input[type=checkbox], .sp-filter__check input[type=radio] {
    accent-color: #4abce8;
    cursor: pointer;
    flex-shrink: 0;
    height: 13px;
    width: 13px;
}
.sp-filter__check--rating {
    align-items: center;
    gap: 6px;
}
.sp-filter__rating-label {
    color: #6b7280;
    font-size: 11px;
}
.sp-filter__badge-dot {
    border-radius: 3px;
    flex-shrink: 0;
    height: 10px;
    width: 10px;
}
.sp-main {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.sp-section-title {
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 14px;
}
.sp-hero {
    align-items: center;
    background: linear-gradient(135deg, #1a0533, #3b0a6e 40%, #1c1c3a);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    min-height: 160px;
    overflow: hidden;
    padding: 24px 28px;
    position: relative;
}
.sp-hero__text {
    max-width: 260px;
    z-index: 2;
}
.sp-hero__sub {
    color: #d8b4fe;
    font-size: 11px;
    line-height: 1.5;
    margin: 0 0 6px;
}
.sp-hero__title {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 12px;
}
.sp-hero__btn {
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    border: none;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 7px 18px;
    transition: opacity .15s;
}
.sp-hero__btn:hover {
    opacity: .9;
}
.sp-hero__imgs {
    align-items: flex-end;
    display: flex;
    gap: -12px;
    position: relative;
    z-index: 2;
}
.sp-hero__cam {
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .4));
    object-fit: contain;
}
.sp-hero__cam--1 {
    height: 80px;
    width: 90px;
    z-index: 3;
}
.sp-hero__cam--2 {
    height: 70px;
    margin-left: -16px;
    width: 75px;
    z-index: 2;
}
.sp-hero__cam--3 {
    height: 60px;
    margin-left: -12px;
    width: 60px;
    z-index: 1;
}
.sp-hero__tags {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    right: 24px;
    top: 16px;
    z-index: 3;
}
.sp-hero__tags span {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #ffffff26;
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    white-space: nowrap;
}
.sp-feat-cats {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
}
.sp-feat-cats__track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.sp-feat-cats__track::-webkit-scrollbar {
    display: none;
}
.sp-feat-cat-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    flex: 0 0 170px;
    flex-direction: column;
    padding: 0 0 12px;
}
.sp-feat-cat-card, .sp-feat-cat-card__img {
    align-items: center;
    display: flex;
    overflow: hidden;
}
.sp-feat-cat-card__img {
    background: #f8f8f8;
    height: 120px;
    justify-content: center;
    width: 100%}
.sp-feat-cat-card__img img {
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
}
.sp-feat-cat-card__name {
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0 8px;
}
.sp-feat-cat-card__btn {
    background: #4abce8;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 7px 16px;
    transition: background .15s;
}
.sp-feat-cat-card__btn:hover {
    background: #2aa8d8;
}
.sp-feat-prods {
    background: #fff;
    border: 1.5px solid #81c862;
    border-radius: 12px;
    padding: 20px;
}
.sp-feat-prods__grid {
    grid-gap: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}
.sp-prod-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
}
.sp-prod-card:hover {
    box-shadow: 0 12px 24px #0000001f;
    transform: translateY(-4px);
}
.sp-prod-card__badge {
    border-radius: 0 0 6px 0;
    font-size: 9px;
    font-weight: 700;
    left: 0;
    letter-spacing: .04em;
    padding: 3px 9px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    z-index: 2;
}
.badge--teal {
    background: #4abce8;
    color: #fff;
}
.badge--green {
    background: #81c862;
    color: #fff;
}
.badge--orange {
    background: #e87722;
    color: #fff;
}
.sp-prod-card__img {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    height: 160px;
    justify-content: center;
    padding: 12px;
}
.sp-prod-card__img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform .25s;
}
.sp-prod-card:hover .sp-prod-card__img img {
    transform: scale(1.05);
}
.sp-prod-card__info {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 6px;
    justify-content: space-between;
    padding: 12px;
}
.sp-stars {
    align-items: center;
    display: flex;
    gap: 1px;
}
.sp-prod-card__rating-row {
    align-items: center;
    display: flex;
    gap: 6px;
}
.sp-prod-card__reviews {
    color: #9ca3af;
    font-size: 10px;
}
.sp-prod-card__name {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #111827;
    display: -webkit-box;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin: 2px 0;
    min-height: 36px;
    overflow: hidden;
}
.sp-prod-card__price-row {
    align-items: baseline;
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.sp-prod-card__price {
    color: #4abce8;
    font-size: 14px;
    font-weight: 700;
}
.sp-prod-card__old-price {
    color: #9ca3af;
    font-size: 11px;
    text-decoration: line-through;
}
.sp-prod-card__discount {
    color: #10b981;
    font-size: 10px;
    font-weight: 700;
}
.sp-prod-card__actions {
    align-items: center;
    display: flex;
    gap: 6px;
    margin-top: 10px;
    width: 100%}
.sp-prod-card__btn-wishlist {
    align-items: center;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 6px;
    color: #e11d48;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    transition: background .15s;
    width: 32px;
}
.sp-prod-card__btn-wishlist:hover {
    background: #ffe4e6;
    color: #be123c;
}
.sp-prod-card__btn-cart {
    background: #4abce8;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    flex: 1 1;
    font-size: 11px;
    font-weight: 700;
    height: 32px;
    transition: background .15s;
    white-space: nowrap;
}
.sp-prod-card__btn-cart:hover {
    background: #2aa8d8;
}
.sp-prod-card__btn-buy {
    background: #10b981;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 32px;
    padding: 0 10px;
    transition: background .15s;
    white-space: nowrap;
}
.sp-prod-card__btn-buy:hover {
    background: #059669;
}
.sp-shop {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
}
.sp-shop__toolbar {
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
}
.sp-shop__count {
    color: #6b7280;
    font-size: 12px;
}
.sp-shop__count strong {
    color: #111827;
}
.sp-shop__sort {
    align-items: center;
    display: flex;
    gap: 8px;
}
.sp-shop__sort-label {
    color: #6b7280;
    font-size: 12px;
}
.sp-shop__sort-select {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    cursor: pointer;
    font-size: 12px;
    outline: none;
    padding: 5px 10px;
}
.sp-grid, .sp-prod-grid {
    grid-gap: 16px!important;
    display: grid!important;
    gap: 16px!important;
    grid-template-columns: repeat(4, 1fr)!important;
    width: 100%!important;
}
@media (max-width:1024px) {
    .sp-feat-prods__grid, .sp-prod-grid {
    grid-template-columns: repeat(3, 1fr);
}
}@media (max-width:768px) {
    .sp-layout {
    flex-direction: column;
}
.sp-sidebar {
    flex: none;
    position: static;
    width: 100%}
.sp-feat-prods__grid, .sp-prod-grid {
    grid-template-columns: repeat(2, 1fr);
}
}@media (max-width:480px) {
    .sp-feat-prods__grid, .sp-prod-grid {
    grid-template-columns: 1fr 1fr;
}
}.pd-page {
    background: #fff;
    font-family: Inter, sans-serif;
    font-family: var(--font-family, "Inter", sans-serif);
    min-height: 100vh;
}
.pd-container {
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 20px 60px;
}
.pd-breadcrumb {
    align-items: center;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 6px;
    justify-content: flex-start;
    padding: 14px 0 18px;
    text-align: left;
}
.pd-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}
.pd-breadcrumb a:hover {
    color: #4abce8;
}
.pd-breadcrumb span {
    color: #9ca3af;
}
.pd-breadcrumb__current {
    color: #4abce8;
    font-weight: 500;
}
.pd-layout {
    background: #fff;
    border-radius: 12px;
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
    padding: 28px;
}
.pd-gallery {
    flex: 0 0 360px;
}
.pd-gallery__main {
    align-items: center;
    background: #f8f8f8;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    display: flex;
    height: 300px;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
    width: 100%}
.pd-gallery__main-img {
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
    transition: transform .3s;
}
.pd-gallery__main-img:hover {
    transform: scale(1.04);
}
.pd-gallery__thumbs {
    align-items: center;
    display: flex;
    gap: 8px;
}
.pd-gallery__arrow {
    align-items: center;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    color: #e87722;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 18px;
    height: 28px;
    justify-content: center;
    line-height: 1;
    transition: background .15s;
    width: 28px;
}
.pd-gallery__arrow:hover {
    background: #fee9d3;
}
.pd-gallery__thumb {
    background: #f8f8f8;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    height: 60px;
    overflow: hidden;
    padding: 4px;
    transition: border-color .15s;
    width: 60px;
}
.pd-gallery__thumb img {
    height: 100%;
    object-fit: contain;
    width: 100%}
.pd-gallery__thumb--active {
    border-color: #e87722;
}
.pd-info {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 10px;
}
.pd-info__rating-row {
    gap: 8px;
}
.pd-info__rating-row, .pd-stars {
    align-items: center;
    display: flex;
}
.pd-stars {
    gap: 1px;
}
.pd-info__rating-val {
    color: #f59e0b;
    font-size: 13px;
    font-weight: 600;
}
.pd-info__rating-count {
    color: #9ca3af;
    font-size: 12px;
}
.pd-info__title {
    color: #111827;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
.pd-info__subtitle {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
}
.pd-info__availability {
    align-items: center;
    color: #6b7280;
    display: flex;
    font-size: 12px;
    gap: 6px;
}
.pd-info__avail-badge {
    background: #dcfce7;
    border-radius: 20px;
    color: #16a34a;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
}
.pd-info__price-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pd-info__price {
    color: #111827;
    font-size: 28px;
    font-weight: 800;
}
.pd-info__price-orig {
    color: #9ca3af;
    font-size: 15px;
    text-decoration: line-through;
}
.pd-info__off-badge {
    background: #e87722;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
}
.pd-bulk {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.pd-bulk__header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
}
.pd-bulk__tiers {
    display: flex;
}
.pd-bulk__tier {
    border-right: 1px solid #e5e7eb;
    flex: 1 1;
    padding: 10px 8px;
    text-align: center;
}
.pd-bulk__tier:last-child {
    border-right: none;
}
.pd-bulk__qty {
    color: #374151;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
}
.pd-bulk__price {
    color: #111827;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px;
}
.pd-bulk__off {
    color: #e87722;
    font-size: 10px;
    font-weight: 600;
}
.pd-actions {
    flex-wrap: wrap;
    gap: 12px;
}
.pd-actions, .pd-actions__qty {
    align-items: center;
    display: flex;
}
.pd-actions__qty {
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.pd-actions__qty button {
    background: #f5f5f5;
    border: none;
    color: #374151;
    cursor: pointer;
    font-size: 18px;
    height: 40px;
    transition: background .15s;
    width: 36px;
}
.pd-actions__qty button:hover {
    background: #e5e7eb;
}
.pd-actions__qty span {
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    width: 44px;
}
.pd-actions__cart {
    align-items: center;
    background: #fff;
    border: 2px solid #111827;
    border-radius: 8px;
    color: #111827;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: .03em;
    padding: 11px 22px;
    transition: background .15s;
}
.pd-actions__cart:hover {
    background: #f3f4f6;
}
.pd-actions__buy {
    background: #e87722;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 11px 28px;
    transition: background .15s;
}
.pd-actions__buy:hover {
    background: #cf6b1a;
}
.pd-b2b {
    align-items: center;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    color: #0369a1;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    padding: 10px 14px;
}
.pd-b2b__sub {
    color: #6b7280;
    font-size: 11px;
    font-weight: 400;
    margin-left: 4px;
}
.pd-trust {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    gap: 0;
    overflow: hidden;
}
.pd-trust__item {
    align-items: center;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex: 1 1;
    gap: 8px;
    padding: 10px;
}
.pd-trust__item:last-child {
    border-right: none;
}
.pd-trust__title {
    color: #111827;
    font-size: 12px;
    font-weight: 700;
}
.pd-trust__sub {
    color: #6b7280;
    font-size: 10px;
}
.pd-tabs {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 24px;
    overflow: hidden;
}
.pd-tabs__nav {
    border-bottom: 1px solid #e5e7eb;
    display: flex;
}
.pd-tabs__btn {
    background: none;
    border: none;
    border-bottom: 3px solid #0000;
    color: #6b7280;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 14px 24px;
    transition: color .15s, border-color .15s;
}
.pd-tabs__btn--active {
    border-bottom-color: #e87722;
    color: #e87722;
}
.pd-tabs__content {
    padding: 24px 28px;
}
.pd-tabs__section-title {
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 14px;
}
.pd-tabs__feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 18px;
}
.pd-tabs__feature-list li {
    color: #374151;
    font-size: 13px;
    line-height: 1.6;
}
.pd-specs-table {
    border-collapse: collapse;
    width: 100%}
.pd-specs-table td {
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 13px;
    padding: 10px 14px;
}
.pd-specs-table tr:nth-child(odd) td {
    background: #f9fafb;
}
.pd-specs-table td:first-child {
    font-weight: 600;
    width: 200px;
}
.pd-similar {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 24px;
    padding: 24px 28px;
}
.pd-similar__title {
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 18px;
}
.pd-similar__wrap {
    align-items: center;
    display: flex;
    gap: 12px;
}
.pd-similar__arrow {
    align-items: center;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    color: #e87722;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 20px;
    height: 32px;
    justify-content: center;
    transition: background .15s;
    width: 32px;
}
.pd-similar__arrow:hover {
    background: #fee9d3;
}
.pd-similar__track {
    display: flex;
    flex: 1 1;
    gap: 16px;
    overflow: hidden;
}
.pd-similar__card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    flex: 0 0 200px;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.pd-similar__card:hover {
    box-shadow: 0 12px 24px #0000001f;
    transform: translateY(-4px);
}
.pd-similar__badge {
    border-radius: 0 4px 4px 0;
    font-size: 9px;
    font-weight: 700;
    left: 0;
    letter-spacing: .04em;
    padding: 3px 8px;
    position: absolute;
    top: 8px;
}
.pd-similar__badge--best {
    background: #4abce8;
    color: #fff;
}
.pd-similar__badge--deal {
    background: #81c862;
    color: #fff;
}
.pd-similar__img-wrap {
    align-items: center;
    background: #f8f8f8;
    display: flex;
    height: 130px;
    justify-content: center;
    padding: 12px;
}
.pd-similar__img-wrap img {
    height: 100%;
    object-fit: contain;
    width: 100%}
.pd-similar__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px 14px;
}
.pd-similar__reviews {
    color: #9ca3af;
    font-size: 10px;
}
.pd-similar__name {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #374151;
    display: -webkit-box;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    margin: 2px 0;
    overflow: hidden;
}
.pd-similar__price {
    color: #6b7280;
    font-size: 12px;
}
.pd-similar__price strong {
    color: #4abce8;
    font-weight: 700;
}
.pd-reviews {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
}
.pd-reviews__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.pd-reviews__title {
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.pd-reviews__write-btn {
    background: #4abce8;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 18px;
    transition: background .15s;
}
.pd-reviews__write-btn:hover {
    background: #2aa8d8;
}
.pd-reviews__product-name {
    color: #6b7280;
    font-size: 12px;
    margin: 0 0 20px;
}
.pd-reviews__body {
    align-items: flex-start;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    gap: 40px;
    margin-bottom: 24px;
    padding-bottom: 24px;
}
.pd-reviews__score {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 6px;
}
.pd-reviews__score-num {
    color: #111827;
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
}
.pd-reviews__score-sub {
    color: #9ca3af;
    font-size: 11px;
    max-width: 140px;
    text-align: center;
}
.pd-reviews__bars {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 8px;
}
.pd-reviews__bar-row {
    align-items: center;
    display: flex;
    gap: 10px;
}
.pd-reviews__bar-label {
    color: #374151;
    font-size: 12px;
    text-align: center;
    width: 10px;
}
.pd-reviews__bar-track {
    background: #e5e7eb;
    border-radius: 4px;
    flex: 1 1;
    height: 8px;
    overflow: hidden;
}
.pd-reviews__bar-fill {
    background: #f59e0b;
    border-radius: 4px;
    height: 100%;
    transition: width .4s;
}
.pd-reviews__bar-pct {
    color: #9ca3af;
    font-size: 11px;
    text-align: right;
    width: 30px;
}
.pd-reviews__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pd-review-card {
    border-bottom: 1px solid #f3f4f6;
    padding: 20px 0;
}
.pd-review-card:last-child {
    border-bottom: none;
}
.pd-review-card__header {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
}
.pd-review-card__verified {
    color: #16a34a;
    font-size: 11px;
    font-weight: 600;
}
.pd-review-card__author {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
}
.pd-review-card__date {
    color: #9ca3af;
    font-size: 11px;
    margin-bottom: 6px;
}
.pd-review-card__title {
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}
.pd-review-card__body {
    color: #6b7280;
    font-size: 13px;
}
@media (max-width:900px) {
    .pd-layout {
    flex-direction: column;
}
.pd-gallery {
    flex: none;
}
}@media (max-width:600px) {
    .pd-bulk__tiers {
    flex-wrap: wrap;
}
.pd-similar__track {
    overflow-x: auto;
}
.pd-reviews__body {
    flex-direction: column;
}
.pd-trust {
    flex-wrap: wrap;
}
}.cart-page-premium {
    background-color: #fff;
    font-family: Helvena, Helvetica, Arial, sans-serif;
    min-height: 80vh;
    padding: 40px 0;
}
.cart-inner-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 16px;
}
.empty-cart-banner-card {
    align-items: center;
    background-color: #fff;
    display: flex;
    gap: 48px;
    justify-content: center;
    margin: 0 auto 60px;
    max-width: 1000px;
    padding: 60px 20px;
}
.empty-cart-left-vector {
    max-width: 300px;
    width: 100%}
.empty-cart-left-vector img {
    height: auto;
    object-fit: contain;
    width: 100%}
.empty-cart-right-details {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.empty-cart-right-details h2 {
    color: #191c1f;
    font-size: 34px;
    font-weight: 500;
    margin: 0;
}
.empty-cart-right-details p {
    color: #5f6c72;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 18px;
}
.start-shopping-btn {
    background-color: #4cbdf3;
    border-radius: 6px;
    box-shadow: 0 4px 12px #4cbdf333;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 36px;
    transition: all .2s ease;
}
.start-shopping-btn:hover {
    background-color: #2da5f3;
    box-shadow: 0 6px 16px #2da5f34d;
    transform: translateY(-1px);
}
.trending-categories-section {
    width: 100%}
.trending-categories-section h3 {
    color: #191c1f;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
}
.trending-categories-grid {
    grid-template-columns: repeat(8, 1fr);
}
.trending-category-square-card {
    border: 1.5px solid #bae6fd;
    border-radius: 8px;
    box-shadow: 0 4px 10px #00000003;
    height: 140px;
    justify-content: space-between;
    padding: 12px;
    transition: transform .2s ease, border-color .2s ease;
}
.trending-category-square-card:hover {
    border-color: #38bdf8;
    transform: translateY(-2px);
}
.trending-cart-item-img img {
    height: 100%;
    object-fit: contain;
    width: 100%}
.trending-name-box {
    color: #5f6c72;
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
    padding-top: 6px;
    text-align: center;
    width: 100%}
@media (max-width:1024px) {
    .trending-categories-grid {
    grid-template-columns: repeat(4, 1fr);
}
}@media (max-width:768px) {
    .empty-cart-banner-card {
    flex-direction: column;
    gap: 24px;
    padding: 30px 10px;
    text-align: center;
}
.empty-cart-right-details {
    align-items: center;
}
.empty-cart-right-details h2 {
    font-size: 26px;
}
.trending-categories-grid {
    grid-template-columns: repeat(3, 1fr);
}
}@media (max-width:480px) {
    .trending-categories-grid {
    grid-template-columns: repeat(2, 1fr);
}
}.checkout-page {
    color: #333;
    font-family: Inter, sans-serif;
    margin: 0 auto;
    max-width: 1600px;
    padding: 40px 20px;
}
.checkout-page h1 {
    color: #1a1a1a;
    font-size: 28px;
    margin-bottom: 30px;
}
.checkout-container {
    align-items: flex-start;
    display: flex;
    gap: 40px;
}
.checkout-form {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px #0000000d;
    flex: 2 1;
    padding: 30px;
}
.checkout-form h2 {
    border-bottom: 1px solid #eee;
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
.form-row {
    display: flex;
    gap: 20px;
}
.form-group, .form-row {
    margin-bottom: 20px;
}
.form-group label {
    font-size: 14px;
    margin-bottom: 8px;
}
.form-group input {
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    outline: none;
    padding: 12px;
    transition: border-color .2s;
}
.form-group input:focus {
    border-color: #d11243;
}
.checkout-summary {
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 12px #0000000d;
    flex: 1 1;
    padding: 30px;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}
.checkout-summary h2 {
    border-bottom: 1px solid #ddd;
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
.summary-item {
    display: flex;
    font-size: 15px;
    justify-content: space-between;
    margin-bottom: 15px;
}
.summary-item.total {
    border-top: 1px solid #ddd;
    font-size: 18px;
    font-weight: 700;
    margin-top: 15px;
    padding-top: 15px;
}
.pay-btn {
    background-color: #d11243;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    margin-top: 20px;
    padding: 15px;
    transition: background-color .3s;
    width: 100%}
.pay-btn:hover {
    background-color: #b00d35;
}
.checkout-items {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding-bottom: 15px;
}
.checkout-item {
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    margin-bottom: 10px;
}
.checkout-item-name {
    flex: 1 1;
    overflow: hidden;
    padding-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width:768px) {
    .checkout-container, .form-row {
    flex-direction: column;
}
.form-row {
    gap: 0;
}
}.account-wishlist-page {
    background-color: #f8f9fb;
    font-family: var(--font-family);
    min-height: 80vh;
    padding-bottom: 60px;
}
.account-wishlist-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 16px;
}
.account-nav-item.active .icon {
    color: #49494a;
}
.empty-wishlist-banner {
    align-items: center;
    border-bottom: 1px solid #e9e9eb;
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
}
.empty-wishlist-image-container {
    flex-shrink: 0;
    width: 240px;
}
.empty-wishlist-image-container img {
    height: auto;
    object-fit: contain;
    width: 100%}
.empty-wishlist-details {
    flex-grow: 1;
}
.empty-wishlist-details h2 {
    color: #202020;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 12px;
}
.empty-wishlist-details p {
    color: #5f6c72;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
}
.wishlist-trending-categories h3 {
    color: #202020;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 24px;
}
.trending-category-square-card:hover {
    box-shadow: 0 8px 16px #0000001a;
}
@media (max-width:768px) {
    .empty-wishlist-banner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
}
.trending-categories-grid {
    grid-template-columns: repeat(2, 1fr);
}
}.auth-page {
    display: flex;
    font-family: Inter, Segoe UI, sans-serif;
    min-height: 100vh;
}
.auth-left {
    align-items: center;
    background: linear-gradient(145deg, #1a1f3c, #0f3460 50%, #16213e);
    display: flex;
    flex: 1 1;
    justify-content: center;
    overflow: hidden;
    padding: 60px 50px;
    position: relative;
}
.auth-left:before {
    background: radial-gradient(circle, #6366f133 0, #0000 70%);
    height: 400px;
    right: -100px;
    top: -100px;
    width: 400px;
}
.auth-left:after, .auth-left:before {
    border-radius: 50%;
    content: "";
    position: absolute;
}
.auth-left:after {
    background: radial-gradient(circle, #10b98126 0, #0000 70%);
    bottom: -50px;
    height: 300px;
    left: -50px;
    width: 300px;
}
.auth-brand {
    color: #fff;
    max-width: 420px;
    position: relative;
    z-index: 1;
}
.auth-logo {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 48px;
}
.auth-logo span {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.5px;
}
.auth-tagline h2 {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 16px;
}
.auth-tagline p {
    color: #ffffffb3;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 40px;
}
.auth-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
}
.auth-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.auth-stat strong {
    color: #10b981;
    font-size: 28px;
    font-weight: 800;
}
.auth-stat span {
    color: #fff9;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.auth-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.trust-badge {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffff1a;
    border: 1px solid #ffffff26;
    border-radius: 20px;
    color: #ffffffd9;
    font-size: 13px;
    padding: 6px 14px;
}
.auth-right {
    align-items: center;
    background: #f8fafc;
    display: flex;
    flex: 0 0 480px;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 32px;
}
.auth-card {
    max-width: 420px;
    width: 100%}
.auth-card-header {
    margin-bottom: 28px;
}
.auth-card-header h1 {
    color: #0f172a;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px;
}
.auth-card-header p {
    color: #64748b;
    font-size: 15px;
    margin: 0;
}
.auth-method-toggle {
    background: #e2e8f0;
    border-radius: 12px;
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    padding: 4px;
}
.auth-method-toggle button {
    align-items: center;
    background: #0000;
    border: none;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    flex: 1 1;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    padding: 10px 16px;
    transition: all .2s ease;
}
.auth-method-toggle button.active {
    background: #fff;
    box-shadow: 0 1px 4px #0000001a;
    color: #0f172a;
}
.auth-method-toggle button:hover:not(.active) {
    color: #334155;
}
.auth-error-banner {
    align-items: flex-start;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    display: flex;
    font-size: 14px;
    gap: 10px;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 12px 16px;
}
.auth-error-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.auth-form {
    gap: 18px;
}
.auth-field, .auth-form {
    display: flex;
    flex-direction: column;
}
.auth-field {
    gap: 6px;
}
.auth-field label {
    align-items: center;
    color: #374151;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: space-between;
}
.forgot-link {
    color: #6366f1;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.forgot-link:hover {
    text-decoration: underline;
}
.auth-input-wrap {
    align-items: center;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    padding: 0 14px;
    transition: border-color .2s, box-shadow .2s;
}
.auth-input-wrap:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px #6366f11f;
}
.auth-field.has-error .auth-input-wrap {
    border-color: #ef4444;
}
.auth-field.has-error .auth-input-wrap:focus-within {
    box-shadow: 0 0 0 3px #ef44441f;
}
.input-icon {
    color: #9ca3af;
    flex-shrink: 0;
}
.auth-input-wrap input {
    background: #0000;
    border: none;
    color: #0f172a;
    flex: 1 1;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    padding: 12px 0;
}
.auth-input-wrap input::placeholder {
    color: #9ca3af;
}
.toggle-password {
    align-items: center;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    padding: 4px;
    transition: color .2s;
}
.toggle-password:hover {
    color: #6366f1;
}
.field-error {
    color: #ef4444;
    font-size: 12px;
    font-weight: 500;
}
.field-hint {
    color: #94a3b8;
    font-size: 12px;
}
.phone-input-wrap {
    overflow: hidden;
    padding-left: 0;
}
.phone-prefix {
    background: #f8fafc;
    border-right: 1.5px solid #e2e8f0;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    white-space: nowrap;
}
.send-otp-btn {
    background: #6366f1;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    margin: 4px;
    padding: 8px 14px;
    transition: background .2s;
    white-space: nowrap;
}
.send-otp-btn:hover:not(:disabled) {
    background: #4f46e5;
}
.send-otp-btn:disabled {
    cursor: not-allowed;
    opacity: .6;
}
.otp-sent-msg {
    align-items: center;
    color: #10b981;
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 6px;
    margin-top: -8px;
}
.otp-timer {
    color: #64748b;
}
.resend-link {
    background: none;
    border: none;
    color: #6366f1;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    margin-left: 4px;
    padding: 0;
    text-decoration: underline;
}
.otp-input {
    font-size: 20px!important;
    font-weight: 700!important;
    letter-spacing: .5em!important;
    text-align: center;
}
.auth-submit-btn {
    align-items: center;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    letter-spacing: .2px;
    margin-top: 4px;
    padding: 14px;
    transition: all .2s ease;
    width: 100%}
.auth-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    box-shadow: 0 6px 20px #6366f166;
    transform: translateY(-1px);
}
.auth-submit-btn:disabled {
    cursor: not-allowed;
    opacity: .7;
    transform: none;
}
.btn-spinner {
    animation: spin .7s linear infinite;
    border: 2px solid #ffffff4d;
    border-radius: 50%;
    border-top-color: #fff;
    display: inline-block;
    height: 16px;
    width: 16px;
}
@keyframes spin {
    to {
    transform: rotate(1turn);
}
}.auth-divider {
    align-items: center;
    color: #94a3b8;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 12px;
    letter-spacing: .5px;
    margin: 24px 0;
}
.auth-divider:after, .auth-divider:before {
    background: #e2e8f0;
    content: "";
    flex: 1 1;
    height: 1px;
}
.auth-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.social-btn {
    align-items: center;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    color: #374151;
    cursor: pointer;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 10px;
    justify-content: center;
    padding: 12px 20px;
    transition: all .2s ease;
    width: 100%}
.social-btn:hover {
    background: #f8fafc;
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px #0000000f;
}
.auth-footer-text {
    color: #64748b;
    font-size: 14px;
    margin: 0;
    text-align: center;
}
.auth-link {
    color: #6366f1;
    font-weight: 700;
    text-decoration: none;
}
.auth-link:hover {
    text-decoration: underline;
}
@media (max-width:900px) {
    .auth-left {
    display: none;
}
.auth-right {
    background: #fff;
    flex: 1 1;
    padding: 40px 20px;
}
}@media (max-width:480px) {
    .auth-right {
    padding: 24px 16px;
}
.auth-card-header h1 {
    font-size: 24px;
}
.auth-stats {
    gap: 20px;
}
.auth-stat strong {
    font-size: 22px;
}
}.register-right {
    flex: 0 0 560px;
}
.form-row-two {
    grid-gap: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
}
.register-benefits {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}
.benefit-item {
    align-items: flex-start;
    display: flex;
    gap: 14px;
}
.benefit-icon {
    align-items: center;
    background: #ffffff1a;
    border-radius: 10px;
    display: flex;
    flex-shrink: 0;
    font-size: 22px;
    height: 42px;
    justify-content: center;
    width: 42px;
}
.benefit-item strong {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
}
.benefit-item p {
    color: #fff9;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}
.password-strength {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.strength-bars {
    display: flex;
    flex: 1 1;
    gap: 4px;
}
.strength-bar {
    border-radius: 2px;
    flex: 1 1;
    height: 4px;
    transition: background .3s;
}
.terms-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.checkbox-row {
    align-items: flex-start;
    color: #475569;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    gap: 10px;
    line-height: 1.5;
}
.checkbox-row input[type=checkbox] {
    accent-color: #6366f1;
    cursor: pointer;
    flex-shrink: 0;
    height: 16px;
    margin-top: 2px;
    width: 16px;
}
.auth-success-banner {
    align-items: center;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    color: #166534;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 16px;
}
@media (max-width:900px) {
    .register-right {
    flex: 1 1;
}
}@media (max-width:560px) {
    .form-row-two {
    grid-template-columns: 1fr;
}
.register-right {
    padding: 24px 16px;
}
}.account-profile-page {
    background-color: #f8f9fb;
    font-family: var(--font-family);
    min-height: 80vh;
    padding-bottom: 60px;
    padding-top: 30px;
}
.account-profile-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 16px;
}
.profile-sections-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.profile-form-section {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px #00000005;
    overflow: hidden;
}
.section-title {
    background-color: #fafafb;
    border-bottom: 1px solid #e9e9eb;
    color: #202020;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    padding: 24px 32px;
    text-transform: uppercase;
}
.profile-form-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
}
.form-group-with-btn {
    align-items: flex-end;
    display: flex;
    gap: 16px;
}
.form-group-with-btn .form-group {
    flex-grow: 1;
    max-width: 60%}
.btn-edit-small {
    background-color: #ddf4ff;
    border: none;
    border-radius: 4px;
    color: #202020;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    height: 46px;
    padding: 14px 24px;
    transition: background-color .2s;
}
.btn-edit-small:hover {
    background-color: #c1e8fb;
}
.form-group.half-width {
    flex: none;
    width: calc(50% - 12px);
}
.input-with-icon {
    position: relative;
}
.input-with-icon input {
    padding-right: 40px;
}
.eye-icon {
    color: #89898a;
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width:992px) {
    .account-layout {
    flex-direction: column;
}
.account-sidebar-panel {
    width: 100%}
.form-group-with-btn {
    align-items: flex-start;
    flex-direction: column;
}
.form-group-with-btn .form-group {
    max-width: 100%;
    width: 100%}
}@media (max-width:768px) {
    .form-row-split {
    flex-direction: column;
    gap: 16px;
}
.form-group.half-width {
    width: 100%}
.profile-form-container {
    padding: 24px;
}
.form-actions-row {
    flex-direction: column;
}
.btn-cancel, .btn-save {
    width: 100%}
}.account-orders-page {
    background-color: #f8f9fb;
    font-family: var(--font-family);
    min-height: 80vh;
    padding-bottom: 60px;
    padding-top: 30px;
}
.account-orders-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 16px;
}
.empty-orders-banner {
    align-items: center;
    border-bottom: 1px solid #e9e9eb;
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
}
.empty-orders-image-container {
    flex-shrink: 0;
    width: 240px;
}
.empty-orders-image-container img {
    height: auto;
    object-fit: contain;
    width: 100%}
.empty-orders-details {
    flex-grow: 1;
}
.empty-orders-details h2 {
    color: #202020;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 12px;
}
.empty-orders-details p {
    color: #5f6c72;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
}
.orders-trending-categories h3 {
    color: #202020;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 24px;
}
@media (max-width:768px) {
    .empty-orders-banner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
}
.trending-categories-grid {
    grid-template-columns: repeat(2, 1fr);
}
}.addresses-page {
    background-color: #f9f9f9;
    border-radius: 8px;
    min-height: 500px;
    padding: 24px;
}
.addresses-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}
.addresses-header h2 {
    color: #1a1a1a;
    font-size: 20px;
    margin: 0;
}
.btn-add-new {
    background-color: #df2027;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    padding: 10px 16px;
    transition: background-color .2s;
}
.btn-add-new:hover {
    background-color: #c91c22;
}
.address-form {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0000000d;
    padding: 24px;
}
.form-title {
    color: #333;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 0;
}
.form-grid {
    grid-gap: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
}
.form-group.full-width {
    grid-column: span 2;
}
.form-group label {
    color: #555;
    margin-bottom: 6px;
}
.form-group input[type=text] {
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    padding: 10px;
}
.form-group input[type=text]:focus {
    border-color: #df2027;
    outline: none;
}
.checkbox-group label {
    align-items: center;
    color: #333;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    gap: 8px;
    margin-top: 10px;
}
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}
.btn-cancel {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
    font-weight: 600;
    padding: 10px 20px;
}
.btn-save {
    background-color: #df2027;
    font-weight: 600;
    padding: 10px 24px;
}
.addresses-grid {
    grid-gap: 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.no-addresses {
    background: #fff;
    border-radius: 8px;
    color: #777;
    grid-column: 1/-1;
    padding: 40px;
    text-align: center;
}
.address-card {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    transition: box-shadow .2s, border-color .2s;
}
.address-card:hover {
    border-color: #dcdcdc;
    box-shadow: 0 4px 12px #0000000d;
}
.address-card.is-default {
    background-color: #fffbfb;
    border-color: #df2027;
}
.default-badge {
    background-color: #df2027;
    border-radius: 12px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    left: 20px;
    padding: 4px 8px;
    position: absolute;
    text-transform: uppercase;
    top: -10px;
}
.address-card-header {
    margin-bottom: 12px;
}
.address-card-header h4 {
    color: #1a1a1a;
    font-size: 16px;
    margin: 0 0 4px;
}
.address-card-header .phone {
    color: #666;
    font-size: 13px;
}
.address-card-body {
    margin-bottom: 20px;
}
.address-card-body p {
    color: #444;
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 4px;
}
.address-card-footer {
    align-items: center;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
}
.btn-text {
    background: none;
    border: none;
    color: #06c;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 0;
}
.btn-text:hover {
    text-decoration: underline;
}
.action-links {
    display: flex;
    gap: 16px;
    margin-left: auto;
}
.btn-text.delete {
    color: #df2027;
}
@media (max-width:768px) {
    .form-grid {
    grid-template-columns: 1fr;
}
.form-group.full-width {
    grid-column: 1;
}
}.account-business-page {
    background-color: #f8f9fb;
    font-family: var(--font-family);
    min-height: 80vh;
    padding-bottom: 60px;
    padding-top: 30px;
}
.account-business-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 16px;
}
.business-details-wrapper {
    width: 100%}
.business-details-title {
    border-bottom: 1px solid #e9e9eb;
    color: #202020;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 32px;
    padding-bottom: 16px;
    text-transform: uppercase;
}
.business-details-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.form-row-split {
    display: flex;
    gap: 24px;
}
.form-group {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 8px;
}
.form-group.full-width {
    flex: none;
    width: 100%}
.form-group label {
    color: #49494a;
    font-size: 13px;
    font-weight: 500;
}
.form-group input, .form-group select {
    background-color: #fff;
    border: 1px solid #e9e9eb;
    border-radius: 4px;
    box-sizing: border-box;
    color: #202020;
    font-size: 14px;
    outline: none;
    padding: 14px 16px;
    transition: border-color .2s;
    width: 100%}
.form-group input:focus, .form-group select:focus {
    border-color: #1ca7db;
}
.form-group input.readonly-input {
    background-color: #f8f9fb;
    color: #89898a;
    cursor: not-allowed;
}
.select-wrapper {
    position: relative;
}
.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
}
.select-arrow {
    color: #89898a;
    font-size: 10px;
    pointer-events: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.form-actions-row {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}
.btn-cancel {
    background-color: #ddf4ff;
    border: none;
    border-radius: 4px;
    color: #202020;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 14px 32px;
    transition: background-color .2s;
}
.btn-cancel:hover {
    background-color: #c1e8fb;
}
.btn-save {
    background-color: #5fbae9;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 14px 32px;
    transition: background-color .2s;
}
.btn-save:hover {
    background-color: #4aa5d4;
}
@media (max-width:992px) {
    .account-layout {
    flex-direction: column;
}
.account-sidebar-panel {
    width: 100%}
}@media (max-width:768px) {
    .form-row-split {
    flex-direction: column;
    gap: 16px;
}
.account-main-content {
    padding: 24px;
}
.form-actions-row {
    flex-direction: column;
}
.btn-cancel, .btn-save {
    width: 100%}
}.account-rfqs-page {
    background-color: #f8f9fb;
    font-family: var(--font-family);
    min-height: 80vh;
    padding-bottom: 60px;
    padding-top: 30px;
}
.account-rfqs-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 16px;
}
.account-layout {
    align-items: flex-start;
    display: flex;
    gap: 32px;
}
.account-sidebar-panel {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0000000d;
    flex-shrink: 0;
    overflow: hidden;
    width: 280px;
}
.account-user-header {
    align-items: center;
    background-color: #78c666;
    color: #fff;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 12px;
    padding: 16px 20px;
}
.account-user-header .user-icon {
    stroke: #fff;
}
.account-nav-list {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}
.account-nav-item {
    align-items: center;
    color: #49494a;
    display: flex;
    font-size: 14px;
    gap: 12px;
    padding: 14px 20px;
    text-decoration: none;
    transition: background-color .2s;
}
.account-nav-item:hover {
    background-color: #f8f9fb;
}
.account-nav-item.active {
    color: #49494a;
}
.account-nav-item .icon {
    color: #89898a;
    display: flex;
    font-size: 18px;
    justify-content: center;
    width: 24px;
}
.account-nav-item .green-icon, .account-nav-item.active .icon {
    color: #78c666;
}
.account-main-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px #00000005;
    flex-grow: 1;
    padding: 40px;
}
.empty-rfqs-banner {
    align-items: center;
    border-bottom: 1px solid #e9e9eb;
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
}
.empty-rfqs-image-container {
    flex-shrink: 0;
    width: 240px;
}
.empty-rfqs-image-container img {
    height: auto;
    object-fit: contain;
    width: 100%}
.empty-rfqs-details {
    flex-grow: 1;
}
.empty-rfqs-details h2 {
    color: #202020;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 12px;
}
.empty-rfqs-details p {
    color: #5f6c72;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
}
.start-shopping-btn {
    background-color: #5fbae9;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 24px;
    transition: background-color .2s;
}
.start-shopping-btn:hover {
    background-color: #4aa5d4;
}
.rfqs-trending-categories h3 {
    color: #202020;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 24px;
}
.trending-categories-grid {
    grid-gap: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(6, 1fr);
}
.trending-category-square-card {
    align-items: center;
    background-color: #fff;
    border: 4px solid #ddf4ff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 8px;
    transition: transform .2s;
}
.trending-category-square-card:hover {
    transform: translateY(-4px);
}
.trending-img-box {
    align-items: center;
    display: flex;
    height: 80px;
    justify-content: center;
    margin-bottom: 12px;
    width: 80px;
}
.trending-img-box img {
    height: 100%;
    object-fit: contain;
    width: 100%}
.trending-name-box span {
    color: #202020;
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
@media (max-width:992px) {
    .account-layout {
    flex-direction: column;
}
.account-sidebar-panel {
    width: 100%}
.trending-categories-grid {
    grid-template-columns: repeat(3, 1fr);
}
}@media (max-width:768px) {
    .empty-rfqs-banner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
}
.trending-categories-grid {
    grid-template-columns: repeat(2, 1fr);
}
}.to-page {
    background: #f7f8fa;
    font-family: Inter, sans-serif;
    font-family: var(--font-family, "Inter", sans-serif);
    min-height: 100vh;
}
.to-breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 20px;
}
.to-breadcrumb {
    align-items: center;
    color: #9ca3af;
    display: flex;
    font-size: 12px;
    gap: 6px;
    margin: 0 auto;
    max-width: 1100px;
    padding: 11px 0;
}
.to-breadcrumb a {
    color: #9ca3af;
    text-decoration: none;
}
.to-breadcrumb a:hover {
    color: #4abce8;
}
.to-breadcrumb__current {
    color: #4abce8;
    font-weight: 600;
}
.to-container {
    margin: 0 auto;
    max-width: 1100px;
    padding: 32px 20px 60px;
}
.to-page-header {
    align-items: center;
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
}
.to-page-header__icon {
    align-items: center;
    background: #eff9fe;
    border-radius: 14px;
    display: flex;
    flex-shrink: 0;
    height: 54px;
    justify-content: center;
    width: 54px;
}
.to-page-header__title {
    color: #111827;
    font-size: 24px;
    font-weight: 800;
    margin: 0;
}
.to-page-header__sub {
    color: #6b7280;
    font-size: 13px;
    margin: 2px 0 0;
}
.to-layout {
    align-items: flex-start;
    display: flex;
    gap: 24px;
}
.to-left {
    display: flex;
    flex: 0 0 360px;
    flex-direction: column;
    gap: 14px;
}
.to-right {
    flex: 1 1;
    min-width: 0;
}
.to-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px #0000000f;
    padding: 28px 26px;
}
.to-card__title {
    color: #111827;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
}
.to-card__sub {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 22px;
}
.to-form {
    gap: 16px;
}
.to-form, .to-form__field {
    display: flex;
    flex-direction: column;
}
.to-form__field {
    gap: 6px;
}
.to-form__label {
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}
.to-form__input-wrap {
    align-items: center;
    background: #fafafa;
    border: 1.5px solid #e5e7eb;
    border-radius: 9px;
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    transition: border-color .15s;
}
.to-form__input-wrap:focus-within {
    background: #fff;
    border-color: #4abce8;
}
.to-form__prefix {
    border-right: 1px solid #e5e7eb;
    color: #374151;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    padding-right: 10px;
}
.to-form__input {
    background: #0000;
    border: none;
    color: #111827;
    flex: 1 1;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}
.to-form__input::placeholder {
    color: #9ca3af;
}
.to-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 7px;
    color: #dc2626;
    font-size: 12px;
    gap: 6px;
    padding: 10px 14px;
}
.to-error, .to-form__btn {
    align-items: center;
    display: flex;
}
.to-form__btn {
    background: #4abce8;
    border: none;
    border-radius: 9px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    padding: 13px;
    transition: background .15s, transform .1s;
}
.to-form__btn:hover {
    background: #2aa8d8;
    transform: translateY(-1px);
}
.to-card__divider {
    align-items: center;
    color: #d1d5db;
    display: flex;
    font-size: 12px;
    gap: 12px;
    margin: 18px 0;
}
.to-card__divider:after, .to-card__divider:before {
    background: #e5e7eb;
    content: "";
    flex: 1 1;
    height: 1px;
}
.to-card__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.to-card__link {
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    color: #4abce8;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    padding: 10px 14px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.to-card__link:hover {
    background: #eff9fe;
    border-color: #4abce8;
    color: #4abce8;
}
.to-trust {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px #0000000d;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
}
.to-trust__item {
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    gap: 10px;
}
.to-empty, .to-trust__item {
    align-items: center;
    display: flex;
}
.to-empty {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px #0000000f;
    flex-direction: column;
    gap: 14px;
    padding: 60px 30px;
    text-align: center;
}
.to-empty__icon {
    opacity: .5;
}
.to-empty__title {
    color: #374151;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.to-empty__sub {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
}
.to-result {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.to-status-card {
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    border-radius: 14px;
    padding: 24px 26px;
}
.to-status-card__top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}
.to-status-card__order-id {
    color: #94a3b8;
    font-size: 12px;
    margin: 0 0 6px;
}
.to-status-card__badge {
    background: #4abce8;
    border-radius: 20px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
}
.to-status-card__eta {
    align-items: center;
    background: #81c66226;
    border: 1px solid #81c6624d;
    border-radius: 20px;
    color: #81c862;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    padding: 6px 12px;
}
.to-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.to-progress__bar {
    background: #ffffff26;
    border-radius: 3px;
    height: 6px;
    overflow: hidden;
}
.to-progress__fill {
    background: linear-gradient(90deg, #4abce8, #81c862);
    border-radius: 3px;
    height: 100%;
    transition: width .6s ease;
}
.to-progress__label {
    color: #94a3b8;
    font-size: 11px;
}
.to-order-info {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px #0000000f;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 22px;
}
.to-order-info__row {
    align-items: flex-start;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 10px 0;
}
.to-order-info__row:last-child {
    border-bottom: none;
}
.to-order-info__label {
    color: #9ca3af;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
}
.to-order-info__val {
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}
.to-timeline {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px #0000000f;
    padding: 22px 24px;
}
.to-timeline__title {
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 20px;
}
.to-step {
    display: flex;
    gap: 14px;
}
.to-step__indicator {
    flex-direction: column;
}
.to-step__dot, .to-step__indicator {
    align-items: center;
    display: flex;
    flex-shrink: 0;
}
.to-step__dot {
    background: #f9fafb;
    border: 2.5px solid #e5e7eb;
    border-radius: 50%;
    height: 28px;
    justify-content: center;
    position: relative;
    width: 28px;
    z-index: 1;
}
.to-step--done .to-step__dot {
    background: #81c862;
    border-color: #81c862;
}
.to-step--active .to-step__dot {
    background: #4abce8;
    border-color: #4abce8;
}
.to-step__pulse {
    animation: to-pulse 1.4s ease-in-out infinite;
    background: #fff;
    border-radius: 50%;
    height: 10px;
    width: 10px;
}
@keyframes to-pulse {
    0%, to {
    opacity: 1;
    transform: scale(1);
}
50% {
    opacity: .7;
    transform: scale(1.4);
}
}.to-step__line {
    background: #e5e7eb;
    flex: 1 1;
    margin: 3px 0;
    min-height: 30px;
    width: 2px;
}
.to-step--done .to-step__line {
    background: #81c862;
}
.to-step__content {
    flex: 1 1;
    padding-bottom: 22px;
}
.to-step:last-child .to-step__content {
    padding-bottom: 0;
}
.to-step__label {
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    margin: 3px 0 2px;
}
.to-step--active .to-step__label, .to-step--done .to-step__label {
    color: #111827;
}
.to-step__detail {
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 3px;
}
.to-step__time {
    color: #d1d5db;
    font-size: 11px;
    margin: 0;
}
.to-step--done .to-step__time {
    color: #9ca3af;
}
.to-step--active .to-step__time {
    color: #4abce8;
    font-weight: 600;
}
.to-actions {
    display: flex;
    gap: 12px;
}
.to-actions__btn {
    border-radius: 9px;
    flex: 1 1;
    font-size: 13px;
    font-weight: 700;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    transition: all .15s;
}
.to-actions__btn--outline {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    color: #374151;
}
.to-actions__btn--outline:hover {
    border-color: #4abce8;
    color: #4abce8;
}
.to-actions__btn--primary {
    background: #4abce8;
    border: 1.5px solid #4abce8;
    color: #fff;
}
.to-actions__btn--primary:hover {
    background: #2aa8d8;
    color: #fff;
}
.middle-header__track {
    align-items: center;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 7px;
    color: #374151;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    padding: 6px 12px;
    text-decoration: none;
    transition: border-color .15s, color .15s;
    white-space: nowrap;
}
.middle-header__track:hover {
    border-color: #4abce8;
    color: #4abce8;
}
@media (max-width:900px) {
    .to-layout {
    flex-direction: column;
}
.to-left {
    flex: none;
    width: 100%}
}@media (max-width:480px) {
    .to-container {
    padding: 20px 12px 40px;
}
.to-card {
    padding: 20px 16px;
}
.to-timeline {
    padding: 16px;
}
.to-actions {
    flex-direction: column;
}
.to-page-header__title {
    font-size: 20px;
}
}.about-page {
    background-color: #fff;
    color: #111827;
    padding-bottom: 60px;
}
.about-hero, .about-passion, .about-people, .about-stats, .about-summary, .about-wall {
    background-color: #fff;
    padding: 60px 0;
}
.about-hero__container, .about-passion__container, .about-people__container, .about-stats__container, .about-summary__container, .about-wall__container {
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 40px;
}
.about-hero {
    border-bottom: 1px solid #e5e7eb;
    padding: 80px 0;
    text-align: center;
}
.about-hero__title {
    color: #111827;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 16px;
}
.about-hero__subtitle {
    color: #4abce8;
    font-size: 20px;
    font-weight: 500;
}
.about-summary p {
    color: #4b5563;
    font-size: 18px;
    line-height: 1.8;
    margin: 0 auto 24px;
    max-width: 1000px;
    text-align: center;
}
.about-passion__container {
    align-items: center;
    display: flex;
    gap: 60px;
}
.about-passion__video {
    background-color: #000;
    border-radius: 12px;
    box-shadow: 0 10px 30px #0000001a;
    flex: 1 1;
    height: 400px;
    overflow: hidden;
    position: relative;
    width: 100%}
.about-passion__video iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%}
.about-passion__content {
    flex: 1 1;
}
.about-passion__title {
    color: #111827;
    font-size: 36px;
    margin-bottom: 24px;
}
.about-passion__desc {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.8;
}
.about-wall__header {
    margin-bottom: 48px;
    text-align: center;
}
.about-wall__title {
    color: #111827;
    font-size: 36px;
    margin-bottom: 16px;
}
.about-wall__desc {
    color: #6b7280;
    font-size: 18px;
    margin: 0 auto;
    max-width: 600px;
}
.about-wall__grid {
    grid-gap: 24px;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.wall-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.wall-card:hover {
    border-color: #81c862;
    box-shadow: 0 10px 25px #81c86226;
    transform: translateY(-5px);
}
.wall-card--full {
    grid-column: 1/-1;
    text-align: center;
}
.wall-card__icon {
    font-size: 40px;
    margin-bottom: 20px;
}
.wall-card__date {
    color: #81c862;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}
.wall-card__desc {
    color: #374151;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}
.about-stats {
    background: linear-gradient(135deg, #4abce8, #81c862);
    border: none;
    color: #fff;
}
.about-stats__title {
    color: #fff;
    font-size: 32px;
    line-height: 1.4;
    margin: 0 auto 60px;
    max-width: 800px;
    text-align: center;
}
.about-stats__grid {
    grid-gap: 32px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}
.stat-item__number {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 16px;
}
.stat-item__desc {
    color: #ffffffe6;
    font-size: 15px;
    line-height: 1.6;
}
.about-people__header {
    margin-bottom: 60px;
    text-align: center;
}
.about-people__title {
    color: #111827;
    font-size: 36px;
    margin-bottom: 24px;
}
.about-people__title span {
    color: #4abce8;
}
.about-people__desc {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 800px;
}
.about-people__grid {
    grid-gap: 32px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.person-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: box-shadow .3s ease, border-color .3s ease;
}
.person-card:hover {
    border-color: #4abce8;
    box-shadow: 0 10px 25px #4abce826;
}
.person-card__image-placeholder {
    align-items: center;
    background-color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #81c862;
    color: #9ca3af;
    display: flex;
    font-size: 48px;
    height: 120px;
    justify-content: center;
    margin: 0 auto 24px;
    width: 120px;
}
.person-card__name {
    color: #111827;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
}
.person-card__role {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}
@media (max-width:1024px) {
    .about-passion__container {
    flex-direction: column;
}
.about-passion__video {
    height: 300px;
}
.about-stats__grid {
    grid-template-columns: repeat(2, 1fr);
}
}@media (max-width:768px) {
    .about-hero__title {
    font-size: 36px;
}
.about-stats__grid, .about-wall__grid {
    grid-template-columns: 1fr;
}
}.contact-page {
    background-color: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding: 60px 0 100px;
}
.contact-container {
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 40px;
}
.contact-banner-section {
    align-items: center;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
    padding: 60px;
}
.contact-desc {
    max-width: 500px;
}
.contact-desc h1 {
    color: #111827;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 16px;
}
.contact-desc span {
    color: #81c862;
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
}
.contact-desc p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
}
.contact-img {
    align-items: center;
    background-color: #e5e7eb;
    border-radius: 50%;
    display: flex;
    font-size: 120px;
    height: 300px;
    justify-content: center;
    width: 300px;
}
.contact-help-section {
    margin-bottom: 80px;
}
.contact-flex-container {
    display: flex;
    gap: 32px;
}
.contact-msg-box {
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex: 1 1;
    gap: 24px;
    padding: 40px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.contact-msg-box:hover {
    border-color: #4abce8;
    box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
    transform: translateY(-5px);
}
.contact-icon-section {
    font-size: 48px;
    line-height: 1;
}
.contact-msg-txt {
    flex: 1 1;
}
.contact-msg-txt h2 {
    color: #111827;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px;
}
.contact-msg-txt p {
    color: #6b7280;
    font-size: 16px;
    margin: 0 0 24px;
}
.contact-btn {
    background-color: #4abce8;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color .2s ease;
}
.contact-btn:hover {
    background-color: #38a3cc;
}
.contact-btn-outline {
    background-color: initial;
    border: 2px solid #4abce8;
    color: #4abce8;
}
.contact-btn-outline:hover {
    background-color: #4abce8;
    color: #fff;
}
.contact-ofc-location-container {
    margin-bottom: 60px;
}
.contact-ofc-heading {
    color: #111827;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 40px;
    text-align: center;
}
.contact-locations-grid {
    grid-gap: 32px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(3, 1fr);
}
.contact-location-card {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
}
.contact-location-card span {
    color: #111827;
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}
.contact-location-card .subheading {
    color: #81c862;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.contact-location-card p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
}
.contact-footer-support {
    border-top: 1px solid #e5e7eb;
    padding-top: 40px;
    text-align: center;
}
.contact-customer-support {
    color: #111827;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
}
.contact-call-timing {
    color: #6b7280;
    font-size: 16px;
    margin: 0;
}
@media (max-width:992px) {
    .contact-banner-section {
    flex-direction: column;
    padding: 40px;
    text-align: center;
}
.contact-desc {
    margin-bottom: 40px;
}
.contact-flex-container {
    flex-direction: column;
}
.contact-locations-grid {
    grid-template-columns: 1fr;
}
}.press-page {
    background-color: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding: 60px 0 100px;
}
.press-container {
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 40px;
}
.press-header {
    margin-bottom: 60px;
    text-align: center;
}
.press-title {
    color: #111827;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 16px;
}
.press-subtitle {
    color: #4b5563;
    font-size: 18px;
    margin: 0 auto;
    max-width: 600px;
}
.press-grid {
    grid-gap: 32px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    margin-bottom: 60px;
}
.press-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.press-card:hover {
    border-color: #81c862;
    box-shadow: 0 12px 24px #00000014;
    transform: translateY(-5px);
}
.press-card__image-container {
    align-items: center;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    height: 200px;
    justify-content: center;
    overflow: hidden;
    width: 100%}
.press-card__image {
    height: 100%;
    object-fit: cover;
    width: 100%}
.press-card__placeholder {
    color: #d1d5db;
    font-size: 48px;
}
.press-card__content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    padding: 24px;
}
.press-card__date {
    color: #4abce8;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}
.press-card__title {
    color: #111827;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
    transition: color .2s ease;
}
.press-card:hover .press-card__title {
    color: #4abce8;
}
.press-pagination {
    gap: 8px;
    margin-top: 60px;
}
.press-pagination, .press-pagination__btn {
    align-items: center;
    display: flex;
    justify-content: center;
}
.press-pagination__btn {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #4b5563;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    transition: all .2s ease;
    width: 40px;
}
.press-pagination__btn:hover:not(:disabled) {
    background-color: #f0f9ff;
    border-color: #4abce8;
    color: #4abce8;
}
.press-pagination__btn.active {
    background-color: #4abce8;
    border-color: #4abce8;
    color: #fff;
}
.press-pagination__btn:disabled {
    background-color: #f9fafb;
    cursor: not-allowed;
    opacity: .5;
}
.press-pagination__icon {
    height: 20px;
    width: 20px;
}
@media (max-width:768px) {
    .press-grid {
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.press-title {
    font-size: 28px;
}
}.testimonials-page {
    background-color: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding: 60px 0 100px;
}
.testimonials-container {
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 40px;
}
.testimonials-header {
    margin-bottom: 60px;
    text-align: center;
}
.testimonials-title {
    color: #111827;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 16px;
}
.testimonials-title span {
    color: #4abce8;
}
.testimonials-subtitle {
    color: #4b5563;
    font-size: 18px;
    margin: 0 auto;
    max-width: 600px;
}
.testimonials-grid {
    grid-gap: 32px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
.testimonial-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 32px;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.testimonial-card:hover {
    border-color: #81c862;
    box-shadow: 0 12px 24px #00000014;
    transform: translateY(-5px);
}
.testimonial-card__quote-icon {
    color: #4abce833;
    font-size: 48px;
    line-height: 1;
    position: absolute;
    right: 24px;
    top: 24px;
}
.testimonial-card__content {
    color: #4b5563;
    flex-grow: 1;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}
.testimonial-card__author {
    align-items: center;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 16px;
    margin-top: auto;
    padding-top: 24px;
}
.testimonial-card__avatar {
    align-items: center;
    background-color: #f9fafb;
    border: 2px solid #81c862;
    border-radius: 50%;
    color: #9ca3af;
    display: flex;
    font-size: 20px;
    height: 50px;
    justify-content: center;
    width: 50px;
}
.testimonial-card__author-info {
    display: flex;
    flex-direction: column;
}
.testimonial-card__name {
    color: #111827;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
}
.testimonial-card__location {
    color: #4abce8;
    font-size: 14px;
    margin: 0;
}
.testimonial-card__list {
    margin: 16px 0;
    padding-left: 20px;
}
.testimonial-card__list li {
    margin-bottom: 8px;
}
@media (max-width:768px) {
    .testimonials-grid {
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.testimonials-title {
    font-size: 28px;
}
}.blogs-page {
    background-color: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding: 60px 0 100px;
}
.blogs-container {
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 40px;
}
.blogs-header {
    margin-bottom: 60px;
    text-align: center;
}
.blogs-title {
    color: #111827;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 16px;
}
.blogs-title span {
    color: #81c862;
}
.blogs-subtitle {
    color: #4b5563;
    font-size: 18px;
    margin: 0 auto;
    max-width: 600px;
}
.blogs-grid {
    grid-gap: 32px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    margin-bottom: 60px;
}
.blog-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-card:hover {
    border-color: #4abce8;
    box-shadow: 0 12px 24px #00000014;
    transform: translateY(-5px);
}
.blog-card__image-container {
    align-items: center;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    height: 220px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%}
.blog-card__placeholder {
    color: #d1d5db;
    font-size: 64px;
}
.blog-card__category-badge {
    background-color: #81c862;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    left: 16px;
    padding: 4px 12px;
    position: absolute;
    text-transform: uppercase;
    top: 16px;
}
.blog-card__content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    padding: 24px;
}
.blog-card__meta {
    align-items: center;
    color: #6b7280;
    display: flex;
    font-size: 13px;
    gap: 8px;
    margin-bottom: 12px;
}
.blog-card__meta-separator {
    color: #d1d5db;
}
.blog-card__title {
    color: #111827;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px;
    transition: color .2s ease;
}
.blog-card__title a {
    color: inherit;
    text-decoration: none;
}
.blog-card:hover .blog-card__title {
    color: #4abce8;
}
.blog-card__snippet {
    color: #4b5563;
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}
.blog-card__footer {
    align-items: center;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
}
.blog-card__read-more {
    align-items: center;
    color: #4abce8;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 4px;
    text-decoration: none;
    transition: color .2s ease;
}
.blog-card__read-more:hover {
    color: #81c862;
}
.blog-card__read-more svg {
    height: 16px;
    width: 16px;
}
.blogs-pagination {
    gap: 8px;
    margin-top: 60px;
}
.blogs-pagination, .blogs-pagination__btn {
    align-items: center;
    display: flex;
    justify-content: center;
}
.blogs-pagination__btn {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #4b5563;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    text-decoration: none;
    transition: all .2s ease;
    width: 40px;
}
.blogs-pagination__btn:hover:not(.disabled) {
    background-color: #f0f9ff;
    border-color: #4abce8;
    color: #4abce8;
}
.blogs-pagination__btn.active {
    background-color: #4abce8;
    border-color: #4abce8;
    color: #fff;
}
.blogs-pagination__btn.disabled {
    background-color: #f9fafb;
    cursor: not-allowed;
    opacity: .5;
}
.blogs-pagination__icon {
    height: 20px;
    width: 20px;
}
@media (max-width:768px) {
    .blogs-grid {
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.blogs-title {
    font-size: 28px;
}
}.blog-detail-page {
    background-color: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding: 60px 0 100px;
}
.blog-detail-container {
    margin: 0 auto;
    max-width: 800px;
    padding: 0 40px;
}
.blog-detail-header {
    margin-bottom: 40px;
    text-align: center;
}
.blog-detail-category {
    background-color: #81c862;
    border-radius: 20px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    padding: 6px 16px;
    text-transform: uppercase;
}
.blog-detail-title {
    color: #111827;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 24px;
}
.blog-detail-meta {
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    display: flex;
    font-size: 16px;
    gap: 16px;
    justify-content: center;
    padding-bottom: 40px;
}
.blog-detail-author {
    color: #111827;
    font-weight: 600;
    text-transform: capitalize;
}
.blog-detail-hero {
    align-items: center;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    color: #d1d5db;
    display: flex;
    font-size: 64px;
    height: 400px;
    justify-content: center;
    margin-bottom: 40px;
    width: 100%}
.blog-detail-content {
    color: #374151;
    font-size: 18px;
    line-height: 1.8;
}
.blog-detail-content p {
    margin-bottom: 24px;
}
.blog-detail-content h2 {
    color: #111827;
    font-size: 28px;
    font-weight: 700;
    margin: 40px 0 20px;
}
.blog-detail-content ul {
    margin-bottom: 24px;
    padding-left: 24px;
}
.blog-detail-content li {
    margin-bottom: 12px;
}
.blog-detail-back {
    align-items: center;
    background-color: #f3f4f6;
    border-radius: 8px;
    color: #111827;
    display: inline-flex;
    font-weight: 600;
    gap: 8px;
    margin-top: 60px;
    padding: 12px 24px;
    text-decoration: none;
    transition: all .2s ease;
}
.blog-detail-back:hover {
    background-color: #e5e7eb;
    color: #4abce8;
}
.blog-detail-back svg {
    height: 20px;
    width: 20px;
}
.blog-not-found {
    padding: 100px 0;
    text-align: center;
}
.blog-not-found h1 {
    color: #111827;
    font-size: 48px;
    margin-bottom: 24px;
}
.blog-not-found p {
    color: #6b7280;
    font-size: 18px;
    margin-bottom: 32px;
}
@media (max-width:768px) {
    .blog-detail-container {
    padding: 0 24px;
}
.blog-detail-title {
    font-size: 32px;
}
.blog-detail-hero {
    height: 250px;
}
}.articles-page {
    background-color: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding: 60px 0 100px;
}
.articles-container {
    margin: 0 auto;
    max-width: 1520px;
    padding: 0 40px;
}
.articles-header {
    margin-bottom: 60px;
    text-align: center;
}
.articles-title {
    color: #111827;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 16px;
}
.articles-title span {
    color: #81c862;
}
.articles-subtitle {
    color: #4b5563;
    font-size: 18px;
    margin: 0 auto;
    max-width: 600px;
}
.articles-grid {
    grid-gap: 32px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    margin-bottom: 60px;
}
.article-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.article-card:hover {
    border-color: #4abce8;
    box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
    transform: translateY(-5px);
}
.article-card__image-container {
    align-items: center;
    background-color: #f3f4f6;
    display: flex;
    height: 200px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.article-card__placeholder {
    color: #d1d5db;
    font-size: 48px;
    transition: transform .3s ease;
}
.article-card:hover .article-card__placeholder {
    transform: scale(1.1);
}
.article-card__category-badge {
    background-color: #81c862;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    left: 16px;
    padding: 4px 12px;
    position: absolute;
    text-transform: uppercase;
    top: 16px;
    z-index: 10;
}
.article-card__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px;
}
.article-card__meta {
    align-items: center;
    color: #6b7280;
    display: flex;
    font-size: 14px;
    margin-bottom: 12px;
}
.article-card__meta-separator {
    margin: 0 8px;
}
.article-card__title {
    color: #111827;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 16px;
}
.article-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}
.article-card:hover .article-card__title a {
    color: #4abce8;
}
.article-card__footer {
    border-top: 1px solid #f3f4f6;
    margin-top: auto;
    padding-top: 16px;
}
.article-card__read-more {
    align-items: center;
    color: #4abce8;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}
.article-card__read-more svg {
    height: 16px;
    margin-left: 4px;
    transition: transform .2s ease;
    width: 16px;
}
.article-card:hover .article-card__read-more {
    color: #111827;
}
.article-card:hover .article-card__read-more svg {
    transform: translateX(4px);
}
.articles-load-more {
    text-align: center;
}
.articles-load-more-btn {
    align-items: center;
    background-color: #fff;
    border: 2px solid #4abce8;
    border-radius: 8px;
    color: #4abce8;
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    padding: 12px 32px;
    transition: all .2s ease;
}
.articles-load-more-btn:hover {
    background-color: #4abce8;
    color: #fff;
}
@media (max-width:768px) {
    .articles-container {
    padding: 0 20px;
}
.articles-grid {
    grid-template-columns: 1fr;
}
}.article-detail-page {
    background-color: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding: 60px 0 100px;
}
.article-detail-container {
    margin: 0 auto;
    max-width: 800px;
    padding: 0 40px;
}
.article-detail-header {
    margin-bottom: 40px;
}
.article-detail-category {
    background-color: #81c862;
    border-radius: 20px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    padding: 6px 16px;
    text-transform: uppercase;
}
.article-detail-title {
    color: #111827;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 24px;
}
.article-detail-meta {
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    display: flex;
    font-size: 16px;
    gap: 16px;
    padding-bottom: 40px;
}
.article-detail-author {
    color: #111827;
    font-weight: 600;
    text-transform: capitalize;
}
.article-detail-hero {
    align-items: center;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    color: #d1d5db;
    display: flex;
    font-size: 64px;
    height: 400px;
    justify-content: center;
    margin-bottom: 40px;
    width: 100%}
.article-detail-content {
    color: #374151;
    font-size: 18px;
    line-height: 1.8;
}
.article-detail-content p {
    margin-bottom: 24px;
}
.article-detail-content h2, .article-detail-content h3 {
    color: #111827;
    font-weight: 700;
    margin: 40px 0 20px;
}
.article-detail-content h2 {
    font-size: 28px;
}
.article-detail-content h3 {
    font-size: 24px;
}
.article-detail-content ul {
    margin-bottom: 24px;
    padding-left: 24px;
}
.article-detail-content li {
    margin-bottom: 12px;
}
.article-detail-author-box {
    align-items: flex-start;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    gap: 24px;
    margin-top: 60px;
    padding: 32px;
}
.article-detail-author-avatar {
    align-items: center;
    background-color: #81c862;
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 32px;
    font-weight: 700;
    height: 80px;
    justify-content: center;
    width: 80px;
}
.article-detail-author-info h4 {
    color: #111827;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}
.article-detail-author-info p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}
.article-detail-back {
    align-items: center;
    background-color: #f3f4f6;
    border-radius: 8px;
    color: #111827;
    display: inline-flex;
    font-weight: 600;
    gap: 8px;
    margin-top: 40px;
    padding: 12px 24px;
    text-decoration: none;
    transition: all .2s ease;
}
.article-detail-back:hover {
    background-color: #e5e7eb;
    color: #4abce8;
}
.article-detail-back svg {
    height: 20px;
    width: 20px;
}
.article-not-found {
    padding: 100px 0;
    text-align: center;
}
.article-not-found h1 {
    color: #111827;
    font-size: 48px;
    margin-bottom: 24px;
}
.article-not-found p {
    color: #6b7280;
    font-size: 18px;
    margin-bottom: 32px;
}
@media (max-width:768px) {
    .article-detail-container {
    padding: 0 24px;
}
.article-detail-title {
    font-size: 32px;
}
.article-detail-hero {
    height: 250px;
}
.article-detail-author-box {
    align-items: center;
    flex-direction: column;
    text-align: center;
}
}.faq-page {
    background-color: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding: 60px 0 100px;
}
.faq-container {
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 40px;
}
.faq-header {
    margin-bottom: 60px;
    text-align: center;
}
.faq-header h1 {
    color: #111827;
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 16px;
}
.faq-header p {
    color: #6b7280;
    font-size: 18px;
    margin: 0 auto;
    max-width: 600px;
}
.faq-tabs-container {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
.faq-tabs-container::-webkit-scrollbar {
    height: 6px;
}
.faq-tabs-container::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    border-radius: 4px;
}
.faq-tab {
    background-color: #f3f4f6;
    border: 2px solid #0000;
    border-radius: 8px;
    color: #4b5563;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    transition: all .2s ease;
    white-space: nowrap;
}
.faq-tab:hover {
    background-color: #e5e7eb;
}
.faq-tab.selectedTab {
    background-color: #fff;
    border-color: #4abce8;
    box-shadow: 0 4px 6px -1px #0000001a;
    color: #4abce8;
}
.faq-content-wrap {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 40px;
}
.faq-heading-txt {
    color: #111827;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-top: 24px;
}
.faq-heading-txt.pt-0 {
    padding-top: 0;
}
.faq-text-wrap p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 16px;
}
.faq-list-data {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    padding-left: 24px;
}
.faq-list-data span {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
    position: relative;
}
.faq-list-data span:before {
    color: #81c862;
    content: "•";
    font-weight: 700;
    left: -20px;
    position: absolute;
}
.faq-table-wrap {
    margin-bottom: 24px;
    overflow-x: auto;
}
.faq-text-wrap table {
    border-collapse: collapse;
    margin-top: 16px;
    width: 100%}
.faq-text-wrap table td, .faq-text-wrap table th {
    border: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 15px;
    padding: 12px 16px;
    text-align: left;
}
.faq-text-wrap table tr:first-child td {
    background-color: #f9fafb;
    color: #111827;
    font-weight: 600;
}
@media (max-width:768px) {
    .faq-container {
    padding: 0 20px;
}
.faq-content-wrap {
    padding: 24px;
}
}.legal-page {
    background-color: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding: 60px 0 100px;
}
.legal-container {
    margin: 0 auto;
    max-width: 900px;
    padding: 0 40px;
}
.legal-header {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 40px;
    padding-bottom: 40px;
    text-align: center;
}
.legal-title {
    color: #111827;
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 16px;
}
.legal-subtitle {
    color: #6b7280;
    font-size: 16px;
}
.legal-content {
    color: #374151;
    font-size: 16px;
    line-height: 1.8;
}
.legal-content h2 {
    color: #111827;
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 16px;
}
.legal-content h3 {
    color: #111827;
    font-size: 20px;
    font-weight: 600;
    margin: 32px 0 16px;
}
.legal-content p, .legal-content ul {
    margin-bottom: 24px;
}
.legal-content ul {
    padding-left: 24px;
}
.legal-content li {
    list-style-type: none;
    margin-bottom: 12px;
    position: relative;
}
.legal-content li:before {
    color: #81c862;
    content: "•";
    font-weight: 700;
    left: -20px;
    position: absolute;
}
.legal-table-wrap {
    margin-bottom: 32px;
    overflow-x: auto;
}
.legal-content table {
    border-collapse: collapse;
    margin-top: 16px;
    width: 100%}
.legal-content table td, .legal-content table th {
    border: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 15px;
    padding: 12px 16px;
    text-align: left;
}
.legal-content table tr:first-child td {
    background-color: #f9fafb;
    color: #111827;
    font-weight: 600;
}
@media (max-width:768px) {
    .legal-container {
    padding: 0 20px;
}
.legal-title {
    font-size: 32px;
}
}.popular-search-page {
    background-color: #fff;
    min-height: calc(100vh - 200px);
    padding: 60px 0 100px;
}
.popular-search-container {
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 40px;
}
.popular-search-header {
    margin-bottom: 48px;
    text-align: center;
}
.popular-search-header h1 {
    color: #111827;
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 16px;
}
.popular-search-header p {
    color: #6b7280;
    font-size: 18px;
    margin: 0;
}
.popular-search-filter {
    margin: 0 auto 48px;
    max-width: 600px;
    position: relative;
}
.popular-search-filter input {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    box-sizing: border-box;
    color: #111827;
    font-size: 16px;
    outline: none;
    padding: 14px 20px 14px 48px;
    transition: border-color .2s;
    width: 100%}
.popular-search-filter input:focus {
    background: #fff;
    border-color: #4abce8;
}
.popular-search-filter-icon {
    color: #9ca3af;
    font-size: 18px;
    left: 16px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.popular-search-count {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 40px;
    text-align: center;
}
.popular-search-count span {
    color: #4abce8;
    font-weight: 600;
}
.popular-search-grid {
    grid-gap: 24px;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.popular-search-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    transition: box-shadow .2s, border-color .2s;
}
.popular-search-card:hover {
    border-color: #4abce8;
    box-shadow: 0 4px 16px #00000014;
}
.popular-search-card-heading {
    border-bottom: 2px solid #81c862;
    color: #111827;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 12px;
}
.popular-search-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.popular-search-link {
    background: #f3f4f6;
    border-radius: 100px;
    color: #4b5563;
    font-size: 13px;
    padding: 4px 10px;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.popular-search-link:hover {
    background: #4abce8;
    color: #fff;
}
.no-results {
    color: #6b7280;
    font-size: 18px;
    padding: 80px 20px;
    text-align: center;
}
@media (max-width:768px) {
    .popular-search-container {
    padding: 0 20px;
}
.popular-search-header h1 {
    font-size: 32px;
}
.popular-search-grid {
    grid-template-columns: 1fr;
}
}.bestdeal-page {
    background-color: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding-bottom: 80px;
}
.bestdeal-hero {
    background: linear-gradient(135deg, #111827, #1f2937);
    padding: 60px 0;
}
.bestdeal-hero-inner {
    align-items: center;
    display: flex;
    gap: 40px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 40px;
}
.bestdeal-hero-text h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 16px;
}
.bestdeal-hero-text h1 span {
    color: #81c862;
}
.bestdeal-hero-text p {
    color: #9ca3af;
    font-size: 18px;
    margin: 0 0 32px;
}
.bestdeal-hero-badge {
    align-items: center;
    background: #ffffff14;
    border: 1px solid #ffffff26;
    border-radius: 100px;
    color: #fff;
    display: inline-flex;
    font-size: 15px;
    font-weight: 500;
    gap: 12px;
    margin-bottom: 32px;
    padding: 10px 20px;
}
.bestdeal-hero-badge-dot {
    animation: pulse 2s infinite;
    background: #81c862;
    border-radius: 50%;
    height: 8px;
    width: 8px;
}
@keyframes pulse {
    0%, to {
    opacity: 1;
}
50% {
    opacity: .4;
}
}.bestdeal-hero-cta {
    background: linear-gradient(135deg, #4abce8, #2aa8d8);
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 32px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.bestdeal-hero-cta:hover {
    box-shadow: 0 8px 24px #4abce866;
    transform: translateY(-2px);
}
.bestdeal-hero-gift {
    background: linear-gradient(135deg, #81c86226, #4abce826);
    border: 1px solid #ffffff1a;
    border-radius: 20px;
    min-width: 240px;
    padding: 32px;
    text-align: center;
}
.bestdeal-hero-gift-icon {
    font-size: 64px;
    margin-bottom: 16px;
}
.bestdeal-hero-gift h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}
.bestdeal-hero-gift p {
    color: #9ca3af;
    font-size: 14px;
    margin: 0 0 16px;
}
.bestdeal-hero-gift-btn {
    background: #81c862;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    text-decoration: none;
    transition: opacity .2s;
}
.bestdeal-hero-gift-btn:hover {
    opacity: .85;
}
.bestdeal-section {
    margin: 0 auto;
    max-width: 1600px;
    padding: 60px 40px 0;
}
.bestdeal-section-header {
    margin-bottom: 32px;
}
.bestdeal-section-header h2 {
    color: #111827;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .5px;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.bestdeal-section-header .underline {
    background: linear-gradient(90deg, #81c862, #4abce8);
    border-radius: 2px;
    height: 4px;
    width: 60px;
}
.bestdeal-brands-grid {
    grid-gap: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}
.bestdeal-brand-card {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 100px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    transition: all .2s;
}
.bestdeal-brand-card:hover {
    border-color: #4abce8;
    box-shadow: 0 4px 20px #4abce826;
    transform: translateY(-2px);
}
.bestdeal-brand-logo {
    font-size: 32px;
}
.bestdeal-brand-name {
    color: #374151;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
}
.bestdeal-brand-tag {
    background: #f3f4f6;
    border-radius: 100px;
    color: #6b7280;
    font-size: 11px;
    padding: 2px 8px;
}
.bestdeal-categories-grid {
    grid-gap: 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
}
.bestdeal-category-card {
    align-items: flex-end;
    border-radius: 16px;
    display: block;
    display: flex;
    min-height: 220px;
    overflow: hidden;
    padding: 24px;
    position: relative;
    text-decoration: none;
    transition: transform .2s;
}
.bestdeal-category-card:hover {
    transform: scale(1.01);
}
.bestdeal-category-card:before {
    background: linear-gradient(0deg, #000000a6 0, #0000001a 60%);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}
.bestdeal-category-card-bg {
    align-items: center;
    display: flex;
    font-size: 80px;
    inset: 0;
    justify-content: center;
    position: absolute;
}
.bestdeal-category-content {
    position: relative;
    z-index: 2;
}
.bestdeal-category-content h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
}
.bestdeal-category-content p {
    color: #fffc;
    font-size: 13px;
    margin: 0 0 12px;
}
.bestdeal-category-content span {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #fff3;
    border: 1px solid #ffffff4d;
    border-radius: 100px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
}
.bestdeal-shop-brands {
    grid-gap: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(6, 1fr);
}
.bestdeal-shop-brand {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    text-decoration: none;
    transition: all .2s;
}
.bestdeal-shop-brand:hover {
    border-color: #81c862;
    box-shadow: 0 4px 14px #81c86233;
    transform: translateY(-2px);
}
.bestdeal-shop-brand-icon {
    font-size: 28px;
    margin-bottom: 6px;
}
.bestdeal-shop-brand-name {
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}
.bestdeal-bottom-banner {
    margin: 60px auto 0;
    max-width: 1600px;
    padding: 0 40px;
}
.bestdeal-bottom-inner {
    align-items: center;
    background: linear-gradient(135deg, #111827, #1f2937);
    border-radius: 20px;
    display: flex;
    gap: 32px;
    justify-content: space-between;
    padding: 48px;
}
.bestdeal-bottom-inner h2 {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 12px;
}
.bestdeal-bottom-inner p {
    color: #9ca3af;
    font-size: 16px;
    margin: 0;
}
.bestdeal-bottom-cta {
    background: linear-gradient(135deg, #81c862, #5eab3d);
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 32px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    white-space: nowrap;
}
.bestdeal-bottom-cta:hover {
    box-shadow: 0 8px 24px #81c86266;
    transform: translateY(-2px);
}
@media (max-width:900px) {
    .bestdeal-hero-inner {
    flex-direction: column;
}
.bestdeal-hero-text h1 {
    font-size: 36px;
}
.bestdeal-brands-grid {
    grid-template-columns: repeat(2, 1fr);
}
.bestdeal-categories-grid {
    grid-template-columns: 1fr;
}
.bestdeal-shop-brands {
    grid-template-columns: repeat(3, 1fr);
}
.bestdeal-bottom-inner {
    flex-direction: column;
    text-align: center;
}
.bestdeal-section {
    padding: 40px 20px 0;
}
.bestdeal-bottom-banner, .bestdeal-hero-inner {
    padding: 0 20px;
}
}.industry-store-page {
    background: #fff;
    color: #111827;
    min-height: calc(100vh - 200px);
    padding-bottom: 80px;
}
.is-hero {
    background: linear-gradient(135deg, #111827, #1f2937 60%, #0d3349);
    padding: 72px 0;
}
.is-hero-inner {
    grid-gap: 60px;
    align-items: center;
    display: grid;
    gap: 60px;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 40px;
}
.is-hero-image {
    border-radius: 16px;
    box-shadow: 0 24px 60px #0006;
    overflow: hidden;
    position: relative;
}
.is-hero-image-placeholder {
    align-items: center;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #1a3a5c, #0d6efd33);
    display: flex;
    font-size: 120px;
    justify-content: center;
    width: 100%}
.is-hero-text {
    color: #fff;
}
.is-hero-text .badge {
    align-items: center;
    background: #81c86226;
    border: 1px solid #81c86266;
    border-radius: 100px;
    color: #81c862;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: .5px;
    margin-bottom: 24px;
    padding: 6px 14px;
    text-transform: uppercase;
}
.is-hero-text h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px;
}
.is-hero-text h1 span {
    color: #4abce8;
}
.is-hero-text p {
    color: #9ca3af;
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 36px;
}
.is-hero-stats {
    display: flex;
    gap: 32px;
}
.is-hero-stat {
    text-align: center;
}
.is-hero-stat-value {
    color: #81c862;
    font-size: 28px;
    font-weight: 800;
}
.is-hero-stat-label {
    color: #6b7280;
    font-size: 12px;
    letter-spacing: .5px;
    margin-top: 4px;
    text-transform: uppercase;
}
.is-section {
    margin: 0 auto;
    max-width: 1600px;
    padding: 64px 40px 0;
}
.is-section-header {
    margin-bottom: 48px;
    text-align: center;
}
.is-section-header h2 {
    color: #111827;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 12px;
}
.is-section-header p {
    color: #6b7280;
    font-size: 16px;
    margin: 0;
}
.is-section-header .underline {
    background: linear-gradient(90deg, #81c862, #4abce8);
    border-radius: 2px;
    height: 4px;
    margin: 16px auto 0;
    width: 60px;
}
.is-grid {
    grid-gap: 24px;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
}
.is-card {
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 280px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
}
.is-card:hover {
    box-shadow: 0 16px 48px #0003;
    transform: translateY(-4px);
}
.is-card-bg {
    align-items: center;
    display: flex;
    font-size: 96px;
    inset: 0;
    justify-content: center;
    position: absolute;
    transition: transform .3s;
}
.is-card:hover .is-card-bg {
    transform: scale(1.08);
}
.is-card:after {
    background: linear-gradient(0deg, #000000b8 0, #00000014 55%);
    content: "";
    inset: 0;
    position: absolute;
}
.is-card-content {
    padding: 28px;
    position: relative;
    z-index: 2;
}
.is-card-content h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
}
.is-card-content p {
    color: #ffffffbf;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
}
.is-card-btn {
    align-items: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #ffffff26;
    border: 1px solid #ffffff4d;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    padding: 10px 20px;
    transition: background .2s;
}
.is-card:hover .is-card-btn {
    background: #81c862;
    border-color: #81c862;
}
.is-why {
    margin: 64px auto 0;
    max-width: 1600px;
    padding: 0 40px;
}
.is-why-grid {
    grid-gap: 1px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}
.is-why-item {
    background: #fff;
    padding: 32px 24px;
    text-align: center;
}
.is-why-icon {
    font-size: 36px;
    margin-bottom: 12px;
}
.is-why-title {
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}
.is-why-desc {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}
.is-cta {
    margin: 64px auto 0;
    max-width: 1600px;
    padding: 0 40px;
}
.is-cta-inner {
    align-items: center;
    background: linear-gradient(135deg, #111827, #1f2937);
    border-radius: 20px;
    display: flex;
    gap: 32px;
    justify-content: space-between;
    padding: 52px 60px;
}
.is-cta-inner h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 10px;
}
.is-cta-inner p {
    color: #9ca3af;
    font-size: 15px;
    margin: 0;
}
.is-cta-btn {
    background: linear-gradient(135deg, #81c862, #5eab3d);
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 32px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    white-space: nowrap;
}
.is-cta-btn:hover {
    box-shadow: 0 8px 24px #81c86266;
    transform: translateY(-2px);
}
@media (max-width:900px) {
    .is-hero-inner {
    gap: 40px;
    grid-template-columns: 1fr;
}
.is-hero-text h1 {
    font-size: 34px;
}
.is-grid {
    grid-template-columns: 1fr;
}
.is-why-grid {
    grid-template-columns: repeat(2, 1fr);
}
.is-cta-inner {
    flex-direction: column;
    padding: 40px;
    text-align: center;
}
.is-section {
    padding: 48px 20px 0;
}
.is-cta, .is-hero-inner, .is-why {
    padding: 0 20px;
}
}.b2b-page {
    background: #f9fafb;
    min-height: calc(100vh - 200px);
    padding-bottom: 80px;
}
.b2b-hero {
    background: linear-gradient(135deg, #111827, #1e3a5f);
    padding: 64px 0;
}
.b2b-hero-inner {
    align-items: center;
    display: flex;
    gap: 48px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 40px;
}
.b2b-hero-text h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 16px;
}
.b2b-hero-text h1 span {
    color: #81c862;
}
.b2b-hero-text p {
    color: #9ca3af;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 32px;
    max-width: 520px;
}
.b2b-hero-cta {
    background: linear-gradient(135deg, #4abce8, #2aa8d8);
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 28px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.b2b-hero-cta:hover {
    box-shadow: 0 8px 20px #4abce866;
    transform: translateY(-2px);
}
.b2b-hero-box {
    background: #ffffff0f;
    border: 1px solid #ffffff1f;
    border-radius: 16px;
    font-size: 60px;
    min-width: 200px;
    padding: 32px;
    text-align: center;
}
.b2b-stats {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}
.b2b-stats-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 40px;
}
.b2b-stat {
    border-right: 1px solid #e5e7eb;
    padding: 28px 24px;
    text-align: center;
}
.b2b-stat:last-child {
    border-right: none;
}
.b2b-stat-value {
    color: #81c862;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 4px;
}
.b2b-breadcrumb, .b2b-stat-label {
    color: #6b7280;
    font-size: 13px;
}
.b2b-breadcrumb {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0 auto;
    max-width: 1600px;
    padding: 16px 40px;
}
.b2b-breadcrumb a {
    color: #4abce8;
    text-decoration: none;
}
.b2b-breadcrumb a:hover {
    text-decoration: underline;
}
.b2b-main {
    grid-gap: 24px;
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: 240px 1fr;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 40px 40px;
}
.b2b-sidebar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}
.b2b-sidebar-header {
    border-bottom: 1px solid #e5e7eb;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    padding: 16px 20px;
}
.b2b-sidebar-header span {
    color: #4abce8;
    font-weight: 600;
}
.b2b-cat-list {
    max-height: 520px;
    overflow-y: auto;
    padding: 8px 0;
}
.b2b-cat-list::-webkit-scrollbar {
    width: 4px;
}
.b2b-cat-list::-webkit-scrollbar-track {
    background: #f3f4f6;
}
.b2b-cat-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}
.b2b-cat-item {
    color: #4b5563;
    cursor: pointer;
    font-size: 13px;
    padding: 9px 20px;
    transition: all .15s;
    -webkit-user-select: none;
    user-select: none;
}
.b2b-cat-item:hover {
    background: #f0f9ff;
    color: #4abce8;
}
.b2b-cat-item.active {
    background: #eff6ff;
    border-left: 3px solid #4abce8;
    color: #4abce8;
    font-weight: 600;
}
.b2b-search-bar {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    margin-bottom: 20px;
    overflow: hidden;
}
.b2b-search-bar input {
    background: #0000;
    border: none;
    color: #111827;
    flex: 1 1;
    font-size: 15px;
    outline: none;
    padding: 14px 20px;
}
.b2b-search-bar button {
    background: #4abce8;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    padding: 14px 20px;
    transition: background .2s;
}
.b2b-search-bar button:hover {
    background: #2aa8d8;
}
.b2b-leads-header {
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}
.b2b-leads-header span {
    color: #4abce8;
}
.b2b-rfq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.b2b-rfq-card {
    grid-gap: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: grid;
    gap: 16px;
    grid-template-columns: 80px 1fr;
    padding: 16px;
    transition: box-shadow .2s, border-color .2s;
}
.b2b-rfq-card:hover {
    border-color: #4abce8;
    box-shadow: 0 4px 16px #00000012;
}
.b2b-rfq-img {
    align-items: center;
    background: #f3f4f6;
    border-radius: 8px;
    display: flex;
    flex-shrink: 0;
    font-size: 32px;
    height: 80px;
    justify-content: center;
    overflow: hidden;
    width: 80px;
}
.b2b-rfq-img img {
    height: 100%;
    object-fit: contain;
    width: 100%}
.b2b-rfq-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.b2b-rfq-top {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}
.b2b-rfq-category {
    color: #6b7280;
    font-size: 12px;
    margin: 0;
}
.b2b-rfq-brand {
    color: #4abce8;
    font-size: 12px;
    font-weight: 600;
}
.b2b-supply-btn {
    background: #81c862;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 8px 16px;
    transition: background .2s, transform .15s;
}
.b2b-supply-btn:hover {
    background: #5eab3d;
    transform: scale(1.02);
}
.b2b-rfq-name {
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}
.b2b-rfq-footer {
    align-items: center;
    color: #6b7280;
    display: flex;
    font-size: 12px;
    gap: 16px;
}
.b2b-rfq-qty {
    background: #f3f4f6;
    border-radius: 100px;
    color: #374151;
    font-weight: 600;
    padding: 3px 10px;
}
.b2b-rfq-time {
    align-items: center;
    display: flex;
    gap: 4px;
}
.b2b-load-more {
    margin-top: 24px;
    text-align: center;
}
.b2b-load-more button {
    background: #4abce8;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 12px 40px;
    transition: background .2s, transform .15s;
}
.b2b-load-more button:hover {
    background: #2aa8d8;
    transform: translateY(-1px);
}
@media (max-width:900px) {
    .b2b-main {
    grid-template-columns: 1fr;
    padding: 0 20px 40px;
}
.b2b-hero-inner {
    flex-direction: column;
    padding: 0 20px;
}
.b2b-hero-text h1 {
    font-size: 28px;
}
.b2b-stats-inner {
    grid-template-columns: 1fr;
}
.b2b-stat {
    border-bottom: 1px solid #e5e7eb;
    border-right: none;
}
.b2b-breadcrumb {
    padding: 16px 20px;
}
.b2b-sidebar {
    position: static;
}
}.not-found {
    background: var(--background-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.not-found__container {
    align-items: center;
    display: flex;
    flex: 1 1;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-xl);
}
.not-found__content {
    max-width: 500px;
    text-align: center;
}
.not-found__error-code {
    color: var(--text-primary);
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-xl);
}
.not-found__title {
    color: var(--text-color);
    font-size: var(--font-size-3xl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}
.not-found__description {
    color: var(--text-light);
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin-bottom: var(--spacing-2xl);
}
.not-found__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
}
@media (max-width:480px) {
    .not-found__error-code {
    font-size: 80px;
}
.not-found__title {
    font-size: var(--font-size-2xl);
}
.not-found__description {
    font-size: var(--font-size-sm);
}
.not-found__actions {
    align-items: center;
    flex-direction: column;
}
.not-found__actions .btn {
    width: 200px;
}
}.hsl-page {
    background: #f7f8fa;
    font-family: Inter, sans-serif;
    font-family: var(--font-family, "Inter", sans-serif);
    min-height: 100vh;
}
.hsl-breadcrumb-wrap {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 20px;
}
.hsl-breadcrumb {
    align-items: center;
    color: #9ca3af;
    display: flex;
    font-size: 12px;
    gap: 6px;
    margin: 0 auto;
    max-width: 1600px;
    padding: 12px 0;
}
.hsl-breadcrumb a {
    color: #9ca3af;
    text-decoration: none;
}
.hsl-breadcrumb a:hover {
    color: #4abce8;
}
.hsl-breadcrumb__current {
    color: #4abce8;
    font-weight: 600;
}
.hsl-hero {
    align-items: center;
    background: linear-gradient(135deg, #0f172a, #1e3a5f 50%, #1a2f4a);
    display: flex;
    gap: 60px;
    justify-content: center;
    min-height: 400px;
    overflow: hidden;
    padding: 60px 20px;
    position: relative;
}
.hsl-hero:before {
    background: radial-gradient(ellipse at 70% 50%, #4abce81f 0, #0000 60%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}
.hsl-hero__content {
    max-width: 520px;
    z-index: 2;
}
.hsl-hero__tag {
    align-items: center;
    background: #4abce826;
    border: 1px solid #4abce84d;
    border-radius: 20px;
    color: #4abce8;
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    gap: 6px;
    letter-spacing: .04em;
    margin-bottom: 18px;
    padding: 5px 12px;
}
.hsl-hero__title {
    color: #fff;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 16px;
}
.hsl-hero__title span {
    color: #4abce8;
}
.hsl-hero__sub {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 28px;
}
.hsl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}
.hsl-hero__cta-primary {
    background: #4abce8;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 28px;
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.hsl-hero__cta-primary:hover {
    background: #2aa8d8;
    transform: translateY(-1px);
}
.hsl-hero__cta-secondary {
    background: #0000;
    border: 1.5px solid #ffffff4d;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 28px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.hsl-hero__cta-secondary:hover {
    background: #4abce81a;
    border-color: #4abce8;
    color: #fff;
}
.hsl-hero__stats {
    align-items: center;
    color: #fff;
    display: flex;
    gap: 20px;
}
.hsl-hero__stats>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hsl-hero__stats strong {
    font-size: 22px;
    font-weight: 800;
}
.hsl-hero__stats span {
    color: #94a3b8;
    font-size: 11px;
}
.hsl-hero__stat-div {
    background: #fff3;
    height: 32px;
    width: 1px;
}
.hsl-hero__visual {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.hsl-hero__cam-ring {
    align-items: center;
    background: radial-gradient(circle, #4abce826 0, #0000 70%);
    border: 1.5px solid #4abce833;
    border-radius: 50%;
    display: flex;
    height: 260px;
    justify-content: center;
    width: 260px;
}
.hsl-hero__cam {
    animation: hsl-float 3.5s ease-in-out infinite;
    filter: drop-shadow(0 8px 32px rgba(74, 188, 232, .4));
    height: 200px;
    object-fit: contain;
    width: 200px;
}
@keyframes hsl-float {
    0%, to {
    transform: translateY(0);
}
50% {
    transform: translateY(-12px);
}
}.hsl-hero__badge-1, .hsl-hero__badge-2 {
    align-items: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffff1a;
    border: 1px solid #fff3;
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-size: 11px;
    font-weight: 600;
    gap: 6px;
    padding: 8px 12px;
    position: absolute;
    white-space: nowrap;
}
.hsl-hero__badge-1 {
    left: -20px;
    top: 20px;
}
.hsl-hero__badge-2 {
    bottom: 20px;
    right: -20px;
}
.hsl-section {
    margin: 0 auto;
    max-width: 1600px;
    padding: 40px 20px;
}
.hsl-section__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 24px;
}
.hsl-section__title {
    color: #111827;
    font-size: 22px;
    font-weight: 800;
    margin: 0;
}
.hsl-section__sub {
    color: #6b7280;
    font-size: 13px;
}
.hsl-section__view-all {
    color: #4abce8;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s;
}
.hsl-section__view-all:hover {
    color: #2aa8d8;
}
.hsl-subcats {
    grid-gap: 14px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(8, 1fr);
}
.hsl-subcat-card {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 12px 16px;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.hsl-subcat-card:hover {
    border-color: #4abce8;
    box-shadow: 0 4px 20px #4abce826;
    transform: translateY(-2px);
}
.hsl-subcat-card__icon {
    align-items: center;
    background: #eff9fe;
    border-radius: 12px;
    color: #4abce8;
    display: flex;
    height: 52px;
    justify-content: center;
    width: 52px;
}
.hsl-subcat-card__name {
    color: #111827;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}
.hsl-subcat-card__count {
    color: #9ca3af;
    font-size: 10px;
}
.hsl-promo-strip {
    grid-gap: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 20px 40px;
}
.hsl-promo-card {
    align-items: center;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    padding: 28px 24px;
    position: relative;
}
.hsl-promo-card--dark {
    background: linear-gradient(135deg, #1e293b, #0f172a);
}
.hsl-promo-card--blue {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
}
.hsl-promo-card--green {
    background: linear-gradient(135deg, #15803d, #166534);
}
.hsl-promo-card__label {
    color: #fff9;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    margin: 0 0 8px;
}
.hsl-promo-card__title {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 16px;
}
.hsl-promo-card__btn {
    background: #fff3;
    border: 1px solid #ffffff4d;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    text-decoration: none;
    transition: background .15s;
}
.hsl-promo-card__btn:hover {
    background: #ffffff59;
    color: #fff;
}
.hsl-promo-card__img {
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .3));
    flex-shrink: 0;
    height: 90px;
    object-fit: contain;
    width: 90px;
}
.hsl-products-wrap {
    gap: 8px;
}
.hsl-arrow, .hsl-products-wrap {
    align-items: center;
    display: flex;
}
.hsl-arrow {
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 50%;
    color: #e87722;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 22px;
    height: 36px;
    justify-content: center;
    transition: background .15s;
    width: 36px;
}
.hsl-arrow:hover {
    background: #fff3e8;
}
.hsl-products-track {
    display: flex;
    flex: 1 1;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.hsl-products-track::-webkit-scrollbar {
    display: none;
}
.hsl-prod-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-basis: calc(20% - 11.2px);
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: box-shadow .15s;
}
.hsl-prod-card:hover {
    box-shadow: 0 12px 24px #0000001f;
    transform: translateY(-4px);
}
.hsl-prod-card__badge {
    border-radius: 0 0 8px 0;
    font-size: 9px;
    font-weight: 700;
    left: 0;
    letter-spacing: .04em;
    padding: 4px 10px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    z-index: 2;
}
.hs-badge--teal {
    background: #4abce8;
    color: #fff;
}
.hs-badge--green {
    background: #81c862;
    color: #fff;
}
.hs-badge--orange {
    background: #e87722;
    color: #fff;
}
.hs-badge--purple {
    background: #7c3aed;
    color: #fff;
}
.hsl-prod-card__img {
    align-items: center;
    background: #f8f8f8;
    display: flex;
    height: 150px;
    justify-content: center;
    padding: 12px;
}
.hsl-prod-card__img img {
    height: 100%;
    object-fit: contain;
    transition: transform .25s;
    width: 100%}
.hsl-prod-card:hover .hsl-prod-card__img img {
    transform: scale(1.05);
}
.hsl-prod-card__body {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 16px;
}
.hsl-prod-card__brand {
    color: #9ca3af;
    font-size: 10px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}
.hsl-prod-card__name {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #374151;
    display: -webkit-box;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    margin: 2px 0 4px;
    overflow: hidden;
}
.hsl-prod-card__rating {
    align-items: center;
    color: #9ca3af;
    display: flex;
    font-size: 10px;
    gap: 5px;
    margin-bottom: 4px;
}
.hs-stars {
    display: flex;
    gap: 1px;
}
.hsl-prod-card__prices {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hsl-prod-card__price {
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}
.hsl-prod-card__old {
    color: #9ca3af;
    font-size: 11px;
    text-decoration: line-through;
}
.hsl-prod-card__off {
    color: #81c862;
    font-size: 10px;
    font-weight: 700;
}
.hsl-prod-card__cart {
    background: #4abce8;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px;
    padding: 8px;
    transition: background .15s;
    width: 100%}
.hsl-prod-card__cart:hover {
    background: #2aa8d8;
}
.hsl-brands-section {
    background: #fff;
    border-radius: 16px;
    margin: 0 auto;
}
.hsl-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding-top: 8px;
}
.hsl-brand-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 24px;
    text-decoration: none;
    transition: box-shadow .15s, border-color .15s;
}
.hsl-brand-card:hover {
    border-color: #d0d0d0;
    box-shadow: 0 8px 16px #0000001a;
    transform: translateY(-2px);
}
.hsl-brand-card__logo {
    align-items: center;
    display: flex;
    font-size: 15px;
    font-weight: 700;
    gap: 8px;
}
.hsl-why {
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    margin-top: 20px;
    padding: 60px 20px;
}
.hsl-why__inner {
    align-items: center;
    display: flex;
    gap: 60px;
    margin: 0 auto;
    max-width: 1600px;
}
.hsl-why__text {
    flex: 0 0 340px;
}
.hsl-why__tag {
    color: #4abce8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    margin-bottom: 12px;
}
.hsl-why__title {
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.3;
    margin: 0 0 14px;
}
.hsl-why__sub {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 20px;
}
.hsl-why__cta {
    background: #4abce8;
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    padding: 11px 22px;
    text-decoration: none;
    transition: background .15s;
}
.hsl-why__cta:hover {
    background: #2aa8d8;
    color: #fff;
}
.hsl-why__features {
    grid-gap: 20px;
    display: grid;
    flex: 1 1;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
}
.hsl-why__feat {
    align-items: flex-start;
    background: #ffffff0f;
    border: 1px solid #ffffff1a;
    border-radius: 12px;
    display: flex;
    gap: 14px;
    padding: 20px;
}
.hsl-why__feat-icon {
    flex-shrink: 0;
    margin-top: 2px;
}
.hsl-why__feat-title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
}
.hsl-why__feat-desc {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}
.hsl-guide {
    grid-gap: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}
.hsl-guide-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px 20px;
    position: relative;
    transition: box-shadow .15s;
}
.hsl-guide-card:hover {
    box-shadow: 0 4px 20px #00000014;
}
.hsl-guide-card__step {
    color: #e5e7eb;
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 12px;
}
.hsl-guide-card__title {
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
}
.hsl-guide-card__desc {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}
.hsl-cta {
    background: linear-gradient(90deg, #4abce8, #2196f3);
    margin-top: 20px;
    padding: 50px 20px;
}
.hsl-cta__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1600px;
}
.hsl-cta__text h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px;
}
.hsl-cta__text p {
    color: #ffffffd9;
    font-size: 14px;
    margin: 0;
}
.hsl-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.hsl-cta__btn-primary {
    background: #fff;
    border-radius: 8px;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 28px;
    text-decoration: none;
    transition: transform .1s;
}
.hsl-cta__btn-primary:hover {
    color: #1d4ed8;
    transform: translateY(-1px);
}
.hsl-cta__btn-secondary {
    background: #fff3;
    border: 1.5px solid #fff6;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 28px;
    text-decoration: none;
    transition: background .15s;
}
.hsl-cta__btn-secondary:hover {
    background: #ffffff59;
    color: #fff;
}
@media (max-width:1024px) {
    .hsl-subcats {
    grid-template-columns: repeat(4, 1fr);
}
.hsl-why__inner {
    gap: 32px;
}
.hsl-why__text {
    flex: 0 0 280px;
}
}@media (max-width:768px) {
    .hsl-hero {
    flex-direction: column;
    gap: 32px;
    padding: 40px 16px;
    text-align: center;
}
.hsl-hero__actions, .hsl-hero__stats {
    justify-content: center;
}
.hsl-hero__visual {
    display: none;
}
.hsl-hero__title {
    font-size: 28px;
}
.hsl-subcats {
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}
.hsl-promo-strip {
    grid-template-columns: 1fr;
}
.hsl-guide {
    grid-template-columns: repeat(2, 1fr);
}
.hsl-why__inner {
    flex-direction: column;
    gap: 32px;
}
.hsl-why__text {
    flex: none;
}
.hsl-why__features {
    grid-template-columns: 1fr;
}
.hsl-cta__inner {
    flex-direction: column;
    text-align: center;
}
.hsl-cta__actions {
    justify-content: center;
}
}@media (max-width:480px) {
    .hsl-hero__title {
    font-size: 22px;
}
.hsl-subcats {
    grid-template-columns: repeat(2, 1fr);
}
.hsl-guide {
    grid-template-columns: 1fr;
}
.hsl-hero__actions {
    flex-direction: column;
}
.hsl-hero__cta-primary, .hsl-hero__cta-secondary {
    text-align: center;
}
.hsl-brands {
    gap: 8px;
}
.hsl-brand-card {
    padding: 10px 14px;
}
.hsl-section {
    padding: 28px 12px;
}
.hsl-why {
    padding: 40px 12px;
}
}.static-page {
    background-color: #f9f9f9;
    min-height: 60vh;
    padding: 60px 20px;
}
.static-page__container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0000000d;
    margin: 0 auto;
    max-width: 800px;
    padding: 40px;
}
.static-page__title {
    border-bottom: 2px solid #4abce8;
    color: #333;
    display: inline-block;
    font-size: 32px;
    margin-bottom: 24px;
    padding-bottom: 8px;
}
.static-page__body {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}
.static-page__body p {
    margin-bottom: 16px;
}
@media (max-width:768px) {
    .static-page {
    padding: 30px 15px;
}
.static-page__container {
    padding: 25px;
}
.static-page__title {
    font-size: 24px;
}
}.admin-panel {
    background-color: #f4f7fa;
    display: flex;
    font-family: Inter, sans-serif;
    min-height: 100vh;
}
.admin-sidebar {
    background-color: #1e293b;
    box-shadow: 4px 0 10px #0000001a;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    width: 260px;
}
.admin-logo {
    border-bottom: 1px solid #ffffff1a;
    margin-bottom: 20px;
    padding: 0 25px 30px;
}
.admin-logo h2 {
    color: #38bdf8;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}
.admin-nav {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 5px;
    padding: 0 10px;
}
.admin-nav button {
    background: none;
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 500;
    padding: 12px 15px;
    text-align: left;
    transition: all .2s;
}
.admin-nav button:hover {
    background-color: #ffffff0d;
    color: #fff;
}
.admin-nav button.active {
    background-color: #38bdf8;
    color: #0f172a;
    font-weight: 600;
}
.admin-logout {
    border-top: 1px solid #ffffff1a;
    padding: 20px 15px;
}
.admin-logout button {
    background-color: #ef44441a;
    border: 1px solid #ef4444;
    border-radius: 6px;
    color: #ef4444;
    cursor: pointer;
    font-weight: 600;
    padding: 10px;
    width: 100%}
.admin-content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
}
.admin-header {
    align-items: center;
    background-color: #fff;
    box-shadow: 0 2px 5px #0000000d;
    display: flex;
    height: 70px;
    justify-content: space-between;
    padding: 0 30px;
}
.admin-breadcrumb {
    color: #64748b;
    font-size: .9rem;
    font-weight: 600;
}
.admin-user {
    color: #1e293b;
    font-weight: 500;
}
.admin-main {
    overflow-y: auto;
    padding: 30px;
}
.admin-tabs-secondary {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px #0000000d;
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding: 5px;
    width: -webkit-fit-content;
    width: fit-content;
}
.admin-tabs-secondary button {
    background: none;
    border: none;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    font-weight: 600;
    padding: 8px 20px;
    transition: all .2s;
}
.admin-tabs-secondary button.active {
    background-color: #f1f5f9;
    color: #2563eb;
}
.admin-editor {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px #0000001a;
    padding: 25px;
}
.admin-editor h3 {
    align-items: center;
    color: #1e293b;
    display: flex;
    font-weight: 700;
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 0;
}
.admin-table-container {
    margin-bottom: 20px;
    overflow-x: auto;
}
.admin-table {
    border-collapse: collapse;
    width: 100%}
.admin-table th {
    background-color: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    color: #64748b;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 12px 15px;
    text-align: left;
    text-transform: uppercase;
}
.admin-table td {
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 15px;
}
.admin-table input {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #334155;
    font-size: .9rem;
    padding: 8px 12px;
    transition: border-color .2s;
    width: 100%}
.admin-table input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px #38bdf81a;
    outline: none;
}
.admin-btn-add {
    background-color: #2563eb;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    padding: 10px 20px;
    transition: background .2s;
}
.admin-btn-add:hover {
    background-color: #1d4ed8;
}
.admin-btn-delete {
    background: none;
    border: 1px solid #ef4444;
    border-radius: 4px;
    color: #ef4444;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    padding: 5px 12px;
}
.admin-btn-delete:hover {
    background-color: #ef4444;
    color: #fff;
}
.admin-btn-save {
    background-color: #10b981;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    padding: 6px 15px;
}
.admin-form-group {
    margin-bottom: 20px;
    max-width: 600px;
}
.admin-form-group label {
    color: #475569;
    display: block;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.admin-form-group input {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    padding: 10px 15px;
    width: 100%}
@media (max-width:768px) {
    .top-header {
    font-size: 11px;
    padding: 6px 12px;
}
.top-header__follow {
    display: none;
}
}@media (max-width:1024px) {
    .mid-header__container {
    gap: 12px;
    padding: 0 16px;
}
.search-bar {
    max-width: 420px;
}
}@media (max-width:768px) {
    .mid-header__container {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}
.mid-header__logo {
    flex-shrink: 0;
}
.mid-header__location {
    display: none;
}
.search-bar {
    flex: 0 0 100%;
    max-width: 100%;
    order: 3;
    width: 100%}
.mid-header__actions {
    margin-left: auto;
}
.mid-header__action-label {
    display: none;
}
}@media (max-width:480px) {
    .mid-header__actions {
    gap: 8px;
}
.mid-header__action svg {
    height: 20px;
    width: 20px;
}
}@media (max-width:1024px) {
    .bottom-header__nav {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scrollbar-width: none;
}
.bottom-header__nav::-webkit-scrollbar {
    display: none;
}
.bottom-header__nav-list {
    flex-wrap: nowrap;
    min-width: -webkit-max-content;
    min-width: max-content;
}
.bottom-header__nav-item {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 0 8px;
    white-space: nowrap;
}
}@media (max-width:768px) {
    .bottom-header__nav-item {
    font-size: 11px;
    height: 40px;
}
.bh-chevron, .mega-menu {
    display: none!important;
}
}@media (max-width:1024px) {
    .sp-feat-prods__grid, .sp-prod-grid {
    grid-template-columns: repeat(3, 1fr);
}
.sp-sidebar {
    flex: 0 0 170px;
}
}@media (max-width:768px) {
    .sp-layout {
    flex-direction: column;
}
.sp-sidebar {
    grid-gap: 0;
    border-radius: 10px;
    display: grid;
    flex: none;
    gap: 0;
    grid-template-columns: repeat(2, 1fr);
    position: static;
    width: 100%}
.sp-filter {
    padding: 12px;
}
.sp-feat-prods__grid, .sp-prod-grid {
    grid-template-columns: repeat(2, 1fr);
}
.sp-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    min-height: auto;
    padding: 18px 16px;
}
.sp-hero__imgs {
    display: none;
}
.sp-hero__tags {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 8px;
    position: static;
}
.sp-feat-cats__track {
    gap: 10px;
}
.sp-feat-cat-card {
    flex: 0 0 140px;
}
}@media (max-width:480px) {
    .sp-container {
    padding: 0 12px 40px;
}
.sp-sidebar {
    grid-template-columns: 1fr;
}
.sp-feat-prods__grid, .sp-prod-grid {
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
}
.sp-prod-card__img {
    height: 100px;
}
.sp-shop__toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}
.sp-hero__title {
    font-size: 15px;
}
.sp-section-title {
    font-size: 14px;
}
}@media (max-width:1024px) {
    .pd-layout {
    gap: 20px;
}
.pd-gallery {
    flex: 0 0 300px;
}
}@media (max-width:768px) {
    .pd-layout {
    flex-direction: column;
}
.pd-gallery {
    flex: none;
    width: 100%}
.pd-gallery__main {
    height: 240px;
}
.pd-bulk__tiers {
    flex-wrap: wrap;
}
.pd-bulk__tier {
    flex: 0 0 33.33%}
.pd-trust {
    flex-wrap: wrap;
}
.pd-trust__item {
    border-bottom: 1px solid #e5e7eb;
    border-right: none;
    flex: 0 0 50%}
.pd-trust__item:nth-child(odd) {
    border-right: 1px solid #e5e7eb;
}
.pd-reviews__body {
    flex-direction: column;
    gap: 20px;
}
.pd-similar__track {
    gap: 10px;
}
.pd-similar__card {
    flex: 0 0 160px;
}
.pd-tabs__btn {
    font-size: 11px;
    padding: 10px 12px;
}
.pd-feat-prods__grid {
    grid-template-columns: repeat(2, 1fr);
}
}@media (max-width:480px) {
    .pd-container {
    padding: 0 12px 40px;
}
.pd-info__title {
    font-size: 17px;
}
.pd-info__price {
    font-size: 22px;
}
.pd-actions {
    flex-wrap: wrap;
    gap: 8px;
}
.pd-actions__buy, .pd-actions__cart {
    flex: 1 1;
    justify-content: center;
}
.pd-bulk__tier, .pd-trust__item {
    flex: 0 0 50%}
.pd-tabs__nav {
    overflow-x: auto;
    scrollbar-width: none;
}
.pd-tabs__nav::-webkit-scrollbar {
    display: none;
}
.pd-tabs__btn {
    white-space: nowrap;
}
.pd-gallery__main {
    height: 200px;
}
.pd-gallery__thumb {
    height: 48px;
    width: 48px;
}
.sp-feat-prods__grid, .sp-prod-grid {
    grid-template-columns: repeat(2, 1fr);
}
}@media (max-width:768px) {
    .footer__grid {
    gap: 24px!important;
    grid-template-columns: repeat(2, 1fr)!important;
}
.footer__brand {
    grid-column: 1/-1;
}
}@media (max-width:480px) {
    .footer__grid {
    grid-template-columns: 1fr!important;
}
.footer__bottom {
    flex-direction: column!important;
    gap: 8px!important;
    text-align: center!important;
}
}@media (max-width:768px) {
    .home-hero {
    min-height: auto!important;
    padding: 24px 16px!important;
}
.home-hero h1 {
    font-size: 1.5rem!important;
}
.hero-actions {
    flex-direction: column!important;
}
.categories-grid, .featured-grid {
    grid-template-columns: repeat(2, 1fr)!important;
}
.brands-track {
    gap: 16px!important;
}
.section-container {
    padding: 0 16px!important;
}
}@media (max-width:480px) {
    .categories-grid, .featured-grid {
    gap: 10px!important;
    grid-template-columns: 1fr 1fr!important;
}
.home-hero h1 {
    font-size: 1.25rem!important;
}
.home-section {
    padding: 24px 0!important;
}
}@media (max-width:768px) {
    .cart-layout {
    flex-direction: column!important;
}
.cart-summary {
    width: 100%!important;
}
}@media (max-width:480px) {
    .cart-item {
    align-items: flex-start!important;
    flex-direction: column!important;
}
.cart-item__img {
    height: 80px!important;
    width: 80px!important;
}
}@media (max-width:768px) {
    .account-layout {
    flex-direction: column!important;
}
.account-sidebar {
    order: -1;
    width: 100%!important;
}
.account-sidebar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
}@media (max-width:480px) {
    .auth-card {
    margin: 16px!important;
    padding: 20px 16px!important;
}
.auth-form__row {
    flex-direction: column!important;
}
}@media (max-width:1024px) {
    .mega-menu {
    width: min(820px, 96vw);
}
}@media (max-width:768px) {
    .hide-on-mobile {
    display: none!important;
}
}@media (min-width:769px) {
    .hide-on-desktop {
    display: none!important;
}
}img {
    height: auto;
    max-width: 100%}
body, html {
    overflow-x: hidden;
}
/*# sourceMappingURL=main.8d12af3b.css.map*/