html,
body {
overflow-x: clip;
}
/* ========== Blogs Archive Page ========== */
.blogs-archive-page {
overflow-x: hidden;
}
.blogs-archive-main {
max-width: 520px;
margin: 0 auto;
padding: 26px 16px 36px;
}
.blogs-archive-header {
margin-bottom: 16px;
}
.blogs-archive-title {
margin: 0 0 8px;
font-size: 36px;
font-weight: 700;
line-height: 1.1;
color: #102a43;
letter-spacing: -0.03em;
}
.blogs-archive-subtitle {
margin: 0;
color: #64748b;
font-size: 15px;
line-height: 1.55;
max-width: 38ch;
}
.blogs-archive-filters-wrap {
margin: 0 -16px 18px;
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
.blogs-archive-filters-wrap::-webkit-scrollbar {
display: none;
}
.blogs-archive-filters {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
padding: 4px 16px 2px;
min-width: 100%;
}
.blogs-archive-filter {
border: none;
border-radius: 9999px;
min-height: 34px;
padding: 0 14px;
background: #e4ebf3;
color: #475569;
font-size: 13px;
font-weight: 600;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color 0.1s ease-in-out;
z-index: 1;
}
/* Digital Slide-Fill shared across all archive/tab filters */
.blogs-archive-filter::before,
.products-tab-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: #0c52b3;
transition: left 0.4s cubic-bezier(0.19, 1, 0.22, 1);
z-index: -1;
}
.blogs-archive-filter:hover::before,
.products-tab-btn:hover::before,
.blogs-archive-filter.is-active::before,
.products-tab-btn.active::before {
left: 0;
}
.blogs-archive-filter:hover,
.products-tab-btn:hover,
.blogs-archive-filter.is-active,
.products-tab-btn.active {
color: #ffffff;
}
/* HUD Focus Corners shared */
.blogs-archive-filter::after,
.products-tab-btn::after {
content: "";
position: absolute;
inset: 4px;
transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 0;
pointer-events: none;
z-index: 2;
}
.blogs-archive-filter:hover::after,
.products-tab-btn:hover::after,
.blogs-archive-filter.is-active::after,
.products-tab-btn.active::after {
opacity: 1;
border-color: rgba(255, 255, 255, 0.4);
clip-path: polygon(
0 0,
8px 0,
8px 1px,
1px 1px,
1px 8px,
0 8px,
0 100%,
0 100%,
0 calc(100% - 8px),
1px calc(100% - 8px),
1px calc(100% - 1px),
8px calc(100% - 1px),
8px 100%,
0 100%,
100% 100%,
calc(100% - 8px) 100%,
calc(100% - 8px) calc(100% - 1px),
calc(100% - 1px) calc(100% - 1px),
calc(100% - 1px) calc(100% - 8px),
100% calc(100% - 8px),
100% 100%,
100% 0,
100% 8px,
calc(100% - 1px) 8px,
calc(100% - 1px) 1px,
calc(100% - 8px) 1px,
calc(100% - 8px) 0,
100% 0
);
}
.blogs-archive-filter.is-active {
background: #e4ebf3; /* Base remains same, ::before handles the active blue */
}
.blogs-archive-featured {
margin-bottom: 14px;
}
.blogs-archive-featured h2,
.blogs-archive-featured span {
text-decoration: none;
}
.blogs-archive-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.blog-archive-list-card {
display: flex;
align-items: stretch;
gap: 12px;
text-decoration: none;
padding: 10px 0;
}
.blog-archive-list-card + .blog-archive-list-card {
border-top: 1px solid #e2e8f0;
}
.blog-archive-list-card__thumb {
width: 108px;
height: 108px;
border-radius: 16px;
object-fit: cover;
flex-shrink: 0;
background: #f1f5f9;
}
.blog-archive-list-card__content {
min-width: 0;
display: flex;
flex-direction: column;
}
.blog-archive-list-card__tag {
color: #137fec;
font-size: 10px;
font-weight: 700;
line-height: 1.4;
margin: 2px 0 6px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.blog-archive-list-card__title {
margin: 0 0 8px;
color: #102a43;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.blog-archive-list-card__meta {
display: inline-flex;
align-items: center;
gap: 8px;
color: #cbd5e1;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
margin-top: auto;
}
.blog-archive-list-card__dot {
width: 4px;
height: 4px;
border-radius: 9999px;
background: #cbd5e1;
flex-shrink: 0;
}
@media (min-width: 768px) {
.blogs-archive-main {
max-width: 860px;
padding: 34px 24px 46px;
}
.blogs-archive-header {
margin-bottom: 18px;
}
.blogs-archive-title {
font-size: 48px;
margin-bottom: 10px;
}
.blogs-archive-subtitle {
font-size: 16px;
max-width: 62ch;
}
.blogs-archive-filters-wrap {
margin: 0 -24px 22px;
}
.blogs-archive-filters {
padding: 4px 24px 4px;
gap: 10px;
}
.blogs-archive-filter {
min-height: 38px;
padding: 0 16px;
font-size: 14px;
}
.blogs-archive-featured {
margin-bottom: 18px;
}
.blog-archive-list-card {
gap: 14px;
padding: 12px 0;
}
.blog-archive-list-card__thumb {
width: 126px;
height: 126px;
}
.blog-archive-list-card__tag {
font-size: 11px;
margin-bottom: 7px;
}
.blog-archive-list-card__title {
font-size: 20px;
line-height: 1.25;
}
.blog-archive-list-card__meta {
font-size: 13px;
}
}
@media (min-width: 1024px) {
.blogs-archive-page {
background:
radial-gradient(
920px 440px at 8% -6%,
rgba(12, 82, 179, 0.08) 0%,
rgba(12, 82, 179, 0) 62%
),
linear-gradient(180deg, #f7faff 0%, #eff5fc 100%);
}
.blogs-archive-main {
max-width: 1240px;
padding: 44px 28px 64px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
grid-template-areas:
"header header"
"filters filters"
"featured list";
column-gap: 26px;
row-gap: 18px;
align-items: start;
}
.blogs-archive-header {
grid-area: header;
margin: 0;
}
.blogs-archive-title {
font-size: 58px;
line-height: 1.02;
margin-bottom: 12px;
}
.blogs-archive-subtitle {
font-size: 17px;
max-width: 72ch;
}
.blogs-archive-filters-wrap {
grid-area: filters;
margin: 0;
overflow: visible;
}
.blogs-archive-filters {
padding: 0;
min-width: 0;
flex-wrap: wrap;
}
.blogs-archive-filter {
min-height: 40px;
padding: 0 18px;
transition:
background 0.22s ease,
color 0.22s ease,
transform 0.22s ease;
}
.blogs-archive-filter:hover {
transform: translateY(-1px);
}
.blogs-archive-featured {
grid-area: featured;
margin: 0;
}
.blogs-archive-featured .blog-card {
border-radius: 26px;
border: 1px solid rgba(148, 163, 184, 0.28);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}
.blogs-archive-featured .blog-card .blog-img-wrap {
aspect-ratio: 16/9;
}
.blogs-archive-featured .blog-card .blog-content {
padding: 20px;
}
.blogs-archive-featured .blog-card .blog-title {
font-size: 24px;
line-height: 1.22;
margin-bottom: 10px;
}
.blogs-archive-featured .blog-card .blog-desc {
font-size: 15px;
line-height: 1.5;
margin-bottom: 14px;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.blogs-archive-featured .blog-card .blog-time,
.blogs-archive-featured .blog-card .blog-read {
font-size: 14px;
}
.blogs-archive-list {
grid-area: list;
gap: 0;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 22px;
padding: 8px 18px;
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}
.blog-archive-list-card {
gap: 14px;
padding: 16px 0;
transition: transform 0.22s ease;
}
.blog-archive-list-card:hover {
transform: translateX(2px);
}
.blog-archive-list-card__thumb {
width: 132px;
height: 132px;
}
.blog-archive-list-card__title {
font-size: 19px;
line-height: 1.28;
}
.blog-archive-list-card__meta {
font-size: 12px;
}
}
body {
font-family: "Roboto", sans-serif;
background-color: #f6f7f8;
}
/* News ticker infinite scroll */
.ticker-wrap {
overflow: hidden;
white-space: nowrap;
background: #000;
}
.ticker-content {
display: inline-block;
padding-left: 100%;
animation: ticker 55s linear infinite;
}
.ticker-content span {
margin-right: 3em;
white-space: nowrap;
}
@keyframes ticker {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Hero slider – prevent mobile overflow; full-bleed on mobile */
.hero-section {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
@media (max-width: 767px) {
.hero-section {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.hero-slide-content {
align-items: center;
text-align: center;
}
.hero-slide-content .hero-slide-desc {
margin-left: auto;
margin-right: auto;
}
.hero-slide-content .hero-slide-btn {
margin-left: auto;
margin-right: auto;
}
}
.hero-section .hero-swiper {
overflow: hidden;
width: 100%;
}
.hero-section .hero-swiper .swiper-wrapper {
max-width: 100%;
}
.hero-section .hero-swiper .swiper-slide {
width: 100% !important;
min-width: 0;
flex-shrink: 0;
box-sizing: border-box;
}
.hero-section .hero-swiper .swiper-slide picture,
.hero-section .hero-swiper .swiper-slide img {
display: block;
max-width: 100%;
width: 100%;
height: auto;
object-fit: cover;
}
/* Hero pagination – pill-shaped container with blur bg */
.hero-pagination {
padding: 8px 16px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
width: fit-content;
border: 1px solid #ffffff75;
left: 50% !important;
width: fit-content !important;
}
/* Hero pagination morph: pill (37x7) <-> circle (7x7) */
.hero-pagination .swiper-pagination-bullet {
width: 7px;
height: 7px;
background: #000;
opacity: 0.35;
margin: 0 4px !important;
transition:
width 0.35s ease,
opacity 0.35s ease;
}
.hero-pagination .swiper-pagination-bullet-active {
width: 37px;
border-radius: 7px;
opacity: 1;
}
.hero-slide-content {
z-index: 1;
}
.hero-slide-title,
.hero-slide-desc,
.hero-slide-btn {
opacity: 0;
transform: translateY(24px);
}
.hero-swiper .swiper-slide-active .hero-slide-title {
animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-swiper .swiper-slide-active .hero-slide-desc {
animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.hero-swiper .swiper-slide-active .hero-slide-btn {
animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes heroReveal {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-slide-btn {
background: #fff;
color: #0c52b3;
font-weight: bold;
font-size: 16px;
text-decoration: none;
transition: opacity 0.2s;
}
.hero-slide-btn:hover {
opacity: 0.9;
}
.hero-slide-btn img {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.hero-slide-btn:hover img {
transform: rotate(45deg);
}
/* Full-screen menu slide from right */
.menu-panel {
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-panel.open {
transform: translateX(0);
}
.menu-panel .menu-vat-wrap .vat-toggle {
display: flex;
flex-direction: row;
background: #e2e8f0;
border-radius: 6px;
padding: 2px;
}
.menu-panel .menu-vat-wrap .vat-option {
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
color: #64748b;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
transition:
background 0.2s,
color 0.2s;
font-family: inherit;
}
.menu-panel .menu-vat-wrap .vat-option:hover {
color: #334155;
}
.menu-panel .menu-vat-wrap .vat-option.is-active {
background: #fff;
color: #0c52b3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Category nav arrow pill */
.category-nav-btn {
width: 81px;
height: 26px;
border-radius: 9999px;
background: linear-gradient(
90deg,
rgba(28, 104, 210, 0.27) 0%,
rgba(28, 104, 210, 0.02) 100%
);
transition:
transform 0.2s,
opacity 0.2s;
}
.category-nav-btn:hover {
opacity: 0.9;
transform: scale(1.05);
}
.category-nav-btn:active {
transform: scale(0.98);
}
/* Icon button hover/press */
.icon-btn:hover {
opacity: 0.7;
}
.icon-btn:active {
opacity: 0.5;
}
/* Desktop header (lg and up) – two rows, dropdowns with prediction cone */
.desktop-header {
display: none;
}
@media (min-width: 1024px) {
.desktop-header {
display: block;
position: relative;
overflow: visible;
}
.desktop-header .header-inner {
overflow: visible;
}
.desktop-header .row1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
background: #fff;
}
.header-logo {
height: 56px;
width: auto;
display: block;
filter: invert(1);
}
.desktop-header #header-row2-spacer {
height: 0;
overflow: hidden;
transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.desktop-header .header-row2-wrap {
position: relative;
z-index: 31;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.desktop-header .header-row2-wrap.header-row2-fixed {
position: relative;
}
.desktop-header .header-row2-wrap.header-row2-fixed.header-row2-unfixing {
animation: header-row2-slide-out 0.22s cubic-bezier(0.4, 0, 0.2, 1)
forwards;
}
@keyframes header-row2-slide-in {
from {
transform: translateY(-100%);
opacity: 0.96;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes header-row2-slide-out {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-100%);
opacity: 0.96;
}
}
.desktop-header .header-row2-wrap.header-row2-fixed .header-row2 {
min-height: 40px;
}
.desktop-header .header-row2 {
width: 100%;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.desktop-header .nav-link {
font-size: 14px;
font-weight: 500;
color: #1e293b;
padding: 8px 12px;
border-radius: 8px;
transition:
color 0.2s,
background 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: transparent;
cursor: pointer;
font-family: inherit;
}
.desktop-header .nav-link:hover {
color: #0c52b3;
background: rgba(12, 82, 179, 0.06);
}
.desktop-header .nav-link .nav-chevron {
transition: transform 0.25s ease;
flex-shrink: 0;
}
/* Prediction cone: wrapper contains trigger + panel so hover anywhere keeps dropdown open; no gap */
.desktop-header .nav-dropdown-wrap {
position: relative;
display: inline-block;
}
.desktop-header .nav-dropdown-wrap .dropdown-panel {
position: absolute;
left: 0;
top: 100%;
margin-top: 0;
padding-top: 6px;
z-index: 100;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.2s ease,
visibility 0.2s,
transform 0.2s ease;
transform: translateY(-4px);
}
.desktop-header .nav-dropdown-wrap:hover .dropdown-panel,
.desktop-header .nav-dropdown-wrap .dropdown-panel:hover {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.desktop-header .nav-dropdown-wrap.categories-wrap .dropdown-panel {
left: 0;
transform: translateY(-4px);
}
.desktop-header .nav-dropdown-wrap.categories-wrap:hover .dropdown-panel,
.desktop-header .nav-dropdown-wrap.categories-wrap .dropdown-panel:hover {
transform: translateY(0);
}
.desktop-header .nav-dropdown-wrap:hover .nav-chevron {
transform: rotate(180deg);
}
/* Category menu – unique left trigger + flex-col list with hover subcategories */
.desktop-header .category-menu-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
color: #475569;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition:
color 0.2s,
background 0.2s;
font-family: inherit;
letter-spacing: 0.01em;
}
.desktop-header .category-menu-trigger:hover {
color: #0c52b3;
background: #f8fafc;
}
.desktop-header .category-menu-trigger .nav-chevron {
color: #94a3b8;
transition:
color 0.2s,
transform 0.25s ease;
}
.desktop-header
.nav-dropdown-wrap.categories-wrap:hover
.category-menu-trigger
.nav-chevron {
color: #0c52b3;
}
.desktop-header .category-menu-panel {
display: flex;
flex-direction: row;
min-width: 480px;
background: #fff;
border-radius: 16px;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.desktop-header .category-menu-list {
display: flex;
flex-direction: column;
width: 220px;
flex-shrink: 0;
border-right: 1px solid #f1f5f9;
}
.desktop-header .category-menu-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: #334155;
text-decoration: none;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
border: none;
border-left: 3px solid transparent;
background: transparent;
cursor: pointer;
font-family: inherit;
width: 100%;
text-align: left;
}
.desktop-header .category-menu-item:hover {
background: #f8fafc;
color: #0c52b3;
border-left-color: #0c52b3;
}
.desktop-header .category-menu-item img {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
}
.desktop-header .category-menu-item .cat-arrow {
margin-left: auto;
opacity: 0.5;
transition: transform 0.2s;
}
.desktop-header .category-menu-item:hover .cat-arrow {
transform: translateX(4px);
opacity: 1;
}
.desktop-header .category-subpanels {
position: relative;
flex: 1;
min-width: 240px;
min-height: 200px;
margin-left: -1px;
}
.desktop-header .category-subpanel {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 16px 20px;
overflow: auto;
opacity: 0;
pointer-events: none;
background: #fff;
transition: opacity 0.15s ease;
}
/* Show subpanel when active class is added by JS */
.desktop-header .category-subpanel.is-active {
opacity: 1;
pointer-events: auto;
}
.desktop-header .category-subpanel a {
display: block;
padding: 8px 0 8px 12px;
font-size: 13px;
font-weight: 500;
color: #64748b;
text-decoration: none;
transition:
color 0.2s,
border-color 0.2s;
border-left: 3px solid transparent;
margin-left: 0;
}
.desktop-header .category-subpanel a:hover {
color: #0c52b3;
border-left-color: #0c52b3;
}
.desktop-header .category-subpanel-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
margin-bottom: 8px;
}
.desktop-header .mega-menu {
padding: 0;
}
.desktop-header .mega-menu-inner {
display: none;
}
.desktop-header .brands-dropdown {
display: grid;
grid-template-rows: repeat(10, auto);
grid-auto-flow: column;
gap: 2px 16px;
min-width: max-content;
background: #fff;
border-radius: 12px;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(0, 0, 0, 0.05);
padding: 12px;
}
.desktop-header .brands-dropdown a {
display: block;
padding: 10px 14px 10px 16px;
font-size: 14px;
font-weight: 500;
color: #334155;
border-radius: 8px;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
text-decoration: none;
border-left: 3px solid transparent;
margin-left: 0;
}
.desktop-header .brands-dropdown a:hover {
background: #f1f5f9;
color: #0c52b3;
border-left-color: #0c52b3;
}
.desktop-header .special-pill {
background: linear-gradient(
90deg,
#0c3cea 0%,
#3c0cea 50%,
#0c65ea 100%
);
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 8px 18px;
border-radius: 9999px;
transition: filter 0.7s ease;
text-decoration: none;
}
.desktop-header .special-pill:hover {
filter: brightness(1.15);
}
.desktop-header .header-row2-vat .vat-toggle {
display: flex;
flex-direction: row;
background: #e2e8f0;
border-radius: 6px;
padding: 2px;
}
.desktop-header .header-row2-vat .vat-option {
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
color: #64748b;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
transition:
background 0.2s,
color 0.2s;
}
.desktop-header .header-row2-vat .vat-option:hover {
color: #334155;
}
.desktop-header .header-row2-vat .vat-option.is-active {
background: #fff;
color: #0c52b3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.desktop-header .search-wrap {
position: relative;
display: flex;
align-items: center;
width: 380px;
height: 44px;
padding: 0 18px 0 46px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 9999px;
transition:
width 0.25s ease,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.desktop-header .search-wrap:focus-within {
width: 480px;
background: #fff;
border-color: #cbd5e1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.desktop-header .search-input {
width: 100%;
height: 100%;
padding: 0;
border: none;
border-radius: 0;
font-size: 14px;
background: transparent;
color: #1e293b;
transition: color 0.2s;
}
.desktop-header .search-input::placeholder {
color: #94a3b8;
}
.desktop-header .search-input:focus {
outline: none;
}
.desktop-header .search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
width: 20px;
height: 20px;
opacity: 0.6;
}
.desktop-header .search-wrap:focus-within .search-icon {
opacity: 0.85;
}
.desktop-header .header-action {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
transition:
color 0.2s,
background 0.2s;
text-decoration: none;
}
.desktop-header .header-action:hover {
color: #0c52b3;
background: rgba(12, 82, 179, 0.08);
}
}
/* Hot deal product card */
.hot-deal-card {
background: linear-gradient(90deg, #eeeeee 0%, #f3f6ff 100%);
}
.wishlist-btn svg path {
transition:
stroke 0.2s,
fill 0.2s;
}
.wishlist-btn.added svg path {
stroke: #0c52b3;
fill: #0c52b3;
}
/* Wishlist → Quote list menu (heart click) */
.wishlist-quote-wrap {
position: relative;
display: inline-flex;
}
.wishlist-quote-menu {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 6px;
min-width: 200px;
padding: 6px 0;
background: #fff;
border-radius: 12px;
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(0, 0, 0, 0.06);
z-index: 20;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
}
.wishlist-quote-menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.wishlist-quote-menu__item {
display: block;
width: 100%;
padding: 10px 14px;
font-size: 14px;
font-weight: 500;
color: #334155;
text-align: left;
background: none;
border: none;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
.wishlist-quote-menu__item:hover {
background: #f1f5f9;
color: #0c52b3;
}
.wishlist-quote-menu__item--new {
border-top: 1px solid #e2e8f0;
margin-top: 4px;
padding-top: 10px;
font-weight: 600;
color: #0c52b3;
}
.wishlist-quote-menu__item--new:hover {
background: rgba(12, 82, 179, 0.08);
}
.wishlist-quote-wrap--product-page .wishlist-quote-menu {
bottom: auto;
top: 100%;
margin-bottom: 0;
margin-top: 8px;
transform: translateY(-4px);
}
.wishlist-quote-wrap--product-page .wishlist-quote-menu.is-open {
transform: translateY(0);
}
/* Ensure parent card containers do not clip open wishlist quote menus */
.product-box:has(.wishlist-quote-menu.is-open),
.product-box.has-open-menu,
.product-box__thumb:has(.wishlist-quote-menu.is-open),
.product-box__thumb.has-open-menu,
.product-box__actions:has(.wishlist-quote-menu.is-open),
.product-box__actions.has-open-menu,
.archive-product-item:has(.wishlist-quote-menu.is-open),
.archive-product-item.has-open-menu {
overflow: visible !important;
z-index: 50 !important;
}
.wishlist-quote-menu.is-right-aligned {
left: auto !important;
right: 0 !important;
}
.wishlist-quote-menu.is-dropped-down {
bottom: auto !important;
top: 100% !important;
margin-bottom: 0 !important;
margin-top: 6px !important;
transform: translateY(-4px);
}
.wishlist-quote-menu.is-dropped-down.is-open {
transform: translateY(0);
}
@media (max-width: 639px) {
.wishlist-quote-menu {
min-width: 160px;
max-width: calc(100vw - 32px);
width: max-content;
font-size: 13px;
padding: 4px 0;
}
.wishlist-quote-menu__item {
padding: 8px 12px;
font-size: 13px;
white-space: normal;
word-break: break-word;
}
}
.product-dots {
position: absolute !important;
bottom: 12px !important;
left: 0;
width: 100%;
z-index: 20;
opacity: 1 !important;
}
.product-dots .swiper-pagination-bullet {
width: 7px;
height: 7px;
background: #000;
opacity: 0.35;
margin: 0 4px !important;
transition:
width 0.35s ease,
opacity 0.35s ease;
}
.product-dots .swiper-pagination-bullet-active {
width: 37px;
border-radius: 7px;
opacity: 1;
}
.hot-deals-swiper .swiper-slide {
width: 75%;
box-sizing: border-box;
height: auto;
}
.hot-deals-swiper .swiper-wrapper {
align-items: stretch;
}
/* Product box – unified card (mobile: flex col; desktop: same) */
.product-box {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
padding: 10px;
background: linear-gradient(90deg, #eeeeee 0%, #f3f6ff 100%);
border-radius: 12px;
overflow: hidden;
}
.product-box__thumb {
position: relative;
flex-shrink: 0;
background: #fff;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1;
}
.product-box__img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
padding: 12px;
box-sizing: border-box;
}
.product-box__badge {
position: absolute;
z-index: 2;
font-size: 10px;
font-weight: 600;
padding: 4px 10px;
border-radius: 9999px;
white-space: nowrap;
}
.product-box__badge--save {
top: 8px;
left: 8px;
background: #8dffb8;
color: #00a63e;
}
.product-box__badge--tag {
top: 8px;
right: 8px;
color: #0c52b3;
background: #e3efff;
}
.product-box__badge--out {
top: 8px;
right: 8px;
background: #ffebee;
color: #c62828;
}
.product-box__actions {
position: absolute;
bottom: 8px;
left: 8px;
z-index: 10;
display: flex;
flex-direction: row;
gap: 6px;
}
.product-box__action-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.product-box__action-btn:hover {
opacity: 0.85;
}
.product-box__action-btn:active {
opacity: 0.7;
}
.product-box__action-btn img,
.product-box__action-btn svg {
width: 16px;
height: 16px;
}
.product-box__action-btn {
position: relative;
}
a.product-box__action-btn {
text-decoration: none;
color: inherit;
}
.product-box__content {
flex: 1;
display: flex;
flex-direction: column;
padding: 12px 10px 14px;
min-height: 0;
}
.product-box__name {
font-size: 13px;
font-weight: 500;
color: #000;
margin: 0 0 4px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-decoration: none;
}
.product-box__name:hover {
color: #0c52b3;
}
.product-box__id {
font-size: 10px;
color: #94a3b8;
margin: 0 0 8px;
}
.product-box__price-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 10px;
margin-bottom: 10px;
}
.product-box__price--old {
font-size: 12px;
color: #969696;
text-decoration: line-through;
}
.product-box__price--current {
font-size: 16px;
font-weight: 600;
color: #000;
}
.product-box__vat {
font-size: 11px;
color: #64748b;
}
.product-box__btn {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
color: #fff;
background: #2c2c2c;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: auto;
transition: opacity 0.2s;
}
.product-box__btn:hover:not(:disabled) {
opacity: 0.9;
}
.product-box__btn:active:not(:disabled) {
opacity: 0.8;
}
.product-box__btn:disabled,
.product-box__btn[aria-disabled="true"] {
background: #d2d2d2;
color: #64748b;
cursor: not-allowed;
}
.product-box__btn img {
width: 14px;
height: 14px;
}
/* Stock progress bar inside product-box (e.g. Hot Deals) */
.product-box__content .product-box__stock.product-lowstock-wrap {
margin-top: 0;
margin-bottom: 8px;
}
.product-box__content .product-lowstock-header {
margin-bottom: 4px;
}
.product-box__content .product-lowstock-icon {
width: 14px;
height: 14px;
}
.product-box__content .product-lowstock-text {
font-size: 10px;
font-weight: 600;
}
.product-box__content .product-lowstock-bar-wrap {
margin-bottom: 0;
}
.product-box__content .product-lowstock-bar {
height: 6px;
}
/* product-box inside link (similar items, archive): btn is span, no pointer */
a .product-box__btn {
pointer-events: none;
cursor: default;
}
.similar-items-swiper .swiper-slide > a .product-box {
min-height: 340px;
}
.archive-products .archive-product-link {
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
.archive-products .archive-product-link .product-box {
height: 100%;
min-height: 280px;
}
.hot-deals-swiper .swiper-slide > .product-box,
.latest-products-swiper .swiper-slide > .product-box {
min-height: 340px;
}
.product-tab-swiper .swiper-slide > .product-box {
min-height: 320px;
}
@media (min-width: 768px) {
.product-box__thumb {
aspect-ratio: 1;
}
.product-box__name {
font-size: 14px;
}
.product-box__price--current {
font-size: 17px;
}
.product-box__btn {
padding: 11px 14px;
font-size: 14px;
}
}
.hot-deals-swiper .swiper-slide > .hot-deal-card,
.latest-products-swiper .swiper-slide > .hot-deal-card {
height: 100%;
min-height: 360px;
display: flex;
flex-direction: column;
}
.hot-deal-card .hot-deal-image-wrap {
flex-shrink: 0;
height: 160px;
}
.hot-deal-card .content-block {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.hot-deal-card .content-block button {
margin-top: auto;
}
.product-serial {
font-size: 11px;
color: #94a3b8;
margin-top: 2px;
margin-bottom: 8px;
}
@media (min-width: 640px) {
.hot-deals-swiper .swiper-slide {
width: 50%;
}
}
@media (min-width: 768px) {
.hot-deals-swiper .swiper-slide {
width: 33.333%;
}
}
@media (min-width: 1024px) {
.hot-deals-swiper .swiper-slide {
width: 25%;
}
}
.latest-products-swiper .swiper-slide {
width: 75%;
box-sizing: border-box;
height: auto;
}
.latest-products-swiper .swiper-wrapper {
align-items: stretch;
}
@media (min-width: 640px) {
.latest-products-swiper .swiper-slide {
width: 50%;
}
}
@media (min-width: 768px) {
.latest-products-swiper .swiper-slide {
width: 33.333%;
}
}
@media (min-width: 1024px) {
.latest-products-swiper .swiper-slide {
width: 25%;
}
}
.similar-items-swiper .swiper-slide {
width: 75%;
box-sizing: border-box;
height: auto;
}
.similar-items-swiper .swiper-wrapper {
align-items: stretch;
}
.similar-items-swiper .swiper-slide > a {
height: 100%;
display: block;
}
.similar-items-swiper .swiper-slide > a .hot-deal-card {
height: 100%;
min-height: 360px;
display: flex;
flex-direction: column;
}
@media (min-width: 640px) {
.similar-items-swiper .swiper-slide {
width: 50%;
}
}
@media (min-width: 768px) {
.similar-items-swiper .swiper-slide {
width: 33.333%;
}
}
@media (min-width: 1024px) {
.similar-items-swiper .swiper-slide {
width: 25%;
}
}
/* Banner flash effect (desktop) */
.banner-link {
display: block;
position: relative;
overflow: hidden;
height: 361px;
}
.banner-link img {
height: 100%;
width: 100%;
object-fit: cover;
}
.banner-link::after {
content: "";
position: absolute;
inset: 0;
background: #fff;
opacity: 0;
pointer-events: none;
}
@media (min-width: 768px) {
.banner-link:hover::after {
animation: banner-flash 0.5s ease;
}
}
@keyframes banner-flash {
0%,
100% {
opacity: 0;
}
50% {
opacity: 0.35;
}
}
/* Feature box */
.feature-box {
background: linear-gradient(135deg, #ffffff 0%, #e5ecff 100%);
border-radius: 8px;
}
.feature-learn:hover .feature-chevron {
transform: translateX(4px);
}
.feature-chevron {
transition: transform 0.25s ease;
}
.features-swiper .swiper-slide {
height: auto;
box-sizing: border-box;
}
.features-swiper .swiper-wrapper {
align-items: stretch;
}
.features-swiper .swiper-slide > a {
height: 100%;
min-height: 200px;
display: flex;
flex-direction: column;
}
.features-swiper .swiper-slide .feature-learn {
margin-top: auto;
}
@media (max-width: 767px) {
.features-swiper .swiper-slide {
width: 85%;
}
}
@media (min-width: 768px) {
.features-swiper .swiper-slide {
width: calc(50% - 8px);
}
}
@media (min-width: 1024px) {
.features-swiper .swiper-slide {
width: calc(33.333% - 11px);
}
}
/* Products tab section */
.products-tabs-wrap {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.products-tabs-wrap::-webkit-scrollbar {
height: 6px;
}
.products-tabs {
display: flex;
flex-wrap: nowrap;
gap: 8px;
padding-bottom: 4px;
min-width: min-content;
}
.products-tab-btn {
flex-shrink: 0;
padding: 10px 16px;
border-radius: 999px;
font-size: 14px;
font-weight: 400;
background: #e4ebf3;
color: #000;
border: 1px solid rgba(0, 0, 0, 0.1);
white-space: nowrap;
position: relative;
overflow: hidden;
transition: color 0.1s ease-in-out;
z-index: 1;
cursor: pointer;
}
.products-tab-btn:hover::before,
.blogs-archive-filter:hover::before {
width: 100%;
}
.products-tab-btn.active,
.blogs-archive-filter.active {
background: #0c52b3;
color: #fff;
font-weight: 500;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.tab-panel.animate-in .product-tab-swiper .swiper-slide {
opacity: 0;
animation: product-fade-in 0.4s ease forwards;
}
.tab-panel.animate-in .product-tab-swiper .swiper-slide:nth-child(1) {
animation-delay: 0.05s;
}
.tab-panel.animate-in .product-tab-swiper .swiper-slide:nth-child(2) {
animation-delay: 0.1s;
}
.tab-panel.animate-in .product-tab-swiper .swiper-slide:nth-child(3) {
animation-delay: 0.15s;
}
.tab-panel.animate-in .product-tab-swiper .swiper-slide:nth-child(4) {
animation-delay: 0.2s;
}
.tab-panel.animate-in .product-tab-swiper .swiper-slide:nth-child(5) {
animation-delay: 0.25s;
}
.tab-panel.animate-in .product-tab-swiper .swiper-slide:nth-child(6) {
animation-delay: 0.3s;
}
@keyframes product-fade-in {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product-tab-swiper .swiper-slide {
width: 75%;
box-sizing: border-box;
}
.product-tab-swiper .swiper-wrapper {
align-items: stretch;
}
.product-tab-swiper .swiper-slide > .hot-deal-card {
height: 100%;
min-height: 320px;
display: flex;
flex-direction: column;
}
.product-tab-swiper {
position: relative;
}
.product-tab-swiper .tab-swiper-dots {
position: absolute;
bottom: 16px;
left: 0;
right: 0;
display: flex;
justify-content: center;
}
.product-tab-swiper .tab-swiper-dots .swiper-pagination-bullet {
width: 7px;
height: 7px;
background: #000;
opacity: 0.35;
margin: 0 4px !important;
transition:
width 0.35s ease,
opacity 0.35s ease;
}
.product-tab-swiper .tab-swiper-dots .swiper-pagination-bullet-active {
width: 37px;
border-radius: 7px;
opacity: 1;
}
@media (min-width: 640px) {
.product-tab-swiper .swiper-slide {
width: 50%;
}
}
@media (min-width: 768px) {
.product-tab-swiper .swiper-slide {
width: 33.333%;
}
}
@media (min-width: 1024px) {
.product-tab-swiper .swiper-slide {
width: 25%;
}
}
/* Brands section – infinite Swiper slider */
.brands-section {
box-sizing: border-box;
}
.trusted-by-list {
-webkit-transition-timing-function: linear !important;
-o-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
.trusted-by-list .swiper-wrapper {
-webkit-transition-timing-function: linear !important;
-o-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
.trusted-by-swiper {
overflow: hidden;
}
.trusted-by-slide {
width: auto;
min-width: 130px;
display: flex;
align-items: center;
justify-content: center;
height: 96px;
padding: 0 12px;
}
.trusted-by-slide img {
max-height: 56px;
max-width: 140px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
@media (min-width: 768px) {
.trusted-by-slide {
min-width: 160px;
height: 110px;
padding: 0 18px;
}
.trusted-by-slide img {
max-height: 64px;
max-width: 160px;
}
}
/* Blog card */
.blogs-swiper .swiper-wrapper {
align-items: stretch;
}
.blogs-swiper .swiper-slide {
height: auto;
}
.blogs-swiper .swiper-slide > a {
height: 100%;
}
.blog-card {
border-radius: 24px;
background: #fff;
border: 1px solid #f1f5f9;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.blog-card .blog-img-wrap {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
flex-shrink: 0;
}
.blog-card .blog-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-tag {
position: absolute;
top: 12px;
left: 12px;
padding: 6px 12px;
border-radius: 9999px;
background: rgba(12, 82, 179, 0.3);
border: 1px solid rgba(255, 255, 255, 0.4);
font-size: 12px;
font-weight: 700;
color: #fff;
}
.blog-card .blog-content {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.blog-card .blog-title {
font-size: 16px;
font-weight: 600;
color: #000;
margin-bottom: 8px;
line-clamp: 2;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card .blog-desc {
font-size: 14px;
color: #64748b;
line-height: 1.4;
margin-bottom: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.blog-card .blog-footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
}
.blog-card .blog-time {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: #94a3b8;
}
.blog-card .blog-read {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: #0c52b3;
}
.blog-card .blog-read img {
transition: transform 0.2s ease;
}
.blog-card:hover .blog-read img {
transform: translateX(4px);
}
.blogs-dots .swiper-pagination-bullet {
width: 7px;
height: 7px;
background: #000;
opacity: 0.35;
margin: 0 4px !important;
transition:
width 0.35s ease,
opacity 0.35s ease;
}
.blogs-dots .swiper-pagination-bullet-active {
width: 37px;
border-radius: 7px;
opacity: 1;
}
/* Footer – full width of screen (mobile and desktop) */
.site-footer {
background: #0a0505;
border-top: 25px solid #0a0505;
border-left: 25px solid #0a0505;
border-right: 25px solid #0a0505;
border-radius: 48px 48px 0 0;
color: #fff;
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
/* padding: 0 25px 0; */
overflow-x: hidden;
box-sizing: border-box;
}
@media (max-width: 1023px) {
.site-footer {
overflow-x: hidden;
box-sizing: border-box;
}
.site-footer > div {
min-width: 0;
max-width: 100%;
}
.footer-newsletter {
min-width: 0;
}
.footer-newsletter-input-wrap {
min-width: 0;
}
.footer-newsletter-form {
min-width: 0;
}
.footer-links-section {
min-width: 0;
}
.footer-map-wrap {
min-width: 0;
}
.footer-map-wrap iframe {
max-width: 100%;
}
.footer-contact-item span:not([class]) {
overflow-wrap: break-word;
word-break: break-word;
}
}
.footer-logo-newsletter {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.footer-newsletter {
position: relative;
border-radius: 48px;
padding: 24px;
background: rgba(42, 48, 234, 0.1);
border: 1px solid rgba(112, 42, 234, 0.2);
overflow: hidden;
}
.footer-newsletter .footer-newsletter-bg {
position: absolute;
top: -20px;
right: -31px;
width: 40%;
transform: scale(2.5);
max-width: 280px;
/* height: 100%; */
/* min-height: 120%; */
pointer-events: none;
object-fit: cover;
object-position: top right;
}
.footer-logo-block {
text-align: center;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 8px;
transition: opacity 0.2s;
}
.footer-logo:hover {
opacity: 0.9;
}
.footer-logo-img {
display: block;
height: 90px;
width: auto;
object-fit: contain;
}
.footer-logo-desc {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.7);
max-width: 280px;
}
.footer-newsletter-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
color: #fff;
}
.footer-newsletter-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
margin-bottom: 20px;
line-height: 1.4;
}
.footer-newsletter-form {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.footer-newsletter-input-wrap {
position: relative;
flex: 1;
min-width: 200px;
}
.footer-newsletter-input-wrap .input-at {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
pointer-events: none;
}
.footer-newsletter-input {
width: 100%;
height: 48px;
padding: 0 18px 0 36px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(33, 17, 17, 0.5);
color: #fff;
font-size: 14px;
transition:
border-color 0.2s,
background 0.2s;
}
.footer-newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
.footer-newsletter-input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.3);
background: rgba(33, 17, 17, 0.6);
}
.footer-newsletter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 48px;
padding: 0 24px;
border-radius: 12px;
border: none;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: filter 0.7s ease;
}
.footer-newsletter-btn:hover {
filter: brightness(1.15);
}
.footer-newsletter-btn .btn-arrow {
transition: transform 0.25s ease;
}
.footer-newsletter-btn:hover .btn-arrow {
transform: translateX(4px);
}
.footer-links-section {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 24px;
margin-top: 32px;
}
.footer-accordion-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 0;
background: none;
border: none;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.footer-accordion-btn .chevron-footer {
width: 0.5rem;
height: 0.5rem;
transition: transform 0.25s ease;
flex-shrink: 0;
}
.footer-accordion-btn[aria-expanded="true"] .chevron-footer {
transform: rotate(180deg);
}
.footer-accordion-content {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease;
}
.footer-accordion-content.open {
max-height: 500px;
}
.footer-accordion-content a {
display: block;
padding: 10px 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: color 0.2s;
}
.footer-accordion-content a:last-child {
border-bottom: none;
}
.footer-accordion-content a:hover {
color: #fff;
}
.footer-contact-title {
font-size: 12px;
font-weight: 700;
color: #0c52b3;
margin: 24px 0 16px;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
line-height: 1.4;
transition: color 0.2s;
}
.footer-contact-item:hover {
color: #fff;
}
.footer-contact-icon-wrap {
position: relative;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.footer-contact-icon-wrap img {
width: 18px;
height: 18px;
object-fit: contain;
}
.footer-contact-icon-wrap .icon-main {
transform: translateY(0);
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-contact-icon-wrap .icon-hover {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 100%);
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
}
.footer-contact-item:hover .footer-contact-icon-wrap .icon-main {
transform: translateY(-100%);
opacity: 0;
}
.footer-contact-item:hover .footer-contact-icon-wrap .icon-hover {
transform: translate(-50%, -50%);
opacity: 1;
}
.footer-map-wrap {
border-radius: 30px;
overflow: hidden;
margin-top: 24px;
background: #1a1a1a;
}
.footer-map-wrap iframe {
display: block;
width: 100%;
height: 220px;
border: none;
}
.footer-social-wrap {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: center;
}
.footer-social-link {
position: relative;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition:
background 0.2s,
border-color 0.2s;
}
.footer-social-link:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
}
.footer-social-link img {
width: 20px;
height: 20px;
object-fit: contain;
}
.footer-social-link .icon-main {
transform: translateY(0);
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-social-link .icon-hover {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 100%);
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
}
.footer-social-link:hover .icon-main {
transform: translateY(-100%);
opacity: 0;
}
.footer-social-link:hover .icon-hover {
transform: translate(-50%, -50%);
opacity: 1;
}
.footer-divider {
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 24px 0 16px;
}
.footer-payment {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
}
.footer-payment img {
height: 28px;
width: auto;
object-fit: contain;
opacity: 0.9;
}
.footer-copyright {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
padding-bottom: 24px;
text-align: center;
}
@media (min-width: 1024px) {
.site-footer {
padding: 0;
border-left: 0;
border-right: 0;
border-top-width: 25px;
border-radius: 48px 48px 0 0;
}
.footer-logo-newsletter {
flex-direction: row;
align-items: center;
gap: 32px;
justify-content: space-between;
}
.footer-logo-block {
text-align: left;
}
.footer-logo {
margin-bottom: 0;
}
.footer-newsletter {
padding: 32px 32px 32px 40px;
max-width: 680px;
margin-left: 0;
margin-right: 0;
flex: 1;
min-width: 0;
}
.footer-newsletter-title {
font-size: 24px;
}
.footer-newsletter-form {
flex-wrap: nowrap;
}
.footer-newsletter-btn {
width: auto;
}
.footer-newsletter-input-wrap {
min-width: 0;
}
.footer-links-section {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px 24px;
align-items: start;
}
.footer-grid {
display: contents;
}
.footer-contact-wrap,
.footer-map-wrap,
.footer-bottom-row,
.footer-divider,
.footer-payment,
.footer-copyright {
grid-column: 1 / -1;
}
.footer-accordion-btn {
pointer-events: none;
cursor: default;
padding: 0 0 12px;
}
.footer-accordion-btn .chevron-footer {
display: none;
}
.footer-accordion-content {
max-height: none !important;
}
.footer-accordion-content.open {
max-height: none;
}
.footer-accordion-content a {
border-bottom: none;
}
.footer-contact-wrap {
margin-top: 8px;
}
.footer-map-wrap {
margin-top: 24px;
}
.footer-bottom-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 24px;
}
.footer-social-wrap {
margin-top: 0;
justify-content: center;
}
.footer-divider {
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.footer-copyright {
text-align: center;
}
}
/* Mobile: fixed header and bottom nav (never hide on scroll); prevent hero overflow */
@media (max-width: 1023px) {
body {
padding-top: 56px;
padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
overflow-x: hidden;
}
.mobile-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 30;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
box-sizing: border-box;
}
.mobile-header > div {
min-width: 0;
max-width: 100%;
}
}
@media (min-width: 1024px) {
.bottom-nav {
display: none !important;
}
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 40;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0 8px 8px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
background: rgba(255, 255, 255, 0.69);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
min-height: 56px;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.bottom-nav a,
.bottom-nav button.bottom-nav-link {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 4px;
padding: 8px 4px 10px;
text-decoration: none;
color: #5379ac;
font-size: 12px;
font-weight: 400;
max-width: 72px;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
.bottom-nav a img,
.bottom-nav a svg,
.bottom-nav button.bottom-nav-link img,
.bottom-nav button.bottom-nav-link svg {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
}
.bottom-nav .bottom-nav-center {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 0;
max-width: none;
}
.bottom-nav .bottom-nav-home-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border-radius: 50%;
background: #0c52b3;
border: 6px solid #a9c0ff;
margin-top: -16px;
flex-shrink: 0;
}
.bottom-nav .bottom-nav-home-btn img {
width: 24px;
height: 24px;
filter: brightness(0) invert(1);
}
.bottom-nav .bottom-nav-home-btn span {
display: none;
}
/* ----- Single product page ----- */
.product-breadcrumb-wrap {
width: 100%;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding: 10px 0;
}
.product-breadcrumb {
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
gap: 6px;
padding: 0 16px;
min-height: 24px;
}
.product-breadcrumb::-webkit-scrollbar {
height: 4px;
}
.product-breadcrumb a,
.product-breadcrumb .breadcrumb-current {
flex-shrink: 0;
font-size: 12px;
color: rgba(0, 0, 0, 0.6);
text-decoration: none;
white-space: nowrap;
}
.product-breadcrumb a:hover {
color: #0c52b3;
}
.product-breadcrumb .breadcrumb-current {
color: #0c52b3;
font-weight: 600;
}
.product-breadcrumb .breadcrumb-arrow {
flex-shrink: 0;
width: 14px;
height: 14px;
opacity: 0.6;
}
.product-page-main {
padding: 16px;
padding-bottom: 100px;
}
.product-page-inner {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 280px auto;
gap: 16px;
max-width: 100%;
}
/* Thumbs col: vertical swiper */
.product-thumbs-col {
grid-row: 1;
grid-column: 1;
}
.product-thumbs-swiper-wrap {
width: 72px;
height: 280px;
overflow: hidden;
}
.product-thumbs-swiper {
height: 100%;
}
.product-thumbs-swiper .swiper-wrapper {
flex-direction: column;
}
.product-thumbs-swiper .swiper-slide {
height: 72px !important;
width: 72px !important;
flex-shrink: 0;
box-sizing: border-box;
}
.product-thumb {
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
background: #f1f5f9;
transition:
border-color 0.2s,
opacity 0.2s;
}
.product-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-thumb:not(.active) {
opacity: 0.6;
}
.product-thumb.active {
border-color: #0c52b3;
opacity: 1;
}
/* Main image col */
.product-main-col {
grid-row: 1;
grid-column: 2;
min-width: 0;
}
.product-main-image-wrap {
position: relative;
width: 100%;
height: 100%;
aspect-ratio: unset;
max-height: none;
background: #f8fafc;
border-radius: 12px;
overflow: hidden;
}
.product-main-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.25s ease;
transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}
.product-zoom-btn {
position: absolute;
bottom: 12px;
right: 12px;
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(90deg, #ffffff 0%, #e4f3ff 100%);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.product-zoom-btn img {
width: 22px;
height: 22px;
}
/* Info block below cols */
.product-info-block {
grid-column: 1 / -1;
grid-row: 2;
}
.product-sku-line {
font-size: 12px;
opacity: 0.5;
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
}
.product-sku-copy {
flex-shrink: 0;
width: 28px;
height: 28px;
padding: 0;
border: none;
background: transparent;
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.product-sku-copy:hover {
background: rgba(0, 0, 0, 0.06);
color: #0c52b3;
}
.product-actions-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.product-actions-left {
display: flex;
gap: 10px;
}
.product-action-btn {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(90deg, #ffffff 0%, #e4f3ff 100%);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.product-action-btn img {
width: 20px;
height: 20px;
}
.product-action-btn__label {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-2px);
margin-bottom: 6px;
padding: 5px 8px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
color: #fff;
background: #1e293b;
border-radius: 6px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
}
.wishlist-quote-wrap--product-page:hover .product-action-btn__label {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.product-action-compare {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: none;
border-radius: 9999px;
background: linear-gradient(90deg, #ffffff 0%, #e4f3ff 100%);
font-size: 14px;
font-weight: 500;
color: #1e293b;
cursor: pointer;
font-family: inherit;
text-decoration: none;
}
.product-action-compare img {
width: 20px;
height: 20px;
}
.product-action-compare:hover {
color: #0c52b3;
}
.product-brand-badge {
display: inline-block;
width: fit-content;
padding: 4px 12px;
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
color: #0c52b3;
background: rgba(12, 82, 179, 0.1);
border-radius: 999px;
text-decoration: none;
transition:
background 0.2s,
color 0.2s;
}
.product-brand-badge:hover {
background: rgba(12, 82, 179, 0.18);
color: #0a4199;
}
.product-title {
font-size: 18px;
font-weight: 600;
margin: 0 0 8px;
line-height: 1.3;
color: #1e293b;
}
.product-short-desc {
font-size: 14px;
color: #64748b;
margin: 0;
line-height: 1.5;
}
/* Flash sale box – compact on mobile */
.product-flashsale-box {
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
border-radius: 8px;
padding: 10px 12px;
margin-top: 14px;
display: flex;
flex-wrap: nowrap;
gap: 10px;
align-items: center;
justify-content: space-between;
}
.product-flashsale-left {
flex: 1;
min-width: 0;
}
.product-flashsale-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
padding: 4px 8px;
font-size: 11px;
font-weight: 600;
color: #fff;
}
.product-flashsale-badge img {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.product-flashsale-hurry {
margin: 4px 0 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
gap: 4px;
line-height: 1.3;
}
.product-flashsale-bullet {
width: 4px;
height: 4px;
border-radius: 50%;
background: #fff;
flex-shrink: 0;
}
.product-flashsale-countdown {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.product-countdown-cell {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 6px 8px;
min-width: 36px;
}
.product-countdown-value {
font-size: 14px;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.product-countdown-label {
font-size: 9px;
color: rgba(255, 255, 255, 0.9);
margin-top: 1px;
}
/* Low stock + price row */
.product-lowstock-wrap {
margin-top: 16px;
}
.product-lowstock-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.product-lowstock-left {
display: flex;
align-items: center;
gap: 6px;
}
.product-lowstock-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.product-lowstock-text {
font-size: 13px;
font-weight: 600;
color: #dc2626;
}
.product-lowstock-sold {
font-size: 10px;
color: #94a3b8;
}
.product-lowstock-bar-wrap {
margin-bottom: 12px;
}
.product-lowstock-bar {
height: 8px;
border-radius: 9999px;
background: #e2e8f0;
overflow: hidden;
position: relative;
}
.product-lowstock-bar-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--stock-percent, 30%);
background: #dc2626;
border-radius: 9999px;
transition: width 0.2s ease;
}
.product-price-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 12px;
justify-content: space-between;
}
.product-price-current {
font-size: 30px;
font-weight: 700;
color: #102a43;
}
.product-price-old {
font-size: 18px;
color: #94a3b8;
text-decoration: line-through;
}
.product-price-badge {
font-size: 13px;
font-weight: 600;
color: #fff;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
border-radius: 8px;
padding: 4px 10px;
}
/* Out of stock: image overlay + badge */
.product-main-image-wrap.is-outofstock {
position: relative;
}
.product-main-image-wrap.is-outofstock::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.55);
pointer-events: none;
border-radius: inherit;
}
.product-outofstock-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #ffebee;
color: #c62828;
font-size: 13px;
font-weight: 700;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.02em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.product-outofstock-badge svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Out of stock: info block (replaces low-stock) */
.product-outofstock-wrap {
margin-top: 16px;
padding: 16px 18px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 12px;
}
.product-outofstock-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.product-outofstock-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
color: #b91c1c;
}
.product-outofstock-title {
font-size: 15px;
font-weight: 700;
color: #b91c1c;
}
.product-outofstock-desc {
font-size: 13px;
color: #7f1d1d;
margin: 0 0 12px;
line-height: 1.45;
}
.product-outofstock-wrap .product-price-row {
margin-bottom: 0;
}
.product-outofstock-wrap .product-price-current {
color: #64748b;
font-size: 24px;
}
.product-outofstock-wrap .product-price-old {
color: #94a3b8;
}
.product-notify-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
margin-top: 16px;
}
.product-notify-form {
flex: 1;
min-width: 0;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.product-notify-input {
flex: 1;
min-width: 180px;
padding: 12px 14px;
border: 1px solid #e2e8f0;
border-radius: 999px;
font-size: 14px;
font-family: inherit;
color: #1e293b;
}
.product-notify-input::placeholder {
color: #94a3b8;
}
.product-notify-input:focus {
outline: none;
border-color: #0c52b3;
box-shadow: 0 0 0 3px rgba(12, 82, 179, 0.15);
}
.product-notify-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
color: #fff;
border: none;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
}
.product-notify-btn:hover {
opacity: 0.95;
}
.product-notify-btn img,
.product-notify-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.product-quantity-row.is-outofstock {
display: none;
}
.product-add-cart-btn.is-disabled,
.product-add-cart-btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.product-total-buy-mobile.is-outofstock .product-buy-btn {
display: none;
}
.product-total-buy-mobile.is-outofstock .product-notify-mobile {
display: flex;
}
.product-notify-mobile {
display: none;
flex: 1;
min-width: 0;
}
.product-notify-mobile .product-notify-btn {
width: 100%;
}
/* Variations (mobile) */
.product-variations-wrap {
background: linear-gradient(
90deg,
#ffffff 0%,
rgba(255, 255, 255, 0.26) 100%
);
border-radius: 8px;
padding: 14px 16px;
margin-top: 16px;
}
.product-var-block {
margin-bottom: 14px;
}
.product-var-block:last-child {
margin-bottom: 0;
}
.product-var-label {
font-size: 13px;
font-weight: 500;
color: #1e293b;
margin: 0 0 8px;
}
.product-var-picked {
font-weight: 600;
color: #137fec;
}
.product-var-colors {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.product-color-swatch {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid transparent;
padding: 0;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.product-color-swatch:hover {
box-shadow: 0 0 0 2px rgba(19, 127, 236, 0.3);
}
.product-color-swatch.active {
border-color: transparent;
box-shadow: 0 0 0 2px #137fec;
}
.product-color-swatch .product-color-check {
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.5);
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.product-color-swatch .product-color-check svg {
width: 14px;
height: 14px;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6))
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.product-color-swatch[data-color="White"] .product-color-check svg,
.product-color-swatch[data-color="Gray"] .product-color-check svg {
stroke: #1e293b;
filter: none;
}
.product-color-swatch.active .product-color-check {
opacity: 1;
transform: scale(1);
}
.product-var-options {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.product-var-option {
font-size: 13px;
font-weight: 500;
color: #334155;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 8px 14px;
cursor: pointer;
font-family: inherit;
transition:
background 0.2s,
border-color 0.2s,
color 0.2s;
}
.product-var-option:hover {
border-color: #94a3b8;
}
.product-var-option.active {
background: rgba(19, 127, 236, 0.05);
border: 1px solid #137fec;
color: #0c52b3;
}
.product-quantity-row {
display: flex;
gap: 10px;
align-items: center;
margin-top: 16px;
flex-wrap: wrap;
}
.product-quantity-wrap {
display: flex;
align-items: center;
gap: 0;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
padding: 4px 4px;
}
.product-qty-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: #eeeeee;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.product-qty-btn img {
width: 14px;
height: 14px;
}
.product-qty-btn:hover {
background: #e5e5e5;
}
.product-qty-value {
min-width: 28px;
text-align: center;
font-size: 14px;
font-weight: 600;
color: #1e293b;
}
.product-add-cart-btn {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
padding: 12px 18px;
font-size: 14px;
font-weight: 600;
color: #1e293b;
cursor: pointer;
font-family: inherit;
}
.product-add-cart-btn {
position: relative;
overflow: hidden;
transition:
background 0.25s ease,
border-color 0.25s ease;
}
.product-add-cart-btn .product-add-cart-default,
.product-add-cart-btn .product-add-cart-added {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition:
opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product-add-cart-btn .product-add-cart-added {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(0.9);
pointer-events: none;
background: #fff;
border-radius: 999px;
color: #0c52b3;
}
.product-add-cart-btn .product-add-cart-added .product-add-cart-check {
display: flex;
align-items: center;
justify-content: center;
color: #16a34a;
}
.product-add-cart-btn .product-add-cart-added .product-add-cart-check svg {
animation: product-add-check 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s
both;
}
@keyframes product-add-check {
0% {
opacity: 0;
transform: scale(0.3);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.product-add-cart-btn.added .product-add-cart-default {
opacity: 0;
transform: scale(0.9);
pointer-events: none;
}
.product-add-cart-btn.added .product-add-cart-added {
opacity: 1;
transform: scale(1);
}
.product-add-cart-btn.added {
border-color: rgba(22, 163, 74, 0.4);
background: rgba(22, 163, 74, 0.06);
}
.product-add-cart-btn img {
width: 20px;
height: 20px;
}
.product-add-cart-btn:hover:not(.added) {
background: #f8fafc;
border-color: #cbd5e1;
}
.product-actions-bottom {
display: flex;
gap: 10px;
align-items: center;
margin-top: 12px;
flex-wrap: wrap;
}
.product-ask-expert-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: transparent;
border: 1px solid #e2e8f0;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: #475569;
cursor: pointer;
font-family: inherit;
}
.product-ask-expert-btn img {
width: 18px;
height: 18px;
}
.product-ask-expert-btn:hover {
border-color: #cbd5e1;
color: #0c52b3;
}
.product-vat-wrap .vat-toggle {
display: flex;
flex-direction: row;
background: #e2e8f0;
border-radius: 6px;
padding: 2px;
}
.product-vat-wrap .vat-option {
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
color: #64748b;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
transition:
background 0.2s,
color 0.2s;
font-family: inherit;
}
.product-vat-wrap .vat-option:hover {
color: #334155;
}
.product-vat-wrap .vat-option.is-active {
background: #fff;
color: #0c52b3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Trust row: Free Shipping + 100% Guaranteed (mobile) */
.product-trust-row {
display: flex;
gap: 10px;
margin-top: 16px;
}
.product-trust-box {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background: linear-gradient(
90deg,
#ffffff 0%,
rgba(255, 255, 255, 0.26) 100%
);
border-radius: 12px;
border: 1px solid #fff;
padding: 12px;
}
.product-trust-icon-wrap {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 8px;
background: #d3e9ff;
display: flex;
align-items: center;
justify-content: center;
}
.product-trust-icon-wrap img {
width: 22px;
height: 22px;
object-fit: contain;
}
.product-trust-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.product-trust-title {
font-size: 13px;
font-weight: 600;
color: #1e293b;
}
.product-trust-sub {
font-size: 11px;
color: #64748b;
}
/* Total + Buy (mobile) */
.product-total-buy-mobile {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.product-total-pill {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(
90deg,
#ffffff 0%,
rgba(255, 255, 255, 0.26) 100%
);
border: 1px solid #fff;
border-radius: 999px;
padding: 12px 18px;
}
.product-total-label {
font-size: 14px;
font-weight: 500;
color: #64748b;
}
.product-total-price {
font-size: 24px;
font-weight: 700;
color: #137fec;
}
.product-buy-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 20px;
border: none;
border-radius: 999px;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
font-family: inherit;
}
.product-buy-btn img {
width: 22px;
height: 22px;
filter: brightness(0) invert(1);
}
.product-buy-btn:hover {
opacity: 0.95;
}
/* Product details accordion */
.product-details-section {
width: 100%;
margin-top: 20px;
padding: 24px 16px 32px;
/* border-top: 1px solid #e2e8f0; */
background: linear-gradient(
90deg,
#ffffff 0%,
rgba(255, 255, 255, 26%) 100%
);
border-radius: 10px;
}
.product-details-inner {
max-width: 1400px;
margin: 0 auto;
}
.product-tabs-desk {
display: none;
}
.product-accordion {
display: flex;
flex-direction: column;
gap: 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.product-accordion-item {
border-bottom: 1px solid #e2e8f0;
}
.product-accordion-item:last-child {
border-bottom: none;
}
.product-accordion-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
background: #f8fafc;
border: none;
font-size: 15px;
font-weight: 600;
color: #1e293b;
cursor: pointer;
font-family: inherit;
text-align: left;
transition:
background 0.2s ease,
color 0.2s ease;
}
.product-accordion-trigger:hover {
background: #f1f5f9;
}
.product-accordion-trigger[aria-expanded="true"] {
background: #fff;
}
.product-accordion-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
position: relative;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-accordion-icon::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
border-radius: 0 0 2px 0;
transform: translate(-60%, -40%) rotate(45deg);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-accordion-trigger[aria-expanded="true"] .product-accordion-icon {
transform: rotate(180deg);
}
.product-accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-accordion-item.is-open .product-accordion-panel {
grid-template-rows: 1fr;
}
.product-accordion-content {
min-height: 0;
overflow: hidden;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}
.product-accordion-item.is-open .product-accordion-content {
opacity: 1;
}
.product-accordion-content > *:first-child {
padding: 16px 20px 20px;
}
.product-accordion-content p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #475569;
}
.product-qa-count {
font-weight: 500;
color: #64748b;
}
/* Technical specs */
.product-specs-content {
padding: 0 !important;
}
.product-spec-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 20px;
font-size: 14px;
}
.product-spec-row:nth-child(odd) {
background: rgba(248, 250, 252, 0.5);
}
.product-spec-row:nth-child(even) {
background: #fff;
}
.product-spec-label {
font-weight: 500;
color: #475569;
}
.product-spec-value {
color: #1e293b;
font-weight: 500;
}
/* Q&A */
.product-qa-content {
padding: 20px !important;
}
.product-qa-search-wrap {
position: relative;
margin-bottom: 10px;
display: flex;
align-items: center;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 0 10px 0 8px;
}
.product-qa-search-wrap {
padding: 0 10px !important;
border-radius: 99px;
}
.product-qa-search {
flex: 1;
min-width: 0;
padding: 8px 0 8px 8px;
background: transparent;
border: none;
font-size: 14px;
color: #1e293b;
font-family: inherit;
}
.product-qa-search:focus {
outline: none;
}
.product-qa-search::placeholder {
color: #94a3b8;
}
.product-qa-search-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
opacity: 0.6;
pointer-events: none;
}
.product-qa-ask-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
@media (max-width: 768px) {
.product-qa-ask-row {
justify-content: center;
}
}
.product-qa-ask-title {
font-size: 14px;
font-weight: 500;
color: #475569;
}
.product-qa-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.product-qa-card {
background: #137fec;
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.05),
0 2px 4px -1px rgba(0, 0, 0, 0.03);
text-align: left;
margin-bottom: 24px;
}
.product-qa-header {
display: flex;
align-items: flex-start;
gap: 16px;
}
.product-qa-icon-wrap {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.18);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.product-qa-icon-wrap svg {
width: 22px;
height: 22px;
color: #ffffff;
}
.product-qa-header-info {
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
}
.product-qa-subtitle {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.01em;
}
.product-qa-title {
font-size: 18px;
font-weight: 700;
color: #ffffff;
line-height: 1.4;
margin: 0;
}
.product-qa-answer-box {
background: rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
.product-qa-answer-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.product-qa-status-dot {
width: 8px;
height: 8px;
background-color: #22c55e;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.product-qa-card .product-qa-answer-text {
font-size: 15px;
font-weight: 400;
color: rgba(255, 255, 255, 0.95);
line-height: 1.5;
margin: 0;
}
@media (max-width: 640px) {
.product-qa-card {
padding: 16px;
gap: 16px;
border-radius: 12px;
}
.product-qa-header {
gap: 12px;
}
.product-qa-icon-wrap {
width: 38px;
height: 38px;
border-radius: 10px;
}
.product-qa-icon-wrap svg {
width: 18px;
height: 18px;
}
.product-qa-title {
font-size: 15px;
}
.product-qa-subtitle {
font-size: 12px;
}
.product-qa-answer-box {
padding: 14px;
border-radius: 8px;
}
.product-qa-card .product-qa-answer-text {
font-size: 13px;
}
.product-qa-list {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
padding: 4px 4px 12px;
margin: 0 -4px 8px;
-webkit-overflow-scrolling: touch;
}
.product-qa-list::-webkit-scrollbar {
height: 4px;
}
.product-qa-list::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 99px;
}
.product-qa-list::-webkit-scrollbar-thumb {
background: rgba(19, 127, 236, 0.2);
border-radius: 99px;
}
.product-qa-list .product-qa-card {
flex: 0 0 85%;
scroll-snap-align: start;
margin-bottom: 0;
}
}
.product-qa-ask-btn {
display: inline-flex;
align-items: center;
gap: 8px;
width: auto;
padding: 10px 18px;
background: transparent;
border: 2px solid #137fec;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
color: #137fec;
cursor: pointer;
font-family: inherit;
transition:
background 0.2s ease,
color 0.2s ease;
}
.product-qa-ask-btn img {
width: 18px;
height: 18px;
}
.product-qa-ask-btn:hover {
background: rgba(19, 127, 236, 0.08);
}
.product-qa-support-box {
background: #fff;
border-radius: 8px;
border: 1px solid #e2e8f0;
padding: 20px;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.product-qa-support-status {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
justify-content: center;
}
.product-qa-support-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
flex-shrink: 0;
}
.product-qa-support-available {
font-size: 12px;
font-weight: 700;
color: #22c55e;
}
.product-qa-support-response {
font-size: 12px;
font-weight: 300;
color: #64748b;
margin-left: 4px;
}
.product-qa-support-text {
font-size: 13px;
color: #475569;
line-height: 1.6;
margin: 0 0 18px;
text-align: center;
}
.product-qa-callback-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 16px;
width: fit-content;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.product-qa-callback-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
background: #102a43;
border: none;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
color: #fff;
cursor: pointer;
font-family: inherit;
transition:
opacity 0.2s,
background 0.2s;
}
.product-qa-callback-btn img {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
}
.product-qa-callback-btn:hover {
opacity: 0.9;
}
.product-qa-callback-form {
display: none;
gap: 8px;
align-items: stretch;
}
.product-qa-callback-form.is-visible {
display: flex;
}
.product-qa-callback-btn.is-hidden {
display: none;
}
.product-qa-callback-input {
flex: 1;
min-width: 0;
padding: 12px 14px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
}
.product-qa-callback-input:focus {
outline: none;
border-color: #137fec;
}
.product-qa-callback-submit {
padding: 12px 20px;
background: #137fec;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #fff;
cursor: pointer;
font-family: inherit;
}
.product-qa-callback-submit:hover {
opacity: 0.9;
}
/* Zoom lightbox */
.product-zoom-lightbox {
position: fixed;
inset: 0;
z-index: 100;
background: #000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s,
visibility 0.25s;
}
.product-zoom-lightbox.is-open {
opacity: 1;
visibility: visible;
}
.product-zoom-lightbox-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 48px 16px 80px;
}
.product-zoom-lightbox-close {
position: absolute;
top: 12px;
right: 16px;
z-index: 2;
width: 44px;
height: 44px;
border: none;
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.product-zoom-lightbox-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.product-zoom-main-swiper-wrap {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.product-zoom-main-swiper {
width: 100%;
height: 100%;
}
.product-zoom-main-swiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
.product-zoom-main-swiper .swiper-slide img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.product-zoom-thumbs-wrap {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
height: 64px;
}
.product-zoom-thumbs-swiper .swiper-slide {
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
opacity: 0.6;
transition:
opacity 0.2s,
border-color 0.2s;
}
.product-zoom-thumbs-swiper .swiper-slide-thumb-active {
border-color: #0c52b3;
opacity: 1;
}
.product-zoom-thumbs-swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Compare modal */
.compare-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 5, 5, 0.5);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.compare-modal-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.compare-modal {
position: fixed;
inset: 0;
z-index: 101;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s ease,
visibility 0.25s ease;
}
.compare-modal.is-open {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.compare-modal-dialog {
width: 100%;
max-width: 920px;
max-height: calc(100vh - 32px);
background: #fff;
border-radius: 16px;
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.18),
0 0 0 1px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.98);
transition: transform 0.25s ease;
}
.compare-modal.is-open .compare-modal-dialog {
transform: scale(1);
}
.compare-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.compare-modal-title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #1e293b;
letter-spacing: -0.02em;
}
.compare-modal-close {
width: 40px;
height: 40px;
border: none;
background: #f1f5f9;
color: #64748b;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.2s,
color 0.2s;
}
.compare-modal-close:hover {
background: #e2e8f0;
color: #1e293b;
}
.compare-modal-body {
padding: 24px;
overflow: auto;
flex: 1;
min-height: 0;
}
.compare-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -24px 20px;
padding: 0 24px;
}
.compare-table-wrap::-webkit-scrollbar {
height: 6px;
}
.compare-table-wrap::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 999px;
}
.compare-table-wrap::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 999px;
}
.compare-table-wrap::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.compare-table {
width: 100%;
min-width: 480px;
border-collapse: collapse;
font-size: 14px;
}
.compare-table thead tr {
height: 100%;
}
.compare-table-label-col {
text-align: left;
padding: 12px 16px 12px 0;
font-weight: 500;
color: #64748b;
background: #fff;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
width: 140px;
min-width: 140px;
position: sticky;
left: 0;
z-index: 1;
box-shadow: 1px 0 0 0 #f1f5f9;
}
.compare-table thead .compare-table-label-col {
padding-top: 0;
padding-bottom: 12px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #94a3b8;
background: #fff;
}
.compare-table tbody .compare-table-label-col {
background: #fff;
}
.compare-table-product-col {
padding: 12px 0 12px 16px;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
background: #fff;
height: 100%;
}
.compare-table thead .compare-table-product-col {
padding-top: 0;
padding-bottom: 16px;
vertical-align: top;
}
.compare-product-card {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
height: 100%;
transition:
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.compare-product-card:hover {
border-color: #cbd5e1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.compare-product-image-link {
display: block;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
background: #fff;
max-width: 150px;
width: 100%;
margin: 0 auto;
}
.compare-product-image {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.compare-product-meta {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.compare-product-brand {
display: inline-block;
width: fit-content;
font-size: 11px;
font-weight: 600;
color: #0c52b3;
background: rgba(12, 82, 179, 0.1);
padding: 2px 8px;
border-radius: 999px;
}
.compare-product-name {
text-align: left;
font-size: 14px;
font-weight: 600;
color: #1e293b;
text-decoration: none;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 38px; /* Force uniform 2-line height */
transition: color 0.2s;
}
.compare-product-name:hover {
color: #0c52b3;
}
.compare-product-price-row {
display: flex;
align-items: baseline;
gap: 8px;
height: 28px; /* Force uniform height for price block */
overflow: hidden;
flex-wrap: nowrap;
}
.compare-product-price {
font-size: 18px;
font-weight: 700;
color: #1e293b;
}
.compare-product-price-old {
font-size: 14px;
color: #94a3b8;
text-decoration: line-through;
}
.compare-product-cta {
font-size: 13px;
font-weight: 600;
color: #0c52b3;
text-decoration: none;
margin-top: auto;
transition: color 0.2s;
white-space: nowrap;
display: inline-block;
width: fit-content;
}
.compare-product-cta:hover {
color: #0a4199;
text-decoration: underline;
}
.compare-product-remove {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border: none;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition:
background 0.2s,
color 0.2s;
}
.compare-product-remove:hover {
background: #fff;
color: #dc2626;
}
.compare-spec-row .compare-table-product-col {
color: #1e293b;
font-weight: 500;
}
.compare-table-add-col {
padding: 12px 0 12px 16px;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
width: 180px;
min-width: 180px;
height: 100%;
}
.compare-table thead .compare-table-add-col {
padding: 0 0 16px 16px;
vertical-align: top;
}
.compare-add-product-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 160px;
padding: 20px 16px;
border: 2px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
color: #64748b;
font-size: 13px;
font-weight: 500;
cursor: pointer;
height: 100%;
transition:
border-color 0.2s,
background 0.2s,
color 0.2s;
font-family: inherit;
}
.compare-add-product-btn:hover {
border-color: #0c52b3;
background: rgba(12, 82, 179, 0.06);
color: #0c52b3;
}
.compare-add-product-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: #e2e8f0;
color: #64748b;
flex-shrink: 0;
transition:
background 0.2s,
color 0.2s;
}
.compare-add-product-btn:hover .compare-add-product-icon {
background: rgba(12, 82, 179, 0.15);
color: #0c52b3;
}
.compare-add-product-text {
text-align: center;
line-height: 1.35;
}
.compare-modal-hint {
margin: 0;
font-size: 13px;
color: #94a3b8;
line-height: 1.5;
}
/* Compare page (standalone) */
.compare-page-section {
padding: 24px 16px 48px;
max-width: 1400px;
margin: 0 auto;
}
.compare-page-inner {
background: #fff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
}
.compare-page-title {
margin: 0 0 24px;
font-size: 22px;
font-weight: 700;
color: #1e293b;
letter-spacing: -0.02em;
}
.compare-page-section .compare-table-wrap {
margin: 0 0 20px;
padding: 0;
}
.compare-add-product-btn {
text-decoration: none;
}
@media (min-width: 768px) {
.compare-page-section {
padding: 32px 24px 64px;
}
.compare-page-inner {
padding: 28px;
}
.compare-page-title {
font-size: 24px;
margin-bottom: 28px;
}
.compare-page-section .compare-table-wrap {
margin: 0 0 24px;
}
}
/* Compare modal – mobile */
@media (max-width: 767px) {
.compare-modal {
padding: 0;
align-items: flex-end;
}
.compare-modal-dialog {
max-height: 88vh;
border-radius: 20px 20px 0 0;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
transform: translateY(100%);
}
.compare-modal.is-open .compare-modal-dialog {
transform: translateY(0);
}
.compare-modal-header {
position: sticky;
top: 0;
z-index: 2;
background: #fff;
padding: 16px 20px;
padding-bottom: 16px;
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
.compare-modal-title {
font-size: 17px;
padding-right: 8px;
}
.compare-modal-close {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
border-radius: 12px;
flex-shrink: 0;
}
.compare-modal-body {
padding: 0 20px 24px;
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.compare-table-wrap {
margin: 0 -20px 16px;
padding: 0 20px 12px;
padding-left: max(20px, env(safe-area-inset-left));
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.compare-table-wrap::-webkit-scrollbar {
display: none;
}
.compare-table {
min-width: 720px;
font-size: 15px;
}
.compare-table-label-col {
width: 110px;
min-width: 110px;
padding: 14px 12px 14px 0;
font-size: 13px;
}
.compare-table thead .compare-table-label-col {
padding-bottom: 14px;
font-size: 11px;
}
.compare-table-product-col {
min-width: 200px;
padding: 14px 0 14px 14px;
}
.compare-table thead .compare-table-product-col {
padding-bottom: 14px;
}
.compare-product-card {
padding: 14px;
gap: 10px;
}
.compare-product-image-link {
max-height: 100px;
aspect-ratio: 1;
}
.compare-product-name {
font-size: 13px;
-webkit-line-clamp: 2;
}
.compare-product-price {
font-size: 16px;
}
.compare-product-cta {
font-size: 12px;
padding: 6px 0;
min-height: 44px;
display: inline-flex;
align-items: center;
}
.compare-product-remove {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
top: 10px;
right: 10px;
}
.compare-table-add-col {
min-width: 160px;
width: 160px;
padding: 14px 0 14px 14px;
}
.compare-table thead .compare-table-add-col {
padding-bottom: 14px;
padding-left: 14px;
}
.compare-add-product-btn {
min-height: 140px;
padding: 16px 12px;
font-size: 12px;
border-radius: 10px;
min-width: 0;
}
.compare-add-product-icon {
width: 40px;
height: 40px;
}
.compare-add-product-icon svg {
width: 22px;
height: 22px;
}
.compare-modal-hint {
font-size: 12px;
line-height: 1.5;
padding: 0 4px;
}
}
@media (min-width: 768px) {
.compare-modal-dialog {
max-height: calc(100vh - 48px);
}
.compare-modal-header {
padding: 24px 28px;
}
.compare-modal-title {
font-size: 20px;
}
.compare-modal-body {
padding: 28px;
}
.compare-table-wrap {
margin: 0 -28px 24px;
padding: 0 28px;
}
.compare-table-label-col {
width: 160px;
min-width: 160px;
padding: 14px 20px 14px 0;
}
.compare-table thead .compare-table-label-col {
padding-bottom: 14px;
}
.compare-table-product-col {
padding: 14px 0 14px 20px;
width: 250px;
min-width: 250px;
}
.compare-table thead .compare-table-product-col {
padding-bottom: 20px;
}
.compare-product-card {
flex-direction: column;
padding: 16px;
gap: 12px;
}
.compare-product-image-link {
width: 100%;
max-width: 140px;
aspect-ratio: 1;
flex-shrink: 0;
margin: 0 auto;
}
.compare-product-meta {
width: 100%;
min-width: 0;
}
.compare-product-name {
-webkit-line-clamp: 2;
font-size: 13px;
height: 36px; /* Tablet-adjusted height */
}
.compare-product-price {
font-size: 18px;
}
.compare-table-add-col {
width: 200px;
min-width: 200px;
padding: 14px 0 14px 20px;
}
.compare-table thead .compare-table-add-col {
padding-bottom: 20px;
padding-left: 20px;
}
.compare-add-product-btn {
min-height: 230px;
padding: 24px;
font-size: 14px;
}
}
@media (min-width: 1200px) {
.compare-table-product-col {
width: 320px;
min-width: 320px;
}
.compare-product-card {
flex-direction: row;
padding: 20px;
gap: 16px;
align-items: center;
}
.compare-product-image-link {
width: 120px;
min-width: 120px;
max-width: 120px;
aspect-ratio: 1;
flex-shrink: 0;
margin: 0;
}
.compare-product-meta {
flex: 1;
min-width: 0;
}
.compare-product-name {
font-size: 14px;
height: 38px; /* Large desktop name height */
}
.compare-product-price {
font-size: 20px;
}
.compare-add-product-btn {
min-height: 180px;
padding: 24px;
font-size: 14px;
}
}
/* Desktop: breadcrumb + gallery + info in one row */
@media (min-width: 1024px) {
.product-breadcrumb-wrap {
padding: 12px 0;
}
.product-breadcrumb {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
}
.product-page-main {
padding: 24px;
padding-bottom: 48px;
max-width: 1400px;
margin: 0 auto;
}
.product-page-inner {
grid-template-columns: 80px 1fr 1fr;
grid-template-rows: 1fr;
gap: 24px;
align-items: start;
}
.product-thumbs-col {
grid-row: 1;
grid-column: 1;
}
.product-thumbs-swiper-wrap {
width: 80px;
height: 380px;
}
.product-thumbs-swiper .swiper-slide {
height: 80px !important;
width: 80px !important;
}
.product-main-col {
grid-row: 1;
grid-column: 2;
}
.product-main-image-wrap {
height: auto;
max-height: 480px;
aspect-ratio: 1;
cursor: zoom-in;
}
.product-main-image-wrap:hover .product-main-image {
transform: scale(1.5);
}
.product-info-block {
grid-column: 3;
grid-row: 1;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.product-sku-line {
margin-bottom: 16px;
}
.product-actions-row {
margin-bottom: 16px;
}
.product-title {
font-size: 22px;
margin-bottom: 12px;
}
.product-short-desc {
font-size: 15px;
}
/* Desktop: flash sale + low stock standard layout */
.product-flashsale-box {
margin-top: 20px;
padding: 14px 18px;
flex-wrap: nowrap;
align-items: center;
}
.product-flashsale-left {
flex: 0 1 auto;
}
.product-flashsale-badge {
padding: 6px 10px;
font-size: 13px;
gap: 6px;
}
.product-flashsale-badge img {
width: 18px;
height: 18px;
}
.product-flashsale-hurry {
margin-top: 6px;
font-size: 12px;
gap: 6px;
}
.product-flashsale-bullet {
width: 6px;
height: 6px;
}
.product-flashsale-countdown {
gap: 8px;
}
.product-countdown-cell {
min-width: 52px;
padding: 10px 12px;
}
.product-countdown-value {
font-size: 18px;
}
.product-countdown-label {
font-size: 11px;
}
.product-lowstock-wrap {
margin-top: 20px;
}
.product-lowstock-header {
margin-bottom: 10px;
}
.product-lowstock-text {
font-size: 14px;
}
.product-lowstock-sold {
font-size: 11px;
}
.product-price-row {
margin-top: 2px;
}
.product-price-current {
font-size: 32px;
}
.product-price-old {
font-size: 18px;
}
.product-price-badge {
font-size: 14px;
padding: 5px 12px;
}
/* Desktop: variations */
.product-variations-wrap {
margin-top: 20px;
padding: 18px 20px;
}
.product-var-block {
margin-bottom: 18px;
}
.product-var-label {
font-size: 14px;
margin-bottom: 10px;
}
.product-color-swatch {
width: 40px;
height: 40px;
}
.product-var-option {
padding: 10px 18px;
font-size: 14px;
}
.product-quantity-row {
margin-top: 20px;
gap: 14px;
}
.product-quantity-wrap {
padding: 6px 6px;
}
.product-qty-btn {
width: 36px;
height: 36px;
}
.product-qty-btn img {
width: 16px;
height: 16px;
}
.product-qty-value {
min-width: 32px;
font-size: 15px;
}
.product-add-cart-btn {
flex: 1;
padding: 14px 24px;
font-size: 15px;
}
.product-add-cart-btn img {
width: 22px;
height: 22px;
}
.product-actions-bottom {
margin-top: 14px;
gap: 12px;
}
.product-ask-expert-btn {
padding: 8px 18px;
font-size: 14px;
}
.product-ask-expert-btn img {
width: 20px;
height: 20px;
}
/* Desktop: Trust row – show and place after Total + Buy for best UX */
.product-trust-row {
display: flex;
gap: 12px;
margin-top: 16px;
order: 3;
}
.product-info-block .product-variations-wrap {
order: 4;
}
.product-info-block .product-quantity-row {
order: 5;
}
.product-info-block .product-actions-bottom {
order: 6;
}
.product-trust-box {
padding: 14px 16px;
}
.product-trust-icon-wrap {
width: 44px;
height: 44px;
}
.product-trust-icon-wrap img {
width: 24px;
height: 24px;
}
.product-trust-title {
font-size: 14px;
}
.product-trust-sub {
font-size: 12px;
}
/* Desktop: Total + Buy – show and place after price for best UX */
.product-total-buy-mobile {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
order: 2;
position: sticky;
bottom: 0;
z-index: 5;
padding: 16px 0 12px;
margin-bottom: -12px;
background: linear-gradient(to top, #f6f7f8 85%, transparent);
border-radius: 0 0 12px 12px;
}
.product-details-section {
padding: 32px 24px 48px;
}
.product-tabs-desk {
display: flex;
position: relative;
gap: 0;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 0;
padding-bottom: 0;
}
.product-tabs-desk-indicator {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, #137fec 0%, #0c52b3 100%);
border-radius: 3px 3px 0 0;
transition:
left 0.35s cubic-bezier(0.32, 0.72, 0, 1),
width 0.35s cubic-bezier(0.32, 0.72, 0, 1);
pointer-events: none;
}
.product-tab-desk {
padding: 14px 20px 16px;
font-size: 14px;
font-weight: 600;
color: #64748b;
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
transition:
color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.25s ease;
white-space: nowrap;
position: relative;
z-index: 1;
}
.product-tab-desk:hover {
color: #0c52b3;
}
.product-tab-desk.active {
color: #0c52b3;
background: linear-gradient(
180deg,
rgba(19, 127, 236, 0.06) 0%,
transparent 100%
);
}
.product-accordion-trigger {
display: none;
}
.product-accordion-item {
border-bottom: none;
}
.product-accordion-item:not(.is-open) .product-accordion-panel {
grid-template-rows: 0fr;
}
.product-details-section .product-accordion-panel {
transition: grid-template-rows 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.product-details-section .product-accordion-content {
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
}
.product-accordion {
border: 1px solid #e2e8f0;
border-top: none;
border-radius: 0 0 12px 12px;
overflow: hidden;
}
.product-accordion-trigger {
padding: 18px 24px;
font-size: 16px;
}
.product-accordion-content > *:first-child {
padding: 20px 24px 24px;
}
.product-accordion-content p {
padding: 16px 20px 20px;
}
.product-spec-row {
padding: 14px 24px;
font-size: 15px;
}
.product-qa-content {
padding: 24px !important;
}
.product-qa-search-wrap {
padding: 0 12px 0 10px;
margin-bottom: 12px;
}
.product-qa-search {
padding: 10px 0 10px 10px;
}
.product-qa-ask-row {
margin-bottom: 20px;
gap: 12px;
}
.product-qa-ask-title {
font-size: 15px;
}
.product-qa-support-box {
padding: 24px;
}
.product-qa-support-status {
margin-bottom: 16px;
}
.product-qa-support-text {
margin-bottom: 20px;
font-size: 14px;
}
.product-qa-callback-wrap {
align-items: center;
}
.product-info-block .product-lowstock-wrap {
order: 1;
}
.product-info-block .product-variations-wrap {
order: 4;
}
.product-info-block .product-quantity-row {
order: 5;
}
.product-info-block .product-actions-bottom {
order: 6;
}
.product-total-pill {
padding: 14px 20px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.product-total-label {
font-size: 15px;
}
.product-total-price {
font-size: 26px;
}
.product-buy-btn {
padding: 16px 24px;
font-size: 17px;
font-weight: 600;
}
.product-buy-btn img {
width: 24px;
height: 24px;
}
}
@media (max-width: 768px) {
.product-actions-bottom {
justify-content: space-between;
}
}
.similar-items-section {
margin-top: 20px;
border-radius: 8px;
}
/* ----- Archive products page: toolbar + grid/list + pagination ----- */
.archive-toolbar {
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding: 14px 0;
}
.archive-toolbar-inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 10px;
}
@media (min-width: 640px) {
.archive-toolbar-inner {
gap: 12px;
flex-wrap: wrap;
}
}
.archive-sort-desktop {
display: none;
}
@media (min-width: 1024px) {
.archive-toolbar {
display: none;
}
.archive-sort-mobile-wrap {
display: none;
}
.archive-sort-desktop {
display: block;
}
}
.archive-toolbar-filters {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #2c2c2c;
background: transparent;
border: none;
border-radius: 10px;
padding: 10px 14px;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.archive-toolbar-filters:hover {
background: rgba(12, 82, 179, 0.06);
color: #0c52b3;
}
.archive-toolbar-filters:active {
transform: scale(0.98);
background: rgba(12, 82, 179, 0.1);
}
.archive-toolbar-filters[aria-expanded="true"] {
background: rgba(12, 82, 179, 0.1);
color: #0c52b3;
}
@media (min-width: 1024px) {
.archive-toolbar-filters {
display: none;
}
}
.archive-filter-icon {
width: 20px;
height: 20px;
display: block;
transition: transform 0.25s ease;
}
.archive-toolbar-filters:hover .archive-filter-icon,
.archive-toolbar-filters[aria-expanded="true"] .archive-filter-icon {
transform: rotate(-12deg) scale(1.05);
}
.archive-toolbar-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
@media (min-width: 640px) {
.archive-toolbar-right {
gap: 14px;
}
}
/* View toggle: grid / list (mobile only, minimal) */
.archive-view-toggle {
display: flex;
align-items: center;
gap: 2px;
}
.archive-view-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #94a3b8;
cursor: pointer;
border-radius: 6px;
transition: color 0.2s;
}
.archive-view-btn:hover {
color: #64748b;
}
.archive-view-btn.is-active,
.archive-view-btn[aria-pressed="true"] {
color: #0c52b3;
}
.archive-sort-label {
font-size: 14px;
color: #64748b;
font-weight: 500;
}
.archive-sort-dropdown {
position: relative;
}
.archive-sort-trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 6px;
min-width: 0;
padding: 8px 0;
font-size: 12px;
font-weight: 700;
color: #475569;
text-align: left;
background: transparent;
border: none;
border-radius: 0;
cursor: pointer;
transition:
color 0.2s ease,
transform 0.15s ease;
}
.archive-sort-mobile-text {
display: inline;
}
.archive-sort-trigger-text {
display: none;
}
.archive-sort-chevron {
flex-shrink: 0;
width: 16px;
height: 16px;
color: #475569;
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.archive-sort-dropdown.is-open .archive-sort-chevron {
transform: rotate(180deg);
color: #0c52b3;
}
@media (min-width: 640px) {
.archive-sort-trigger {
min-width: 172px;
padding: 10px 14px;
font-size: 14px;
font-weight: 500;
color: #1e293b;
background: #f8fafc;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 10px;
}
.archive-sort-trigger:hover {
background: #f1f5f9;
border-color: rgba(0, 0, 0, 0.1);
color: #0c52b3;
}
.archive-sort-trigger:active {
transform: scale(0.99);
}
.archive-sort-dropdown.is-open .archive-sort-trigger {
border-color: #0c52b3;
box-shadow: 0 0 0 3px rgba(12, 82, 179, 0.12);
background: #fff;
color: #0c52b3;
}
.archive-sort-mobile-text {
display: none;
}
.archive-sort-trigger-text {
display: block;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.archive-sort-chevron {
width: 20px;
height: 20px;
color: #64748b;
}
.archive-sort-dropdown.is-open .archive-sort-chevron {
transform: rotate(180deg);
color: #0c52b3;
}
}
.archive-sort-trigger:hover .archive-sort-chevron {
color: #137fec;
}
.archive-sort-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
left: auto;
min-width: 200px;
width: max-content;
max-width: calc(100vw - 32px);
padding: 6px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.1),
0 2px 10px rgba(0, 0, 0, 0.04);
z-index: 50;
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.96);
transition:
opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@media (min-width: 640px) {
.archive-sort-panel {
min-width: 100%;
}
}
.archive-sort-dropdown.is-open .archive-sort-panel {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.archive-sort-option {
display: block;
width: 100%;
min-width: 0;
padding: 10px 14px;
white-space: nowrap;
font-size: 14px;
font-weight: 500;
color: #475569;
text-align: left;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition:
background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
padding-left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.archive-sort-option:hover {
background: rgba(12, 82, 179, 0.08);
color: #0c52b3;
padding-left: 16px;
}
.archive-sort-option:active {
background: rgba(12, 82, 179, 0.12);
transform: scale(0.98);
}
.archive-sort-option.is-selected {
background: rgba(12, 82, 179, 0.1);
color: #0c52b3;
font-weight: 600;
}
.archive-sort-option.is-selected:hover {
background: rgba(12, 82, 179, 0.14);
}
.archive-sort-option + .archive-sort-option {
margin-top: 2px;
}
.archive-view-icon.hidden {
display: none !important;
}
.archive-products-header {
display: flex;
margin-top: 10px;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 1rem;
min-width: 0;
}
.archive-products-header-left {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.archive-products-header .archive-products-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.archive-products-header .archive-products-desc {
white-space: normal;
max-width: 100%;
}
.archive-products-header-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
flex-wrap: wrap;
}
.archive-products-header .archive-products-pill {
flex-shrink: 0;
}
@media (min-width: 640px) {
.archive-products-header {
flex-wrap: wrap;
align-items: flex-end;
}
.archive-products-header-right {
gap: 14px;
}
}
.archive-products-section {
min-height: 200px;
}
.archive-products {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
align-items: start;
transition:
grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1),
gap 0.4s ease,
opacity 0.25s ease;
opacity: 1;
visibility: visible;
}
.archive-products.is-transitioning {
opacity: 0.6;
}
.archive-product-item {
opacity: 1;
visibility: visible;
transition:
opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 0;
}
.archive-product-item .archive-product-link {
display: block;
min-height: 320px;
text-decoration: none;
color: #000;
}
.archive-products .hot-deal-card {
background: linear-gradient(90deg, #eeeeee 0%, #f3f6ff 100%) !important;
min-height: 280px;
display: flex;
flex-direction: column;
padding: 10px 8px;
}
.archive-products .hot-deal-card .hot-deal-image-wrap {
flex-shrink: 0;
min-height: 140px;
height: 140px;
display: flex;
flex-direction: column;
}
.archive-products .hot-deal-card .archive-card-overlay {
flex-shrink: 0;
}
.archive-products .hot-deal-card .archive-card-overlay .flex-col {
flex-direction: column;
}
.archive-products .hot-deal-card .archive-card-thumb {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding-top: 52px;
overflow: hidden;
}
.archive-products .hot-deal-card .archive-card-thumb .swiper,
.archive-products .hot-deal-card .archive-card-thumb .swiper-wrapper,
.archive-products .hot-deal-card .archive-card-thumb .swiper-slide {
height: 100%;
}
.archive-products .hot-deal-card .archive-card-thumb .swiper-wrapper {
align-items: stretch;
}
.archive-products .hot-deal-card .archive-card-thumb .swiper-slide img {
width: 100% !important;
height: 100% !important;
/* max-width: none !important; change this if it got fucked later */
max-height: none !important;
object-fit: cover !important;
object-position: center;
aspect-ratio: unset;
}
@media (min-width: 640px) {
.archive-products .hot-deal-card {
min-height: 320px;
padding: 12px;
}
.archive-products .hot-deal-card .hot-deal-image-wrap {
min-height: 180px;
height: 180px;
}
}
.archive-products .hot-deal-card .content-block {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.archive-products .hot-deal-card .content-block button {
margin-top: auto;
}
/* Mobile grid: compact card content */
@media (max-width: 639px) {
.archive-products .hot-deal-card .content-block h3 {
font-size: 12px;
margin-bottom: 6px;
}
.archive-products .hot-deal-card .content-block .product-serial {
font-size: 9px;
margin-bottom: 6px;
}
.archive-products .hot-deal-card .content-block .text-lg {
font-size: 14px;
}
.archive-products .hot-deal-card .content-block button {
padding-top: 8px;
padding-bottom: 8px;
font-size: 11px;
}
.archive-products .hot-deal-card .archive-card-overlay {
top: 6px;
}
.archive-products .hot-deal-card .archive-card-overlay .w-8 {
width: 28px;
height: 28px;
}
.archive-products .hot-deal-card .archive-card-thumb {
padding: 5px;
}
.archive-product-out-of-stock-badge {
font-size: 9px;
padding: 2px 6px;
}
}
.archive-card-thumb {
margin: unset !important;
}
.archive-product-out-of-stock-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 9999px;
background: #ffebee;
color: #c62828;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.archive-products
.hot-deal-card
.content-block
button.archive-order-btn-out-of-stock {
background: #d2d2d2;
color: #64748b;
cursor: not-allowed;
pointer-events: none;
}
.archive-products
.hot-deal-card
.content-block
button.archive-order-btn-out-of-stock
img {
opacity: 1;
}
.archive-products.is-transitioning .archive-product-item {
opacity: 0;
transform: scale(0.97);
}
@media (max-width: 1023px) {
.archive-products.is-list-view .archive-product-item {
transition:
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.archive-products.is-list-view .archive-product-item:hover .hot-deal-card,
.archive-products.is-list-view
.archive-product-item:hover
.archive-product-link {
transform: none;
box-shadow: none;
}
}
@media (min-width: 640px) {
.archive-products {
gap: 16px;
}
}
@media (min-width: 768px) {
.archive-products {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.archive-products {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
}
@media (max-width: 1023px) {
.archive-products.is-list-view {
grid-template-columns: 1fr;
gap: 12px;
}
/* List view: product-box as direct child of archive-products */
.archive-products.is-list-view > .product-box {
display: flex;
flex-direction: row;
flex: 1;
min-width: 0;
padding: 10px;
gap: 12px;
}
.archive-products.is-list-view > .product-box .product-box__thumb {
flex-shrink: 0;
width: 100px;
min-width: 100px;
aspect-ratio: 1;
}
.archive-products.is-list-view > .product-box .product-box__content {
flex: 1;
min-width: 0;
padding: 0;
justify-content: center;
}
.archive-products.is-list-view > .product-box .product-box__name {
font-size: 13px;
-webkit-line-clamp: 2;
}
.archive-products.is-list-view > .product-box .product-box__price-row {
margin-bottom: 6px;
}
.archive-products.is-list-view > .product-box .product-box__btn {
margin-top: auto;
align-self: flex-start;
}
@media (min-width: 640px) {
.archive-products.is-list-view > .product-box .product-box__thumb {
width: 120px;
min-width: 120px;
}
}
/* List view when items are wrapped in .archive-product-link */
.archive-products.is-list-view .archive-product-link {
display: flex;
flex: 1;
min-width: 0;
min-height: 0;
}
.archive-products.is-list-view .archive-product-link .product-box {
display: flex;
flex-direction: row;
flex: 1;
min-width: 0;
padding: 10px;
gap: 12px;
}
.archive-products.is-list-view .archive-product-link .product-box__thumb {
flex-shrink: 0;
width: 100px;
min-width: 100px;
aspect-ratio: 1;
}
.archive-products.is-list-view .archive-product-link .product-box__content {
flex: 1;
min-width: 0;
padding: 0;
justify-content: center;
}
.archive-products.is-list-view .archive-product-link .product-box__name {
font-size: 13px;
-webkit-line-clamp: 2;
}
.archive-products.is-list-view
.archive-product-link
.product-box__price-row {
margin-bottom: 6px;
}
.archive-products.is-list-view .archive-product-link .product-box__btn {
margin-top: auto;
align-self: flex-start;
}
@media (min-width: 640px) {
.archive-products.is-list-view
.archive-product-link
.product-box__thumb {
width: 120px;
min-width: 120px;
}
}
/* Legacy list-view selectors (archive-product-item structure) */
.archive-products.is-list-view .archive-product-item {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 16px;
max-width: 100%;
padding: 12px;
}
.archive-products.is-list-view .archive-product-item .archive-product-link {
min-height: 0;
}
.archive-products.is-list-view .archive-product-card {
display: flex;
flex-direction: row;
flex: 1;
min-width: 0;
gap: 16px;
align-items: stretch;
margin-bottom: 0;
min-height: 0;
}
.archive-products.is-list-view .archive-product-image {
flex-shrink: 0;
width: 120px;
min-height: 120px;
margin-bottom: 0;
}
.archive-products.is-list-view .archive-product-image .product-image-swiper,
.archive-products.is-list-view .archive-product-image .swiper-wrapper,
.archive-products.is-list-view .archive-product-image .swiper-slide {
height: 100%;
}
.archive-products.is-list-view .archive-product-image .swiper-slide img {
max-width: 80px;
max-height: 100px;
}
.archive-products.is-list-view .archive-product-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.archive-products.is-list-view .archive-product-content .line-clamp-2 {
-webkit-line-clamp: 2;
}
@media (min-width: 640px) {
.archive-products.is-list-view .archive-product-image {
width: 140px;
min-height: 140px;
}
}
}
/* Archive pagination */
.archive-pagination {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
@media (max-width: 639px) {
.archive-pagination {
margin-bottom: 2rem;
}
}
.archive-pagination-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.archive-pagination-link,
.archive-pagination-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
font-size: 14px;
font-weight: 500;
color: #475569;
text-decoration: none;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.15s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.archive-pagination-link:hover {
background: #f1f5f9;
color: #0c52b3;
transform: translateY(-1px);
}
.archive-pagination-link:active {
transform: translateY(0) scale(0.97);
}
.archive-pagination-link[aria-current="page"] {
background: #0c52b3;
color: #fff;
border-color: #0c52b3;
pointer-events: none;
}
.archive-pagination-link[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.archive-pagination-prev,
.archive-pagination-next {
padding: 0 14px;
}
.archive-pagination-chevron {
width: 18px;
height: 18px;
transition: transform 0.2s ease;
}
.archive-pagination-prev:hover .archive-pagination-chevron {
transform: translateX(-2px);
}
.archive-pagination-next:hover .archive-pagination-chevron {
transform: translateX(2px);
}
.archive-pagination-ellipsis {
color: #94a3b8;
font-weight: 500;
user-select: none;
}
/* ----- Archive filter: mobile full-screen + desktop sidebar ----- */
.archive-layout {
display: block;
}
@media (min-width: 1024px) {
.archive-layout {
display: flex;
align-items: flex-start;
gap: 0;
max-width: none;
margin: 0;
padding: 0;
width: 100%;
}
.archive-main {
flex: 1;
min-width: 0;
padding: 0 24px 24px;
}
.archive-products-section {
padding-left: 0;
padding-right: 0;
}
.archive-products-section .max-w-6xl {
max-width: 100%;
}
}
.archive-filter-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 60;
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.archive-filter-overlay.is-open {
opacity: 1;
visibility: visible;
}
.archive-filter-sheet {
position: fixed;
inset: 0;
z-index: 70;
background: #fff;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition:
transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
overflow: hidden;
}
.archive-filter-sheet.is-open {
transform: translateX(0);
visibility: visible;
}
.archive-filter-sheet-inner {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.archive-filter-header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid #e2e8f0;
}
.archive-filter-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.archive-filter-title {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin: 0;
}
.archive-filter-close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #475569;
cursor: pointer;
border-radius: 12px;
transition:
background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.archive-filter-close:hover {
background: #f1f5f9;
color: #1e293b;
}
.archive-filter-close:active {
transform: scale(0.95);
}
.archive-filter-reset {
font-size: 12px;
font-weight: 600;
color: #137fec;
background: transparent;
border: none;
cursor: pointer;
padding: 8px 12px;
border-radius: 10px;
transition:
background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.archive-filter-reset:hover {
background: rgba(19, 127, 236, 0.08);
}
.archive-filter-reset:active {
transform: scale(0.98);
}
.archive-filter-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 16px 20px 24px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.archive-filter-body::-webkit-scrollbar {
display: none;
}
.archive-filter-block {
border-bottom: 1px solid #f1f5f9;
}
.archive-filter-block:last-child {
border-bottom: none;
}
.archive-filter-block-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
font-size: 14px;
font-weight: 600;
color: #1e293b;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition:
color 0.2s ease,
background 0.2s ease;
}
.archive-filter-block-trigger:hover {
color: #137fec;
}
.archive-filter-block-label {
font-size: 12px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.archive-filter-block-trigger:hover .archive-filter-block-label {
color: #137fec;
}
.archive-filter-block-chevron {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #94a3b8;
transition:
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.archive-filter-block[data-collapsed] .archive-filter-block-chevron {
transform: rotate(-90deg);
}
.archive-filter-block-trigger:hover .archive-filter-block-chevron {
color: #137fec;
}
.archive-filter-block-trigger:active {
opacity: 0.9;
}
.archive-filter-block-panel {
overflow: hidden;
max-height: 3000px;
transition:
max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.archive-filter-block[data-collapsed] .archive-filter-block-panel {
max-height: 0 !important;
opacity: 0;
}
.archive-filter-block-panel > *:first-child {
padding-bottom: 16px;
}
.archive-filter-instock-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0 16px;
margin-bottom: 4px;
border-bottom: 1px solid #f1f5f9;
}
.archive-filter-instock-label {
font-size: 14px;
font-weight: 500;
color: #475569;
}
.archive-filter-instock-toggle {
position: relative;
display: inline-flex;
cursor: pointer;
flex-shrink: 0;
}
.archive-filter-instock-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.archive-filter-instock-track {
display: inline-flex;
align-items: center;
width: 44px;
height: 24px;
border-radius: 12px;
background: #e2e8f0;
transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
padding: 2px;
}
.archive-filter-instock-thumb {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(0);
}
.archive-filter-instock-input:checked ~ .archive-filter-instock-track {
background: #137fec;
}
.archive-filter-instock-input:checked
~ .archive-filter-instock-track
.archive-filter-instock-thumb {
transform: translateX(20px);
}
.archive-filter-instock-toggle:hover .archive-filter-instock-track {
background: #cbd5e1;
}
.archive-filter-instock-input:checked ~ .archive-filter-instock-track:hover {
background: #0c52b3;
}
.archive-filter-categories {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (min-width: 1024px) {
.archive-filter-desktop .archive-filter-categories {
grid-template-columns: 1fr;
}
}
.archive-filter-cat-option {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
font-size: 13px;
font-weight: 500;
color: #475569;
background: #fff;
border: 2px solid #f1f5f9;
border-radius: 16px;
cursor: pointer;
text-align: left;
transition:
background 0.2s ease,
border-color 0.25s ease,
color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
min-width: 0;
}
.archive-filter-cat-option span {
min-width: 0;
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
}
.archive-filter-cat-option:hover {
background: rgba(19, 127, 236, 0.05);
border-color: rgba(19, 127, 236, 0.3);
color: #334155;
}
.archive-filter-cat-option:active {
transform: scale(0.98);
}
.archive-filter-cat-option.is-active {
background: rgba(19, 127, 236, 0.05);
border: 2px solid #137fec;
color: #137fec;
}
.archive-filter-cat-icon {
width: 35px;
height: 35px;
flex-shrink: 0;
}
.archive-filter-price-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.archive-filter-price-opt {
font-size: 13px;
font-weight: 500;
color: #475569;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 8px 14px;
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.archive-filter-price-opt:hover,
.archive-filter-price-opt.is-active {
background: rgba(19, 127, 236, 0.08);
border-color: #137fec;
color: #137fec;
}
.archive-filter-price-inputs {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.archive-filter-price-field {
flex: 1;
min-width: 100px;
}
.archive-filter-price-label {
display: block;
font-size: 10px;
font-weight: 700;
color: #94a3b8;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.archive-filter-input-wrap {
display: flex;
align-items: center;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 0 12px;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.archive-filter-input-wrap:focus-within {
border-color: #137fec;
box-shadow: 0 0 0 2px rgba(19, 127, 236, 0.15);
}
.archive-filter-input-prefix {
font-size: 14px;
font-weight: 500;
color: #64748b;
margin-right: 4px;
}
.archive-filter-input {
width: 100%;
min-width: 0;
padding: 10px 0;
font-size: 14px;
font-weight: 500;
color: #1e293b;
background: transparent;
border: none;
outline: none;
}
.archive-filter-input::placeholder {
color: #94a3b8;
}
.archive-filter-check-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
font-size: 14px;
font-weight: 500;
color: #475569;
cursor: pointer;
transition: color 0.2s ease;
}
.archive-filter-check-row:hover {
color: #137fec;
}
.archive-filter-checkbox {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #cbd5e1;
border-radius: 6px;
background: #fff;
cursor: pointer;
flex-shrink: 0;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.archive-filter-checkbox:hover {
border-color: #94a3b8;
}
.archive-filter-checkbox:active {
transform: scale(0.92);
}
.archive-filter-checkbox:checked {
border-color: #137fec;
background-color: #137fec;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.archive-filter-checkbox:checked:active {
transform: scale(0.92);
}
.archive-filter-var {
margin: 0;
padding: 12px 0 0;
}
.archive-filter-var .product-var-block {
margin-bottom: 14px;
}
.archive-filter-var .product-var-label {
font-size: 12px;
font-weight: 600;
color: #94a3b8;
}
.archive-filter-specs {
padding: 0 !important;
}
.archive-filter-spec-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
font-size: 13px;
cursor: pointer;
border: none;
background: transparent;
margin: 0;
transition: background 0.15s ease;
}
.archive-filter-spec-row:hover {
background: rgba(19, 127, 236, 0.05);
}
.archive-filter-spec-row .product-spec-label {
flex: 1;
}
.archive-filter-spec-check {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #cbd5e1;
border-radius: 6px;
background: #fff;
cursor: pointer;
flex-shrink: 0;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
transform 0.15s ease;
}
.archive-filter-spec-check:hover {
border-color: #94a3b8;
}
.archive-filter-spec-check:active {
transform: scale(0.92);
}
.archive-filter-spec-check:checked {
border-color: #137fec;
background-color: #137fec;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.archive-filter-footer {
flex-shrink: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
border-top: 1px solid #e2e8f0;
background: #fff;
}
.archive-filter-footer-left {
display: flex;
flex-direction: column;
gap: 2px;
}
.archive-filter-active-label {
font-size: 10px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.archive-filter-active-count {
font-size: 14px;
font-weight: 600;
color: #1e293b;
}
.archive-filter-apply {
font-size: 14px;
font-weight: 600;
color: #fff;
background: #102a43;
border: none;
padding: 12px 20px;
border-radius: 12px;
cursor: pointer;
transition:
background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.archive-filter-apply:hover {
background: #1e3a5f;
box-shadow: 0 4px 12px rgba(16, 42, 67, 0.25);
}
.archive-filter-apply:active {
transform: scale(0.98);
}
.archive-filter-desktop {
display: none;
}
@media (min-width: 1024px) {
.archive-filter-desktop {
display: block;
min-width: 260px;
width: 22%;
max-width: 320px;
flex-shrink: 0;
padding: 0;
position: sticky;
top: 0;
align-self: flex-start;
max-height: calc(100vh - 120px);
}
.archive-filter-desktop-inner {
background: #fff;
border: none;
border-radius: 0;
border-right: 1px solid #e2e8f0;
padding: 20px;
box-shadow: none;
max-height: calc(100vh - 120px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.archive-filter-desktop-inner::-webkit-scrollbar {
display: none;
}
.archive-filter-desktop .archive-filter-block {
border-bottom: 1px solid #f1f5f9;
}
.archive-filter-desktop .archive-filter-block-trigger {
padding: 12px 0;
}
.archive-filter-desktop .archive-filter-block-panel {
min-width: 0;
}
.archive-filter-desktop .archive-filter-block-panel > *:first-child {
padding-bottom: 14px;
min-width: 0;
}
.archive-filter-desktop .archive-filter-price-options {
flex-wrap: wrap;
}
.archive-filter-desktop .archive-filter-var,
.archive-filter-desktop .archive-filter-specs {
min-width: 0;
}
.archive-filter-desktop
.archive-filter-instock-wrap.archive-filter-desktop-instock {
padding-top: 0;
padding-bottom: 14px;
}
.archive-filter-desktop-actions {
display: flex;
flex-direction: row;
gap: 12px;
margin-top: 16px;
flex-wrap: wrap;
}
.archive-filter-desktop-clear {
flex: 1;
min-width: 120px;
font-size: 14px;
font-weight: 600;
color: #137fec;
background: transparent;
border: 1px solid #137fec;
padding: 12px 16px;
border-radius: 12px;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.15s ease;
}
.archive-filter-desktop-clear:hover {
background: rgba(19, 127, 236, 0.08);
}
.archive-filter-desktop-clear:active {
transform: scale(0.98);
}
.archive-filter-desktop-apply {
flex: 1;
min-width: 120px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #102a43;
border: none;
padding: 12px 16px;
border-radius: 12px;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.15s ease;
}
.archive-filter-desktop-apply:hover {
background: #1e3a5f;
}
.archive-filter-desktop-apply:active {
transform: scale(0.98);
}
}
@media (max-width: 1023px) {
.archive-filter-block[data-collapsed] .archive-filter-block-panel {
max-height: 0 !important;
}
}
/* ----- Products archive: desktop-only layout, backgrounds, UX ----- */
@media (min-width: 1024px) {
.archive-page-wrap {
background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
min-height: 60vh;
padding-bottom: 32px;
margin-top: 20px;
}
.archive-breadcrumb-wrap {
background: #fff;
padding: 14px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.archive-breadcrumb-wrap .product-breadcrumb {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
}
.archive-page-header {
background: linear-gradient(
135deg,
rgba(12, 82, 179, 0.06) 0%,
rgba(12, 82, 179, 0.02) 100%
);
border-bottom: 1px solid rgba(12, 82, 179, 0.08);
padding: 28px 24px 24px;
}
.archive-page-header-inner {
max-width: 1400px;
margin: 0 auto;
}
.archive-page-title {
font-size: 28px;
font-weight: 700;
color: #0f172a;
margin: 0 0 6px 0;
letter-spacing: -0.02em;
}
.archive-page-subtitle {
font-size: 15px;
color: #64748b;
margin: 0 0 12px 0;
max-width: 520px;
}
.archive-results-count {
font-size: 13px;
font-weight: 500;
color: #475569;
margin: 0;
}
.archive-results-count span {
font-weight: 600;
color: #1e293b;
}
.archive-category-pills {
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding: 12px 24px 14px;
}
.archive-category-pills-inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 16px;
}
.archive-category-pills-label {
font-size: 13px;
font-weight: 500;
color: #64748b;
margin-right: 4px;
}
.archive-category-pill {
display: inline-block;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: #475569;
background: #f1f5f9;
border-radius: 9999px;
text-decoration: none;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.archive-category-pill:hover {
background: rgba(12, 82, 179, 0.12);
color: #0c52b3;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(12, 82, 179, 0.15);
}
.archive-toolbar-inner-desk {
max-width: none;
padding: 16px 24px 18px 0;
}
.archive-toolbar-results {
font-size: 13px;
font-weight: 500;
color: #64748b;
margin-right: 16px;
}
.archive-toolbar-results span {
font-weight: 600;
color: #1e293b;
}
.archive-layout {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding: 0 24px;
gap: 0;
}
.archive-filter-desktop-inner {
background: #fff;
border-radius: 12px !important;
border-right: 1px solid #e2e8f0;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
padding: 24px 20px 28px;
}
.archive-main {
padding: 0 0 24px 24px;
}
.archive-products-section-desk {
background: #fff;
border-radius: 0 12px 12px 12px;
box-shadow:
0 2px 12px rgba(0, 0, 0, 0.06),
0 0 0 1px rgba(0, 0, 0, 0.04);
padding: 28px 28px 32px;
margin-bottom: 0;
}
.archive-products-container {
max-width: 100%;
}
.archive-products {
gap: 24px;
}
.archive-product-item {
border-radius: 12px;
padding: 16px;
}
.archive-product-item .hot-deal-image-wrap {
border-radius: 10px;
}
.archive-product-item .content-block h3 {
font-size: 15px;
}
.archive-pagination {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #e2e8f0;
}
}
/* ========== Cart Page ========== */
.cart-page-main {
padding: 16px;
padding-bottom: 120px;
min-height: 40vh;
}
.cart-page-inner {
max-width: 1400px;
margin: 0 auto;
}
.cart-products-header {
margin-top: 10px;
padding-bottom: 1rem;
}
.cart-products-header-top {
margin-bottom: 8px;
}
.cart-page-title {
font-size: 1.25rem;
font-weight: 700;
color: #102a43;
margin: 0;
display: flex;
align-items: baseline;
gap: 4px;
flex-wrap: wrap;
}
.cart-item-count {
font-size: 1rem;
font-weight: 600;
color: #64748b;
}
.cart-item-count--empty {
color: #64748b;
}
.cart-products-header-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.cart-your-items {
font-size: 14px;
color: #334155;
}
.cart-your-items-num {
color: #64748b;
}
.cart-clear-all {
font-size: 14px;
font-weight: 500;
color: #0c52b3;
background: none;
border: none;
cursor: pointer;
padding: 6px 10px;
margin: -6px -10px;
border-radius: 8px;
transition:
color 0.2s ease,
background-color 0.2s ease,
transform 0.15s ease;
}
.cart-clear-all:hover {
color: #0a3d8a;
background-color: rgba(12, 82, 179, 0.08);
}
.cart-clear-all:active {
transform: scale(0.98);
}
.cart-clear-all:focus-visible {
outline: 2px solid #137fec;
outline-offset: 2px;
}
.cart-content-layout {
display: flex;
flex-direction: column;
gap: 20px;
}
.cart-items-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.cart-items-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.cart-item {
margin: 0;
opacity: 1;
transform: translateY(0);
transition:
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cart-item.is-removing {
opacity: 0;
transform: translateY(-8px);
}
.cart-item-card {
position: relative;
background: #ffffff;
border-radius: 12px;
padding: 14px;
padding-top: 40px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
}
.cart-item-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cart-item-delete {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
border-radius: 50%;
color: #64748b;
transition:
color 0.2s ease,
background-color 0.2s ease,
transform 0.15s ease;
}
.cart-item-delete img {
width: 20px;
height: 20px;
}
.cart-item-delete:hover {
color: #dc2626;
background-color: rgba(220, 38, 38, 0.08);
}
.cart-item-delete:active {
transform: scale(0.92);
}
.cart-item-top {
display: flex;
gap: 12px;
align-items: flex-start;
}
.cart-item-thumb-wrap {
flex-shrink: 0;
display: block;
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
background: #f8fafc;
transition: transform 0.25s ease;
}
.cart-item-thumb-wrap:hover {
transform: scale(1.02);
}
.cart-item-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-item-info {
min-width: 0;
flex: 1;
}
.cart-item-name {
font-size: 14px;
font-weight: 600;
color: #1e293b;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.2s ease;
}
.cart-item-name:hover {
color: #0c52b3;
}
.cart-item-id {
font-size: 12px;
color: #64748b;
margin: 4px 0 0;
}
.cart-item-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
}
.cart-item-qty-wrap {
flex-shrink: 0;
}
.cart-qty-wrap {
padding: 4px 4px;
}
.cart-qty-btn {
width: 32px;
height: 32px;
transition:
background-color 0.2s ease,
transform 0.15s ease;
}
.cart-qty-btn:active {
transform: scale(0.94);
}
.cart-item-price {
font-size: 15px;
font-weight: 700;
color: #1e293b;
margin: 0;
}
/* Promo */
.cart-promo-section {
margin-top: 4px;
}
.cart-promo-box {
background: #ffffff;
border: 2px dashed #cbd5e1;
border-radius: 12px;
padding: 16px;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.cart-promo-box:focus-within {
border-color: #137fec;
box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.15);
}
.cart-promo-input-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.cart-promo-icon-wrap {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
border-radius: 8px;
}
.cart-promo-icon-wrap img {
width: 22px;
height: 22px;
}
.cart-promo-input {
flex: 1;
min-width: 120px;
height: 44px;
padding: 0 14px;
font-size: 14px;
color: #1e293b;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
outline: none;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.cart-promo-input::placeholder {
color: #94a3b8;
}
.cart-promo-input:hover {
border-color: #cbd5e1;
}
.cart-promo-input:focus {
border-color: #137fec;
background: #fff;
box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.12);
}
.cart-promo-apply {
height: 44px;
padding: 0 20px;
font-size: 14px;
font-weight: 600;
color: #137fec;
background: rgba(19, 127, 236, 0.1);
border: none;
border-radius: 9999px;
cursor: pointer;
transition:
background-color 0.25s ease,
color 0.25s ease,
transform 0.15s ease;
}
.cart-promo-apply:hover {
background: rgba(19, 127, 236, 0.18);
}
.cart-promo-apply:active {
transform: scale(0.97);
}
.cart-promo-apply:focus-visible {
outline: 2px solid #137fec;
outline-offset: 2px;
}
.cart-promo-applied {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 14px;
color: #059669;
}
.cart-promo-success-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.cart-promo-code-name {
font-weight: 600;
}
.cart-promo-code-value {
font-weight: 600;
}
/* Summary */
.cart-summary-box {
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 12px;
padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.cart-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #475569;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
transition: color 0.2s ease;
}
.cart-summary-row:last-of-type {
border-bottom: none;
}
.cart-summary-savings {
background: #ecfdf5;
color: #059669;
font-weight: 600;
margin: 0 -20px;
padding: 10px 20px;
border-bottom: 1px solid #f1f5f9;
}
.cart-summary-total-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding-top: 14px;
border-top: 2px solid #f1f5f9;
}
.cart-summary-total-label {
font-size: 15px;
font-weight: 600;
color: #1e293b;
}
.cart-summary-total-price {
font-size: 20px;
font-weight: 700;
color: #137fec;
}
.cart-btn-secure {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 16px;
padding: 16px 24px;
font-size: 16px;
font-weight: 600;
color: #fff;
text-decoration: none;
border: none;
border-radius: 9999px;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
cursor: pointer;
transition:
opacity 0.25s ease,
transform 0.15s ease,
box-shadow 0.25s ease;
}
.cart-btn-secure img {
width: 22px;
height: 22px;
}
.cart-btn-secure:hover {
opacity: 0.95;
box-shadow: 0 6px 20px rgba(12, 60, 234, 0.35);
transform: translateY(-1px);
}
.cart-btn-secure:active {
transform: translateY(0) scale(0.99);
}
.cart-btn-save-quote {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 10px;
padding: 14px 24px;
font-size: 15px;
font-weight: 500;
color: rgba(0, 0, 0, 0.7);
background: #eeeeee;
border: none;
border-radius: 9999px;
cursor: pointer;
transition:
background-color 0.25s ease,
color 0.25s ease,
transform 0.15s ease;
}
.cart-btn-save-quote img {
width: 20px;
height: 20px;
}
.cart-btn-save-quote:hover {
background: #e5e5e5;
color: rgba(0, 0, 0, 0.85);
}
.cart-btn-save-quote:active {
transform: scale(0.98);
}
.cart-btn-secure:focus-visible,
.cart-btn-save-quote:focus-visible {
outline: 2px solid #0c3cea;
outline-offset: 2px;
}
/* Empty cart state */
.empty-cart-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 32px 16px 48px;
}
.empty-cart-img {
width: 100%;
max-width: 240px;
height: auto;
margin-bottom: 24px;
}
.empty-cart-title {
font-size: 1.5rem;
font-weight: 700;
color: #102a43;
margin: 0 0 12px;
}
.empty-cart-desc {
font-size: 15px;
line-height: 1.5;
color: #64748b;
margin: 0 0 24px;
max-width: 320px;
}
.empty-cart-browse-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
color: #fff;
text-decoration: none;
border-radius: 9999px;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
transition: filter 0.7s ease;
}
.empty-cart-browse-btn img {
width: 22px;
height: 22px;
}
.empty-cart-browse-btn:hover {
filter: brightness(1.15);
opacity: 0.95;
}
.empty-cart-browse-btn:active {
transform: translateY(0) scale(0.99);
}
@media (min-width: 1024px) {
.cart-page-main {
padding: 28px 24px 48px;
}
.cart-products-header {
margin-top: 0;
padding-bottom: 20px;
}
.cart-page-title {
font-size: 1.5rem;
}
.cart-item-count {
font-size: 1.125rem;
}
.cart-content-layout {
flex-direction: row;
align-items: flex-start;
gap: 28px;
}
.cart-items-section {
flex: 1;
min-width: 0;
order: 1;
}
.cart-summary-section {
order: 2;
width: 380px;
flex-shrink: 0;
position: sticky;
top: 100px;
}
.cart-items-list {
gap: 16px;
}
.cart-item-card {
padding: 20px 56px 20px 20px;
display: grid;
grid-template-columns: 100px 1fr 140px 120px;
gap: 24px;
align-items: center;
}
.cart-item-delete {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
opacity: 0.7;
}
.cart-item-card:hover .cart-item-delete {
opacity: 1;
}
.cart-item-delete:active {
transform: translateY(-50%) scale(0.92);
}
.cart-item-top {
margin-top: 0;
gap: 16px;
display: contents;
}
.cart-item-thumb-wrap {
width: 100px;
height: 100px;
grid-column: 1;
}
.cart-item-info {
padding-top: 2px;
grid-column: 2;
min-width: 0;
}
.cart-item-name {
font-size: 15px;
-webkit-line-clamp: 2;
}
.cart-item-id {
font-size: 13px;
}
.cart-item-bottom {
margin-top: 0;
padding-top: 0;
border-top: none;
display: contents;
}
.cart-item-qty-wrap {
grid-column: 3;
margin-right: 0;
}
.cart-qty-wrap {
padding: 6px 6px;
}
.cart-qty-btn {
width: 36px;
height: 36px;
}
.cart-qty-btn img {
width: 16px;
height: 16px;
}
.cart-item-price {
font-size: 17px;
grid-column: 4;
margin: 0;
}
.cart-promo-section {
margin-top: 8px;
}
.cart-promo-box {
padding: 20px;
}
.cart-promo-input {
height: 48px;
font-size: 15px;
}
.cart-promo-apply {
height: 48px;
padding: 0 24px;
font-size: 15px;
}
.cart-summary-box {
padding: 24px;
}
.cart-summary-row {
font-size: 15px;
padding: 12px 0;
}
.cart-summary-total-price {
font-size: 22px;
}
.cart-btn-secure {
padding: 18px 28px;
font-size: 17px;
}
.cart-btn-secure img {
width: 24px;
height: 24px;
}
.cart-btn-save-quote {
padding: 16px 28px;
font-size: 16px;
}
}
/* ========== Profile Dashboard ========== */
.profile-dashboard-main {
padding: 16px;
padding-bottom: 120px;
min-height: 40vh;
}
.profile-dashboard-inner {
max-width: 1400px;
margin: 0 auto;
}
.profile-dashboard-main--orders .profile-hero,
.profile-dashboard-main--quotes .profile-hero,
.profile-dashboard-main--addresses .profile-hero,
.profile-dashboard-main--wishlist .profile-hero {
display: none;
}
.profile-hero {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
padding: 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
margin-bottom: 24px;
transition:
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.profile-hero:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.profile-hero-info {
flex: 1;
min-width: 0;
}
.profile-hero-name {
font-size: 1.25rem;
font-weight: 700;
color: #102a43;
margin: 0 0 8px;
transition: color 0.2s ease;
}
.profile-hero-badges {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.profile-hero-badge {
font-size: 12px;
font-weight: 600;
color: #137fec;
background: rgba(19, 127, 236, 0.1);
padding: 4px 10px;
border-radius: 9999px;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.15s ease;
}
.profile-hero-badge:hover {
background: rgba(19, 127, 236, 0.15);
}
.profile-hero-id {
font-size: 12px;
color: #64748b;
}
.profile-hero-avatar-wrap {
position: relative;
flex-shrink: 0;
padding: 6px;
border: 2px solid rgba(19, 127, 236, 0.3);
border-radius: 50%;
overflow: visible;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}
.profile-hero-avatar-wrap:hover {
border-color: rgba(19, 127, 236, 0.5);
box-shadow: 0 4px 12px rgba(19, 127, 236, 0.15);
}
.profile-hero-avatar {
display: block;
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 50%;
}
.profile-hero-verified {
position: absolute;
right: -2px;
bottom: -2px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
width: 23px;
}
.profile-section-label {
font-size: 12px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.02em;
display: block;
margin-bottom: 10px;
}
.profile-activity-section {
margin-bottom: 24px;
}
.profile-activity-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.profile-activity-header .profile-section-label {
margin-bottom: 0;
}
.profile-view-all {
font-size: 14px;
font-weight: 500;
color: #0c52b3;
text-decoration: none;
padding: 4px 8px;
margin: -4px -8px;
border-radius: 6px;
transition:
color 0.2s ease,
background-color 0.2s ease,
transform 0.15s ease;
}
.profile-view-all:hover {
color: #0a3d8a;
background-color: rgba(12, 82, 179, 0.08);
}
.profile-view-all:active {
transform: scale(0.98);
}
.profile-activity-content {
margin-top: 0;
}
.profile-activity-content .product-qa-card {
/* Handled by global card styles transition */
}
.profile-account-section {
margin-top: 8px;
}
.profile-account-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition:
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.profile-account-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.profile-account-title {
font-size: 13px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 18px;
display: block;
}
.profile-account-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-account-link {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 12px;
text-decoration: none;
color: #1e293b;
font-size: 14px;
font-weight: 500;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease;
}
.profile-account-link:hover {
background: #ffffff;
border-color: #e2e8f0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.profile-account-link.is-active {
background: rgba(19, 127, 236, 0.08);
border-color: rgba(19, 127, 236, 0.25);
color: #137fec;
}
.profile-account-link.is-active .profile-account-link-text {
color: #137fec;
}
.profile-account-link.is-active .profile-account-link-desc {
color: #0c52b3;
}
.profile-account-link.is-active .profile-account-link-icon {
background: rgba(19, 127, 236, 0.15);
}
.profile-account-link:active {
transform: scale(0.995);
}
.profile-account-link:focus-visible {
outline: 2px solid #137fec;
outline-offset: 2px;
}
.profile-account-link-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(19, 127, 236, 0.08);
border-radius: 12px;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.profile-account-link:hover .profile-account-link-icon {
background: rgba(19, 127, 236, 0.12);
}
.profile-account-link-icon img {
width: 40px;
height: 40px;
}
.profile-account-link-content {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
text-align: left;
}
.profile-account-link-text {
font-weight: 600;
color: #1e293b;
}
.profile-account-link-desc {
font-size: 12px;
font-weight: 400;
color: #64748b;
}
.profile-account-chevron {
width: 12px;
height: 12px;
flex-shrink: 0;
opacity: 0.6;
transition: transform 0.2s ease;
}
.profile-account-link:hover .profile-account-chevron {
transform: translateX(3px);
opacity: 0.9;
}
.profile-account-actions {
border-top: 1px solid #f1f5f9;
margin-top: 20px;
padding-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.profile-logout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 20px;
font-size: 15px;
font-weight: 600;
color: #f43f5e;
background: #ffffff;
border: 1px solid #ffe4e6;
border-radius: 12px;
cursor: pointer;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.profile-logout-btn:hover {
background: #fff1f2;
border-color: #fecdd3;
box-shadow: 0 2px 8px rgba(244, 63, 94, 0.12);
}
.profile-logout-btn:active {
transform: scale(0.99);
}
.profile-logout-btn:focus-visible {
outline: 2px solid #f43f5e;
outline-offset: 2px;
}
.profile-logout-btn img {
width: 20px;
height: 20px;
}
.profile-help-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 100%;
padding: 14px 20px;
font-size: 15px;
font-weight: 500;
color: #475569;
background: transparent;
border: none;
border-radius: 12px;
text-decoration: none;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.15s ease;
}
.profile-help-btn:hover {
background: #f8fafc;
color: #1e293b;
}
.profile-help-btn:hover .profile-account-chevron {
transform: translateX(3px);
opacity: 0.9;
}
.profile-help-btn:active {
transform: scale(0.99);
}
.profile-help-btn:focus-visible {
outline: 2px solid #94a3b8;
outline-offset: 2px;
}
.profile-help-btn img:first-of-type {
width: 20px;
height: 20px;
}
.profile-help-btn .profile-account-chevron {
margin-left: auto;
}
@media (min-width: 1024px) {
.profile-dashboard-main {
padding: 32px 24px 48px;
}
.profile-hero {
padding: 28px 24px;
gap: 24px;
margin-bottom: 32px;
}
.profile-hero-name {
font-size: 1.5rem;
}
.profile-hero-avatar-wrap {
padding: 8px;
}
.profile-hero-avatar {
width: 88px;
height: 88px;
}
.profile-hero-verified {
width: 32px;
height: 32px;
right: 0;
bottom: 0;
}
.profile-hero-verified img {
width: 22px;
height: 22px;
}
.profile-dashboard-inner {
display: grid;
grid-template-columns: 380px 1fr;
gap: 32px;
align-items: start;
}
.profile-hero {
grid-column: 1 / -1;
}
.profile-account-section {
grid-column: 1;
grid-row: 2;
margin-top: 0;
position: sticky;
top: 100px;
}
.profile-activity-section {
grid-column: 2;
margin-bottom: 0;
}
.profile-dashboard-main--edit .profile-account-section {
grid-row: 1;
}
.profile-dashboard-main--edit .profile-activity-section {
grid-row: 1;
}
.profile-dashboard-main--orders .profile-account-section,
.profile-dashboard-main--quotes .profile-account-section,
.profile-dashboard-main--addresses .profile-account-section,
.profile-dashboard-main--wishlist .profile-account-section {
grid-row: 1;
}
.profile-dashboard-main--orders .profile-orders-section,
.profile-dashboard-main--quotes .profile-quotes-section,
.profile-dashboard-main--addresses .profile-addresses-section,
.profile-dashboard-main--wishlist .profile-wishlist-section {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
.profile-activity-section--edit {
min-width: 0;
padding-left: 0;
padding-right: 8px;
}
.profile-activity-section--edit .profile-edit-main {
padding: 32px 24px 48px;
padding-top: 0;
margin: 0;
max-width: 100%;
}
.profile-activity-section--edit .profile-edit-inner {
max-width: 100%;
margin: 0;
}
.profile-activity-header .profile-section-label {
font-size: 13px;
}
.profile-view-all {
font-size: 15px;
}
.profile-account-card {
padding: 28px;
}
.profile-account-title {
margin-bottom: 20px;
font-size: 12px;
}
.profile-account-link {
padding: 16px 18px;
font-size: 15px;
}
.profile-account-link-icon {
width: 48px;
height: 48px;
}
.profile-account-link-icon img {
width: 40px;
height: 40px;
}
.profile-account-link-desc {
font-size: 13px;
}
.profile-account-actions {
margin-top: 24px;
padding-top: 24px;
}
.profile-logout-btn {
padding: 16px 24px;
font-size: 16px;
}
.profile-logout-btn img {
width: 22px;
height: 22px;
}
.profile-help-btn {
padding: 16px 24px;
font-size: 16px;
}
}
@media (max-width: 1023px) {
.profile-dashboard-main--edit .profile-dashboard-inner,
.profile-dashboard-main--orders .profile-dashboard-inner,
.profile-dashboard-main--quotes .profile-dashboard-inner,
.profile-dashboard-main--addresses .profile-dashboard-inner,
.profile-dashboard-main--wishlist .profile-dashboard-inner {
display: flex;
flex-direction: column;
}
.profile-dashboard-main--edit .profile-activity-section,
.profile-dashboard-main--orders .profile-orders-section,
.profile-dashboard-main--quotes .profile-quotes-section,
.profile-dashboard-main--addresses .profile-addresses-section {
order: -1;
}
}
/* ========== My Addresses Page ========== */
.profile-dashboard-main--addresses .profile-account-section {
grid-row: 1;
}
.profile-addresses-section {
margin-bottom: 24px;
}
.my-addresses-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.my-addresses-title {
font-size: 1.5rem;
font-weight: 700;
color: #102a43;
margin: 0;
transition: color 0.2s ease;
}
.my-addresses-btn-add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
font-size: 15px;
font-weight: 600;
color: #102a43;
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: filter 0.7s ease;
}
.my-addresses-btn-add:hover {
filter: brightness(1.15);
border-color: #137fec;
background: rgba(19, 127, 236, 0.04);
}
.my-addresses-btn-add:active {
transform: translateY(0) scale(0.98);
}
.my-addresses-btn-add__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.my-addresses-btn-add:hover .my-addresses-btn-add__icon {
transform: scale(1.08);
}
.my-addresses-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.address-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
background: #ffffff;
border-radius: 16px;
border: 2px solid #f1f5f9;
transition:
box-shadow 0.25s ease,
transform 0.2s ease,
border-color 0.2s ease,
opacity 0.2s ease;
}
.address-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.address-card.is-default {
border-color: #137fec;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.address-card.is-default:hover {
box-shadow: 0 4px 16px rgba(19, 127, 236, 0.15);
}
.address-card__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.address-card__row--badges {
justify-content: space-between;
}
.address-card__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.address-card__badge {
display: inline-block;
padding: 4px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
transition:
transform 0.15s ease,
opacity 0.2s ease;
}
.address-card__badge--primary {
background: rgba(19, 127, 236, 0.1);
color: #0c52b3;
}
.address-card__badge--solid {
background: #0c52b3;
color: #ffffff;
}
.address-card__badge--inactive {
background: #f1f5f9;
color: #64748b;
}
.address-card__active-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.address-card:hover .address-card__active-icon {
transform: scale(1.1);
}
.address-card__set-default {
padding: 6px 12px;
font-size: 13px;
font-weight: 600;
color: #137fec;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.15s ease;
}
.address-card__set-default:hover {
background: rgba(19, 127, 236, 0.1);
transform: scale(1.02);
}
.address-card__set-default:active {
transform: scale(0.98);
}
.address-card__row--details {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.address-card__detail {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #334155;
line-height: 1.4;
transition: color 0.2s ease;
}
.address-card__detail-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: 0.7;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.address-card:hover .address-card__detail-icon {
opacity: 1;
transform: scale(1.05);
}
.address-card__detail-text {
flex: 1;
}
.address-card__row--actions {
padding-top: 4px;
border-top: 1px solid #f1f5f9;
gap: 8px;
}
.address-card__action {
padding: 0;
font-size: 14px;
font-weight: 500;
color: #64748b;
background: none;
border: none;
cursor: pointer;
transition:
color 0.2s ease,
transform 0.15s ease;
}
.address-card__action:hover {
color: #137fec;
transform: translateX(2px);
}
.address-card__action--remove:hover {
color: #c62828;
}
.address-card__action:active {
transform: scale(0.97);
}
.address-card__action-sep {
color: #cbd5e1;
font-weight: 400;
user-select: none;
}
@media (min-width: 768px) {
.my-addresses-list {
gap: 20px;
}
.address-card {
padding: 24px;
gap: 18px;
}
}
@media (min-width: 1024px) {
.profile-addresses-section {
margin-bottom: 0;
}
.my-addresses-title {
font-size: 1.75rem;
}
.my-addresses-btn-add {
padding: 14px 24px;
font-size: 15px;
}
.my-addresses-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.address-card {
padding: 28px;
gap: 20px;
}
}
/* Add Address Modal */
.add-address-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 5, 5, 0.5);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.add-address-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.add-address-modal {
position: fixed;
inset: 0;
z-index: 101;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s ease,
visibility 0.25s ease;
}
.add-address-modal.is-open {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.add-address-modal__dialog {
width: 100%;
max-width: 520px;
max-height: calc(100vh - 32px);
background: #fff;
border-radius: 16px;
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.18),
0 0 0 1px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.96);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.add-address-modal.is-open .add-address-modal__dialog {
transform: scale(1);
}
.add-address-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.add-address-modal__title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
letter-spacing: -0.02em;
}
.add-address-modal__close {
width: 40px;
height: 40px;
border: none;
background: #f1f5f9;
color: #64748b;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 1;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.15s ease;
}
.add-address-modal__close:hover {
background: #e2e8f0;
color: #1e293b;
transform: scale(1.05);
}
.add-address-modal__close:active {
transform: scale(0.95);
}
.add-address-form {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.add-address-form__body {
padding: 24px;
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.add-address-form__label {
display: flex;
flex-direction: column;
gap: 6px;
}
.add-address-form__label-text {
font-size: 14px;
font-weight: 600;
color: #334155;
}
.add-address-form__optional {
font-weight: 400;
color: #94a3b8;
}
.add-address-form__input {
width: 100%;
padding: 12px 14px;
font-size: 15px;
color: #1e293b;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.add-address-form__input:focus {
outline: none;
border-color: #137fec;
box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.15);
}
.add-address-form__input::placeholder {
color: #94a3b8;
}
.add-address-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.add-address-form__checkbox {
width: 18px;
height: 18px;
accent-color: #137fec;
cursor: pointer;
}
.add-address-form__label--checkbox {
flex-direction: row;
align-items: center;
gap: 10px;
}
.add-address-form__label--checkbox .add-address-form__label-text {
font-weight: 500;
}
.add-address-form__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 20px 24px;
border-top: 1px solid #e2e8f0;
flex-shrink: 0;
}
.add-address-modal__btn {
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
transition:
transform 0.15s ease,
background 0.2s ease,
color 0.2s ease;
}
.add-address-modal__btn--secondary {
background: #f1f5f9;
color: #64748b;
border: none;
}
.add-address-modal__btn--secondary:hover {
background: #e2e8f0;
color: #334155;
transform: translateY(-1px);
}
.add-address-modal__btn--primary {
background: linear-gradient(135deg, #137fec 0%, #0c52b3 100%);
color: #fff;
border: none;
box-shadow: 0 2px 8px rgba(19, 127, 236, 0.35);
}
.add-address-modal__btn--primary:hover {
box-shadow: 0 4px 12px rgba(19, 127, 236, 0.45);
transform: translateY(-1px);
}
.add-address-modal__btn--primary:active,
.add-address-modal__btn--secondary:active {
transform: translateY(0) scale(0.98);
}
@media (max-width: 767px) {
.add-address-modal {
padding: 0;
align-items: flex-end;
}
.add-address-modal__dialog {
max-height: 90vh;
border-radius: 20px 20px 0 0;
transform: translateY(100%);
}
.add-address-modal.is-open .add-address-modal__dialog {
transform: translateY(0);
}
.add-address-form__row {
grid-template-columns: 1fr;
}
}
/* ========== My Quotes Page ========== */
.profile-quotes-section {
margin-bottom: 24px;
}
.my-quotes-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.my-quotes-title {
font-size: 1.5rem;
font-weight: 700;
color: #102a43;
margin: 0;
transition: color 0.2s ease;
}
.my-quotes-btn-create {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
font-size: 15px;
font-weight: 600;
color: #102a43;
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: filter 0.7s ease;
}
.my-quotes-btn-create:hover {
filter: brightness(1.15);
border-color: #137fec;
background: rgba(19, 127, 236, 0.04);
}
.my-quotes-btn-create:active {
transform: translateY(0) scale(0.98);
}
.my-quotes-btn-create__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.my-quotes-btn-create:hover .my-quotes-btn-create__icon {
transform: scale(1.08);
}
.my-quotes-empty {
text-align: center;
padding: 48px 24px;
background: #ffffff;
border-radius: 12px;
border: 1px dashed #cbd5e1;
}
.my-quotes-empty.is-hidden {
display: none;
}
.my-quotes-empty__img {
width: 120px;
height: 120px;
margin: 0 auto 20px;
display: block;
opacity: 0.6;
}
.my-quotes-empty__title {
font-size: 1.25rem;
font-weight: 700;
color: #102a43;
margin: 0 0 12px;
}
.my-quotes-empty__text {
font-size: 15px;
color: #64748b;
margin: 0 0 24px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.my-quotes-list {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.quote-list-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
padding: 20px;
transition:
opacity 0.7s ease,
border-color 0.7s ease;
}
.quote-list-card__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.quote-list-card__name {
font-size: 1.125rem;
font-weight: 700;
color: #102a43;
margin: 0;
transition: color 0.2s ease;
}
.quote-list-card:hover .quote-list-card__name {
color: #0c52b3;
}
.quote-list-card__actions {
display: flex;
align-items: center;
gap: 12px;
}
.quote-list-card__action {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: #64748b;
text-decoration: none;
padding: 6px 10px;
border-radius: 8px;
transition:
color 0.2s ease,
background 0.2s ease,
transform 0.15s ease;
}
.quote-list-card__action img {
width: 16px;
height: 16px;
opacity: 0.8;
transition: transform 0.2s ease;
}
.quote-list-card__action:hover {
color: #0c52b3;
background: rgba(12, 82, 179, 0.08);
}
.quote-list-card__action:hover img {
transform: scale(1.1);
}
.quote-list-card__action--remove:hover {
color: #c62828;
background: rgba(198, 40, 40, 0.08);
}
.quote-list-card__action:active {
transform: scale(0.97);
}
.quote-list-card__preview {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.quote-list-card__thumb {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 8px;
background: #f1f5f9;
transition: transform 0.25s ease;
}
.quote-list-card:hover .quote-list-card__thumb {
transform: scale(1.03);
}
.quote-list-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
}
.quote-list-card__count {
font-size: 14px;
color: #64748b;
}
.quote-list-card__foot-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.quote-list-card__add-products {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #64748b;
background: transparent;
border: 1px solid #e2e8f0;
text-decoration: none;
transition: filter 0.7s ease;
}
.quote-list-card__add-products:hover {
filter: brightness(1.15);
color: #0c52b3;
border-color: #0c52b3;
background: rgba(12, 82, 179, 0.06);
}
.quote-list-card__add-products:active {
transform: translateY(0) scale(0.98);
}
.quote-list-card__view {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #0c52b3;
background: #eff6ff;
text-decoration: none;
transition: filter 0.7s ease;
}
.quote-list-card__view:hover {
filter: brightness(1.15);
background: #0c52b3;
color: #ffffff;
}
.quote-list-card__view:active {
transform: translateY(0) scale(0.98);
}
/* Create new list modal (layout only for backend) */
.quote-create-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 5, 5, 0.5);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.quote-create-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.quote-create-modal {
position: fixed;
inset: 0;
z-index: 101;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s ease,
visibility 0.25s ease;
}
.quote-create-modal.is-open {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.quote-create-modal__dialog {
width: 100%;
max-width: 440px;
background: #fff;
border-radius: 16px;
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.18),
0 0 0 1px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.96);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quote-create-modal.is-open .quote-create-modal__dialog {
transform: scale(1);
}
.quote-create-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.quote-create-modal__title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
letter-spacing: -0.02em;
}
.quote-create-modal__close {
width: 40px;
height: 40px;
border: none;
background: #f1f5f9;
color: #64748b;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 1;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.15s ease;
}
.quote-create-modal__close:hover {
background: #e2e8f0;
color: #1e293b;
transform: scale(1.05);
}
.quote-create-modal__close:active {
transform: scale(0.95);
}
.quote-create-form__body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.quote-create-form__label {
display: flex;
flex-direction: column;
gap: 6px;
}
.quote-create-form__label-text {
font-size: 14px;
font-weight: 600;
color: #334155;
}
.quote-create-form__optional {
font-weight: 400;
color: #94a3b8;
}
.quote-create-form__input {
width: 100%;
padding: 12px 14px;
font-size: 15px;
color: #1e293b;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.quote-create-form__input:focus {
outline: none;
border-color: #137fec;
box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.15);
}
.quote-create-form__input::placeholder {
color: #94a3b8;
}
.quote-create-form__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 20px 24px;
border-top: 1px solid #e2e8f0;
flex-shrink: 0;
}
.quote-create-modal__btn {
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
transition:
transform 0.15s ease,
background 0.2s ease,
color 0.2s ease;
}
.quote-create-modal__btn--secondary {
background: #f1f5f9;
color: #64748b;
border: none;
}
.quote-create-modal__btn--secondary:hover {
background: #e2e8f0;
color: #334155;
transform: translateY(-1px);
}
.quote-create-modal__btn--primary {
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
color: #fff;
border: none;
box-shadow: 0 2px 8px rgba(12, 60, 234, 0.35);
}
.quote-create-modal__btn--primary:hover {
box-shadow: 0 4px 12px rgba(12, 60, 234, 0.45);
transform: translateY(-1px);
}
.quote-create-modal__btn--primary:active,
.quote-create-modal__btn--secondary:active {
transform: translateY(0) scale(0.98);
}
@media (max-width: 767px) {
.quote-create-modal {
padding: 0;
align-items: flex-end;
}
.quote-create-modal__dialog {
border-radius: 20px 20px 0 0;
transform: translateY(100%);
}
.quote-create-modal.is-open .quote-create-modal__dialog {
transform: translateY(0);
}
}
@media (min-width: 768px) {
.my-quotes-list {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (min-width: 1024px) {
.profile-quotes-section {
margin-bottom: 0;
}
.my-quotes-title {
font-size: 1.75rem;
}
.my-quotes-btn-create {
padding: 14px 24px;
font-size: 15px;
}
.my-quotes-list {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.quote-list-card {
padding: 24px;
}
.quote-list-card__name {
font-size: 1.25rem;
}
.quote-list-card__thumb {
width: 64px;
height: 64px;
}
}
/* ========== Quote list detail (single list view) ========== */
.quote-detail-page {
padding: 16px;
padding-bottom: 120px;
min-height: 40vh;
}
.quote-detail-inner {
max-width: 900px;
margin: 0 auto;
}
.quote-detail-back {
display: inline-block;
font-size: 14px;
font-weight: 500;
color: #0c52b3;
margin-bottom: 16px;
padding: 4px 0;
text-decoration: none;
transition: color 0.2s ease;
}
.quote-detail-back:hover {
text-decoration: underline;
}
.quote-detail-title {
font-size: 1.5rem;
font-weight: 700;
color: #102a43;
margin: 0 0 24px;
}
.quote-detail-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.quote-detail-add-all {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font-size: 0.9375rem;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
border: none;
border-radius: 9999px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.quote-detail-add-all:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
}
.quote-detail-add-all:active {
transform: translateY(0) scale(0.98);
}
.quote-detail-add-products {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #64748b;
background: transparent;
border: 1px solid #e2e8f0;
text-decoration: none;
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease;
}
.quote-detail-add-products:hover {
color: #0c52b3;
border-color: #0c52b3;
background: rgba(12, 82, 179, 0.06);
transform: translateY(-1px);
}
.quote-detail-add-products:active {
transform: translateY(0) scale(0.98);
}
.quote-detail-products {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.quote-product-card {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding: 16px;
background: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
transition:
box-shadow 0.25s ease,
border-color 0.2s ease;
}
.quote-product-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
border-color: #cbd5e1;
}
.quote-product-card__thumb {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
background: #f1f5f9;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.quote-product-card:hover .quote-product-card__thumb {
transform: scale(1.02);
}
.quote-product-card__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.quote-product-card__name {
font-size: 15px;
font-weight: 600;
color: #102a43;
}
.quote-product-card__price {
font-size: 16px;
font-weight: 700;
color: #0c52b3;
}
.quote-product-card__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.quote-product-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition:
transform 0.15s ease,
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.quote-product-card__btn:active {
transform: scale(0.97);
}
.quote-product-card__btn--cart {
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
color: #ffffff;
border: none;
}
.quote-product-card__btn--cart:hover {
box-shadow: 0 4px 12px rgba(12, 60, 234, 0.35);
transform: translateY(-1px);
}
.quote-product-card__btn--remove {
background: transparent;
color: #64748b;
border: 1px solid #e2e8f0;
}
.quote-product-card__btn--remove:hover {
color: #c62828;
border-color: #c62828;
background: rgba(198, 40, 40, 0.06);
}
@media (min-width: 1024px) {
.quote-detail-page {
padding: 24px 20px 80px;
}
.quote-detail-title {
font-size: 1.75rem;
margin-bottom: 28px;
}
.quote-product-card {
padding: 20px 24px;
gap: 24px;
}
.quote-product-card__thumb {
width: 80px;
height: 80px;
}
.quote-product-card__name {
font-size: 16px;
}
.quote-product-card__btn {
padding: 10px 20px;
font-size: 15px;
}
}
/* ========== My Orders Page ========== */
.profile-orders-section {
margin-bottom: 24px;
}
.my-orders-title {
font-size: 1.5rem;
font-weight: 700;
color: #102a43;
margin: 0 0 16px;
transition: color 0.2s ease;
}
.my-orders-search-wrap {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.my-orders-search {
width: 100%;
height: 48px;
padding: 0 44px 0 16px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 15px;
color: #102a43;
outline: none;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
}
.my-orders-search::placeholder {
color: #94a3b8;
}
.my-orders-search:hover {
border-color: #cbd5e1;
}
.my-orders-search:focus {
border-color: #0c52b3;
box-shadow: 0 0 0 3px rgba(12, 82, 179, 0.15);
}
.my-orders-search-icon {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
opacity: 0.6;
pointer-events: none;
transition: opacity 0.2s ease;
}
.my-orders-search-wrap:focus-within .my-orders-search-icon,
.my-orders-search-wrap:hover .my-orders-search-icon {
opacity: 0.9;
}
.my-orders-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.my-orders-help {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
gap: 8px;
}
.my-orders-help-text {
font-size: 14px;
color: #64748b;
margin: 0;
}
.my-orders-help-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 500;
color: #0c52b3;
text-decoration: none;
transition: color 0.2s ease;
}
.my-orders-help-link:hover {
text-decoration: underline;
}
.my-orders-help-chevron {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.my-orders-help-link:hover .my-orders-help-chevron {
transform: translateX(4px);
}
.my-order-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
overflow: hidden;
transition:
box-shadow 0.25s ease,
transform 0.2s ease,
border-color 0.2s ease;
border: 1px solid transparent;
}
.my-order-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: #e2e8f0;
}
.my-order-card__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.my-order-card__body {
display: flex;
flex-direction: column;
gap: 12px;
}
.my-order-card__footer {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 12px;
border-top: 1px solid #e2e8f0;
}
.my-order-card__header,
.my-order-card__body,
.my-order-card__footer {
padding: 16px 16px;
}
.my-order-card__header {
padding-top: 16px;
padding-bottom: 0;
}
.my-order-card__body {
padding-top: 12px;
padding-bottom: 24px;
}
.my-order-card__footer {
padding-bottom: 16px;
}
.my-order-product--hidden {
display: none;
}
.my-order-card__products-more {
margin: 0;
font-size: 13px;
color: #64748b;
}
.my-order-card__more-link {
color: #0c52b3;
font-weight: 500;
text-decoration: none;
transition:
color 0.2s ease,
text-decoration 0.2s ease;
}
.my-order-card__more-link:hover {
text-decoration: underline;
}
.my-order-card__id {
font-size: 15px;
font-weight: 600;
color: #94a3b8;
transition: color 0.2s ease;
}
.my-order-card:hover .my-order-card__id {
color: #64748b;
}
.my-order-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 9999px;
font-size: 13px;
font-weight: 600;
transition:
transform 0.15s ease,
opacity 0.2s ease;
}
.my-order-badge:hover {
transform: scale(1.02);
}
.my-order-badge:active {
transform: scale(0.98);
}
.my-order-badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
animation: my-order-pulse 1.5s ease-in-out infinite;
}
@keyframes my-order-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.my-order-badge-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.my-order-badge--processing {
color: #0c52b3;
background: #eff6ff;
}
.my-order-badge--shipped {
color: #16a34a;
background: #f0fdf4;
}
.my-order-badge--delivered {
color: #64748b;
background: #f8fafc;
}
.my-order-badge--cancelled {
color: #c62828;
background: #ffebee;
}
.my-order-card__products {
display: flex;
flex-direction: column;
gap: 12px;
}
.my-order-card__total {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.my-order-card__footer .my-order-card__total {
padding-top: 0;
border-top: none;
margin-top: 0;
}
.my-order-card__total-label {
font-size: 14px;
font-weight: 600;
color: #64748b;
}
.my-order-card__total-value {
font-size: 16px;
font-weight: 700;
color: #102a43;
}
.my-order-product {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
}
.my-order-product-thumb {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 12px;
flex-shrink: 0;
background: #f1f5f9;
transition:
transform 0.25s ease,
box-shadow 0.2s ease;
}
.my-order-product:hover .my-order-product-thumb {
transform: scale(1.02);
}
.my-order-product-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.my-order-product-name {
font-size: 15px;
font-weight: 600;
color: #102a43;
line-height: 1.35;
transition: color 0.2s ease;
}
.my-order-product:hover .my-order-product-name {
color: #0c52b3;
}
.my-order-product-date {
font-size: 13px;
color: #64748b;
}
.my-order-product-price {
font-size: 15px;
font-weight: 700;
color: #102a43;
margin-top: 2px;
transition: color 0.2s ease;
}
.my-order-card__actions {
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.my-order-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: filter 0.7s ease;
}
.my-order-btn:active {
transform: scale(0.97);
}
.my-order-btn--outline {
background: transparent;
border: 1px solid #e2e8f0;
color: #334155;
}
.my-order-btn--outline:hover {
filter: brightness(1.15);
border-color: #0c52b3;
color: #0c52b3;
}
.my-order-btn--outline:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(12, 82, 179, 0.25);
}
.my-order-btn--primary {
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
color: #ffffff;
border: none;
}
.my-order-btn--primary:hover {
filter: brightness(1.15);
}
.my-order-btn--primary:active {
transform: translateY(0) scale(0.97);
}
.my-order-btn--primary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(12, 60, 234, 0.35);
}
@media (min-width: 1024px) {
.profile-orders-section {
margin-bottom: 0;
padding-left: 0;
}
.my-orders-title {
font-size: 1.75rem;
margin-bottom: 20px;
}
.my-orders-search-wrap {
margin-bottom: 24px;
max-width: 420px;
}
.my-orders-search {
height: 52px;
padding-left: 20px;
padding-right: 48px;
}
.my-orders-search-icon {
right: 18px;
width: 22px;
height: 22px;
}
.my-orders-list {
gap: 24px;
}
.my-orders-help {
margin-top: 28px;
padding-top: 24px;
}
.my-orders-help-link {
font-size: 16px;
}
.my-orders-help-chevron {
width: 22px;
height: 22px;
}
.my-order-card {
display: flex;
flex-direction: column;
}
.my-order-card__header,
.my-order-card__body,
.my-order-card__footer {
padding-left: 24px;
padding-right: 24px;
}
.my-order-card__header {
padding-top: 20px;
padding-bottom: 16px;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.my-order-card__id {
font-size: 16px;
}
.my-order-card__body {
padding-top: 0;
padding-bottom: 16px;
}
.my-order-card__products {
display: flex;
flex-direction: column;
gap: 12px;
max-height: none;
}
/* Cap at 2 visible products on desktop; "View details to see all N" for the rest */
.my-order-card__products .my-order-product:nth-child(n + 3) {
display: none;
}
.my-order-card__products-more {
margin-top: 4px;
}
.my-order-card__footer {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 16px;
padding-bottom: 20px;
}
.my-order-card__footer .my-order-card__total {
order: 1;
}
.my-order-card__footer .my-order-card__actions {
order: 2;
flex-direction: row;
flex-shrink: 0;
gap: 12px;
}
.my-order-card__footer:not(:has(.my-order-card__total))
.my-order-card__actions {
margin-left: auto;
}
.my-order-product {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid #f1f5f9;
}
.my-order-product:last-child {
border-bottom: none;
}
.my-order-product-thumb {
width: 64px;
height: 64px;
flex-shrink: 0;
}
.my-order-product-name {
font-size: 15px;
}
.my-order-product-date {
font-size: 13px;
}
.my-order-btn {
padding: 10px 20px;
font-size: 14px;
flex: unset;
}
}
/* ========== View Order Details Page ========== */
.order-detail-page {
padding: 16px;
padding-bottom: 120px;
min-height: 40vh;
}
.order-detail-inner {
max-width: 720px;
margin: 0 auto;
}
.order-detail-back {
display: inline-block;
font-size: 14px;
font-weight: 500;
color: #0c52b3;
margin-bottom: 20px;
padding: 4px 0;
text-decoration: none;
transition:
color 0.2s ease,
opacity 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.order-detail-back:hover {
text-decoration: underline;
}
.order-detail-header-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
padding: 20px;
margin-bottom: 20px;
}
.order-detail-header__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.order-detail-title {
font-size: 1.25rem;
font-weight: 700;
color: #102a43;
margin: 0;
}
.order-detail-header__meta {
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
}
.order-detail-meta-item {
font-size: 14px;
color: #64748b;
}
.order-detail-date {
font-size: 14px;
color: #64748b;
margin: 0;
}
.order-detail-grid {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 24px;
}
.order-detail-items-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
padding: 20px;
}
.order-detail-section-title {
font-size: 12px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 16px;
}
.order-detail-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.order-detail-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid #f1f5f9;
}
.order-detail-item:last-child {
border-bottom: none;
}
.order-detail-item__thumb {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 12px;
background: #f1f5f9;
flex-shrink: 0;
}
.order-detail-item__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.order-detail-item__name {
font-size: 15px;
font-weight: 600;
color: #102a43;
line-height: 1.35;
}
.order-detail-item__meta {
font-size: 13px;
color: #64748b;
}
.order-detail-item__pricing {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 12px;
margin-top: 2px;
}
.order-detail-item__unit {
font-size: 13px;
color: #64748b;
}
.order-detail-item__discount {
font-size: 13px;
color: #16a34a;
}
.order-detail-item__total {
font-size: 15px;
font-weight: 700;
color: #102a43;
}
.order-detail-item__price {
font-size: 15px;
font-weight: 700;
color: #102a43;
flex-shrink: 0;
}
.order-detail-sidebar {
display: flex;
flex-direction: column;
gap: 16px;
}
.order-detail-block {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
padding: 20px;
}
.order-detail-summary-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
padding: 20px;
}
.order-detail-summary {
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.order-detail-summary__row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #475569;
}
.order-detail-summary__row--discount dd {
color: #16a34a;
}
.order-detail-summary__row--total {
font-size: 17px;
font-weight: 700;
color: #102a43;
padding-top: 14px;
margin-top: 6px;
border-top: 1px solid #e2e8f0;
}
.order-detail-payment {
display: flex;
flex-direction: column;
gap: 4px;
}
.order-detail-payment-method {
font-size: 15px;
font-weight: 600;
color: #102a43;
}
.order-detail-payment-date {
font-size: 13px;
color: #64748b;
}
.order-detail-delivery {
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.order-detail-delivery__row {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
}
.order-detail-delivery__label {
font-size: 12px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0;
}
.order-detail-delivery__value {
font-size: 14px;
color: #102a43;
margin: 0;
line-height: 1.5;
}
.order-detail-delivery__value .order-detail-address {
margin: 0;
}
.order-detail-contact-link {
font-size: 14px;
color: #0c52b3;
text-decoration: none;
transition: color 0.2s ease;
}
.order-detail-contact-link:hover {
text-decoration: underline;
}
.order-detail-address {
font-size: 14px;
color: #475569;
line-height: 1.6;
font-style: normal;
margin: 0;
}
.order-detail-tracking-text {
font-size: 14px;
color: #64748b;
margin: 0;
}
.order-detail-tracking-info {
display: flex;
flex-direction: column;
gap: 6px;
}
.order-detail-tracking-info.is-hidden {
display: none;
}
.order-detail-tracking-number {
font-size: 14px;
color: #475569;
}
.order-detail-tracking-carrier {
font-size: 13px;
color: #64748b;
}
.order-detail-tracking-link {
font-size: 14px;
font-weight: 500;
color: #0c52b3;
text-decoration: none;
margin-top: 4px;
transition: color 0.2s ease;
}
.order-detail-tracking-link:hover {
text-decoration: underline;
}
.order-detail-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.order-detail-actions .my-order-btn {
min-height: 44px;
padding: 12px 20px;
}
@media (min-width: 768px) {
.order-detail-inner {
max-width: 900px;
}
.order-detail-item__pricing {
flex-wrap: nowrap;
justify-content: flex-start;
}
.order-detail-item__total {
margin-left: auto;
}
}
@media (min-width: 1024px) {
.order-detail-page {
padding: 24px 20px 80px;
}
.order-detail-inner {
max-width: 1100px;
}
.order-detail-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 24px;
align-items: start;
}
.order-detail-items-card {
padding: 24px;
}
.order-detail-sidebar {
position: sticky;
top: 100px;
gap: 20px;
}
.order-detail-block,
.order-detail-summary-card {
padding: 24px;
}
.order-detail-header-card {
padding: 24px;
}
.order-detail-item {
gap: 20px;
padding: 18px 0;
}
.order-detail-item__thumb {
width: 80px;
height: 80px;
}
.order-detail-item__name {
font-size: 16px;
}
.order-detail-actions .my-order-btn {
min-height: 48px;
padding: 12px 24px;
}
}
/* ========== Profile Edit Page ========== */
.profile-edit-main {
padding: 16px;
padding-bottom: 120px;
min-height: 40vh;
background: #ffffff;
}
.profile-edit-inner {
max-width: 640px;
margin: 0 auto;
}
.profile-edit-form {
display: flex;
flex-direction: column;
gap: 0;
}
.profile-edit-photo-section {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 28px;
}
.profile-edit-avatar-wrap {
position: relative;
flex-shrink: 0;
padding: 6px;
border: 2px solid rgba(19, 127, 236, 0.3);
border-radius: 50%;
overflow: visible;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.profile-edit-avatar-wrap:hover {
border-color: rgba(19, 127, 236, 0.5);
box-shadow: 0 4px 12px rgba(19, 127, 236, 0.15);
}
.profile-edit-avatar {
display: block;
width: 96px;
height: 96px;
object-fit: cover;
border-radius: 50%;
}
.profile-edit-camera {
position: absolute;
right: -4px;
bottom: -4px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #137fec;
border: 4px solid #ffffff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.profile-edit-camera:hover {
background: #0c52b3;
transform: scale(1.05);
}
.profile-edit-camera:active {
transform: scale(0.98);
}
.profile-edit-camera img {
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
}
.profile-edit-photo-label {
font-size: 14px;
color: #64748b;
margin: 12px 0 0;
transition: color 0.2s ease;
}
.profile-edit-fields-wrap {
margin-bottom: 24px;
}
.profile-edit-fields-title {
font-size: 13px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 12px;
}
.profile-edit-fields {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 0;
}
.profile-edit-field {
position: relative;
display: flex;
align-items: center;
}
.profile-edit-input {
width: 100%;
height: 52px;
padding: 0 48px 0 14px;
font-size: 15px;
color: #1e293b;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
outline: none;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background-color 0.2s ease;
}
.profile-edit-input:hover {
border-color: #cbd5e1;
}
.profile-edit-input:disabled {
cursor: default;
background: #f8fafc;
color: #475569;
}
.profile-edit-input:disabled:hover {
border-color: #e2e8f0;
}
.profile-edit-form:not(.profile-edit-form--editing)
.profile-edit-field:focus-within
.profile-edit-input {
box-shadow: none;
border-color: #e2e8f0;
}
.profile-edit-input::placeholder {
color: transparent;
}
.profile-edit-field:focus-within .profile-edit-input {
border-color: #137fec;
box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.12);
}
.profile-edit-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
color: #64748b;
pointer-events: none;
transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
font-size 0.25s ease,
color 0.25s ease,
top 0.25s ease;
background: transparent;
z-index: 0;
}
.profile-edit-field:focus-within .profile-edit-label,
.profile-edit-field.has-value .profile-edit-label {
top: 0;
transform: translateY(-50%);
font-size: 11px;
color: #137fec;
background: #ffffff;
padding: 0 6px;
margin-left: -6px;
z-index: 2;
}
.profile-edit-input-icon {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0.5;
transition: opacity 0.2s ease;
}
.profile-edit-field:focus-within .profile-edit-input-icon {
opacity: 0.8;
}
.profile-edit-verified-box {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px;
background: rgba(19, 127, 236, 0.05);
border: 1px solid rgba(19, 127, 236, 0.1);
border-radius: 12px;
margin-bottom: 24px;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.profile-edit-verified-box:hover {
border-color: rgba(19, 127, 236, 0.18);
box-shadow: 0 2px 12px rgba(19, 127, 236, 0.08);
}
.profile-edit-verified-icon-wrap {
width: 44px;
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(19, 127, 236, 0.2);
border-radius: 50%;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.profile-edit-verified-icon {
width: 24px;
height: 24px;
}
.profile-edit-verified-text {
min-width: 0;
}
.profile-edit-verified-title {
display: block;
font-size: 15px;
font-weight: 600;
color: #0c52b3;
margin-bottom: 4px;
}
.profile-edit-verified-desc {
font-size: 13px;
line-height: 1.4;
color: #64748b;
margin: 0;
}
.profile-edit-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.profile-edit-save-btn {
width: 100%;
padding: 16px 24px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
border: none;
border-radius: 12px;
cursor: pointer;
transition:
opacity 0.25s ease,
transform 0.15s ease,
box-shadow 0.25s ease;
}
.profile-edit-save-btn:hover {
opacity: 0.95;
box-shadow: 0 6px 20px rgba(12, 60, 234, 0.35);
transform: translateY(-1px);
}
.profile-edit-save-btn:active {
transform: translateY(0) scale(0.99);
}
.profile-edit-save-btn:focus-visible {
outline: 2px solid #0c3cea;
outline-offset: 2px;
}
.profile-edit-discard-btn {
width: 100%;
padding: 14px 24px;
font-size: 15px;
font-weight: 500;
color: #64748b;
background: transparent;
border: none;
border-radius: 12px;
cursor: pointer;
transition:
color 0.2s ease,
background-color 0.2s ease,
transform 0.15s ease;
}
.profile-edit-discard-btn:hover {
color: #1e293b;
background: rgba(0, 0, 0, 0.05);
}
.profile-edit-discard-btn:active {
transform: scale(0.99);
}
.profile-edit-discard-btn:focus-visible {
outline: 2px solid #94a3b8;
outline-offset: 2px;
}
.profile-edit-edit-btn {
width: 100%;
padding: 16px 24px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
border: none;
border-radius: 12px;
cursor: pointer;
transition: filter 0.7s ease;
}
.profile-edit-edit-btn:hover {
filter: brightness(1.15);
opacity: 0.95;
}
.profile-edit-edit-btn:active {
transform: translateY(0) scale(0.99);
}
.profile-edit-edit-btn:focus-visible {
outline: 2px solid #0c3cea;
outline-offset: 2px;
}
@media (min-width: 1024px) {
.profile-edit-main {
padding: 40px 24px 56px;
}
.profile-edit-inner {
max-width: 640px;
}
.profile-edit-form {
background: #ffffff;
padding: 40px;
}
.profile-edit-photo-section {
margin-bottom: 40px;
}
.profile-edit-avatar-wrap {
padding: 8px;
}
.profile-edit-avatar {
width: 120px;
height: 120px;
}
.profile-edit-camera {
width: 42px;
height: 42px;
right: -2px;
bottom: -2px;
border-width: 4px;
}
.profile-edit-camera img {
width: 22px;
height: 22px;
}
.profile-edit-photo-label {
font-size: 15px;
margin-top: 14px;
}
.profile-edit-fields-wrap {
margin-bottom: 32px;
}
.profile-edit-fields-title {
font-size: 12px;
font-weight: 600;
color: #64748b;
letter-spacing: 0.05em;
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 1px solid #f1f5f9;
}
.profile-edit-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 24px;
margin-bottom: 0;
}
.profile-edit-field:nth-child(3) {
grid-column: 1 / -1;
}
.profile-edit-input {
height: 56px;
padding: 0 52px 0 16px;
font-size: 16px;
}
.profile-edit-label {
left: 16px;
font-size: 16px;
}
.profile-edit-field:focus-within .profile-edit-label,
.profile-edit-field.has-value .profile-edit-label {
font-size: 12px;
padding: 0 8px;
margin-left: -8px;
}
.profile-edit-input-icon {
right: 16px;
width: 22px;
height: 22px;
}
.profile-edit-verified-box {
padding: 24px;
margin-bottom: 32px;
}
.profile-edit-verified-icon-wrap {
width: 52px;
height: 52px;
}
.profile-edit-verified-icon {
width: 28px;
height: 28px;
}
.profile-edit-verified-title {
font-size: 16px;
}
.profile-edit-verified-desc {
font-size: 14px;
}
.profile-edit-actions {
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
justify-content: flex-end;
padding-top: 24px;
border-top: 1px solid #f1f5f9;
}
.profile-edit-edit-btn {
padding: 16px 32px;
font-size: 16px;
min-width: 140px;
}
.profile-edit-save-btn {
flex: 0 0 auto;
min-width: 160px;
padding: 16px 32px;
font-size: 16px;
order: 2;
}
.profile-edit-discard-btn {
flex: 0 0 auto;
min-width: 120px;
padding: 16px 28px;
font-size: 16px;
order: 1;
}
}
/* ========== Sign Up Page ========== */
.sign-up-page {
padding-bottom: 48px;
}
.sign-up-header {
background: #fff;
border-bottom: 1px solid #e2e8f0;
padding: 12px 16px;
}
.sign-up-header-inner {
max-width: 480px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.sign-up-logo img {
height: 32px;
width: auto;
display: block;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.sign-up-logo:hover img {
opacity: 0.85;
transform: scale(1.02);
}
.sign-up-login-link {
font-size: 14px;
font-weight: 600;
color: #0c52b3;
text-decoration: none;
padding: 8px 14px;
border-radius: 8px;
transition:
color 0.2s ease,
background 0.2s ease,
transform 0.15s ease;
}
.sign-up-login-link:hover {
background: rgba(12, 82, 179, 0.08);
transform: translateY(-1px);
}
.sign-up-login-link:active {
transform: translateY(0) scale(0.98);
}
.sign-up-main {
padding: 24px 16px;
max-width: 480px;
margin: 0 auto;
}
.sign-up-card {
background: #fff;
border-radius: 16px;
padding: 28px 20px 32px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
transition:
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.sign-up-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border-color: #cbd5e1;
}
.sign-up-card-header {
text-align: center;
}
.sign-up-title {
font-size: 1.5rem;
font-weight: 700;
color: #102a43;
margin: 0 0 6px;
letter-spacing: -0.02em;
transition: color 0.2s ease;
}
.sign-up-subtitle {
font-size: 15px;
color: #64748b;
margin: 0 0 24px;
line-height: 1.4;
}
.sign-up-toggle-wrap {
display: flex;
background: #e2e8f0;
border-radius: 12px;
padding: 4px;
margin-bottom: 28px;
position: relative;
transition: background 0.25s ease;
}
.sign-up-toggle-wrap::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: calc(50% - 4px);
height: calc(100% - 8px);
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
z-index: 0;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sign-up-toggle-wrap[data-active="trade"]::before {
transform: translateX(100%);
}
.sign-up-toggle {
flex: 1;
position: relative;
z-index: 1;
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
color: #64748b;
transition:
color 0.3s ease,
transform 0.2s ease;
}
.sign-up-toggle--active,
.sign-up-toggle-wrap:hover .sign-up-toggle:hover {
color: #0c52b3;
}
.sign-up-toggle:hover {
color: #0c52b3;
transform: scale(1.02);
}
.sign-up-toggle:active {
transform: scale(0.98);
}
.sign-up-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.sign-up-form-block--row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.sign-up-form-block--row .sign-up-field {
min-width: 0;
}
.sign-up-field {
position: relative;
display: flex;
align-items: center;
}
.sign-up-phone-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.sign-up-label-static {
font-size: 13px;
font-weight: 600;
color: #334155;
}
.sign-up-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
color: #64748b;
pointer-events: none;
transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
font-size 0.25s ease,
color 0.25s ease,
top 0.25s ease;
background: transparent;
z-index: 0;
}
.sign-up-field:focus-within .sign-up-label,
.sign-up-field.has-value .sign-up-label {
top: 0;
transform: translateY(-50%);
font-size: 11px;
color: #137fec;
background: #fff;
padding: 0 6px;
margin-left: -6px;
z-index: 2;
}
.sign-up-input {
width: 100%;
min-width: 0;
height: 52px;
padding: 0 14px;
font-size: 15px;
color: #1e293b;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
outline: none;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.sign-up-input:hover {
border-color: #cbd5e1;
}
.sign-up-input:focus {
border-color: #137fec;
box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.12);
}
.sign-up-input::placeholder {
color: transparent;
}
.sign-up-password-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-width: 0;
}
.sign-up-input--password {
padding-right: 48px;
}
.sign-up-password-wrap .sign-up-input {
height: 52px;
}
.sign-up-password-toggle {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
color: #64748b;
transition:
color 0.2s ease,
background 0.2s ease,
transform 0.2s ease;
}
.sign-up-password-toggle:hover {
color: #0c52b3;
background: rgba(12, 82, 179, 0.06);
transform: translateY(-50%) scale(1.08);
}
.sign-up-password-toggle:active {
transform: translateY(-50%) scale(0.95);
}
.sign-up-password-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
transition:
opacity 0.2s ease,
transform 0.2s ease;
color: #475569;
}
.sign-up-password-toggle:hover .sign-up-password-icon {
color: #0c52b3;
}
.sign-up-password-icon--hide {
display: none;
}
.sign-up-password-wrap.is-visible .sign-up-password-icon--show {
display: none;
}
.sign-up-password-wrap.is-visible .sign-up-password-icon--hide {
display: block;
color: #475569;
}
.sign-up-password-wrap.is-visible
.sign-up-password-toggle:hover
.sign-up-password-icon--hide {
color: #0c52b3;
}
.sign-up-phone-wrap {
display: flex;
gap: 10px;
}
.sign-up-select--code {
width: 90px;
flex-shrink: 0;
padding: 12px 10px;
font-size: 15px;
color: #1e293b;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.sign-up-select--code:focus {
outline: none;
border-color: #137fec;
box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.12);
}
.sign-up-field--select .sign-up-select {
width: 100%;
min-width: 0;
height: 52px;
padding: 0 36px 0 14px;
font-size: 15px;
color: #1e293b;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
no-repeat right 14px center;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: none;
}
.sign-up-field--select .sign-up-select:focus {
outline: none;
border-color: #137fec;
box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.12);
}
.sign-up-input--phone {
flex: 1;
min-width: 0;
height: 52px;
}
.sign-up-phone-block .sign-up-input::placeholder {
color: #94a3b8;
}
.sign-up-fieldset {
border: none;
padding: 0;
margin: 0 0 4px;
display: flex;
flex-direction: column;
gap: 18px;
}
.sign-up-fieldset > .sign-up-field:first-of-type {
margin-top: 18px;
}
.sign-up-fieldset .sign-up-form-block--row {
margin: 0;
}
.sign-up-legend {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: #102a43;
margin: 0;
padding: 0;
}
.sign-up-legend-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
opacity: 0.9;
transition: transform 0.2s ease;
}
.sign-up-fieldset:hover .sign-up-legend-icon {
transform: scale(1.08);
}
.sign-up-tags-block {
margin-top: 24px;
margin-bottom: 8px;
}
.sign-up-tags-title {
font-size: 15px;
font-weight: 700;
color: #102a43;
margin: 0 0 4px;
}
.sign-up-tags-desc {
font-size: 14px;
color: #64748b;
margin: 0 0 12px;
line-height: 1.4;
}
.sign-up-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.sign-up-tag {
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: #64748b;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
transition:
color 0.2s ease,
background 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease;
}
.sign-up-tag:hover {
border-color: #cbd5e1;
color: #334155;
transform: translateY(-1px);
}
.sign-up-tag:active {
transform: translateY(0) scale(0.98);
}
.sign-up-tag.is-active {
background: rgba(19, 127, 236, 0.1);
border-color: #0c52b3;
color: #0c52b3;
}
.sign-up-tag.is-active:hover {
background: rgba(19, 127, 236, 0.15);
}
.sign-up-checkbox-wrap {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
margin-top: 8px;
margin-bottom: 4px;
}
.sign-up-checkbox {
appearance: none;
width: 20px;
height: 20px;
margin-top: 2px;
flex-shrink: 0;
border: 2px solid #cbd5e1;
border-radius: 6px;
background: #fff;
cursor: pointer;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
transform 0.15s ease;
}
.sign-up-checkbox:hover {
border-color: #94a3b8;
}
.sign-up-checkbox:active {
transform: scale(0.92);
}
.sign-up-checkbox:checked {
border-color: #137fec;
background-color: #137fec;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.sign-up-checkbox:checked:active {
transform: scale(0.92);
}
.sign-up-checkbox:focus-visible {
outline: 2px solid #137fec;
outline-offset: 2px;
}
.sign-up-checkbox-wrap:hover .sign-up-checkbox {
transform: scale(1.05);
}
.sign-up-checkbox-wrap:hover .sign-up-checkbox:active,
.sign-up-checkbox-wrap:hover .sign-up-checkbox:checked:active {
transform: scale(0.92);
}
.sign-up-checkbox-text {
font-size: 14px;
color: #475569;
line-height: 1.5;
}
.sign-up-link {
color: #0c52b3;
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid transparent;
transition:
color 0.2s ease,
border-color 0.2s ease;
}
.sign-up-link:hover {
border-bottom-color: #0c52b3;
}
.sign-up-link--bold {
font-weight: 700;
}
.sign-up-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
color: #fff;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
border: none;
border-radius: 100px;
cursor: pointer;
margin-top: 12px;
box-shadow: 0 2px 10px rgba(19, 127, 236, 0.35);
transition: filter 0.7s ease;
}
.sign-up-submit:hover {
filter: brightness(1.15);
}
.sign-up-submit:active {
transform: translateY(0) scale(0.98);
}
.sign-up-submit-arrow {
width: 12px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.sign-up-submit:hover .sign-up-submit-arrow {
transform: translateX(4px);
}
.sign-up-footer-text {
text-align: center;
font-size: 14px;
color: #64748b;
margin: 24px 0 0;
}
@media (min-width: 768px) {
.sign-up-main {
padding: 40px 24px 64px;
max-width: 520px;
}
.sign-up-card {
padding: 36px 32px 40px;
border-radius: 20px;
}
.sign-up-title {
font-size: 1.75rem;
}
.sign-up-subtitle {
font-size: 16px;
margin-bottom: 28px;
}
.sign-up-toggle {
padding: 14px 20px;
font-size: 15px;
}
.sign-up-form {
gap: 20px;
}
.sign-up-form-block--row {
gap: 18px;
}
}
@media (min-width: 1024px) {
.sign-up-header-inner {
max-width: 560px;
}
.sign-up-main {
max-width: 560px;
padding: 48px 24px 80px;
}
.sign-up-card {
padding: 44px 40px 48px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.sign-up-card:hover {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.sign-up-title {
font-size: 2rem;
}
.sign-up-submit {
padding: 16px 28px;
font-size: 17px;
}
}
/* ========== Sign Up Trade (Trade Account) ========== */
.sign-up-trade-page .sign-up-subtitle {
color: #64748b;
}
.sign-up-trade-card .sign-up-toggle-wrap {
margin-bottom: 28px;
}
.sign-up-trade-form {
display: flex;
flex-direction: column;
gap: 28px;
}
.sign-up-trade-section {
margin: 0;
padding: 0;
}
.sign-up-trade-section-title {
font-size: 15px;
font-weight: 700;
color: #94a3b8;
margin: 0 0 16px;
letter-spacing: 0.02em;
}
.sign-up-trade-form-inner {
display: flex;
flex-direction: column;
gap: 18px;
}
.sign-up-trade-form-inner .sign-up-form-block--row .sign-up-field {
min-width: 0;
}
.sign-up-trade-delivery .sign-up-fieldset {
display: flex;
flex-direction: column;
gap: 18px;
}
.sign-up-trade-delivery .sign-up-legend {
margin: 0;
}
.sign-up-trade-same-address-wrap {
margin-top: 18px;
margin-bottom: 4px;
}
.sign-up-trade-delivery-fields {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 4px;
}
.sign-up-trade-delivery-fields.is-hidden {
display: none;
}
.sign-up-trade-terms-wrap {
margin-top: 8px;
margin-bottom: 8px;
}
.sign-up-trade-terms-text {
font-size: 14px;
color: #475569;
line-height: 1.5;
margin: 0;
}
.sign-up-trade-terms-text .sign-up-link {
color: #0c52b3;
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid transparent;
transition:
color 0.2s ease,
border-color 0.2s ease;
}
.sign-up-trade-terms-text .sign-up-link:hover {
border-bottom-color: #0c52b3;
}
.sign-up-trade-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
color: #fff;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
border: none;
border-radius: 12px;
cursor: pointer;
margin-top: 8px;
box-shadow: 0 2px 12px rgba(48, 42, 234, 0.35);
transition: filter 0.7s ease;
}
.sign-up-trade-submit:hover {
filter: brightness(1.15);
}
.sign-up-trade-submit:active {
transform: translateY(0) scale(0.98);
}
.sign-up-trade-submit-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
filter: brightness(0) invert(1);
transition: transform 0.25s ease;
}
.sign-up-trade-submit:hover .sign-up-trade-submit-icon {
transform: scale(1.08);
}
.sign-up-trade-page .sign-up-footer-text {
margin-top: 24px;
}
@media (min-width: 768px) {
.sign-up-trade-form {
gap: 32px;
}
.sign-up-trade-section-title {
font-size: 16px;
margin-bottom: 18px;
}
.sign-up-trade-form-inner {
gap: 20px;
}
.sign-up-trade-delivery-fields {
gap: 20px;
}
.sign-up-trade-submit {
padding: 16px 28px;
font-size: 17px;
}
}
@media (min-width: 1024px) {
.sign-up-trade-submit {
padding: 18px 32px;
font-size: 17px;
}
}
/* ========== Login Page ========== */
.login-page .sign-up-subtitle {
color: #64748b;
}
.login-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.login-form .sign-up-field {
margin-bottom: 0;
}
.login-password-field {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
}
.login-password-input-row {
position: relative;
width: 100%;
}
.login-password-input-row .sign-up-password-wrap {
width: 100%;
}
.login-forgot {
display: block;
text-align: right;
margin-top: 10px;
width: 100%;
font-size: 14px;
font-weight: 500;
color: #0c52b3;
text-decoration: none;
transition:
color 0.2s ease,
opacity 0.2s ease;
}
.login-forgot:hover {
color: #137fec;
opacity: 0.9;
}
.login-submit {
margin-top: 8px;
}
.login-divider {
display: flex;
align-items: center;
gap: 16px;
margin: 24px 0 16px;
}
.login-divider::before,
.login-divider::after {
content: "";
flex: 1;
height: 1px;
background: #e2e8f0;
}
.login-divider-text {
font-size: 13px;
color: #94a3b8;
font-weight: 500;
flex-shrink: 0;
}
.login-google-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 14px 24px;
font-size: 15px;
font-weight: 500;
color: #334155;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
cursor: pointer;
transition: filter 0.7s ease;
}
.login-google-btn:hover {
filter: brightness(1.15);
border-color: #cbd5e1;
}
.login-google-btn:active {
transform: translateY(0) scale(0.98);
}
.login-google-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.login-page .sign-up-footer-text {
margin-top: 24px;
}
@media (min-width: 768px) {
.login-form {
gap: 20px;
}
.login-google-btn {
padding: 16px 24px;
font-size: 16px;
}
}
/* ========== Under Review Page ========== */
.under-review-page {
padding-bottom: 48px;
}
.under-review-main {
padding: 32px 16px 48px;
max-width: 480px;
margin: 0 auto;
}
.under-review-card {
background: #fff;
border-radius: 16px;
padding: 32px 24px 40px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
text-align: center;
}
.under-review-hero-icon {
width: 112px;
height: 112px;
margin: 0 auto 24px;
display: block;
}
.under-review-title {
font-size: 1.5rem;
font-weight: 700;
color: #102a43;
margin: 0 0 12px;
letter-spacing: -0.02em;
}
.under-review-desc {
font-size: 15px;
line-height: 1.5;
color: #64748b;
margin: 0 0 36px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.under-review-timeline {
list-style: none;
margin: 0 0 40px;
padding: 0;
display: flex;
flex-direction: column;
gap: 32px;
}
.under-review-step {
display: flex;
align-items: flex-start;
gap: 0;
position: relative;
text-align: left;
}
.under-review-step-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: relative;
z-index: 1;
}
.under-review-step--done .under-review-step-icon {
background: #0c52b3;
}
.under-review-step--done .under-review-step-icon svg {
width: 24px;
height: 24px;
display: block;
}
.under-review-step--current .under-review-step-icon {
background: rgba(12, 82, 179, 0.2);
border: 2px solid #0c52b3;
}
.under-review-step--current .under-review-step-icon img {
width: 24px;
height: 24px;
display: block;
}
.under-review-step--pending .under-review-step-icon {
background: #f1f5f9;
border: 2px solid #e2e8f0;
}
.under-review-step--pending .under-review-step-icon img {
width: 24px;
height: 24px;
display: block;
}
.under-review-step-connector {
position: absolute;
left: 23px;
top: 49px;
width: 2px;
height: calc(100% - 49px + 32px);
background: #137fec;
z-index: 0;
}
.under-review-step-connector--muted {
background: #e2e8f0;
}
.under-review-step:last-child .under-review-step-connector {
display: none;
}
.under-review-step-content {
flex: 1;
min-width: 0;
padding: 4px 0 0 16px;
}
.under-review-step:last-child .under-review-step-content {
padding-bottom: 0;
}
.under-review-step-title {
display: block;
font-size: 15px;
font-weight: 600;
color: #102a43;
margin-bottom: 2px;
}
.under-review-step--pending .under-review-step-title,
.under-review-step--pending .under-review-step-desc {
color: #94a3b8;
}
.under-review-step-desc {
display: block;
font-size: 13px;
color: #64748b;
line-height: 1.4;
}
.under-review-actions {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.under-review-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: 9999px;
transition: filter 0.7s ease;
}
.under-review-btn--primary {
color: #fff;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
box-shadow: 0 2px 12px rgba(48, 42, 234, 0.35);
}
.under-review-btn--primary:hover {
filter: brightness(1.15);
}
.under-review-btn--primary:active {
transform: translateY(0) scale(0.98);
}
.under-review-btn--secondary {
color: #334155;
background: #fff;
border: 1px solid #e2e8f0;
}
.under-review-btn--secondary:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
.under-review-btn--secondary:active {
transform: scale(0.98);
}
@media (min-width: 768px) {
.under-review-main {
padding: 48px 24px 64px;
max-width: 560px;
}
.under-review-card {
padding: 44px 36px 52px;
border-radius: 20px;
}
.under-review-hero-icon {
width: 128px;
height: 128px;
margin-bottom: 28px;
}
.under-review-title {
font-size: 1.75rem;
margin-bottom: 14px;
}
.under-review-desc {
font-size: 16px;
margin-bottom: 44px;
max-width: 420px;
}
.under-review-timeline {
margin-bottom: 48px;
gap: 40px;
}
.under-review-step-connector {
top: 49px;
height: calc(100% - 49px + 40px);
}
.under-review-step-title {
font-size: 16px;
}
.under-review-step-desc {
font-size: 14px;
}
.under-review-actions {
gap: 14px;
}
.under-review-btn {
padding: 16px 32px;
font-size: 16px;
}
}
@media (min-width: 1024px) {
.under-review-main {
max-width: 1040px;
padding: 56px 24px 80px;
}
.under-review-card {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
grid-template-areas:
"intro timeline"
"actions timeline";
column-gap: 56px;
row-gap: 28px;
align-items: start;
text-align: left;
padding: 56px 48px 64px;
border-radius: 24px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
}
.under-review-intro {
grid-area: intro;
padding-right: 8px;
}
.under-review-hero-icon {
width: 160px;
height: 160px;
margin: 0 0 24px;
}
.under-review-title {
font-size: 2rem;
margin-bottom: 16px;
}
.under-review-desc {
font-size: 17px;
margin-bottom: 48px;
max-width: 56ch;
line-height: 1.55;
}
.under-review-timeline {
grid-area: timeline;
margin: 6px 0 0;
margin-bottom: 0;
gap: 48px;
}
.under-review-step-connector {
left: 27px;
top: 57px;
height: calc(100% - 57px + 48px);
}
.under-review-step-icon {
width: 56px;
height: 56px;
}
.under-review-step--done .under-review-step-icon svg,
.under-review-step--current .under-review-step-icon img,
.under-review-step--pending .under-review-step-icon img {
width: 28px;
height: 28px;
}
.under-review-step-content {
padding: 6px 0 0 20px;
}
.under-review-step-title {
font-size: 17px;
margin-bottom: 4px;
}
.under-review-step-desc {
font-size: 14px;
}
.under-review-actions {
grid-area: actions;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
flex-wrap: wrap;
gap: 16px;
}
.under-review-btn {
min-width: 220px;
padding: 18px 36px;
font-size: 17px;
}
}
/* ========== Transaction Failed Page ========== */
.transaction-failed-page {
padding: 32px 16px 24px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.transaction-failed-main {
width: 100%;
max-width: 420px;
margin: 0 auto;
text-align: center;
}
.transaction-failed-hero-icon {
width: 120px;
height: 120px;
display: block;
margin: 0 auto 20px;
}
.transaction-failed-title {
margin: 0 0 8px;
color: #102a43;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
}
.transaction-failed-desc {
margin: 0 auto 20px;
color: #64748b;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
max-width: 240px;
}
.transaction-failed-issues {
background: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
padding: 16px;
text-align: left;
margin-bottom: 20px;
}
.transaction-failed-issues-title {
margin: 0 0 12px;
color: #102a43;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
}
.transaction-failed-issues-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.transaction-failed-issue-item {
display: flex;
align-items: flex-start;
gap: 10px;
color: #334155;
font-size: 14px;
line-height: 1.45;
}
.transaction-failed-issue-item img {
width: 20px;
height: 20px;
flex-shrink: 0;
display: block;
}
.transaction-failed-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.transaction-failed-btn {
display: inline-flex;
width: 100%;
min-height: 52px;
align-items: center;
justify-content: center;
border-radius: 9999px;
text-decoration: none;
font-size: 15px;
font-weight: 600;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.transaction-failed-btn--primary {
color: #ffffff;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
box-shadow: 0 2px 12px rgba(48, 42, 234, 0.35);
}
.transaction-failed-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(48, 42, 234, 0.45);
}
.transaction-failed-btn--primary:active {
transform: translateY(0) scale(0.98);
}
.transaction-failed-btn--secondary {
color: #334155;
background: #ffffff;
border: 1px solid #e2e8f0;
}
.transaction-failed-btn--secondary:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.transaction-failed-btn--secondary:active {
transform: scale(0.98);
}
.transaction-failed-support-link {
margin: auto auto 0;
color: #0c52b3;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
}
.transaction-failed-support-link:hover {
text-decoration: underline;
}
@media (min-width: 768px) {
.transaction-failed-page {
padding: 44px 24px 28px;
}
.transaction-failed-main {
max-width: 560px;
}
.transaction-failed-hero-icon {
width: 132px;
height: 132px;
margin-bottom: 24px;
}
.transaction-failed-title {
font-size: 30px;
margin-bottom: 10px;
}
.transaction-failed-desc {
font-size: 15px;
max-width: 320px;
margin-bottom: 24px;
}
.transaction-failed-issues {
padding: 18px;
margin-bottom: 24px;
}
.transaction-failed-actions {
gap: 14px;
margin-bottom: 24px;
}
.transaction-failed-btn {
min-height: 54px;
font-size: 16px;
}
}
@media (min-width: 1024px) {
.transaction-failed-page {
padding: 56px 24px 32px;
}
.transaction-failed-main {
max-width: 980px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 24px;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
padding: 48px;
text-align: left;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
grid-template-areas:
"icon issues"
"title issues"
"desc issues"
". actions";
column-gap: 56px;
row-gap: 12px;
align-items: start;
}
.transaction-failed-hero-icon {
grid-area: icon;
width: 144px;
height: 144px;
margin: 0;
}
.transaction-failed-title {
grid-area: title;
margin: 0;
font-size: 36px;
line-height: 1.2;
max-width: 14ch;
}
.transaction-failed-desc {
grid-area: desc;
margin: 0;
max-width: 38ch;
font-size: 16px;
line-height: 1.5;
}
.transaction-failed-issues {
grid-area: issues;
margin: 0;
border-radius: 16px;
padding: 22px 22px 20px;
}
.transaction-failed-issues-title {
font-size: 13px;
margin-bottom: 14px;
}
.transaction-failed-issues-list {
gap: 12px;
}
.transaction-failed-issue-item {
font-size: 15px;
line-height: 1.5;
}
.transaction-failed-actions {
grid-area: actions;
margin: 8px 0 0;
flex-direction: row;
gap: 14px;
flex-wrap: wrap;
}
.transaction-failed-btn {
width: auto;
min-width: 220px;
padding: 0 28px;
min-height: 56px;
font-size: 16px;
}
.transaction-failed-support-link {
width: min(980px, 100%);
margin: 18px auto 0;
display: block;
text-align: right;
font-size: 14px;
}
}
/* ========== Transaction Success Page ========== */
.transaction-success-page {
padding: 32px 16px 24px;
min-height: 100vh;
}
.transaction-success-main {
width: 100%;
max-width: 420px;
margin: 0 auto;
text-align: center;
}
.transaction-success-hero-icon {
width: 120px;
height: 120px;
display: block;
margin: 0 auto 20px;
}
.transaction-success-title {
margin: 0 0 8px;
color: #102a43;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
}
.transaction-success-desc {
margin: 0 auto 20px;
color: #64748b;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
max-width: 260px;
}
.transaction-success-summary {
background: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
padding: 16px;
text-align: left;
margin-bottom: 20px;
}
.transaction-success-summary-title {
margin: 0 0 12px;
color: #102a43;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
}
.transaction-success-summary-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.transaction-success-summary-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.transaction-success-summary-label {
color: #334155;
font-size: 14px;
line-height: 1.4;
font-weight: 500;
}
.transaction-success-summary-value {
color: #102a43;
font-size: 14px;
line-height: 1.4;
font-weight: 600;
text-align: right;
}
.transaction-success-order-id-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
}
.transaction-success-copy-btn {
border: 1px solid #e2e8f0;
background: #ffffff;
color: #334155;
border-radius: 9999px;
min-height: 28px;
padding: 0 10px;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.transaction-success-copy-btn:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.transaction-success-copy-btn.is-copied {
color: #0c52b3;
border-color: rgba(12, 82, 179, 0.35);
background: rgba(12, 82, 179, 0.06);
}
/* ========== Contact Page ========== */
.contact-page {
padding-bottom: 40px;
}
.contact-mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
.contact-mobile-header__logo {
height: 34px;
width: auto;
display: block;
filter: invert(1);
}
.contact-mobile-header__actions {
display: flex;
align-items: center;
gap: 10px;
}
.contact-mobile-header__actions a {
width: 36px;
height: 36px;
border-radius: 9999px;
background: #f8fafc;
border: 1px solid #e2e8f0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.contact-mobile-header__actions a img {
width: 18px;
height: 18px;
display: block;
}
.contact-main {
max-width: 480px;
margin: 0 auto;
padding: 24px 16px 0;
}
.contact-intro {
margin-bottom: 20px;
}
.contact-title {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
color: #102a43;
margin: 0 0 10px;
letter-spacing: -0.03em;
}
.contact-subtitle {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #64748b;
max-width: 31ch;
}
.contact-quick-grid {
display: flex;
gap: 12px;
margin-bottom: 24px;
}
.contact-quick-card {
flex: 1;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 14px;
min-width: 0;
}
.contact-quick-card__icon-wrap {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(19, 127, 236, 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.contact-quick-card__icon-wrap img {
width: 20px;
height: 20px;
display: block;
}
.contact-quick-card__title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 700;
color: #102a43;
}
.contact-quick-card__value {
font-size: 13px;
color: #334155;
text-decoration: none;
word-break: break-word;
}
.contact-form-section {
margin-bottom: 24px;
}
.contact-form-section__title {
margin: 0 0 14px;
font-size: 20px;
font-weight: 700;
color: #102a43;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.contact-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.contact-field__label {
font-size: 13px;
font-weight: 500;
color: #334155;
}
.contact-field input,
.contact-field textarea,
.contact-custom-select__trigger {
width: 100%;
max-width: 100%;
box-sizing: border-box;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #ffffff;
color: #0f172a;
font-size: 14px;
line-height: 1.4;
padding: 12px 14px;
transition:
border-color 0.24s ease,
box-shadow 0.24s ease;
}
.contact-field textarea {
resize: vertical;
min-height: 120px;
}
.contact-field input:focus,
.contact-field textarea:focus,
.contact-custom-select__trigger:focus {
outline: none;
border-color: #0c52b3;
box-shadow: 0 0 0 3px rgba(12, 82, 179, 0.14);
}
.contact-custom-select {
position: relative;
min-width: 0;
}
.contact-custom-select__trigger {
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
cursor: pointer;
}
.contact-custom-select__trigger img {
width: 16px;
height: 16px;
transition: transform 0.25s ease;
}
.contact-custom-select.is-open .contact-custom-select__trigger img {
transform: rotate(180deg);
}
.contact-custom-select__value {
color: #475569;
}
.contact-custom-select__menu {
list-style: none;
margin: 8px 0 0;
padding: 6px;
position: absolute;
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
z-index: 20;
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition:
opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact-custom-select.is-open .contact-custom-select__menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.contact-custom-select__menu li button {
width: 100%;
border: none;
border-radius: 8px;
background: transparent;
text-align: left;
padding: 10px 10px;
font-size: 14px;
color: #334155;
cursor: pointer;
transition:
background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-custom-select__menu li button:hover,
.contact-custom-select__menu li button.is-selected {
background: rgba(12, 82, 179, 0.08);
color: #0c52b3;
transform: translateX(2px);
}
.contact-submit-btn {
width: 100%;
border: none;
border-radius: 9999px;
min-height: 52px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
box-shadow: 0 2px 12px rgba(48, 42, 234, 0.35);
}
.contact-office-section {
margin-bottom: 16px;
}
.contact-map-wrap {
position: relative;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
margin-bottom: 16px;
}
.contact-map {
width: 100%;
height: 250px;
}
.contact-map .leaflet-pane,
.contact-map .leaflet-control-container {
z-index: 1;
}
.contact-map-overlay {
text-align: center;
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
border-radius: 12px;
padding: 12px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid #ffffff;
backdrop-filter: blur(4px);
z-index: 999999999;
}
.contact-map-overlay p {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.45;
color: #334155;
}
.contact-map-overlay a {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
padding: 9px 14px;
border-radius: 9999px;
background: #0c52b3;
color: #ffffff;
font-size: 13px;
font-weight: 600;
}
.contact-map-overlay a img {
width: 16px;
height: 16px;
display: block;
filter: brightness(0) invert(1);
}
.contact-office-meta {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 18px;
}
.contact-info-block h3 {
margin: 0 0 8px;
font-size: 14px;
font-weight: 700;
color: #102a43;
}
.contact-info-block__row {
display: flex;
align-items: flex-start;
gap: 8px;
}
.contact-info-block__row img {
width: 18px;
height: 18px;
margin-top: 2px;
flex-shrink: 0;
}
.contact-info-block__row p {
margin: 0;
color: #64748b;
font-size: 14px;
line-height: 1.45;
}
.contact-social-section h3 {
margin: 0 0 10px;
font-size: 14px;
font-weight: 700;
color: #94a3b8;
text-align: center;
}
.contact-social-links {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.contact-social-link {
width: 28px;
height: 28px;
text-decoration: none;
}
.contact-social-link .icon-stack {
width: 100%;
height: 100%;
display: block;
position: relative;
overflow: hidden;
}
.contact-social-link .icon-main,
.contact-social-link .icon-hover {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: contain;
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact-social-link .icon-main {
transform: translateY(0);
opacity: 1;
}
.contact-social-link .icon-hover {
transform: translateY(110%);
opacity: 0;
}
.contact-social-link:hover .icon-main {
transform: translateY(-110%);
opacity: 0;
}
.contact-social-link:hover .icon-hover {
transform: translateY(0);
opacity: 1;
}
@media (min-width: 768px) {
.contact-main {
max-width: 760px;
padding: 34px 24px 0;
}
.contact-intro {
margin-bottom: 26px;
}
.contact-title {
font-size: 44px;
margin-bottom: 12px;
}
.contact-subtitle {
max-width: 42ch;
font-size: 17px;
}
.contact-quick-grid {
gap: 14px;
margin-bottom: 30px;
}
.contact-quick-card {
padding: 18px;
border-radius: 14px;
}
.contact-quick-card__title {
font-size: 16px;
}
.contact-quick-card__value {
font-size: 14px;
}
.contact-form-section__title {
margin-bottom: 16px;
font-size: 24px;
}
.contact-form {
gap: 14px;
}
.contact-field input,
.contact-field textarea,
.contact-custom-select__trigger {
padding: 13px 15px;
font-size: 15px;
}
.contact-submit-btn {
min-height: 54px;
font-size: 16px;
}
.contact-map {
height: 300px;
}
.contact-map-overlay p {
font-size: 14px;
}
.contact-map-overlay a {
padding: 10px 16px;
font-size: 14px;
}
.contact-social-link {
width: 30px;
height: 30px;
}
}
@media (min-width: 1024px) {
.contact-page {
background:
radial-gradient(
900px 420px at 8% -8%,
rgba(12, 82, 179, 0.09) 0%,
rgba(12, 82, 179, 0) 60%
),
linear-gradient(180deg, #f7faff 0%, #eff5fc 100%);
padding-bottom: 56px;
}
.contact-mobile-header {
padding: 16px 28px;
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.contact-mobile-header__logo {
height: 40px;
}
.contact-mobile-header__actions a {
width: 38px;
height: 38px;
background: rgba(255, 255, 255, 0.9);
}
.contact-main {
max-width: 1240px;
padding: 48px 28px 0;
display: grid;
grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
grid-template-areas:
"intro office"
"quick office"
"form office";
column-gap: 34px;
row-gap: 24px;
align-items: start;
}
.contact-intro,
.contact-quick-grid,
.contact-form-section,
.contact-office-section {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 20px;
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05);
padding: 24px;
margin: 0;
}
.contact-intro {
grid-area: intro;
}
.contact-quick-grid {
grid-area: quick;
gap: 16px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-form-section {
grid-area: form;
padding-bottom: 28px;
}
.contact-office-section {
grid-area: office;
position: sticky;
top: 24px;
max-height: calc(100vh - 48px);
overflow: auto;
}
.contact-office-section::-webkit-scrollbar {
width: 8px;
}
.contact-office-section::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 9999px;
}
.contact-title {
font-size: 52px;
line-height: 1.05;
max-width: 11ch;
margin-bottom: 14px;
}
.contact-subtitle {
font-size: 18px;
max-width: 44ch;
}
.contact-quick-card {
padding: 20px;
transition:
opacity 0.7s ease,
border-color 0.7s ease;
}
.contact-quick-card__icon-wrap {
width: 40px;
height: 40px;
margin-bottom: 14px;
}
.contact-quick-card__title {
font-size: 17px;
margin-bottom: 6px;
}
.contact-quick-card__value {
font-size: 15px;
}
.contact-form-section__title {
font-size: 28px;
margin-bottom: 18px;
}
.contact-field__label {
font-size: 14px;
}
.contact-field input,
.contact-field textarea,
.contact-custom-select__trigger {
font-size: 15px;
border-radius: 14px;
padding: 14px 16px;
}
.contact-submit-btn {
min-height: 56px;
width: auto;
min-width: 210px;
padding: 0 30px;
align-self: flex-start;
transition: filter 0.7s ease;
}
.contact-submit-btn:hover {
filter: brightness(1.15);
}
.contact-map-wrap {
border-radius: 16px;
margin-bottom: 18px;
}
.contact-map {
height: 340px;
}
.contact-map-overlay {
left: 14px;
right: 14px;
bottom: 14px;
padding: 14px;
border-radius: 14px;
backdrop-filter: blur(7px);
}
.contact-map-overlay p {
font-size: 14px;
margin-bottom: 10px;
}
.contact-office-meta {
gap: 16px;
margin-bottom: 20px;
}
.contact-info-block h3,
.contact-social-section h3 {
font-size: 15px;
}
.contact-info-block__row p {
font-size: 14px;
line-height: 1.55;
}
.contact-social-links {
gap: 12px;
}
.contact-social-link {
width: 32px;
height: 32px;
}
}
/* ========== About Us Page ========== */
.about-main {
width: 100%;
max-width: 520px;
margin: 0 auto;
padding-bottom: 36px;
}
.about-hero {
width: 100%;
min-height: 420px;
background-image: url("../media/banners/Gradient+Image.png");
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.about-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.7) 100%
);
z-index: 1;
}
.about-hero__content {
position: relative;
z-index: 2;
padding: 22px 16px 22px;
color: #ffffff;
}
.about-hero__pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 0 12px;
border-radius: 9999px;
background: #0c52b3;
color: #ffffff;
font-size: 10px;
font-weight: 600;
margin-bottom: 12px;
}
.about-hero h1 {
margin: 0 0 10px;
font-size: 36px;
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.03em;
}
.about-hero p {
margin: 0;
max-width: 30ch;
font-size: 16px;
line-height: 1.5;
}
.about-story,
.about-values {
padding: 26px 16px 0;
}
.about-story__kicker-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.about-story__kicker-line {
width: 26px;
height: 2px;
background: #0c52b3;
}
.about-story__kicker {
font-size: 12px;
color: #0c52b3;
font-weight: 600;
}
.about-story h2 {
margin: 0 0 12px;
font-size: 28px;
line-height: 1.15;
color: #102a43;
}
.about-story p {
margin: 0 0 12px;
font-size: 15px;
line-height: 1.6;
color: #334155;
}
.about-story p:last-child {
margin-bottom: 0;
}
.about-values h2 {
margin: 0 0 16px;
text-align: center;
font-size: 24px;
font-weight: 700;
color: #102a43;
}
.about-values__grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.about-value-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 14px;
}
.about-value-card__icon-wrap {
width: 42px;
height: 42px;
border-radius: 16px;
background: rgba(19, 127, 236, 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.about-value-card__icon-wrap img {
width: 22px;
height: 22px;
display: block;
}
.about-value-card h3 {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
color: #102a43;
}
.about-value-card p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #64748b;
}
.reveal-up {
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.reveal-up.is-revealed {
opacity: 1;
transform: translateY(0);
}
.about-timeline {
padding: 26px 16px 0;
}
.about-timeline h2 {
margin: 0 0 14px;
font-size: 24px;
line-height: 1.2;
color: #102a43;
}
.about-timeline__items {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
}
.about-timeline__items::before {
content: "";
position: absolute;
left: 14px;
top: 10px;
bottom: 10px;
width: 2px;
background: linear-gradient(
180deg,
rgba(12, 82, 179, 0.15) 0%,
rgba(12, 82, 179, 0.5) 30%,
rgba(12, 82, 179, 0.2) 100%
);
}
.about-timeline__item {
position: relative;
padding: 14px 14px 14px 38px;
border-radius: 14px;
border: 1px solid #e2e8f0;
background: #ffffff;
}
.about-timeline__item::before {
content: "";
position: absolute;
left: 9px;
top: 20px;
width: 10px;
height: 10px;
border-radius: 9999px;
background: #0c52b3;
box-shadow: 0 0 0 4px rgba(12, 82, 179, 0.14);
}
.about-timeline__year {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: #0c52b3;
margin-bottom: 6px;
letter-spacing: 0.04em;
}
.about-timeline__item h3 {
margin: 0 0 6px;
font-size: 16px;
color: #102a43;
}
.about-timeline__item p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #64748b;
}
.about-stats {
margin-top: 26px;
background: #101922;
padding: 18px 12px;
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 10px;
}
.about-stat-item {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.about-stat-item__value {
display: block;
color: #ffffff;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 4px;
}
.about-stat-item__label {
display: block;
color: #64748b;
font-size: 10px;
font-weight: 500;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.about-stat-divider {
width: 1px;
background: #1e293b;
flex-shrink: 0;
}
.about-cta {
margin: 18px 16px 0;
border-radius: 18px;
border: 1px solid rgba(12, 82, 179, 0.2);
background: linear-gradient(
145deg,
rgba(12, 60, 234, 0.08) 0%,
rgba(12, 101, 234, 0.02) 55%,
#ffffff 100%
);
padding: 18px 16px;
}
.about-cta__eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: #0c52b3;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.about-cta h2 {
margin: 0 0 10px;
color: #102a43;
font-size: 24px;
line-height: 1.15;
}
.about-cta p {
margin: 0;
color: #475569;
font-size: 14px;
line-height: 1.6;
}
.about-cta__actions {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.about-cta__btn {
min-height: 48px;
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: filter 0.7s ease;
}
.about-cta__btn--primary {
color: #ffffff;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
box-shadow: 0 4px 14px rgba(48, 42, 234, 0.3);
}
.about-cta__btn--secondary {
color: #334155;
border: 1px solid #d7dfea;
background: #ffffff;
}
.transaction-success-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.transaction-success-btn {
display: inline-flex;
width: 100%;
min-height: 52px;
align-items: center;
justify-content: center;
border-radius: 9999px;
text-decoration: none;
font-size: 15px;
font-weight: 600;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.transaction-success-btn--primary {
color: #ffffff;
background: linear-gradient(90deg, #0c3cea 0%, #3c0cea 50%, #0c65ea 100%);
box-shadow: 0 2px 12px rgba(48, 42, 234, 0.35);
}
.transaction-success-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(48, 42, 234, 0.45);
}
.transaction-success-btn--primary:active {
transform: translateY(0) scale(0.98);
}
.transaction-success-btn--secondary {
color: #334155;
background: #ffffff;
border: 1px solid #e2e8f0;
}
.transaction-success-btn--secondary:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.transaction-success-btn--secondary:active {
transform: scale(0.98);
}
@media (min-width: 768px) {
.about-main {
max-width: 860px;
padding-bottom: 48px;
}
.about-hero {
min-height: 520px;
border-radius: 0 0 24px 24px;
}
.about-hero__content {
padding: 34px 30px 32px;
}
.about-hero h1 {
font-size: 52px;
margin-bottom: 14px;
}
.about-hero p {
max-width: 38ch;
font-size: 17px;
}
.about-story,
.about-values {
padding-left: 24px;
padding-right: 24px;
padding-top: 34px;
}
.about-story h2 {
font-size: 36px;
margin-bottom: 14px;
}
.about-story p {
font-size: 16px;
}
.about-values h2 {
font-size: 30px;
margin-bottom: 20px;
}
.about-timeline {
padding: 34px 24px 0;
}
.about-timeline h2 {
font-size: 30px;
margin-bottom: 18px;
}
.about-timeline__items {
gap: 14px;
}
.about-timeline__item {
padding: 16px 16px 16px 42px;
}
.about-timeline__year {
font-size: 12px;
}
.about-timeline__item h3 {
font-size: 18px;
}
.about-timeline__item p {
font-size: 15px;
}
.about-values__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.about-value-card {
padding: 18px;
min-height: 220px;
}
.about-value-card h3 {
font-size: 18px;
}
.about-stats {
margin-top: 36px;
padding: 24px;
border-radius: 20px;
max-width: calc(100% - 48px);
margin-left: auto;
margin-right: auto;
}
.about-stat-item__value {
font-size: 30px;
margin-bottom: 8px;
}
.about-stat-item__label {
font-size: 11px;
}
.about-cta {
margin: 24px 24px 0;
border-radius: 20px;
padding: 24px;
}
.about-cta h2 {
font-size: 30px;
max-width: 18ch;
}
.about-cta p {
font-size: 15px;
max-width: 52ch;
}
.about-cta__actions {
margin-top: 18px;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
}
.about-cta__btn {
min-width: 220px;
min-height: 52px;
padding: 0 20px;
font-size: 15px;
}
}
@media (min-width: 1024px) {
.about-page {
background:
radial-gradient(
1000px 520px at 10% -8%,
rgba(12, 82, 179, 0.1) 0%,
rgba(12, 82, 179, 0) 62%
),
linear-gradient(180deg, #f5f9ff 0%, #eef4fc 100%);
}
.about-main {
max-width: 1240px;
padding: 0 24px 64px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
grid-template-areas:
"hero hero"
"story values"
"timeline values"
"stats stats";
gap: 30px;
}
.about-hero {
grid-area: hero;
min-height: 620px;
border-radius: 0 0 30px 30px;
box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
}
.about-hero__content {
padding: 48px 48px 44px;
}
.about-hero__pill {
min-height: 28px;
padding: 0 14px;
font-size: 11px;
margin-bottom: 16px;
}
.about-hero h1 {
font-size: 68px;
line-height: 0.98;
max-width: 8ch;
margin-bottom: 18px;
text-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.about-hero p {
font-size: 19px;
max-width: 40ch;
line-height: 1.55;
}
.about-story,
.about-values {
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 24px;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
padding: 34px 30px;
}
.about-story {
grid-area: story;
}
.about-values {
grid-area: values;
}
.about-timeline {
grid-area: timeline;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 24px;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
padding: 34px 30px;
}
.about-timeline h2 {
font-size: 34px;
margin-bottom: 18px;
}
.about-timeline__items::before {
left: 16px;
}
.about-timeline__item {
border-radius: 16px;
padding: 18px 18px 18px 48px;
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease;
}
.about-timeline__item:hover {
transform: translateY(-2px);
border-color: rgba(12, 82, 179, 0.28);
box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}
.about-timeline__item::before {
left: 11px;
top: 24px;
}
.about-timeline__item h3 {
font-size: 19px;
margin-bottom: 7px;
}
.about-timeline__item p {
font-size: 15px;
}
.about-story__kicker-wrap {
gap: 10px;
margin-bottom: 12px;
}
.about-story__kicker-line {
width: 34px;
}
.about-story__kicker {
font-size: 13px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.about-story h2 {
font-size: 42px;
margin-bottom: 16px;
line-height: 1.05;
}
.about-story p {
font-size: 17px;
line-height: 1.7;
color: #475569;
margin-bottom: 14px;
}
.about-values h2 {
font-size: 34px;
margin-bottom: 22px;
}
.about-values__grid {
grid-template-columns: 1fr;
gap: 14px;
}
.about-value-card {
border-radius: 16px;
padding: 18px;
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease;
min-height: 0;
}
.about-value-card:hover {
transform: translateY(-3px);
border-color: rgba(12, 82, 179, 0.28);
box-shadow: 0 14px 24px rgba(15, 23, 42, 0.09);
}
.about-value-card__icon-wrap {
width: 46px;
height: 46px;
margin-bottom: 12px;
}
.about-value-card__icon-wrap img {
width: 24px;
height: 24px;
}
.about-value-card h3 {
font-size: 19px;
margin-bottom: 8px;
}
.about-value-card p {
font-size: 15px;
line-height: 1.6;
}
.about-stats {
grid-area: stats;
margin-top: 4px;
max-width: 100%;
border-radius: 22px;
padding: 28px 34px;
box-shadow: 0 20px 36px rgba(16, 25, 34, 0.35);
border: 1px solid #1e293b;
gap: 18px;
}
.about-cta {
grid-column: 1 / -1;
margin: 0;
border-radius: 24px;
padding: 34px 34px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}
.about-cta h2 {
font-size: 40px;
line-height: 1.08;
max-width: 17ch;
margin-bottom: 12px;
}
.about-cta p {
font-size: 16px;
max-width: 54ch;
}
.about-cta__actions {
margin-top: 0;
flex-direction: column;
align-items: stretch;
min-width: 280px;
gap: 12px;
}
.about-cta__btn {
min-width: 280px;
min-height: 54px;
font-size: 15px;
padding: 0 24px;
}
.about-cta__btn--primary:hover {
filter: brightness(1.15);
}
.about-cta__btn--secondary:hover {
background: #f8fafc;
}
.about-stat-divider {
width: 1px;
background: linear-gradient(
180deg,
rgba(30, 41, 59, 0) 0%,
#1e293b 25%,
#1e293b 75%,
rgba(30, 41, 59, 0) 100%
);
}
.about-stat-item__value {
font-size: 44px;
line-height: 1;
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.about-stat-item__label {
font-size: 12px;
letter-spacing: 0.08em;
}
}
/* ========== Single Blog Page ========== */
/* GLOBAL SCROLLING BEHAVIOR */
html {
scroll-behavior: smooth;
}
/* READING PROGRESS BAR */
.reading-progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: transparent;
z-index: 9999;
}
.reading-progress-bar {
height: 100%;
background: #0c52b3;
width: 0%;
border-radius: 0 2px 2px 0;
transition: width 0.1s ease-out;
}
/* BASE (MOBILE FIRST) */
.single-blog-main {
padding: 24px 20px;
max-width: 800px;
margin: 0 auto;
font-family: "Roboto", sans-serif;
display: flex;
flex-direction: column;
}
.blog-meta-date {
color: #0c52b3;
font-size: 10px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.blog-main-title {
color: #111827;
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 1.3;
margin-bottom: 30px;
}
.blog-author-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 12px;
margin-bottom: 30px;
}
.blog-author-avatar {
width: 48px;
height: 48px;
border-radius: 100%;
object-fit: cover;
background-color: #e5e7eb;
}
.blog-author-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.blog-author-name {
color: #111827;
font-size: 14px;
font-weight: bold;
}
.blog-author-role {
color: #6b7280;
font-size: 16px;
font-weight: normal;
}
.blog-main-thumb {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px;
object-fit: cover;
background-color: #f3f4f6;
margin-bottom: 32px;
}
.blog-toc {
background: #ffffff;
border: 1px solid #e5e7eb;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
padding: 28px 24px;
border-radius: 12px;
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
.blog-toc::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #0c52b3 0%, #3b82f6 100%);
}
.blog-toc h3 {
margin-top: 0;
margin-bottom: 24px;
font-size: 16px;
font-weight: 700;
color: #111827;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 10px;
}
.blog-toc ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.blog-toc li {
margin-bottom: 12px;
}
.blog-toc li:last-child {
margin-bottom: 0;
}
.blog-toc a {
color: #4b5563;
text-decoration: none;
font-size: 15px;
font-weight: 500;
display: block;
padding: 6px 12px;
border-left: 2px solid transparent;
border-radius: 0 6px 6px 0;
transition: all 0.3s ease;
background: transparent;
}
.blog-toc a:hover,
.blog-toc a.active {
color: #0c52b3;
border-left-color: #0c52b3;
background: #f8fafc;
transform: translateX(4px);
}
.blog-content {
color: #4b5563;
font-size: 16px;
line-height: 1.7;
margin-bottom: 48px;
}
.blog-content h2 {
color: #111827;
font-size: 24px;
font-weight: bold;
margin-top: 32px;
margin-bottom: 16px;
scroll-margin-top: 100px;
}
.blog-content p {
margin-bottom: 20px;
}
.blog-share-section {
text-align: center;
margin-top: 60px;
margin-bottom: 40px;
}
.blog-share-title {
font-size: 18px;
font-weight: bold;
color: #111827;
margin-bottom: 24px;
}
.blog-share-icons {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.share-icon-btn {
position: relative;
width: 44px;
height: 44px;
border-radius: 100%;
border: 1px solid #94a3b8;
display: inline-block;
overflow: hidden;
cursor: pointer;
background: #ffffff;
text-decoration: none;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.share-icon-btn:hover {
border-color: #3b82f6;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.share-icon-inner {
display: flex;
flex-direction: column;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.share-icon-inner img {
display: block;
width: 20px;
height: 20px;
margin: 11px auto;
object-fit: contain;
}
.share-icon-btn:hover .share-icon-inner {
transform: translateY(-42px);
}
/* DESKTOP OPTIMIZATIONS (UX LAWS) */
@media (min-width: 1024px) {
.single-blog-main {
max-width: 1200px;
padding: 64px 40px;
display: grid;
grid-template-columns: 1fr 340px;
grid-template-rows: auto auto auto auto 1fr auto;
grid-template-areas:
"meta right-empty"
"title right-empty"
"author right-empty"
"thumb toc"
"content toc"
"share toc";
column-gap: 80px;
}
.blog-meta-date {
grid-area: meta;
text-align: left;
font-size: 12px;
margin-bottom: 24px;
}
.blog-main-title {
grid-area: title;
font-size: 46px;
text-align: left;
line-height: 1.25;
margin-bottom: 32px;
br {
display: none;
}
}
.blog-author-row {
grid-area: author;
margin-bottom: 48px;
justify-content: flex-start;
gap: 16px;
}
.blog-author-avatar {
width: 56px;
height: 56px;
}
.blog-author-name {
font-size: 16px;
}
.blog-author-role {
font-size: 14px;
}
.blog-main-thumb {
grid-area: thumb;
aspect-ratio: 16 / 9;
margin-bottom: 48px;
}
.blog-content {
grid-area: content;
font-size: 18px;
line-height: 1.8;
max-width: 720px;
}
.blog-content h2 {
font-size: 28px;
margin-top: 48px;
margin-bottom: 24px;
}
.blog-toc {
grid-area: toc;
position: sticky;
top: 100px;
align-self: start;
margin-bottom: 0;
padding: 0;
padding-left: 32px;
box-shadow: none;
border: none;
border-radius: 0;
background: transparent;
border-left: 1px solid #e2e8f0;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
/* custom scrollbar for toc */
.blog-toc::-webkit-scrollbar {
width: 4px;
}
.blog-toc::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.blog-toc::before {
display: none;
}
.blog-toc h3 {
font-size: 14px;
color: #64748b;
}
.blog-toc a {
padding: 4px 12px;
}
.blog-toc li {
margin-bottom: 16px;
}
.blog-share-section {
grid-area: share;
text-align: center;
margin-top: 32px;
padding-top: 40px;
border-top: 1px solid #e5e7eb;
max-width: 720px;
}
.blog-share-title {
font-size: 16px;
text-transform: uppercase;
color: #64748b;
margin-bottom: 20px;
text-align: center;
}
.blog-share-icons {
justify-content: center;
gap: 20px;
}
}
/* Related Products Progress Bar */
.related-products-progress.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.05);
}
.related-products-progress .swiper-pagination-progressbar-fill {
background: #0c52b3;
}
.related-products-swiper .swiper-slide {
width: 75%;
box-sizing: border-box;
height: auto;
}
.related-products-swiper .swiper-wrapper {
align-items: stretch;
}
@media (min-width: 640px) {
.related-products-swiper .swiper-slide {
width: 50%;
}
}
@media (min-width: 768px) {
.related-products-swiper .swiper-slide {
width: 33.333%;
}
}
@media (min-width: 1024px) {
.related-products-swiper .swiper-slide {
width: 25%;
}
}
.related-products-swiper .swiper-slide > .product-box {
min-height: 340px;
}
/* --- LEGAL & POLICY DOCUMENT STYLES --- */
/*
PREMIUM EDITORIAL (THE DOSSIER)
Legal & Policy Document Styles
*/
:root {
--brand-primary: #0c52b3;
--brand-dark: #0f172a;
--brand-accent: #38bdf8;
--bg-surface: #ffffff;
--bg-muted: #f8fafc;
--text-main: #1e293b;
--text-muted: #64748b;
--mono-font: "Roboto Mono", monospace;
--legal-border: #e2e8f0;
}
/* Background Pattern */
body.legal-page {
background-color: var(--bg-surface);
background-image:
radial-gradient(
circle at 20% 10%,
rgba(12, 82, 179, 0.03) 0%,
transparent 40%
),
radial-gradient(
circle at 80% 90%,
rgba(12, 82, 179, 0.03) 0%,
transparent 40%
);
background-attachment: fixed;
}
/* Editorial Container */
.editorial-container {
max-width: 1300px;
margin: 80px auto;
padding: 0 40px;
}
@media (max-width: 1024px) {
.editorial-container {
margin: 40px auto;
padding: 0 24px;
}
}
/* Header Sections */
.dossier-header {
margin-bottom: 60px;
}
@media (min-width: 1024px) {
.dossier-header {
margin-bottom: 100px;
}
}
.dossier-tag {
font-family: var(--mono-font);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--brand-primary);
display: block;
margin-bottom: 12px;
}
.dossier-title {
font-size: clamp(32px, 8vw, 72px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.04em;
color: var(--brand-dark);
max-width: 900px;
}
.dossier-meta {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--legal-border);
display: flex;
flex-wrap: wrap;
gap: 24px;
font-family: var(--mono-font);
font-size: 13px;
color: var(--text-muted);
}
@media (min-width: 768px) {
.dossier-meta {
gap: 40px;
font-size: 14px;
}
}
/* Asymmetric Editorial Grid */
.journal-entry {
text-decoration: none !important;
color: inherit !important;
display: block;
}
.editorial-grid {
display: flex;
flex-direction: column;
}
/* Section Wrapper */
.editorial-section {
margin-bottom: 80px;
position: relative;
scroll-margin-top: 100px;
}
@media (min-width: 1024px) {
.editorial-section {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 40px;
margin-bottom: 120px;
}
}
/* Watermark Number */
.section-number {
position: absolute;
top: -20px;
left: -10px;
font-size: 80px;
font-weight: 950;
color: rgba(12, 82, 179, 0.04);
z-index: -1;
line-height: 1;
pointer-events: none;
font-family: var(--mono-font);
}
@media (min-width: 1024px) {
.section-number {
top: -40px;
left: -20px;
font-size: 160px;
}
}
/* Section Heading (The Split) */
.section-heading {
margin-bottom: 24px;
}
@media (min-width: 1024px) {
.section-heading {
grid-column: span 4;
margin-bottom: 0;
}
.section-heading h2 {
position: sticky;
top: 140px;
}
}
.section-heading h2 {
font-size: 24px;
font-weight: 800;
color: var(--brand-dark);
}
@media (min-width: 1024px) {
.section-heading h2 {
font-size: 28px;
}
}
/* Section Content */
.section-body {
max-width: 100%;
}
@media (min-width: 1024px) {
.section-body {
grid-column: 6 / span 7;
}
}
.section-body p {
font-size: 16px;
line-height: 1.6;
color: var(--text-main);
margin-bottom: 20px;
}
@media (min-width: 768px) {
.section-body p {
font-size: 18px;
line-height: 1.7;
margin-bottom: 24px;
}
}
.section-body ul,
.section-body ol {
margin-bottom: 32px;
padding-left: 20px;
list-style-type: square;
}
.section-body li {
font-size: 16px;
line-height: 1.6;
margin-bottom: 12px;
color: var(--brand-dark);
}
@media (min-width: 768px) {
.section-body li {
font-size: 17px;
}
}
/* HUD Navigation (Table of Contents) */
.hud-nav {
position: fixed;
right: 40px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
display: none; /* Desktop only */
}
@media (min-width: 1200px) {
.hud-nav {
display: flex;
flex-direction: column;
gap: 12px;
}
}
@media (max-width: 1350px) {
/* Optional: further hide or adjust at medium screens */
}
.hud-item {
width: 8px;
height: 8px;
background: var(--legal-border);
border-radius: 50%;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.hud-item:hover,
.hud-item.is-active {
background: var(--brand-primary);
transform: scale(1.5);
}
.hud-item::before {
content: attr(data-label);
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
font-family: var(--mono-font);
font-size: 12px;
color: var(--brand-primary);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.hud-item:hover::before,
.hud-item.is-active::before {
opacity: 1;
}
/* Callouts / Key Takeaways */
.editorial-callout {
background: var(--brand-dark);
color: #ffffff;
padding: 24px;
border-radius: 4px;
margin-bottom: 32px;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.editorial-callout {
padding: 32px;
margin-bottom: 40px;
}
}
.editorial-callout::after {
content: "";
position: absolute;
right: -20px;
top: -20px;
width: 100px;
height: 100px;
background: var(--brand-primary);
border-radius: 50%;
opacity: 0.2;
filter: blur(20px);
}
.editorial-callout h3 {
font-family: var(--mono-font);
font-size: 13px;
text-transform: uppercase;
color: var(--brand-accent);
margin-bottom: 12px;
}
.editorial-callout p {
font-size: 15px;
margin-bottom: 0;
color: rgba(255, 255, 255, 0.82);
}
/* Data Tables (Editorial Style) */
.editorial-table-wrap {
overflow-x: auto;
margin: 32px 0;
border: 1px solid var(--legal-border);
}
.editorial-table {
width: 100%;
min-width: 600px; /* Force scroll on small screens for data integrity */
border-collapse: collapse;
font-family: var(--mono-font);
font-size: 13px;
}
@media (min-width: 768px) {
.editorial-table {
font-size: 14px;
}
}
.editorial-table th {
text-align: left;
padding: 16px;
background: var(--bg-muted);
color: var(--brand-dark);
border-bottom: 2px solid var(--brand-dark);
}
.editorial-table td {
padding: 16px;
border-bottom: 1px solid var(--legal-border);
color: var(--text-main);
}
/* Breadcrumbs (Editorial) */
.editorial-breadcrumbs {
font-family: var(--mono-font);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 32px;
color: var(--text-muted);
white-space: nowrap;
overflow-x: auto;
}
@media (min-width: 768px) {
.editorial-breadcrumbs {
font-size: 12px;
margin-bottom: 48px;
}
}
/* --- PROJECTS ARCHIVE STYLES --- */
/* Projects Archive Page Styles */
.projects-archive-main {
max-width: 1400px;
margin: 0 auto;
padding: 26px 16px 60px;
}
.projects-header {
margin-bottom: 32px;
}
.projects-title {
font-size: 36px;
font-weight: 700;
color: #0f172a;
margin-bottom: 8px;
line-height: 1.1;
}
.projects-subtitle {
font-size: 16px;
color: #64748b;
line-height: 1.5;
max-width: 300px;
}
/* Recent Installations Scroller */
.recent-installations-section {
margin: 40px 0;
}
.section-label {
font-size: 14px;
font-weight: 700;
color: #64748b;
margin-bottom: 16px;
display: block;
}
.recent-scroll-wrapper {
margin: 0 -16px;
padding: 0 16px;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
display: flex;
gap: 16px;
}
.recent-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.recent-project-card {
min-width: 280px;
width: 280px;
height: 380px;
border-radius: 20px;
position: relative;
overflow: hidden;
flex-shrink: 0;
display: block;
}
.recent-project-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(15, 23, 42, 0.9) 0%,
rgba(15, 23, 42, 0.4) 40%,
transparent 70%
);
padding: 24px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.project-location {
font-size: 12px;
color: #93c5fd;
margin-bottom: 4px;
}
.project-name-overlay {
font-size: 18px;
color: #ffffff;
font-weight: 500;
}
/* Project Journal Styling */
.project-journal-section {
margin-top: 48px;
}
.journal-header {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}
.journal-title {
font-size: 14px;
color: #64748b;
font-weight: 400;
}
.journal-divider {
height: 1px;
background-color: #e2e8f0;
width: 100%;
}
.journal-list {
display: flex;
flex-direction: column;
gap: 32px;
}
.journal-entry-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.entry-date {
font-size: 12px;
font-weight: 700;
color: #137fec;
}
.entry-dot {
width: 4px;
height: 4px;
background-color: #64748b;
border-radius: 50%;
}
.entry-title {
font-size: 12px;
color: #64748b;
}
.journal-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
overflow: hidden;
display: flex;
flex-direction: column;
}
.journal-card-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.journal-card-content {
padding: 20px;
}
.pill-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.tag-pill {
background: rgba(19, 127, 236, 0.1);
color: #137fec;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
.journal-desc {
font-size: 14px;
line-height: 1.6;
color: #64748b;
}
/* Reuse existing filter styles */
.projects-archive-filters-wrap {
margin: 32px -16px 24px;
overflow-x: auto;
scrollbar-width: none;
}
.projects-archive-filters-wrap::-webkit-scrollbar {
display: none;
}
/* Ensure filter UI works exactly as blog archive */
.projects-archive-filters {
display: inline-flex;
padding: 4px 16px;
gap: 8px;
}
/* Desktop Styles */
@media (min-width: 1024px) {
.recent-project-card {
width: calc(33.33% - 11px);
min-width: auto;
height: 450px;
}
.recent-scroll-wrapper {
overflow-x: visible;
flex-wrap: wrap;
gap: 16px;
}
.journal-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
/* --- CHECKOUT PAGE STYLES --- */
:root {
--primary-color: #0c52b3;
--secondary-color: #137fec;
--text-muted: #64748b;
--text-dark: #0f172a;
--bg-page: #f8fafc;
--card-bg: #ffffff;
--border-radius-lg: 12px;
--border-radius-md: 8px;
--primary-gradient: linear-gradient(
90deg,
#0c3cea 0%,
#3c0cea 50%,
#0c65ea 100%
);
}
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
background-color: var(--bg-page);
color: var(--text-dark);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
/* Header */
.checkout-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 100;
}
.checkout-header h1 {
font-size: 18px;
font-weight: 600;
margin: 0;
color: var(--text-dark);
}
.icon-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-btn img {
width: 24px;
height: 24px;
}
/* Main Layout */
.checkout-main {
max-width: 1400px;
margin: 0 auto;
}
.checkout-layout {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.checkout-layout {
flex-direction: row;
gap: 24px;
padding: 24px 20px;
}
.checkout-left {
flex: 1;
max-width: calc(100% - 400px);
}
.checkout-right {
width: 376px;
flex-shrink: 0;
position: sticky;
top: 100px;
align-self: flex-start;
}
}
/* Sections */
.checkout-section {
padding: 24px 20px;
}
@media (min-width: 1024px) {
.checkout-section {
padding: 24px 0;
}
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.section-title {
font-size: 14px;
color: var(--text-muted);
margin: 0;
}
.section-title.bold {
font-weight: 700;
}
.manage-link {
font-size: 14px;
font-weight: 500;
color: var(--primary-color);
text-decoration: none;
}
.manage-link:hover {
text-decoration: underline;
}
/* Address Cards */
.address-container {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 12px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.address-container::-webkit-scrollbar {
display: none;
}
@media (min-width: 1024px) {
.address-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
overflow-x: visible;
gap: 16px;
padding-bottom: 0;
}
}
.address-box {
flex: 0 0 280px;
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
border: 1.5px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
scroll-snap-align: start;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
@media (min-width: 1024px) {
.address-box {
flex: none;
}
}
.address-box.picked {
border-left: 4px solid var(--primary-color);
border-right: 4px solid var(--primary-color);
}
.address-box-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.address-icon-wrap {
width: 36px;
height: 36px;
background: rgba(19, 127, 236, 0.1);
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
justify-content: center;
}
.address-icon-wrap img {
width: 20px;
height: 20px;
}
.picked-indicator {
width: 20px;
height: 20px;
}
.address-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.address-name {
font-size: 15px;
font-weight: 600;
}
.address-text {
font-size: 14px;
color: var(--text-muted);
line-height: 1.4;
}
.address-number {
font-size: 14px;
color: var(--text-dark);
font-weight: 500;
}
/* Shipping Methods */
.shipping-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.shipping-box {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: 16px;
display: flex;
align-items: center;
gap: 16px;
border: 2px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
}
.shipping-box.picked {
border-color: rgba(19, 127, 236, 0.2);
background: #fdfdff;
}
.shipping-icon-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.shipping-box.picked .shipping-icon-wrap {
background: rgba(19, 127, 236, 0.1);
}
.shipping-box:not(.picked) .shipping-icon-wrap {
background: #f1f5f9;
}
.shipping-info {
flex: 1;
}
.shipping-name {
font-size: 14px;
font-weight: 700;
display: block;
}
.shipping-time {
font-size: 12px;
color: var(--text-muted);
}
.shipping-price {
font-size: 14px;
font-weight: 700;
color: var(--text-dark);
}
/* Payment Methods */
.payment-list {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.payment-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
cursor: pointer;
transition: background 0.2s ease;
}
.payment-item:last-child {
border-bottom: none;
}
.payment-item.active {
background: #f8fbff;
}
.payment-left {
display: flex;
align-items: center;
gap: 12px;
}
/* Custom Radio */
.radio-modern {
width: 20px;
height: 20px;
border: 2px solid #e2e8f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
}
.payment-item.active .radio-modern {
border-color: var(--primary-color);
}
.radio-modern::after {
content: "";
width: 10px;
height: 10px;
background: var(--primary-color);
border-radius: 50%;
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.payment-item.active .radio-modern::after {
transform: scale(1);
}
.payment-label {
font-size: 15px;
font-weight: 500;
}
/* Sticky Summary Sidebar */
.summary-card {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: 24px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.03);
}
.summary-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 20px;
color: var(--text-dark);
}
.summary-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
font-size: 14px;
color: var(--text-muted);
}
.summary-item.savings {
color: #10b981;
font-weight: 500;
}
.summary-divider {
height: 1px;
background: rgba(0, 0, 0, 0.05);
margin: 16px 0;
}
.total-wrap {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 24px;
}
.total-label {
font-size: 12px;
color: var(--text-muted);
}
.total-price {
font-size: 28px;
font-weight: 700;
color: var(--text-dark);
}
.place-order-btn {
width: 100%;
background: var(--primary-gradient);
color: #fff;
border: none;
border-radius: 99px;
padding: 16px 24px;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(12, 60, 234, 0.15);
transition: all 0.3s ease;
}
.place-order-btn:hover {
box-shadow: 0 12px 24px rgba(12, 60, 234, 0.25);
}
.place-order-btn img {
width: 20px;
height: 20px;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.place-order-btn:hover img {
transform: translateX(6px);
}
.summary-notice {
font-size: 12px;
color: var(--text-muted);
text-align: center;
margin-top: 16px;
line-height: 1.4;
}
/* Mobile Bottom Area (when not sticky) */
@media (max-width: 1023px) {
.checkout-right {
margin-top: 24px;
padding: 24px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.summary-card {
box-shadow: none;
border: none;
padding: 24px 20px;
}
}
.product-box__loginprompt {
padding: 12px;
background-color: #e3e9fe;
border-radius: 8px;
border: 1px solid #4749fd;
}
.product-box__price--current a {
color: #4749fd;
}
.product-signup_prompt {
font-size: 12px;
color: #666;
}
/* refund page start */
.refund-wrapper {
max-width: 1320px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
/* header section */
.refund-header-block {
margin-bottom: 2.5rem;
border-left: 4px solid #0c52b3;
padding-left: 1.25rem;
}
.refund-header-block h1 {
font-size: 1.9rem;
font-weight: 700;
color: #0f2b3d;
letter-spacing: -0.3px;
margin-bottom: 0.5rem;
}
.refund-header-block p {
font-size: 1rem;
color: #5b6e8c;
max-width: 60ch;
}
.refund-header-meta {
display: flex;
gap: 0.75rem;
margin-top: 0.9rem;
flex-wrap: wrap;
}
.refund-pill {
background: #eef3fc;
padding: 0.25rem 0.9rem;
border-radius: 40px;
font-size: 0.75rem;
font-weight: 500;
color: #0c52b3;
letter-spacing: 0.2px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.pill-icon {
width: 14px;
height: 14px;
stroke: #0c52b3;
stroke-width: 1.75;
fill: none;
}
/* 2-col layout */
.refund-layout {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.refund-layout {
flex-direction: row;
align-items: flex-start;
gap: 2.5rem;
}
.refund-form-holder {
flex: 1.4;
}
.refund-sidebar {
flex: 0.9;
position: sticky;
top: 2rem;
}
}
/* main form card */
.refund-card {
background: #ffffff;
border-radius: 24px;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.03),
0 1px 2px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.2s;
border: 1px solid #e2edf7;
}
.refund-card:hover {
box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.08);
}
.refund-form {
padding: 1.75rem;
}
@media (min-width: 768px) {
.refund-form {
padding: 2rem 2rem 2.2rem;
}
}
/* form fields */
.field-group {
margin-bottom: 1.5rem;
}
.field-label {
font-size: 0.85rem;
font-weight: 600;
color: #2c3f5c;
margin-bottom: 0.45rem;
display: block;
}
.field-label .optional-mark {
font-weight: 400;
color: #8796af;
font-size: 0.7rem;
}
.field-required {
color: #cf3e3e;
font-size: 0.8rem;
margin-left: 2px;
}
.input-base,
.refund-select,
.refund-textarea {
width: 100%;
padding: 0.85rem 1rem;
font-family: "Roboto", sans-serif;
font-size: 0.95rem;
background: #ffffff;
border: 1px solid #dce5f0;
border-radius: 16px;
transition: all 0.2s;
outline: none;
color: #1f384e;
}
.input-base:focus,
.refund-select:focus,
.refund-textarea:focus {
border-color: #0c52b3;
box-shadow: 0 0 0 3px rgba(12, 82, 179, 0.12);
}
.input-base:hover,
.refund-select:hover,
.refund-textarea:hover {
border-color: #b9cef0;
}
.refund-textarea {
resize: vertical;
min-height: 110px;
}
/* two-column row inside form */
.form-row-2 {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.form-row-2 {
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
}
/* dynamic product section */
.product-section-title {
font-weight: 700;
font-size: 1rem;
color: #1e3a5f;
margin: 0 0 1rem 0;
display: flex;
align-items: center;
gap: 0.6rem;
}
.product-card-item {
background: #fbfdff;
border: 1px solid #eaf1fa;
border-radius: 20px;
padding: 1.2rem;
margin-bottom: 1rem;
transition: all 0.2s;
}
.product-grid {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
@media (min-width: 640px) {
.product-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: 1rem;
align-items: end;
}
}
.product-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.product-field label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
color: #6f8fae;
letter-spacing: 0.3px;
}
.remove-product-btn {
background: transparent;
border: none;
color: #9b7b7b;
font-size: 0.75rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 0.5rem 0.75rem;
border-radius: 40px;
transition: all 0.2s;
margin-top: 0.5rem;
}
.remove-product-btn:hover {
background: #fef2f2;
color: #c2412c;
}
.add-product-link {
background: transparent;
border: 1px solid #d4e2f2;
border-radius: 40px;
padding: 0.6rem 1.2rem;
font-size: 0.85rem;
font-weight: 500;
color: #2f5d8c;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: 0.2s;
margin-top: 0.25rem;
}
.add-product-link:hover {
background: #eef5fc;
border-color: #0c52b3;
color: #0c52b3;
}
.plus-icon-sm {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 1.75;
fill: none;
}
/* file upload area */
.upload-box {
border: 1px dashed #cbddea;
border-radius: 20px;
background: #fafcff;
padding: 1rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.upload-box:hover {
background: #f2f8ff;
border-color: #8eb4d9;
}
.upload-icon-svg {
width: 32px;
height: 32px;
stroke: #5e7e9e;
stroke-width: 1.5;
fill: none;
margin: 0 auto 0.25rem;
}
.upload-text {
font-size: 0.8rem;
color: #5b6e8c;
}
.file-list {
margin-top: 0.75rem;
font-size: 0.75rem;
color: #3c5a7d;
}
.hidden-file-input {
display: none;
}
/* submit button */
.submit-refund-btn {
width: 100%;
background: #0c52b3;
background: linear-gradient(95deg, #0f5bc7 0%, #0a408f 100%);
color: white;
border: none;
border-radius: 60px;
padding: 1rem 1.5rem;
font-size: 1rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
cursor: pointer;
transition: filter 0.7s ease;
margin-top: 0.5rem;
box-shadow: 0 4px 12px rgba(12, 82, 179, 0.25);
}
.submit-refund-btn:hover {
filter: brightness(1.15);
background: linear-gradient(95deg, #1765d1 0%, #0e479b 100%);
}
.submit-refund-btn:active {
transform: translateY(0);
}
.arrow-icon {
width: 18px;
height: 18px;
stroke: white;
stroke-width: 2;
fill: none;
}
/* sidebar cards */
.info-card {
background: #ffffff;
border-radius: 24px;
border: 1px solid #e5eff8;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.info-card h3 {
font-size: 1rem;
font-weight: 700;
color: #1f3b5c;
margin-bottom: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-icon {
width: 20px;
height: 20px;
stroke: #0c52b3;
stroke-width: 1.75;
fill: none;
}
.info-card p {
font-size: 0.85rem;
color: #48627e;
line-height: 1.45;
margin-bottom: 0.9rem;
}
.info-badge-light {
background: #eef3fc;
color: #0c52b3;
border-radius: 30px;
padding: 0.2rem 0.9rem;
font-size: 0.7rem;
font-weight: 500;
display: inline-block;
}
.info-list {
list-style: none;
margin-top: 0.6rem;
}
.info-list li {
font-size: 0.85rem;
margin-bottom: 0.6rem;
display: flex;
align-items: baseline;
gap: 0.6rem;
color: #4d6a8a;
}
.info-list li::before {
content: "–";
color: #0c52b3;
font-weight: 500;
}
hr {
margin: 1rem 0;
border: 0;
height: 1px;
background: #e9f0f6;
}
.static-note {
font-size: 0.7rem;
text-align: center;
margin-top: 1rem;
color: #7e95b0;
}
.inline-icon-text {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* refund page end */
/* special items page start */
.special-request-wrapper {
margin: 16px 0 12px;
}
.special-request-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border: 1px solid #475569;
border-radius: 9999px;
padding: 16px 24px;
font-size: 1rem;
font-weight: 700;
color: #ffffff;
cursor: pointer;
transition: filter 0.7s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.special-request-btn svg {
stroke: #facc15;
}
.special-request-btn:hover {
filter: brightness(1.15);
background: linear-gradient(135deg, #2c3e50 0%, #1e293b 100%);
border-color: #facc15;
}
.special-note {
font-size: 0.7rem;
text-align: center;
margin-top: 12px;
color: #64748b;
}
/* Remove price & cart elements that could appear from generic classes */
.product-flashsale-box {
margin-top: 0;
}
@media (min-width: 1024px) {
.special-request-btn {
padding: 18px 28px;
font-size: 1.05rem;
}
}
/* special items page end */
/* ============================================
PRODUCT VARIATIONS STYLES (Radio Button Version)
Same visual design as original buttons
============================================ */
.product-variations-wrap {
background: linear-gradient(
90deg,
#ffffff 0%,
rgba(255, 255, 255, 0.26) 100%
);
border-radius: 8px;
padding: 14px 16px;
margin-top: 16px;
}
.product-var-block {
margin-bottom: 14px;
}
.product-var-block:last-child {
margin-bottom: 0;
}
.product-var-label {
font-size: 13px;
font-weight: 500;
color: #1e293b;
margin: 0 0 8px;
}
.product-var-picked {
font-weight: 600;
color: #137fec;
}
/* Color Swatch Radio Group */
.product-var-colors {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* Hide the actual radio input */
.product-color-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Swatch label styling (mirrors original .product-color-swatch) */
.product-color-swatch-label {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
position: relative;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
flex-shrink: 0;
}
.product-color-swatch-label:hover {
box-shadow: 0 0 0 2px rgba(19, 127, 236, 0.3);
}
/* Active state (radio checked) */
.product-color-radio:checked + .product-color-swatch-label {
border-color: transparent;
box-shadow: 0 0 0 2px #137fec;
}
/* Checkmark inside swatch - appears when checked */
.product-color-check {
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.5);
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.product-color-radio:checked
+ .product-color-swatch-label
.product-color-check {
opacity: 1;
transform: scale(1);
}
.product-color-check svg {
width: 14px;
height: 14px;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6))
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
/* For white/gray swatches, use darker stroke */
.product-color-swatch-label[data-color="White"] .product-color-check svg,
.product-color-swatch-label[data-color="Gray"] .product-color-check svg {
stroke: #1e293b;
filter: none;
}
/* Disabled state for color swatches */
.product-color-radio:disabled + .product-color-swatch-label {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(0.2);
}
.product-color-radio:disabled + .product-color-swatch-label:hover {
box-shadow: none;
}
/* Storage Options Radio Group */
.product-var-options {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Hide the actual radio input */
.product-storage-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Storage label styling (mirrors original .product-var-option) */
.product-storage-option-label {
display: inline-block;
font-size: 13px;
font-weight: 500;
color: #334155;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 8px 14px;
cursor: pointer;
font-family: inherit;
transition:
background 0.2s,
border-color 0.2s,
color 0.2s;
}
.product-storage-option-label:hover {
border-color: #94a3b8;
}
/* Active state (radio checked) */
.product-storage-radio:checked + .product-storage-option-label {
background: rgba(19, 127, 236, 0.05);
border: 1px solid #137fec;
color: #0c52b3;
}
/* Disabled state for storage options */
.product-storage-radio:disabled + .product-storage-option-label {
opacity: 0.5;
cursor: not-allowed;
background: #f8fafc;
color: #94a3b8;
border-color: #e2e8f0;
pointer-events: none;
}
/* Selected values display */
.selected-values {
background: #eff6ff;
border-radius: 8px;
padding: 10px 14px;
margin-top: 12px;
font-size: 13px;
color: #1e293b;
}
.selected-values span {
font-weight: 600;
color: #0c52b3;
}
/* ==========================================================================
Empty States
========================================================================== */
.checkout-empty-state {
background: #ffffff;
border: 1px dashed #cbd5e1;
border-radius: 16px;
padding: 40px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 16px;
}
.empty-state-icon-wrap {
width: 64px;
height: 64px;
background: rgba(19, 127, 236, 0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.empty-state-icon-wrap img {
width: 32px;
height: 32px;
opacity: 0.8;
}
.empty-state-title {
font-size: 1.125rem;
font-weight: 700;
color: #1e293b;
margin: 0;
}
.empty-state-desc {
font-size: 14px;
color: #64748b;
max-width: 320px;
line-height: 1.5;
margin: 0;
}
.checkout-empty-state .my-addresses-btn-add {
margin-top: 8px;
}
.place-order-btn.is-disabled {
background: #94a3b8;
border-color: #94a3b8;
pointer-events: none;
opacity: 0.7;
}