:root {
--black: #111;
--white: #fff;
--gray-100: #f7f7f7;
--gray-200: #eee;
--gray-500: #888;
--gray-700: #444;
--accent: #c8102e;
--radius: 4px;
--maxw: 1320px;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-serif: 'Playfair Display', Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
color: var(--black);
background: var(--white);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font: inherit; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 60px 20px; }
/* Header */
.site-header { position: sticky; top: 0; background: #fff; z-index: 100; border-bottom: 1px solid var(--gray-200); }
.topbar { background: var(--black); color: #fff; text-align: center; font-size: 12px; padding: 8px; letter-spacing: .5px; }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; gap: 24px; }
.logo { font-family: var(--font-serif); font-size: 24px; font-weight: 700; letter-spacing: 2px; }
.main-nav ul { display: flex; gap: 28px; }
.main-nav a { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; }
.main-nav a:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.search-form { display: flex; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
.search-form input { border: none; padding: 8px 12px; outline: none; width: 180px; }
.search-form button { background: var(--black); color: #fff; border: none; padding: 0 14px; }
.cart-link { position: relative; font-size: 20px; }
.cart-count { position: absolute; top: -6px; right: -10px; background: var(--accent); color: #fff; font-size: 11px; border-radius: 50%; width: 18px; height: 18px; display: grid; place-items: center; }
.menu-toggle { display: none; background: none; border: none; font-size: 22px; }
/* Buttons */
.btn { display: inline-block; padding: 14px 32px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius); transition: all .25s; }
.btn-primary { background: var(--black); color: #fff; }
.btn-primary:hover { background: var(--accent); }
.btn-outline { border-color: var(--black); }
.btn-outline:hover { background: var(--black); color: #fff; }
.btn-block { display: block; width: 100%; text-align: center; }
/* Hero */
.hero {
background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1600') center/cover;
color: #fff; padding: 140px 20px; text-align: center;
}
.hero .eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px; }
.hero h1 { font-family: var(--font-serif); font-size: clamp(32px, 5vw, 64px); font-weight: 500; margin-bottom: 20px; line-height: 1.1; }
.hero p { font-size: 17px; max-width: 600px; margin: 0 auto 30px; opacity: .95; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn-outline { border-color: #fff; color: #fff; }
.hero-cta .btn-outline:hover { background: #fff; color: #000; }
/* Sections */
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.section-head h2 { font-family: var(--font-serif); font-size: 32px; font-weight: 500; }
.link-arrow { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.product-card { transition: transform .3s; }
.product-card:hover { transform: translateY(-4px); }
.product-image { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--gray-100); border-radius: var(--radius); }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product-card:hover .product-image img { transform: scale(1.05); }
.badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.badge.new { background: var(--black); color: #fff; }
.badge.sale { background: var(--accent); color: #fff; left: auto; right: 12px; }
.product-info { padding: 14px 4px; }
.product-info h3 { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.product-cat { font-size: 12px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.product-price { font-size: 15px; font-weight: 600; }
.price-old { color: var(--gray-500); text-decoration: line-through; margin-left: 8px; font-weight: 400; }
.price-sale { color: var(--accent); }
/* Categories strip */
.categories-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 20px; }
.cat-tile { height: 380px; background: var(--gray-200); display: flex; align-items: flex-end; padding: 32px; color: #fff; font-family: var(--font-serif); font-size: 32px; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.cat-tile:nth-child(1) { background-image: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)), url('https://images.unsplash.com/photo-1483985988355-763728e1935b?w=800'); }
.cat-tile:nth-child(2) { background-image: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)), url('https://images.unsplash.com/photo-1516257984-b1b4d707412e1?w=800'); }
.cat-tile:nth-child(3) { background-image: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)), url('https://images.unsplash.com/photo-1519457431-44ccd64a579b?w=800'); }
.cat-tile::after { content: '→'; position: absolute; bottom: 32px; right: 32px; font-size: 24px; transition: transform .3s; }
.cat-tile:hover::after { transform: translateX(8px); }
/* Product detail */
.breadcrumbs { padding: 20px; max-width: var(--maxw); margin: 0 auto; font-size: 13px; color: var(--gray-500); }
.breadcrumbs a { color: var(--gray-500); }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 20px; }
.product-gallery .main-image { aspect-ratio: 4/5; background: var(--gray-100); border-radius: var(--radius); overflow: hidden; }
.product-gallery .main-image img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: flex; gap: 8px; margin-top: 12px; }
.thumb { border: 1px solid var(--gray-200); background: none; padding: 0; width: 70px; height: 88px; overflow: hidden; border-radius: var(--radius); }
.thumb.active { border-color: var(--black); }
.product-meta h1 { font-family: var(--font-serif); font-size: 36px; font-weight: 500; margin-bottom: 16px; }
.product-price-lg { font-size: 24px; font-weight: 600; margin-bottom: 20px; }
.short-desc { color: var(--gray-700); margin-bottom: 24px; }
.add-to-cart-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.add-to-cart-form label { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.add-to-cart-form select, .add-to-cart-form input { padding: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); font: inherit; width: 100%; }
.product-accordion details { border-top: 1px solid var(--gray-200); padding: 16px 0; }
.product-accordion summary { cursor: pointer; font-weight: 600; font-size: 14px; }
/* Cart / checkout */
.cart-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.cart-table th, .cart-table td { padding: 14px 8px; border-bottom: 1px solid var(--gray-200); text-align: left; font-size: 14px; vertical-align: middle; }
.cart-table img { border-radius: var(--radius); }
.cart-summary, .checkout-summary { background: var(--gray-100); padding: 28px; border-radius: var(--radius); }
.cart-summary .total, .checkout-summary .total { font-size: 20px; font-weight: 700; margin: 12px 0 20px; }
.checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin-top: 32px; }
.checkout-form label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.checkout-form input { width: 100%; padding: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); font: inherit; margin-top: 6px; }
.checkout-form h2 { font-size: 18px; margin: 24px 0 16px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.alert.error { background: #fee; color: #a00; padding: 14px; border-radius: var(--radius); margin-bottom: 20px; }
.order-success { text-align: center; padding: 100px 20px; }
/* Footer */
.site-footer { background: #111; color: #fff; padding: 60px 20px 30px; margin-top: 60px; }
.footer-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 40px; }
.footer-grid h3, .footer-grid h4 { font-family: var(--font-serif); margin-bottom: 16px; font-weight: 500; }
.footer-grid p, .footer-grid a { font-size: 14px; color: #ccc; line-height: 1.8; }
.footer-grid a:hover { color: #fff; }
.newsletter-form { display: flex; border: 1px solid #333; border-radius: var(--radius); overflow: hidden; }
.newsletter-form input { flex: 1; padding: 12px; background: transparent; border: none; color: #fff; outline: none; }
.newsletter-form button { background: #fff; color: #000; border: none; padding: 0 20px; font-weight: 600; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.footer-bottom { max-width: var(--maxw); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid #222; display: flex; justify-content: space-between; font-size: 13px; color: #888; flex-wrap: wrap; gap: 10px; }
/* Responsive */
@media (max-width: 992px) {
.product-detail, .checkout-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.categories-strip { grid-template-columns: 1fr; }
.cat-tile { height: 220px; font-size: 24px; }
}
@media (max-width: 768px) {
.main-nav { position: fixed; top: 0; left: -100%; width: 80%; max-width: 320px; height: 100vh; background: #fff; padding: 80px 24px; transition: left .3s; box-shadow: 0 0 40px rgba(0,0,0,.1); }
.main-nav.open { left: 0; }
.main-nav ul { flex-direction: column; gap: 20px; }
.menu-toggle { display: block; }
.search-form { display: none; }
.footer-grid { grid-template-columns: 1fr; }
.hero { padding: 80px 20px; }
.product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.product-info h3 { font-size: 13px; }
}
@media (max-width: 480px) {
.product-grid { grid-template-columns: 1fr; }
.two-col { grid-template-columns: 1fr; }
}
/* ============================================
MODERN FOOTER
============================================ */
.site-footer {
background: #0e0e0e;
color: #e8e8e8;
margin-top: 80px;
font-size: 14px;
position: relative;
}
.footer-top {
padding: 72px 0 56px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.8fr;
gap: 56px;
align-items: start;
}
/* Brand column */
.footer-brand .footer-logo {
display: inline-block;
font-family: var(--font-serif);
font-size: 26px;
font-weight: 700;
letter-spacing: 3px;
color: #fff;
margin-bottom: 18px;
text-transform: uppercase;
}
.footer-tagline {
color: #a0a0a0;
line-height: 1.7;
max-width: 340px;
margin-bottom: 24px;
font-size: 14px;
}
/* Social links */
.social-links {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
color: #e8e8e8;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.02);
}
.social-link:hover,
.social-link:focus-visible {
background: #fff;
color: #111;
border-color: #fff;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.12);
outline: none;
}
.social-link svg {
display: block;
}
/* Footer columns */
.footer-col h4,
.footer-newsletter h4 {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #fff;
margin-bottom: 22px;
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-col a {
color: #a0a0a0;
font-size: 14px;
transition: color 0.2s, padding-left 0.2s;
position: relative;
display: inline-block;
}
.footer-col a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 1px;
background: #fff;
transition: width 0.25s;
transform: translateY(-50%);
}
.footer-col a:hover {
color: #fff;
padding-left: 14px;
}
.footer-col a:hover::before {
width: 8px;
}
/* Newsletter */
.footer-newsletter p {
color: #a0a0a0;
line-height: 1.7;
margin-bottom: 20px;
font-size: 14px;
}
.newsletter-form {
margin-bottom: 20px;
}
.newsletter-input-wrap {
display: flex;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
overflow: hidden;
transition: border-color 0.25s, background 0.25s;
}
.newsletter-input-wrap:focus-within {
border-color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.newsletter-input-wrap input {
flex: 1;
background: transparent;
border: none;
color: #fff;
padding: 14px 16px;
font: inherit;
font-size: 14px;
outline: none;
min-width: 0;
}
.newsletter-input-wrap input::placeholder {
color: #808080;
}
.newsletter-input-wrap button {
background: #fff;
color: #111;
border: none;
padding: 0 22px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: background 0.25s, color 0.25s;
position: relative;
min-width: 120px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.newsletter-input-wrap button:hover {
background: var(--accent);
color: #fff;
}
.newsletter-input-wrap button:disabled {
cursor: not-allowed;
opacity: 0.8;
}
/* Loading spinner inside button */
.btn-loading {
display: none;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
.newsletter-form.loading .btn-text { display: none; }
.newsletter-form.loading .btn-loading { display: inline-block; }
@keyframes spin {
to { transform: rotate(360deg); }
}
.newsletter-msg {
font-size: 13px;
margin-top: 10px;
min-height: 18px;
line-height: 1.5;
transition: color 0.2s;
}
.newsletter-msg.success { color: #4ade80; }
.newsletter-msg.error { color: #f87171; }
.newsletter-msg.info { color: #a0a0a0; }
/* Payment badges */
.payment-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.payment-badge {
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 3px;
color: #a0a0a0;
font-weight: 500;
}
/* Footer bottom */
.footer-bottom {
padding: 24px 0;
background: #080808;
}
.footer-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
color: #808080;
}
.footer-legal {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.footer-legal a {
color: #808080;
transition: color 0.2s;
}
.footer-legal a:hover { color: #fff; }
/* Back to top */
.back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
background: #111;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s;
z-index: 90;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--accent);
border-color: var(--accent);
}
/* Responsive footer */
@media (max-width: 992px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.footer-brand,
.footer-newsletter {
grid-column: 1 / -1;
}
.footer-tagline { max-width: none; }
}
@media (max-width: 600px) {
.footer-top { padding: 48px 0 40px; }
.footer-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.footer-bottom-inner {
flex-direction: column;
text-align: center;
}
.footer-legal { justify-content: center; }
.newsletter-input-wrap { flex-direction: column; }
.newsletter-input-wrap button {
padding: 14px;
width: 100%;
}
.back-to-top {
bottom: 16px;
right: 16px;
width: 40px;
height: 40px;
}
}
/* ============================================
LIVE CHAT WIDGET — FIXED LAYOUT
============================================ */
/* Launcher */
.chat-launcher {
position: fixed;
bottom: 84px;
right: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25d366;
color: #fff;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
z-index: 9998;
transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
animation: chatPulse 2.5s infinite;
}
.chat-launcher:hover {
transform: scale(1.08);
box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55);
}
.chat-launcher[aria-expanded="true"] {
background: #111;
animation: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
@keyframes chatPulse {
0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.5); }
50% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 14px rgba(37, 211, 102, 0); }
}
.chat-icon { display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.2s, transform 0.2s; }
.chat-icon-close { position: absolute; opacity: 0; transform: rotate(-90deg); }
.chat-launcher[aria-expanded="true"] .chat-icon-chat { opacity: 0; transform: rotate(90deg); }
.chat-launcher[aria-expanded="true"] .chat-icon-close { opacity: 1; transform: rotate(0); }
.chat-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: #c8102e;
color: #fff;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
/* ============================================
CHAT PANEL — FIXED HEIGHT FLEX LAYOUT
============================================ */
.chat-panel {
position: fixed;
bottom: 24px;
right: 24px;
width: 380px;
max-width: calc(100vw - 32px);
height: 640px;
max-height: calc(100vh - 48px);
background: #fff;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.96);
transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.28s;
font-family: var(--font-sans);
}
.chat-panel.open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* ---------- HEADER (fixed at top) ---------- */
.chat-header {
background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
color: #fff;
padding: 16px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0; /* never shrink */
min-height: 72px;
}
.chat-header-info {
display: flex;
align-items: center;
gap: 12px;
min-width: 0; /* allow ellipsis inside */
}
.chat-header-text {
min-width: 0;
overflow: hidden;
}
.chat-avatar {
position: relative;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
font-size: 16px;
}
.status-dot {
position: absolute;
bottom: 1px;
right: 1px;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid #111;
}
.status-dot.online { background: #22c55e; }
.status-dot.offline { background: #888; }
.status-dot.agent { background: #f59e0b; }
.chat-header h3 {
font-size: 14px;
font-weight: 600;
margin: 0 0 2px;
color: #fff;
font-family: var(--font-sans);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-status {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-close {
background: transparent;
border: none;
color: #fff;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
display: inline-flex;
font-size: 16px;
flex-shrink: 0;
}
.chat-close:hover { background: rgba(255, 255, 255, 0.12); }
/* ---------- BODY (flexes, scrolls) ---------- */
.chat-body {
flex: 1 1 auto;
min-height: 0; /* CRITICAL — enables scrolling */
overflow: hidden;
display: flex;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
background: #f8f8f8;
scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.chat-msg {
max-width: 82%;
padding: 10px 14px;
border-radius: 16px;
font-size: 13.5px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: break-word;
animation: msgIn 0.25s ease-out;
}
@keyframes msgIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-msg.visitor {
align-self: flex-end;
background: #111;
color: #fff;
border-bottom-right-radius: 4px;
}
.chat-msg.bot,
.chat-msg.agent {
align-self: flex-start;
background: #fff;
color: #111;
border: 1px solid #ececec;
border-bottom-left-radius: 4px;
}
.chat-msg.agent {
background: #fff7ed;
border-color: #fed7aa;
}
.chat-msg.system {
align-self: center;
background: #eef2ff;
color: #3730a3;
font-size: 11.5px;
padding: 8px 12px;
border-radius: 12px;
max-width: 92%;
text-align: center;
}
.chat-msg-time {
display: block;
font-size: 10px;
opacity: 0.6;
margin-top: 4px;
text-align: right;
}
.chat-msg.visitor .chat-msg-time { color: rgba(255,255,255,0.7); }
.chat-typing {
align-self: flex-start;
background: #fff;
border: 1px solid #ececec;
border-radius: 16px;
border-bottom-left-radius: 4px;
padding: 12px 16px;
display: flex;
gap: 4px;
align-items: center;
}
.chat-typing span {
width: 7px;
height: 7px;
background: #999;
border-radius: 50%;
animation: typingBounce 1.3s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-5px); opacity: 1; }
}
/* ============================================
BOTTOM ACTION SECTIONS (collapse to one)
============================================ */
.chat-panel-section {
background: #fff;
border-top: 1px solid #f0f0f0;
padding: 12px 16px;
flex-shrink: 0;
animation: sectionIn .3s ease-out;
max-height: 240px;
overflow-y: auto;
}
@keyframes sectionIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-section-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #888;
}
.chat-section-toggle,
.chat-section-close {
background: transparent;
border: none;
cursor: pointer;
color: #888;
padding: 4px;
font-size: 12px;
border-radius: 4px;
transition: all .2s;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
.chat-section-toggle:hover,
.chat-section-close:hover {
background: #f0f0f0;
color: #111;
}
.chat-section-toggle i { transition: transform .25s; }
.chat-panel-section.collapsed .chat-section-toggle i { transform: rotate(-90deg); }
.chat-panel-section.collapsed .chat-quick-replies-inner { display: none; }
/* Quick replies grid */
.chat-quick-replies-inner {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-height: 160px;
overflow-y: auto;
}
.chat-quick-reply {
background: #f4f4f4;
border: 1px solid #e8e8e8;
color: #111;
padding: 8px 12px;
border-radius: 16px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
text-align: left;
line-height: 1.3;
}
.chat-quick-reply:hover {
background: #111;
color: #fff;
border-color: #111;
}
/* Escalation buttons */
.escalation-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.chat-btn {
padding: 11px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: inherit;
white-space: nowrap;
}
.chat-btn i { font-size: 12px; }
.chat-btn-whatsapp { background: #25d366; color: #fff; }
.chat-btn-whatsapp:hover { background: #1da851; }
.chat-btn-agent { background: #111; color: #fff; }
.chat-btn-agent:hover { background: #c8102e; }
.chat-btn-cancel { background: #f2f2f2; color: #111; }
.chat-btn-cancel:hover { background: #e0e0e0; }
.chat-btn-primary { background: #111; color: #fff; }
.chat-btn-primary:hover { background: #c8102e; }
/* Agent form */
.chat-agent-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.chat-agent-form input {
padding: 10px 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font: inherit;
font-size: 13px;
outline: none;
transition: border-color 0.2s;
width: 100%;
}
.chat-agent-form input:focus {
border-color: #111;
box-shadow: 0 0 0 3px rgba(17, 17, 17, .08);
}
.chat-form-actions {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 8px;
margin-top: 4px;
}
/* Input form (always at bottom) */
.chat-input-form {
display: flex;
align-items: center;
padding: 12px 14px;
gap: 8px;
background: #fff;
border-top: 1px solid #f0f0f0;
flex-shrink: 0;
}
.chat-input-form input {
flex: 1;
padding: 11px 14px;
border: 1px solid #e5e5e5;
border-radius: 22px;
font: inherit;
font-size: 13.5px;
outline: none;
transition: border-color 0.2s;
background: #fafafa;
min-width: 0;
}
.chat-input-form input:focus {
border-color: #111;
background: #fff;
}
.chat-input-form button {
width: 42px;
height: 42px;
border-radius: 50%;
background: #111;
color: #fff;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.2s;
flex-shrink: 0;
font-size: 14px;
}
.chat-input-form button:hover:not(:disabled) {
background: #c8102e;
transform: scale(1.05);
}
.chat-input-form button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ============================================
MOBILE FULL-SCREEN
============================================ */
@media (max-width: 480px) {
.chat-panel {
bottom: 0;
right: 0;
left: 0;
top: 0;
width: 100%;
height: 100vh;
height: 100dvh; /* dynamic viewport — accounts for mobile browser bars */
max-height: 100dvh;
border-radius: 0;
}
.chat-header {
padding: 14px 16px;
min-height: 64px;
/* Respect iOS safe area */
padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.chat-avatar { width: 38px; height: 38px; font-size: 14px; }
.chat-header h3 { font-size: 13.5px; }
.chat-status { font-size: 10.5px; }
.chat-msg { max-width: 88%; font-size: 13px; }
.chat-panel-section { max-height: 200px; }
.chat-input-form {
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.chat-launcher {
bottom: 76px;
right: 16px;
width: 56px;
height: 56px;
}
.escalation-buttons { grid-template-columns: 1fr; }
}
/* Landscape phones — keep panel usable */
@media (max-height: 500px) and (max-width: 900px) {
.chat-panel {
height: 100vh;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
.chat-header { min-height: 56px; padding: 10px 14px; }
.chat-panel-section { max-height: 140px; padding: 8px 12px; }
.chat-messages { padding: 12px; }
}
/* ============================================
HOMEPAGE — MODERN STYLES
============================================ */
/* ---------- HERO SLIDER ---------- */
.hero-slider {
position: relative;
height: 88vh;
min-height: 560px;
max-height: 900px;
overflow: hidden;
background: #111;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
background-size: cover;
background-position: center;
transition: opacity 1s ease, visibility 1s ease, transform 8s linear;
transform: scale(1.02);
}
.hero-slide.active {
opacity: 1;
visibility: visible;
transform: scale(1.08);
z-index: 1;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15) 100%);
}
.hero-slide .hero-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
max-width: 720px;
padding: 0 20px;
}
.hero-content.align-center { text-align: center; margin: 0 auto; align-items: center; }
.hero-content.align-right { text-align: right; margin-left: auto; }
.hero-eyebrow {
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(255,255,255,.85);
margin-bottom: 18px;
font-weight: 500;
}
.hero-title {
font-family: var(--font-serif);
font-size: clamp(34px, 5.5vw, 68px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.5px;
margin-bottom: 20px;
}
.hero-subtitle {
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.6;
color: rgba(255,255,255,.9);
max-width: 560px;
margin-bottom: 34px;
}
.hero-content.align-center .hero-subtitle { margin-left: auto; margin-right: auto; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-content.align-center .hero-cta { justify-content: center; }
.hero-content.align-right .hero-cta { justify-content: flex-end; }
.btn-outline-light {
border: 1px solid rgba(255,255,255,.5);
color: #fff;
background: transparent;
}
.btn-outline-light:hover {
background: #fff;
color: #111;
border-color: #fff;
}
/* Reveal animation for slide content */
.hero-slide.active .reveal {
animation: heroReveal .9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-slide.active .reveal:nth-child(2) { animation-delay: .12s; }
.hero-slide.active .reveal:nth-child(3) { animation-delay: .24s; }
.hero-slide.active .reveal:nth-child(4) { animation-delay: .36s; }
@keyframes heroReveal {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* Arrows */
.hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255,255,255,.15);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.25);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
transition: all .25s;
opacity: 0;
}
.hero-slider:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover {
background: #fff;
color: #111;
border-color: #fff;
}
.hero-prev { left: 24px; }
.hero-next { right: 24px; }
/* Dots */
.hero-dots {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 5;
}
.hero-dot {
width: 34px;
height: 3px;
background: rgba(255,255,255,.35);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
padding: 0;
transition: background .25s;
}
.hero-dot::after {
content: '';
position: absolute;
inset: 0;
background: #fff;
transform: translateX(-100%);
}
.hero-dot.active { background: rgba(255,255,255,.5); }
.hero-dot.active::after { animation: dotProgress 6s linear forwards; }
@keyframes dotProgress {
to { transform: translateX(0); }
}
/* Scroll cue */
.hero-scroll-cue {
position: absolute;
bottom: 30px;
right: 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: #fff;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
z-index: 5;
opacity: .75;
}
.scroll-line {
width: 1px;
height: 42px;
background: rgba(255,255,255,.3);
position: relative;
overflow: hidden;
}
.scroll-line::after {
content: '';
position: absolute;
top: -42px;
left: 0;
width: 100%;
height: 42px;
background: #fff;
animation: scrollLine 2s infinite;
}
@keyframes scrollLine {
0% { top: -42px; }
100% { top: 42px; }
}
/* ---------- TRUST BAR ---------- */
.trust-bar {
background: #fafafa;
border-bottom: 1px solid #eee;
padding: 26px 0;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.trust-item {
display: flex;
align-items: center;
gap: 12px;
color: #111;
}
.trust-item svg { color: var(--accent); flex-shrink: 0; }
.trust-item strong { display: block; font-size: 13px; font-weight: 600; }
.trust-item span { font-size: 12px; color: #888; }
/* ---------- SECTION HEADINGS ---------- */
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
gap: 20px;
}
.section-title {
font-family: var(--font-serif);
font-size: clamp(26px, 3vw, 40px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.3px;
}
.section-sub {
font-size: 14px;
color: #888;
margin-top: 8px;
max-width: 500px;
}
.section-head .eyebrow {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
font-weight: 600;
}
/* ---------- CATEGORY GRID ---------- */
.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.cat-card {
position: relative;
height: 520px;
overflow: hidden;
border-radius: 6px;
display: block;
}
.cat-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .9s cubic-bezier(0.16, 1, 0.3, 1);
}
.cat-card:hover img { transform: scale(1.06); }
.cat-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px;
color: #fff;
}
.cat-overlay h3 {
font-family: var(--font-serif);
font-size: 34px;
font-weight: 500;
margin-bottom: 8px;
letter-spacing: 1px;
}
.cat-overlay span {
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
opacity: 0;
transform: translateY(8px);
transition: all .35s;
}
.cat-card:hover .cat-overlay span { opacity: 1; transform: translateY(0); }
/* ---------- PRODUCT CARD ENHANCEMENTS ---------- */
.product-hover-actions {
position: absolute;
inset: auto 0 0 0;
padding: 14px;
background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
transform: translateY(100%);
transition: transform .35s;
text-align: center;
}
.product-card:hover .product-hover-actions { transform: translateY(0); }
.quick-view {
display: inline-block;
background: #fff;
color: #111;
padding: 10px 22px;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
border-radius: 3px;
}
/* ---------- PROMO BANNER ---------- */
.promo-banner {
background: #f2efe9;
margin: 80px 0;
overflow: hidden;
}
.promo-inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 40px;
}
.promo-text { padding: 80px 20px 80px 0; }
.promo-text .eyebrow {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin-bottom: 12px;
}
.promo-text h2 {
font-family: var(--font-serif);
font-size: clamp(28px, 3.6vw, 48px);
font-weight: 500;
line-height: 1.1;
margin-bottom: 16px;
}
.promo-text p { color: #555; margin-bottom: 28px; max-width: 400px; }
.promo-image {
height: 520px;
overflow: hidden;
}
.promo-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s;
}
.promo-banner:hover .promo-image img { transform: scale(1.04); }
/* ---------- APP SECTION ---------- */
.app-section {
background: #111;
color: #fff;
padding: 100px 20px;
margin: 80px 0;
overflow: hidden;
position: relative;
}
.app-section::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(200,16,46,.22), transparent 70%);
border-radius: 50%;
}
.app-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 2;
}
/* ============================================
MOBILE APP PHONE MOCKUP
============================================ */
.app-phone { display: flex; justify-content: center; }
.phone-frame {
width: 300px;
height: 620px;
background: #1c1c1c;
border-radius: 44px;
padding: 10px;
box-shadow:
0 50px 90px rgba(0,0,0,.55),
0 20px 40px rgba(0,0,0,.35),
0 0 0 1px rgba(255,255,255,.06),
inset 0 0 0 1px rgba(255,255,255,.03);
position: relative;
animation: phoneFloat 6s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes phoneFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
.phone-notch {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 22px;
background: #1c1c1c;
border-radius: 0 0 14px 14px;
z-index: 10;
}
/* Screen */
.phone-screen {
width: 100%;
height: 100%;
background: #fafafa;
border-radius: 34px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
font-family: var(--font-sans);
font-size: 10px;
color: #111;
}
/* Status bar */
.app-statusbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 22px 4px;
font-size: 10px;
font-weight: 600;
color: #111;
background: #fff;
flex-shrink: 0;
}
.app-statusbar-icons { display: flex; gap: 5px; font-size: 10px; }
.app-statusbar-icons i { color: #111; }
/* App header */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px 10px;
background: #fff;
flex-shrink: 0;
}
.app-hamburger,
.app-cart {
width: 30px;
height: 30px;
background: #f4f4f4;
border: none;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #111;
font-size: 11px;
position: relative;
}
.app-cart-dot {
position: absolute;
top: 4px;
right: 4px;
width: 7px;
height: 7px;
background: #c8102e;
border-radius: 50%;
border: 1.5px solid #fff;
}
.app-brand {
font-family: var(--font-serif);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: #111;
text-transform: uppercase;
}
/* App search */
.app-search {
margin: 0 14px 10px;
background: #f4f4f4;
border-radius: 20px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
color: #999;
flex-shrink: 0;
}
.app-search i { font-size: 10px; color: #666; }
/* App hero mini slider */
.app-hero {
margin: 0 14px 12px;
border-radius: 12px;
overflow: hidden;
position: relative;
height: 130px;
flex-shrink: 0;
}
.app-hero-track { position: absolute; inset: 0; }
.app-hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
visibility: hidden;
transition: opacity .8s ease;
}
.app-hero-slide.active { opacity: 1; visibility: visible; }
.app-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 60%, transparent 100%);
padding: 12px;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
}
.app-hero-eyebrow {
font-size: 7.5px;
letter-spacing: 2px;
text-transform: uppercase;
opacity: .85;
margin-bottom: 3px;
}
.app-hero h4 {
font-family: var(--font-serif);
font-size: 13px;
font-weight: 500;
line-height: 1.15;
margin: 0 0 6px;
color: #fff;
}
.app-hero-cta {
font-size: 8.5px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
color: #fff;
}
.app-hero-cta i { font-size: 7px; }
.app-hero-dots {
position: absolute;
bottom: 6px;
right: 10px;
display: flex;
gap: 4px;
z-index: 2;
}
.app-hero-dots span {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255,255,255,.4);
transition: all .3s;
}
.app-hero-dots span.active {
background: #fff;
width: 14px;
border-radius: 3px;
}
/* App category chips */
.app-chips {
display: flex;
gap: 6px;
padding: 0 14px 10px;
overflow-x: auto;
scrollbar-width: none;
flex-shrink: 0;
}
.app-chips::-webkit-scrollbar { display: none; }
.app-chip {
padding: 5px 11px;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 14px;
font-size: 9px;
font-weight: 500;
color: #666;
white-space: nowrap;
flex-shrink: 0;
}
.app-chip.active {
background: #111;
color: #fff;
border-color: #111;
}
/* App products */
.app-products {
flex: 1;
padding: 0 14px 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.app-products-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
flex-shrink: 0;
}
.app-products-head > span:first-child {
font-family: var(--font-serif);
font-size: 12px;
font-weight: 500;
color: #111;
}
.app-see-all {
font-size: 8.5px;
letter-spacing: .8px;
text-transform: uppercase;
color: #666;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 3px;
}
.app-see-all i { font-size: 6px; }
.app-products-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
overflow: hidden;
}
.app-product {
background: #fff;
border-radius: 8px;
overflow: hidden;
padding-bottom: 6px;
}
.app-product-img {
position: relative;
aspect-ratio: 4/5;
background: #f0f0f0;
overflow: hidden;
border-radius: 8px 8px 0 0;
}
.app-product-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s;
}
.app-product-badge {
position: absolute;
top: 6px;
left: 6px;
padding: 2px 6px;
background: #c8102e;
color: #fff;
font-size: 7px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
border-radius: 3px;
}
.app-product-badge.new { background: #111; }
.app-product-name {
font-size: 9px;
font-weight: 500;
color: #111;
margin: 6px 6px 2px;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-product-price {
font-size: 9px;
font-weight: 700;
color: #111;
margin: 0 6px;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.app-product-price .sale { color: #c8102e; }
.app-product-price s { color: #aaa; font-weight: 400; font-size: 8px; }
/* App bottom tabbar */
.app-tabbar {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #fff;
border-top: 1px solid #eee;
padding: 8px 0 12px;
flex-shrink: 0;
}
.app-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
font-size: 7.5px;
color: #999;
font-weight: 500;
letter-spacing: .3px;
}
.app-tab i { font-size: 13px; }
.app-tab.active { color: #111; }
.app-tab.active i { color: #111; }
/* Shine sweep across the phone screen (subtle) */
.phone-frame::after {
content: '';
position: absolute;
inset: 10px;
border-radius: 34px;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
pointer-events: none;
z-index: 20;
}
/* Responsive phone sizing */
@media (max-width: 992px) {
.phone-frame { width: 260px; height: 540px; border-radius: 38px; }
.app-hero { height: 110px; }
.app-brand { font-size: 11px; }
.app-statusbar { font-size: 9px; }
}
@media (max-width: 480px) {
.phone-frame { width: 230px; height: 480px; border-radius: 34px; }
.phone-notch { width: 84px; height: 18px; border-radius: 0 0 12px 12px; }
.app-hero { height: 96px; }
.app-hero h4 { font-size: 11px; }
.app-chip { font-size: 8px; padding: 4px 9px; }
.app-product-name { font-size: 8.5px; }
.app-product-price { font-size: 8.5px; }
.app-tabbar { padding: 6px 0 10px; }
.app-tab i { font-size: 11px; }
.app-tab { font-size: 7px; }
}
/* App text side */
.app-text .eyebrow {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin-bottom: 14px;
}
.app-text h2 {
font-family: var(--font-serif);
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 500;
line-height: 1.12;
margin-bottom: 18px;
}
.app-text > p { color: #b5b5b5; font-size: 15px; line-height: 1.7; margin-bottom: 26px; max-width: 480px; }
.app-features {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: grid;
gap: 12px;
}
.app-features li {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #e0e0e0;
}
.app-features svg { color: #22c55e; flex-shrink: 0; }
.app-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.app-badge {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
color: #111;
padding: 12px 20px;
border-radius: 8px;
transition: transform .2s, box-shadow .2s;
}
.app-badge:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(255,255,255,.15); }
.app-badge small { display: block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #666; }
.app-badge strong { display: block; font-size: 14px; font-weight: 600; }
.app-stats {
display: flex;
gap: 40px;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,.1);
}
.app-stats div strong {
display: block;
font-family: var(--font-serif);
font-size: 24px;
font-weight: 500;
color: #fff;
}
.app-stats div span { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #888; }
/* ---------- CTA SECTION ---------- */
.cta-section {
position: relative;
padding: 120px 20px;
text-align: center;
color: #fff;
overflow: hidden;
}
.cta-bg {
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)),
url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=1920&q=80') center/cover;
background-attachment: fixed;
}
.cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.cta-inner .eyebrow {
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(255,255,255,.8);
margin-bottom: 16px;
font-weight: 500;
}
.cta-inner h2 {
font-family: var(--font-serif);
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 500;
line-height: 1.1;
margin-bottom: 20px;
}
.cta-inner p {
font-size: 16px;
line-height: 1.7;
color: rgba(255,255,255,.85);
margin-bottom: 36px;
}
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ---------- SCROLL REVEAL ANIMATIONS ---------- */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1),
transform .8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.reveal, .hero-slide, .phone-frame, .phone-card::after, .scroll-line::after, .hero-dot.active::after {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
.hero-slider { height: 78vh; min-height: 500px; }
.hero-arrow { display: none; }
.hero-scroll-cue { display: none; }
.trust-grid { grid-template-columns: repeat(2, 1fr); }
.category-grid { grid-template-columns: 1fr; }
.cat-card { height: 320px; }
.promo-inner { grid-template-columns: 1fr; }
.promo-text { padding: 60px 20px 0; }
.promo-image { height: 340px; }
.app-inner { grid-template-columns: 1fr; gap: 48px; }
.app-phone { order: 2; }
.phone-frame { width: 240px; height: 480px; }
.cta-bg { background-attachment: scroll; }
}
@media (max-width: 768px) {
.hero-slider { height: 70vh; min-height: 460px; }
.hero-title { font-size: clamp(28px, 8vw, 40px); }
.hero-subtitle { font-size: 14px; margin-bottom: 24px; }
.hero-dots { bottom: 20px; }
.trust-grid { grid-template-columns: 1fr; gap: 14px; }
.trust-item { justify-content: flex-start; }
.section-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.app-stats { gap: 24px; }
.app-stats div strong { font-size: 20px; }
.cta-section { padding: 80px 20px; }
}
@media (max-width: 480px) {
.product-hover-actions { display: none; }
.cat-card { height: 260px; }
.cat-overlay { padding: 20px; }
.cat-overlay h3 { font-size: 26px; }
.app-badges { flex-direction: column; }
.app-badge { justify-content: center; }
}
/* ============================================
ANNOUNCEMENT BAR
============================================ */
.announcement-bar {
background: #111;
color: #fff;
font-size: 12.5px;
position: relative;
overflow: hidden;
height: 40px;
transition: height .35s ease, opacity .35s ease;
}
.announcement-bar.hidden {
height: 0;
opacity: 0;
pointer-events: none;
}
.announcement-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
gap: 20px;
position: relative;
}
/* Marquee track */
.announcement-track {
display: flex;
gap: 48px;
flex: 1;
overflow: hidden;
position: relative;
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.announcement-item {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
animation: announcementSlide 24s linear infinite;
letter-spacing: .3px;
}
.announcement-item i { color: #25d366; font-size: 13px; }
.announcement-item strong { color: #facc15; font-weight: 600; }
@keyframes announcementSlide {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-100% - 48px)); }
}
.announcement-track:hover .announcement-item { animation-play-state: paused; }
.announcement-links {
display: flex;
gap: 22px;
align-items: center;
flex-shrink: 0;
}
.announcement-links a {
color: rgba(255,255,255,.85);
font-size: 12px;
letter-spacing: .4px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color .2s;
}
.announcement-links a:hover { color: #fff; }
.announcement-links i { font-size: 12px; }
.announcement-close {
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: rgba(255,255,255,.6);
cursor: pointer;
padding: 8px;
font-size: 14px;
transition: color .2s;
z-index: 2;
display: none;
}
.announcement-close:hover { color: #fff; }
@media (max-width: 768px) {
.announcement-links { display: none; }
.announcement-close { display: block; right: 0; }
}
/* ============================================
MAIN HEADER
============================================ */
.site-header {
position: sticky;
top: 0;
background: #fff;
z-index: 200;
border-bottom: 1px solid #eee;
transition: box-shadow .3s, transform .3s;
}
.site-header.scrolled {
box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 20px;
min-height: 68px;
}
/* Logo */
.logo {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 700;
letter-spacing: 3px;
color: #111;
text-transform: uppercase;
flex-shrink: 0;
transition: opacity .2s;
}
.logo:hover { opacity: .75; }
/* Mobile toggle */
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
width: 40px;
height: 40px;
position: relative;
padding: 0;
}
.menu-toggle .bar {
display: block;
width: 22px;
height: 2px;
background: #111;
border-radius: 2px;
margin: 5px auto;
transition: transform .3s, opacity .3s;
}
.menu-toggle.active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ============================================
PRIMARY NAVIGATION
============================================ */
.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-list {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item { position: relative; }
.nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 14px 16px;
font-size: 13px;
font-weight: 500;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #111;
transition: color .2s;
position: relative;
white-space: nowrap;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 8px;
left: 50%;
width: 0;
height: 1.5px;
background: #111;
transform: translateX(-50%);
transition: width .3s;
}
.nav-link:hover,
.nav-link.active { color: #c8102e; }
.nav-link:hover::after,
.nav-link.active::after {
width: calc(100% - 32px);
background: #c8102e;
}
.nav-link-sale {
color: #c8102e;
font-weight: 600;
}
.nav-caret {
font-size: 9px;
transition: transform .25s;
opacity: .6;
}
.nav-item.has-mega:hover .nav-caret { transform: rotate(180deg); }
/* ============================================
MEGA MENU
============================================ */
.mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(12px);
width: 720px;
max-width: calc(100vw - 40px);
background: #fff;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.06);
padding: 32px;
opacity: 0;
visibility: hidden;
transition: opacity .25s, transform .25s, visibility .25s;
z-index: 100;
border: 1px solid #f0f0f0;
}
.nav-item.has-mega:hover .mega-menu,
.nav-item.has-mega:focus-within .mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.mega-inner {
display: grid;
grid-template-columns: 1fr 1fr 1.3fr;
gap: 40px;
}
.mega-col h4 {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
color: #111;
margin: 0 0 16px;
display: flex;
align-items: center;
gap: 8px;
}
.mega-col h4 i { color: #c8102e; font-size: 12px; }
.mega-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mega-col a {
font-size: 13.5px;
color: #555;
transition: color .2s, padding-left .2s;
display: inline-block;
position: relative;
}
.mega-col a:hover { color: #111; padding-left: 8px; }
.mega-col a:hover::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background: #c8102e;
border-radius: 50%;
}
.mega-feature {
position: relative;
border-radius: 8px;
overflow: hidden;
height: 260px;
}
.mega-feature img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s;
}
.mega-feature:hover img { transform: scale(1.06); }
.mega-feature-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.75), transparent 65%);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
}
.mega-feature-overlay span {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
opacity: .85;
margin-bottom: 6px;
}
.mega-feature-overlay a {
font-family: var(--font-serif);
font-size: 20px;
color: #fff;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap .25s;
}
.mega-feature-overlay a:hover { gap: 12px; }
/* ============================================
NAV ACTIONS (right side icons)
============================================ */
.nav-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.nav-icon-btn {
background: transparent;
border: none;
width: 42px;
height: 42px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: #111;
font-size: 16px;
transition: background .2s, color .2s, transform .2s;
position: relative;
text-decoration: none;
}
.nav-icon-btn:hover {
background: #f2f2f2;
color: #c8102e;
transform: translateY(-1px);
}
.nav-icon-btn:focus-visible {
outline: 2px solid #c8102e;
outline-offset: 2px;
}
/* Cart badge */
.cart-btn .cart-count {
position: absolute;
top: 4px;
right: 4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: #c8102e;
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
font-family: var(--font-sans);
letter-spacing: 0;
}
/* ============================================
ACCOUNT DROPDOWN
============================================ */
.nav-icon-dropdown { position: relative; }
.icon-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 250px;
background: #fff;
border-radius: 10px;
box-shadow: 0 20px 50px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.05);
padding: 20px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all .25s;
border: 1px solid #f0f0f0;
z-index: 100;
}
.nav-icon-dropdown:hover .icon-dropdown,
.nav-icon-dropdown:focus-within .icon-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-title {
font-size: 14px;
font-weight: 600;
color: #111;
margin: 0 0 4px;
}
.dropdown-sub {
font-size: 12px;
color: #888;
margin: 0 0 16px;
}
.dropdown-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 11px;
background: #111;
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
border-radius: 6px;
transition: background .2s;
margin-bottom: 14px;
}
.dropdown-btn:hover { background: #c8102e; }
.dropdown-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 13px;
color: #444;
transition: color .2s;
}
.dropdown-link:hover { color: #c8102e; }
.dropdown-link i { width: 16px; text-align: center; color: #888; }
.dropdown-link:hover i { color: #c8102e; }
/* ============================================
MOBILE SEARCH (visible < 768px)
============================================ */
.mobile-search {
display: none;
padding: 0 20px 14px;
border-top: 1px solid #f5f5f5;
}
.mobile-search form {
display: flex;
align-items: center;
gap: 10px;
background: #f5f5f5;
border-radius: 24px;
padding: 10px 16px;
}
.mobile-search i { color: #888; font-size: 14px; }
.mobile-search input {
flex: 1;
background: transparent;
border: none;
outline: none;
font: inherit;
font-size: 14px;
color: #111;
min-width: 0;
}
.mobile-search input::placeholder { color: #999; }
.mobile-search button {
background: transparent;
border: none;
cursor: pointer;
color: #111;
font-size: 14px;
padding: 4px;
}
@media (max-width: 768px) {
.mobile-search { display: block; }
}
/* ============================================
SEARCH OVERLAY
============================================ */
.search-overlay {
position: fixed;
inset: 0;
background: rgba(17, 17, 17, .6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 300;
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 100px 20px 40px;
overflow-y: auto;
}
.search-overlay.open {
opacity: 1;
visibility: visible;
}
.search-overlay-inner {
width: 100%;
max-width: 720px;
background: #fff;
border-radius: 14px;
padding: 36px;
position: relative;
transform: translateY(20px) scale(.98);
transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-overlay.open .search-overlay-inner {
transform: translateY(0) scale(1);
}
.search-overlay-close {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #f5f5f5;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #111;
transition: background .2s, color .2s, transform .2s;
}
.search-overlay-close:hover {
background: #111;
color: #fff;
transform: rotate(90deg);
}
.search-overlay-form {
display: flex;
align-items: center;
gap: 14px;
border-bottom: 2px solid #111;
padding-bottom: 14px;
margin-bottom: 28px;
}
.search-overlay-icon {
font-size: 22px;
color: #111;
flex-shrink: 0;
}
.search-overlay-form input {
flex: 1;
border: none;
outline: none;
font: inherit;
font-size: 22px;
font-family: var(--font-serif);
color: #111;
background: transparent;
min-width: 0;
}
.search-overlay-form input::placeholder {
color: #bbb;
font-style: italic;
}
.search-overlay-form button {
background: #111;
color: #fff;
border: none;
width: 46px;
height: 46px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
transition: background .25s, transform .25s;
flex-shrink: 0;
}
.search-overlay-form button:hover {
background: #c8102e;
transform: translateX(3px);
}
.search-suggestions-title {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: #888;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.search-suggestions-title i { color: #f59e0b; }
.search-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.search-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
background: #f5f5f5;
border-radius: 20px;
font-size: 13px;
color: #333;
transition: background .2s, color .2s, transform .2s;
}
.search-chip:hover {
background: #111;
color: #fff;
transform: translateY(-2px);
}
.search-chip i { font-size: 11px; opacity: .7; }
/* ============================================
MOBILE BACKDROP
============================================ */
.mobile-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 150;
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
}
.mobile-backdrop.show {
opacity: 1;
visibility: visible;
}
/* ============================================
RESPONSIVE HEADER
============================================ */
@media (max-width: 1024px) {
.nav-link { padding: 14px 10px; font-size: 12px; }
.mega-menu { width: 640px; }
.mega-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
.mega-feature { display: none; }
}
@media (max-width: 900px) {
.nav-actions .nav-icon-btn:not(.cart-btn):not(#searchToggle) { display: none; }
}
@media (max-width: 768px) {
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
.main-nav {
position: fixed;
top: 0;
left: -100%;
width: 88%;
max-width: 380px;
height: 100vh;
background: #fff;
z-index: 160;
transition: left .35s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 60px rgba(0,0,0,.15);
padding: 84px 0 40px;
overflow-y: auto;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.main-nav.open { left: 0; }
.nav-list {
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
}
.nav-item { border-bottom: 1px solid #f0f0f0; }
.nav-link {
padding: 18px 24px;
font-size: 14px;
justify-content: space-between;
width: 100%;
}
.nav-link::after { display: none; }
.nav-caret { font-size: 12px; }
/* Disable mega menus on mobile — just navigate */
.mega-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
width: 100%;
box-shadow: none;
border: none;
padding: 0 24px 20px;
max-width: none;
border-radius: 0;
}
.nav-item.has-mega:hover .mega-menu,
.nav-item.has-mega:focus-within .mega-menu { transform: none; }
.mega-inner { grid-template-columns: 1fr; gap: 20px; }
.mega-col h4 { font-size: 10px; }
.nav-actions { gap: 0; }
.nav-icon-btn { width: 40px; height: 40px; }
.logo { font-size: 20px; letter-spacing: 2px; }
.search-overlay { padding: 40px 16px; align-items: flex-start; }
.search-overlay-inner { padding: 24px 20px; border-radius: 10px; }
.search-overlay-form input { font-size: 17px; }
.search-overlay-form button { width: 40px; height: 40px; font-size: 13px; }
.search-overlay-icon { font-size: 18px; }
}
@media (max-width: 480px) {
.nav-wrap { padding: 12px 16px; min-height: 60px; }
.logo { font-size: 18px; letter-spacing: 1.5px; }
.nav-icon-btn { width: 38px; height: 38px; font-size: 15px; }
.cart-btn .cart-count { min-width: 16px; height: 16px; font-size: 9px; }
.search-overlay-form input { font-size: 16px; }
}
/* Prevent body scroll when overlay is open */
body.no-scroll { overflow: hidden; }
/* ============================================
STATIC PAGES
============================================ */
/* Breadcrumbs */
.breadcrumbs {
padding: 18px 0;
font-size: 13px;
color: #888;
background: #fafafa;
border-bottom: 1px solid #f0f0f0;
}
.breadcrumbs .container {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.breadcrumbs a {
color: #888;
transition: color .2s;
}
.breadcrumbs a:hover { color: #111; }
.breadcrumbs .sep { color: #ccc; }
.breadcrumbs [aria-current="page"] { color: #111; font-weight: 500; }
/* Page title (no hero image) */
.page-title-section {
padding: 60px 0 30px;
background: #fff;
border-bottom: 1px solid #f0f0f0;
}
.page-title-section h1 {
font-family: var(--font-serif);
font-size: clamp(30px, 4vw, 48px);
font-weight: 500;
line-height: 1.15;
color: #111;
margin: 0 0 10px;
letter-spacing: -0.3px;
}
.page-excerpt {
font-size: 16px;
color: #666;
max-width: 720px;
line-height: 1.6;
margin: 0;
}
/* Page hero (with background image) */
.page-hero {
position: relative;
height: 320px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
color: #fff;
}
.page-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55));
}
.page-hero-content {
position: relative;
z-index: 2;
}
.page-hero-content h1 {
font-family: var(--font-serif);
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 500;
margin: 0 0 12px;
line-height: 1.1;
}
.page-hero-content p {
font-size: 16px;
opacity: .9;
max-width: 640px;
margin: 0;
line-height: 1.6;
}
/* Page section wrapper */
.page-section { padding: 50px 20px 80px; }
.page-layout {
display: grid;
gap: 60px;
align-items: start;
}
.page-layout.layout-default { grid-template-columns: minmax(0, 1fr) 300px; }
.page-layout.layout-wide { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
.page-layout.layout-contact { grid-template-columns: 1fr; max-width: 800px; margin: 0 auto; }
.page-layout.layout-faq { grid-template-columns: 1fr; max-width: 800px; margin: 0 auto; }
/* Page HTML content */
.page-html {
font-size: 16px;
line-height: 1.75;
color: #333;
}
.page-html h2 {
font-family: var(--font-serif);
font-size: clamp(24px, 2.8vw, 32px);
font-weight: 500;
color: #111;
margin: 44px 0 16px;
line-height: 1.2;
letter-spacing: -0.2px;
}
.page-html h2:first-child { margin-top: 0; }
.page-html h3 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
color: #111;
margin: 32px 0 12px;
letter-spacing: -0.1px;
}
.page-html h4 {
font-size: 16px;
font-weight: 600;
color: #111;
margin: 24px 0 10px;
}
.page-html p {
margin: 0 0 18px;
}
.page-html ul,
.page-html ol {
margin: 0 0 20px;
padding-left: 24px;
}
.page-html li {
margin-bottom: 10px;
line-height: 1.7;
}
.page-html li::marker { color: var(--accent); }
.page-html a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s;
}
.page-html a:hover { color: #111; }
.page-html strong { color: #111; font-weight: 600; }
.page-html blockquote {
border-left: 3px solid var(--accent);
background: #fafafa;
padding: 18px 24px;
margin: 24px 0;
font-style: italic;
color: #555;
border-radius: 0 6px 6px 0;
}
.page-html code {
background: #f4f4f4;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
color: #c8102e;
}
.page-html img {
border-radius: 8px;
margin: 20px 0;
max-width: 100%;
height: auto;
}
.page-html hr {
border: none;
border-top: 1px solid #eee;
margin: 40px 0;
}
/* Tables inside page content */
.page-html table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
font-size: 14px;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
}
.page-html thead {
background: #111;
color: #fff;
}
.page-html th {
padding: 12px 16px;
text-align: left;
font-weight: 600;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
.page-html td {
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
color: #333;
}
.page-html tr:last-child td { border-bottom: none; }
.page-html tbody tr:nth-child(even) { background: #fafafa; }
/* Sidebar */
.page-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
position: sticky;
top: 100px;
}
.sidebar-card {
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 10px;
padding: 22px;
}
.sidebar-card h4 {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 500;
color: #111;
margin: 0 0 14px;
letter-spacing: .3px;
}
.sidebar-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-list a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 6px;
font-size: 14px;
color: #444;
transition: all .2s;
}
.sidebar-list a:hover {
background: #fff;
color: #111;
transform: translateX(4px);
}
.sidebar-list a.active {
background: #111;
color: #fff;
}
.sidebar-list a i {
font-size: 10px;
opacity: .5;
}
.sidebar-list a:hover i { opacity: 1; }
/* Sidebar CTA */
.sidebar-cta {
background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
color: #fff;
border: none;
text-align: center;
}
.sidebar-cta > i {
font-size: 28px;
color: var(--accent);
margin-bottom: 12px;
display: block;
}
.sidebar-cta h4 {
color: #fff;
font-size: 17px;
margin-bottom: 8px;
}
.sidebar-cta p {
font-size: 13px;
color: rgba(255,255,255,.75);
line-height: 1.5;
margin: 0 0 16px;
}
.sidebar-cta .btn-primary {
background: #fff;
color: #111;
}
.sidebar-cta .btn-primary:hover {
background: var(--accent);
color: #fff;
}
/* Track order form */
.track-order-form {
background: #fafafa;
border-radius: 10px;
padding: 24px;
margin: 24px 0;
border: 1px solid #f0f0f0;
}
.track-order-form label {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #666;
display: block;
margin-bottom: 8px;
}
.track-order-form input {
width: 100%;
padding: 14px 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font: inherit;
font-size: 15px;
outline: none;
transition: border-color .2s, box-shadow .2s;
background: #fff;
margin-bottom: 16px;
}
.track-order-form input:focus {
border-color: #111;
box-shadow: 0 0 0 4px rgba(17,17,17,.06);
}
/* Order status result */
.order-status-card {
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 12px;
padding: 28px;
margin: 24px 0 32px;
box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.order-status-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 22px;
}
.order-label {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: #888;
margin: 0 0 4px;
}
.order-number {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
color: #111;
margin: 0;
}
.order-status-badge {
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.status-pending { background: #fef3c7; color: #92400e; }
.status-processing { background: #dbeafe; color: #1e40af; }
.status-shipped { background: #e0e7ff; color: #3730a3; }
.status-delivered { background: #d1fae5; color: #065f46; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.order-status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 20px;
margin-bottom: 28px;
}
.order-status-grid .label {
display: block;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #888;
margin-bottom: 6px;
}
.order-status-grid strong {
font-size: 15px;
color: #111;
font-weight: 600;
}
/* Progress steps */
.order-progress {
display: flex;
justify-content: space-between;
position: relative;
padding: 20px 0 0;
}
.order-progress::before {
content: '';
position: absolute;
top: 30px;
left: 10%;
right: 10%;
height: 2px;
background: #eee;
z-index: 0;
}
.progress-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: relative;
z-index: 1;
}
.progress-step .dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 3px solid #ddd;
transition: all .3s;
}
.progress-step.done .dot {
background: #111;
border-color: #111;
}
.progress-step.active .dot {
background: #c8102e;
border-color: #c8102e;
box-shadow: 0 0 0 5px rgba(200,16,46,.15);
}
.progress-step .label {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: #999;
font-weight: 500;
}
.progress-step.done .label { color: #111; }
.progress-step.active .label { color: #c8102e; font-weight: 600; }
/* Contact form (on contact page) */
.contact-form {
margin-top: 40px;
padding: 32px;
background: #fafafa;
border-radius: 12px;
border: 1px solid #f0f0f0;
}
.contact-form h3 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
margin: 0 0 24px;
color: #111;
display: flex;
align-items: center;
gap: 10px;
}
.contact-form h3 i { color: var(--accent); font-size: 18px; }
.contact-form label { display: block; margin-bottom: 18px; }
.contact-form label > span {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #666;
margin-bottom: 8px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 13px 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font: inherit;
font-size: 15px;
outline: none;
transition: border-color .2s, box-shadow .2s;
background: #fff;
resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #111;
box-shadow: 0 0 0 4px rgba(17,17,17,.06);
}
.contact-form .form-row.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
/* Alerts used on track page */
.alert {
display: flex;
gap: 14px;
padding: 18px 20px;
border-radius: 10px;
margin: 20px 0;
align-items: flex-start;
}
.alert > i { font-size: 18px; margin-top: 2px; }
.alert strong { display: block; margin-bottom: 4px; font-size: 15px; }
.alert p { margin: 0; font-size: 14px; line-height: 1.5; }
.alert.error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
.alert.error > i { color: #dc2626; }
.alert.success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #14532d;
}
.alert.success > i { color: #16a34a; }
/* FAQ specific enhancements */
.content-faq .page-html h3 {
background: #fafafa;
padding: 16px 20px;
border-radius: 8px;
margin-top: 20px;
border-left: 3px solid var(--accent);
}
/* Responsive */
@media (max-width: 992px) {
.page-layout.layout-default {
grid-template-columns: 1fr;
gap: 40px;
}
.page-sidebar {
position: static;
order: 2;
}
.page-hero { height: 240px; }
}
@media (max-width: 768px) {
.page-title-section { padding: 40px 0 24px; }
.page-section { padding: 32px 16px 60px; }
.page-html { font-size: 15px; }
.page-html h2 { margin-top: 32px; }
.page-html table {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.contact-form { padding: 22px; }
.contact-form .form-row.two-col { grid-template-columns: 1fr; gap: 0; }
.order-status-head { flex-direction: column; }
.order-progress::before { left: 8%; right: 8%; }
.progress-step .label { font-size: 9.5px; }
}
@media (max-width: 480px) {
.page-html h2 { font-size: 22px; }
.page-html h3 { font-size: 16px; }
.order-status-card { padding: 20px; }
.order-number { font-size: 18px; }
.progress-step .label { font-size: 9px; letter-spacing: .5px; }
}
/* ============================================
MODERN CART PAGE
============================================ */
.cart-page { padding: 40px 0 80px; background: #fff; }
/* Page head */
.cart-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.cart-title {
font-family: var(--font-serif);
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 500;
color: #111;
margin: 0 0 6px;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 14px;
}
.cart-title i { color: var(--accent); font-size: .7em; }
.cart-subtitle { font-size: 14px; color: #777; margin: 0; }
.cart-subtitle strong { color: #111; }
.cart-continue-link {
font-size: 13px;
font-weight: 500;
color: #111;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid #e5e5e5;
border-radius: 30px;
transition: all .2s;
}
.cart-continue-link:hover {
border-color: #111;
background: #111;
color: #fff;
}
.cart-continue-link i { font-size: 11px; transition: transform .2s; }
.cart-continue-link:hover i { transform: translateX(-3px); }
/* ============================================
EMPTY STATE
============================================ */
.cart-empty {
text-align: center;
padding: 80px 20px;
background: #fafafa;
border-radius: 16px;
border: 1px dashed #e5e5e5;
}
.cart-empty-icon {
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
color: #bbb;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin-bottom: 24px;
border: 1px solid #eee;
box-shadow: 0 12px 30px rgba(0,0,0,.04);
}
.cart-empty h2 {
font-family: var(--font-serif);
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 500;
color: #111;
margin: 0 0 10px;
}
.cart-empty p {
font-size: 15px;
color: #777;
margin: 0 0 32px;
max-width: 420px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.cart-empty-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================
TWO-COLUMN LAYOUT
============================================ */
.cart-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 40px;
align-items: start;
}
.cart-main { min-width: 0; }
/* ============================================
FREE SHIPPING PROGRESS
============================================ */
.shipping-progress {
background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
border: 1px solid #eee;
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 26px;
}
.shipping-progress-done {
background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
border-color: #bbf7d0;
}
.shipping-progress-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.shipping-progress-head p {
margin: 0;
font-size: 13.5px;
color: #444;
display: flex;
align-items: center;
gap: 8px;
}
.shipping-progress-head i { color: var(--accent); font-size: 15px; }
.shipping-progress-done i { color: #16a34a; }
.shipping-progress-head strong { color: #111; }
.shipping-progress-pct {
font-size: 12px;
font-weight: 700;
color: var(--accent);
letter-spacing: .5px;
}
.shipping-progress-bar {
height: 6px;
background: #eee;
border-radius: 3px;
overflow: hidden;
position: relative;
}
.shipping-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), #f43f5e);
border-radius: 3px;
transition: width .6s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.shipping-progress-fill::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
to { transform: translateX(100%); }
}
.text-accent { color: var(--accent); font-weight: 600; }
/* ============================================
CART ITEMS
============================================ */
.cart-items-head {
display: grid;
grid-template-columns: 1fr 100px 150px 100px 40px;
gap: 16px;
padding: 0 20px 12px;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #888;
font-weight: 600;
border-bottom: 1px solid #eee;
}
.cart-items-head span:nth-child(2),
.cart-items-head span:nth-child(4) { text-align: right; }
.cart-items-head span:nth-child(3) { text-align: center; }
.cart-form { margin-top: 8px; }
.cart-items {
list-style: none;
padding: 0;
margin: 0;
}
.cart-item {
display: grid;
grid-template-columns: 100px 1fr 100px 150px 100px 40px;
gap: 16px;
padding: 20px;
border-bottom: 1px solid #f0f0f0;
align-items: center;
transition: background .25s;
position: relative;
}
.cart-item:hover { background: #fafafa; }
/* Image */
.cart-item-image {
display: block;
width: 100px;
height: 125px;
border-radius: 8px;
overflow: hidden;
background: #f5f5f5;
flex-shrink: 0;
}
.cart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s;
}
.cart-item:hover .cart-item-image img { transform: scale(1.05); }
/* Info */
.cart-item-info { min-width: 0; }
.cart-item-name {
display: block;
font-size: 15px;
font-weight: 500;
color: #111;
margin-bottom: 6px;
line-height: 1.35;
transition: color .2s;
}
.cart-item-name:hover { color: var(--accent); }
.cart-item-variant {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #777;
background: #f5f5f5;
padding: 4px 10px;
border-radius: 12px;
margin-bottom: 8px;
}
.cart-item-variant i { font-size: 10px; }
.cart-item-stock {
display: block;
font-size: 11.5px;
font-weight: 500;
color: #16a34a;
letter-spacing: .3px;
}
.cart-item-stock i { font-size: 11px; margin-right: 3px; }
/* Low stock variant */
.cart-item-stock:has(.fa-triangle-exclamation) { color: #f59e0b; }
.cart-item-price-mobile { display: none; font-size: 14px; font-weight: 600; color: #111; margin-top: 6px; }
/* Unit price + total */
.cart-item-price,
.cart-item-total {
font-size: 15px;
color: #333;
text-align: right;
font-weight: 500;
}
.cart-item-total {
font-weight: 700;
color: #111;
}
/* Quantity selector */
.cart-item-qty {
display: inline-flex;
align-items: center;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background: #fff;
justify-self: center;
height: 40px;
}
.qty-btn {
width: 34px;
height: 38px;
background: transparent;
border: none;
cursor: pointer;
color: #666;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
font-size: 12px;
}
.qty-btn:hover { background: #111; color: #fff; }
.qty-btn:active { transform: scale(.94); }
.qty-input {
width: 42px;
height: 38px;
border: none;
text-align: center;
font: inherit;
font-weight: 600;
font-size: 14px;
outline: none;
background: #fff;
color: #111;
-moz-appearance: textfield;
appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Remove */
.cart-item-remove {
width: 36px;
height: 36px;
border-radius: 50%;
background: transparent;
border: 1px solid transparent;
color: #aaa;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .2s;
justify-self: end;
font-size: 14px;
}
.cart-item-remove:hover {
background: #fef2f2;
color: #dc2626;
border-color: #fecaca;
}
/* ============================================
CART FORM ACTIONS
============================================ */
.cart-form-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 22px 0 8px;
flex-wrap: wrap;
}
.btn-sm {
padding: 11px 22px;
font-size: 12px;
}
.cart-clear-btn {
background: transparent;
border: none;
color: #999;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color .2s;
padding: 8px 4px;
}
.cart-clear-btn:hover { color: #dc2626; }
/* ============================================
TRUST BADGES
============================================ */
.cart-trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 32px;
padding: 22px;
background: #fafafa;
border-radius: 12px;
border: 1px solid #f0f0f0;
}
.trust-badge {
display: flex;
align-items: center;
gap: 12px;
}
.trust-badge i {
font-size: 20px;
color: var(--accent);
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid #eee;
}
.trust-badge strong { display: block; font-size: 13px; color: #111; font-weight: 600; }
.trust-badge span { font-size: 11.5px; color: #888; }
/* ============================================
ORDER SUMMARY (sticky)
============================================ */
.cart-summary {
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 14px;
padding: 26px;
position: sticky;
top: 90px;
align-self: start;
}
.summary-title {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
color: #111;
margin: 0 0 20px;
letter-spacing: .3px;
}
.summary-list {
list-style: none;
padding: 0;
margin: 0 0 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.summary-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
font-size: 14px;
color: #555;
}
.summary-value { font-weight: 500; color: #111; text-align: right; }
.summary-divider {
height: 1px;
background: #e5e5e5;
margin: 4px 0 16px;
}
.summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 20px;
padding-top: 4px;
}
.summary-total span {
font-size: 14px;
font-weight: 500;
color: #111;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.summary-total strong {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
color: #111;
letter-spacing: -0.3px;
}
.btn-checkout {
padding: 16px 24px;
font-size: 13px;
letter-spacing: 2px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 8px;
margin-bottom: 18px;
}
.btn-checkout i { font-size: 12px; }
/* Express checkout */
.express-checkout { margin-bottom: 18px; }
.express-divider {
position: relative;
text-align: center;
margin: 18px 0;
}
.express-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e5e5e5;
}
.express-divider span {
position: relative;
background: #fafafa;
padding: 0 14px;
font-size: 11px;
color: #999;
letter-spacing: 1px;
text-transform: uppercase;
}
.express-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.express-btn {
padding: 12px 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 12px;
font-weight: 600;
color: #333;
cursor: pointer;
transition: all .2s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.express-btn:hover:not(:disabled) {
border-color: #111;
color: #111;
transform: translateY(-1px);
}
.express-btn:disabled {
cursor: not-allowed;
opacity: .55;
}
.express-paystack i { color: #00c3f7; }
/* Coupon */
.coupon-box {
border-top: 1px solid #eee;
padding-top: 18px;
margin-top: 18px;
}
.coupon-toggle {
width: 100%;
background: transparent;
border: none;
padding: 8px 0;
display: flex;
align-items: center;
gap: 10px;
font: inherit;
font-size: 13.5px;
color: #444;
cursor: pointer;
transition: color .2s;
text-align: left;
}
.coupon-toggle:hover { color: var(--accent); }
.coupon-toggle > i:first-child { color: var(--accent); }
.coupon-caret {
margin-left: auto;
font-size: 11px;
transition: transform .25s;
color: #999;
}
.coupon-toggle.open .coupon-caret { transform: rotate(180deg); }
.coupon-form { margin-top: 12px; }
.coupon-input-wrap {
display: flex;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: border-color .2s;
}
.coupon-input-wrap:focus-within { border-color: #111; }
.coupon-input-wrap input {
flex: 1;
border: none;
padding: 12px 14px;
font: inherit;
font-size: 14px;
outline: none;
min-width: 0;
text-transform: uppercase;
letter-spacing: .5px;
}
.coupon-input-wrap button {
background: #111;
color: #fff;
border: none;
padding: 0 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: background .2s;
font-family: inherit;
}
.coupon-input-wrap button:hover { background: var(--accent); }
.coupon-msg {
font-size: 12px;
margin: 8px 0 0;
min-height: 16px;
}
.coupon-msg.info { color: #888; }
.coupon-msg.success { color: #16a34a; }
.coupon-msg.error { color: #dc2626; }
/* Payment methods */
.summary-payments {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #eee;
text-align: center;
}
.summary-payments-label {
font-size: 10.5px;
letter-spacing: 2px;
text-transform: uppercase;
color: #999;
display: block;
margin-bottom: 10px;
}
.summary-payments-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
color: #888;
flex-wrap: wrap;
}
.summary-payments-icons i { font-size: 26px; }
.summary-payments-icons .fa-cc-visa { color: #1a1f71; }
.summary-payments-icons .fa-cc-mastercard { color: #eb001b; }
.paystack-mark {
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
color: #00c3f7;
text-transform: uppercase;
}
/* ============================================
RECOMMENDATIONS
============================================ */
.cart-recommendations { margin-top: 80px; padding-top: 60px; border-top: 1px solid #f0f0f0; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 992px) {
.cart-layout { grid-template-columns: 1fr; gap: 32px; }
.cart-summary { position: static; }
.cart-items-head { display: none; }
.cart-item {
grid-template-columns: 90px 1fr 40px;
grid-template-areas:
"image info remove"
"image qty total";
gap: 10px 14px;
padding: 18px 0;
}
.cart-item-image { grid-area: image; width: 90px; height: 110px; }
.cart-item-info { grid-area: info; }
.cart-item-remove { grid-area: remove; align-self: start; }
.cart-item-qty { grid-area: qty; justify-self: start; margin-top: 4px; }
.cart-item-total {
grid-area: total;
align-self: center;
justify-self: end;
display: block !important;
font-size: 16px;
}
.cart-item-price.hide-mobile { display: none; }
.cart-item-price-mobile { display: block; }
.cart-trust { grid-template-columns: 1fr; }
.trust-badge { justify-content: flex-start; }
}
@media (max-width: 640px) {
.cart-page { padding: 20px 0 60px; }
.cart-head { margin-bottom: 22px; }
.cart-title { font-size: 24px; }
.cart-continue-link { width: 100%; justify-content: center; }
.shipping-progress { padding: 14px 16px; }
.shipping-progress-head p { font-size: 12.5px; }
.cart-item {
grid-template-columns: 80px 1fr 32px;
padding: 16px 0;
}
.cart-item-image { width: 80px; height: 100px; }
.cart-item-name { font-size: 14px; }
.cart-item-qty { height: 36px; }
.qty-btn { width: 30px; height: 34px; }
.qty-input { width: 36px; height: 34px; font-size: 13px; }
.cart-summary { padding: 20px; border-radius: 12px; }
.summary-total strong { font-size: 22px; }
.express-buttons { grid-template-columns: 1fr; }
.cart-empty { padding: 50px 20px; }
.cart-empty-icon { width: 80px; height: 80px; font-size: 32px; }
.cart-empty-actions { flex-direction: column; }
.cart-empty-actions .btn { width: 100%; }
}
@media (max-width: 380px) {
.cart-item { grid-template-columns: 70px 1fr 30px; gap: 8px 12px; }
.cart-item-image { width: 70px; height: 88px; }
}
/* ============================================
WISHLIST PAGE
============================================ */
.wishlist-page {
padding: 40px 0 80px;
background: #fff;
}
/* ---------- Page head ---------- */
.wishlist-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.wishlist-title {
font-family: var(--font-serif);
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 500;
color: #111;
margin: 0 0 6px;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 14px;
}
.wishlist-title i { color: var(--accent); font-size: .7em; }
.wishlist-subtitle { font-size: 14px; color: #777; margin: 0; }
.wishlist-subtitle strong { color: #111; }
.wishlist-head-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.wishlist-continue-link {
font-size: 13px;
font-weight: 500;
color: #111;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid #e5e5e5;
border-radius: 30px;
transition: all .2s;
}
.wishlist-continue-link:hover {
border-color: #111;
background: #111;
color: #fff;
}
.wishlist-continue-link i { font-size: 11px; transition: transform .2s; }
.wishlist-continue-link:hover i { transform: translateX(-3px); }
.wishlist-clear-btn {
background: transparent;
border: none;
color: #999;
font: inherit;
font-size: 13px;
cursor: pointer;
padding: 10px 4px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color .2s;
}
.wishlist-clear-btn:hover { color: #dc2626; }
/* ---------- Empty state ---------- */
.wishlist-empty {
text-align: center;
padding: 70px 20px;
background: #fafafa;
border-radius: 16px;
border: 1px dashed #e5e5e5;
}
.wishlist-empty-icon {
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
color: #d4d4d4;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin-bottom: 24px;
border: 1px solid #eee;
box-shadow: 0 12px 30px rgba(0,0,0,.04);
}
.wishlist-empty h2 {
font-family: var(--font-serif);
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 500;
color: #111;
margin: 0 0 10px;
}
.wishlist-empty p {
font-size: 15px;
color: #777;
margin: 0 0 32px;
max-width: 460px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.wishlist-empty p i {
color: var(--accent);
font-size: 14px;
vertical-align: middle;
}
.wishlist-empty-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.wishlist-empty-actions .btn i { margin-right: 8px; }
/* ---------- Stats strip ---------- */
.wishlist-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 40px;
padding: 20px 24px;
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 12px;
}
.wishlist-stat {
display: flex;
align-items: center;
gap: 14px;
}
.wishlist-stat .stat-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: #fff;
border: 1px solid #eee;
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.wishlist-stat .stat-value {
display: block;
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
color: #111;
line-height: 1.1;
letter-spacing: -0.2px;
}
.wishlist-stat .stat-label {
font-size: 11.5px;
letter-spacing: 1px;
text-transform: uppercase;
color: #888;
font-weight: 500;
margin-top: 3px;
display: block;
}
/* ---------- Sections ---------- */
.wishlist-section { margin-bottom: 60px; }
.wishlist-section:last-child { margin-bottom: 0; }
.wishlist-section-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 14px;
border-bottom: 1px solid #f0f0f0;
flex-wrap: wrap;
}
.wishlist-section-head h2 {
font-family: var(--font-serif);
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 500;
color: #111;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.wishlist-section-head p {
font-size: 13.5px;
color: #888;
margin: 0;
}
.count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 8px;
border-radius: 13px;
background: #111;
color: #fff;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
}
.count-badge-muted { background: #e5e5e5; color: #666; }
/* ---------- Grid ---------- */
.wishlist-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 24px;
}
/* ---------- Card ---------- */
.wishlist-card {
position: relative;
background: #fff;
border-radius: 12px;
overflow: hidden;
border: 1px solid #f0f0f0;
transition: transform .3s, box-shadow .3s, border-color .3s, opacity .3s;
display: flex;
flex-direction: column;
}
.wishlist-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0,0,0,.08);
border-color: #e5e5e5;
}
.wishlist-card.removing {
pointer-events: none;
opacity: .6;
transform: scale(.96);
}
/* Remove button */
.wishlist-card-remove {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.95);
backdrop-filter: blur(6px);
border: none;
cursor: pointer;
color: #666;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
opacity: 0;
transform: scale(.85);
transition: all .25s;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.wishlist-card:hover .wishlist-card-remove {
opacity: 1;
transform: scale(1);
}
.wishlist-card-remove:hover {
background: #111;
color: #fff;
}
/* Badges */
.wishlist-card-badges {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: flex;
gap: 6px;
flex-direction: column;
}
.wishlist-card-badges .badge {
padding: 5px 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
border-radius: 3px;
color: #fff;
}
.wishlist-card-badges .badge.new { background: #111; }
.wishlist-card-badges .badge.sale { background: var(--accent); }
.wishlist-card-badges .badge.oos { background: #999; }
/* Image */
.wishlist-card-image {
display: block;
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
background: #f5f5f5;
}
.wishlist-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.wishlist-card:hover .wishlist-card-image img { transform: scale(1.05); }
/* Info */
.wishlist-card-info {
padding: 16px 16px 8px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.wishlist-card-category {
font-size: 10.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #999;
font-weight: 600;
margin: 0;
}
.wishlist-card-name {
font-size: 14.5px;
font-weight: 500;
color: #111;
line-height: 1.35;
margin: 0;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 38px;
transition: color .2s;
}
.wishlist-card-name:hover { color: var(--accent); }
.wishlist-card-price {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: #111;
margin-top: 2px;
flex-wrap: wrap;
}
.wishlist-card-price .price-sale { color: var(--accent); }
.wishlist-card-price .price-old {
color: #999;
text-decoration: line-through;
font-weight: 400;
font-size: 13px;
}
.wishlist-card-stock {
font-size: 11.5px;
color: #f59e0b;
font-weight: 500;
margin: 4px 0 0;
display: flex;
align-items: center;
gap: 5px;
}
/* Actions */
.wishlist-card-actions {
padding: 10px 16px 16px;
display: grid;
grid-template-columns: 1fr 40px;
gap: 8px;
align-items: stretch;
}
.wishlist-move-form { display: flex; }
.wishlist-btn-cart,
.wishlist-btn-notify {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 12px;
background: #111;
color: #fff;
border: none;
border-radius: 8px;
font: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, transform .15s;
white-space: nowrap;
}
.wishlist-btn-cart:hover { background: var(--accent); }
.wishlist-btn-cart:active { transform: scale(.97); }
.wishlist-btn-cart i { font-size: 12px; }
.wishlist-btn-notify {
background: #f0f0f0;
color: #999;
cursor: not-allowed;
}
.wishlist-btn-notify i { font-size: 12px; }
.wishlist-btn-view {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 100%;
border-radius: 8px;
border: 1px solid #e5e5e5;
background: #fff;
color: #111;
transition: all .2s;
}
.wishlist-btn-view:hover {
background: #111;
border-color: #111;
color: #fff;
}
.wishlist-btn-view i { font-size: 13px; }
/* Out of stock card */
.wishlist-card-oos .wishlist-card-image img {
filter: grayscale(.6) brightness(.85);
}
.oos-overlay {
position: absolute;
inset: 0;
background: rgba(255,255,255,.1);
pointer-events: none;
}
/* ---------- Recommendations (empty wishlist) ---------- */
.wishlist-recommendations {
margin-top: 70px;
padding-top: 50px;
border-top: 1px solid #f0f0f0;
}
/* ---------- Toast ---------- */
.wishlist-toast {
position: fixed;
bottom: 32px;
left: 50%;
transform: translate(-50%, 24px);
background: #111;
color: #fff;
padding: 14px 24px;
border-radius: 30px;
font-size: 13.5px;
font-weight: 500;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
z-index: 10000;
opacity: 0;
transition: opacity .3s, transform .3s;
pointer-events: none;
max-width: 92vw;
text-align: center;
}
.wishlist-toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
.wishlist-toast.success { background: #16a34a; }
.wishlist-toast.error { background: #dc2626; }
/* ---------- Responsive ---------- */
@media (max-width: 992px) {
.wishlist-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 18px;
}
}
@media (max-width: 768px) {
.wishlist-page { padding: 24px 0 60px; }
.wishlist-head { margin-bottom: 24px; }
.wishlist-title { font-size: 24px; }
.wishlist-head-actions { width: 100%; justify-content: space-between; }
.wishlist-stats {
grid-template-columns: 1fr;
gap: 12px;
padding: 16px 18px;
}
.wishlist-stat .stat-value { font-size: 17px; }
.wishlist-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.wishlist-card-info { padding: 12px 12px 6px; }
.wishlist-card-name { font-size: 13px; min-height: 34px; }
.wishlist-card-price { font-size: 14px; }
.wishlist-card-price .price-old { font-size: 12px; }
.wishlist-card-actions {
padding: 8px 12px 12px;
grid-template-columns: 1fr 36px;
gap: 6px;
}
.wishlist-btn-cart,
.wishlist-btn-notify {
padding: 10px 8px;
font-size: 10.5px;
letter-spacing: .8px;
}
.wishlist-btn-view { width: 36px; }
.wishlist-card-remove {
opacity: 1;
transform: scale(1);
width: 28px;
height: 28px;
font-size: 11px;
top: 8px;
right: 8px;
}
.wishlist-empty { padding: 50px 20px; }
.wishlist-empty-icon { width: 80px; height: 80px; font-size: 32px; }
.wishlist-empty-actions { flex-direction: column; }
.wishlist-empty-actions .btn { width: 100%; }
.wishlist-toast { bottom: 20px; padding: 12px 20px; font-size: 12.5px; }
}
@media (max-width: 380px) {
.wishlist-grid { grid-template-columns: 1fr; }
.wishlist-card-name { min-height: auto; }
}
.product-card { position: relative; }
.product-wishlist-btn {
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255,255,255,.95);
backdrop-filter: blur(6px);
border: none;
cursor: pointer;
color: #333;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all .25s;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
opacity: 0;
transform: scale(.85);
}
.product-card:hover .product-wishlist-btn {
opacity: 1;
transform: scale(1);
}
.product-wishlist-btn:hover {
background: #111;
color: #fff;
}
.product-wishlist-btn.active {
background: var(--accent);
color: #fff;
opacity: 1;
transform: scale(1);
}
@media (max-width: 768px) {
.product-wishlist-btn {
opacity: 1;
transform: scale(1);
width: 30px;
height: 30px;
font-size: 12px;
top: 8px;
right: 8px;
}
}
/* ============================================
MODERN SEARCH PAGE
============================================ */
.search-page {
padding: 40px 0 80px;
background: #fff;
}
/* ---------- Hero search ---------- */
.search-hero {
text-align: center;
padding: 30px 0 40px;
margin-bottom: 30px;
border-bottom: 1px solid #f0f0f0;
}
.search-hero-title {
font-family: var(--font-serif);
font-size: clamp(26px, 3.6vw, 42px);
font-weight: 500;
color: #111;
margin: 0 0 28px;
line-height: 1.15;
letter-spacing: -0.3px;
}
.query-highlight {
color: var(--accent);
position: relative;
display: inline-block;
max-width: 60vw;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
/* Big search bar */
.search-big-form {
display: flex;
align-items: center;
gap: 0;
max-width: 720px;
margin: 0 auto 22px;
background: #fff;
border: 2px solid #111;
border-radius: 60px;
padding: 6px 6px 6px 22px;
transition: box-shadow .25s;
}
.search-big-form:focus-within {
box-shadow: 0 0 0 5px rgba(17,17,17,.08);
}
.search-big-icon {
color: #888;
font-size: 18px;
flex-shrink: 0;
margin-right: 14px;
}
.search-big-form input {
flex: 1;
border: none;
outline: none;
font: inherit;
font-size: 16px;
padding: 12px 0;
background: transparent;
color: #111;
min-width: 0;
}
.search-big-form input::placeholder { color: #999; }
.search-big-form button {
background: #111;
color: #fff;
border: none;
padding: 14px 26px;
border-radius: 50px;
font: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background .2s, transform .15s;
flex-shrink: 0;
}
.search-big-form button:hover { background: var(--accent); }
.search-big-form button:active { transform: scale(.97); }
.search-big-form button i { font-size: 11px; transition: transform .2s; }
.search-big-form button:hover i { transform: translateX(3px); }
/* Popular chips */
.search-popular {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 13px;
max-width: 720px;
margin: 0 auto;
}
.search-popular-label {
color: #888;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
}
.search-popular-label i { color: #f59e0b; font-size: 12px; }
.search-popular-chip {
padding: 7px 14px;
background: #f5f5f5;
border-radius: 20px;
color: #444;
font-size: 12.5px;
transition: all .2s;
}
.search-popular-chip:hover {
background: #111;
color: #fff;
transform: translateY(-2px);
}
/* ---------- Result meta (count + sort) ---------- */
.search-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 0 0 24px;
margin-bottom: 24px;
border-bottom: 1px solid #f0f0f0;
flex-wrap: wrap;
}
.search-meta-info {
font-size: 14px;
color: #666;
}
.search-meta-info strong { color: #111; font-weight: 600; }
.search-sort-form {
display: flex;
align-items: center;
gap: 10px;
}
.search-sort-form label {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #888;
display: inline-flex;
align-items: center;
gap: 6px;
}
.search-sort-form label i { font-size: 11px; }
.search-sort-form select {
appearance: none;
-webkit-appearance: none;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 9px 38px 9px 14px;
font: inherit;
font-size: 13px;
color: #111;
cursor: pointer;
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.search-sort-form select:focus {
border-color: #111;
box-shadow: 0 0 0 3px rgba(17,17,17,.06);
}
/* ---------- Results grid ---------- */
.search-results-grid {
margin-bottom: 20px;
}
/* ---------- Empty (no results) ---------- */
.search-empty {
text-align: center;
padding: 60px 20px 30px;
}
.search-empty-icon {
width: 96px;
height: 96px;
border-radius: 50%;
background: #fafafa;
border: 1px solid #eee;
color: #ccc;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin-bottom: 22px;
}
.search-empty h2 {
font-family: var(--font-serif);
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 500;
color: #111;
margin: 0 0 10px;
}
.search-empty p {
font-size: 15px;
color: #666;
margin: 0 0 18px;
line-height: 1.6;
}
.search-empty p strong { color: #111; }
.search-empty-tips {
list-style: none;
padding: 0;
margin: 0 auto 30px;
max-width: 340px;
text-align: left;
display: flex;
flex-direction: column;
gap: 8px;
}
.search-empty-tips li {
font-size: 13.5px;
color: #666;
display: flex;
align-items: center;
gap: 10px;
}
.search-empty-tips i { color: #16a34a; font-size: 12px; }
.search-empty-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.search-empty-actions .btn i { margin-right: 6px; font-size: 12px; }
/* ---------- Empty query state ---------- */
.search-start {
text-align: center;
padding: 40px 20px 20px;
}
.search-start-icon {
width: 96px;
height: 96px;
border-radius: 50%;
background: #fafafa;
border: 1px solid #eee;
color: #ccc;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin-bottom: 20px;
}
.search-start h2 {
font-family: var(--font-serif);
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 500;
color: #111;
margin: 0 0 8px;
}
.search-start p {
font-size: 14.5px;
color: #777;
margin: 0 0 32px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
/* Category shortcut cards */
.search-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
max-width: 780px;
margin: 0 auto;
}
.search-cat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 22px 12px;
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 12px;
color: #111;
font-size: 12.5px;
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
transition: all .25s;
}
.search-cat-card i {
font-size: 20px;
color: var(--accent);
transition: transform .25s;
}
.search-cat-card:hover {
background: #111;
color: #fff;
border-color: #111;
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(0,0,0,.08);
}
.search-cat-card:hover i {
color: #fff;
transform: scale(1.1);
}
/* ---------- Suggestions ---------- */
.search-suggestions {
margin-top: 70px;
padding-top: 50px;
border-top: 1px solid #f0f0f0;
}
/* ---------- Pagination ---------- */
.search-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid #f0f0f0;
flex-wrap: wrap;
}
.page-link,
.page-num {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 40px;
height: 40px;
padding: 0 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: #333;
background: #fff;
border: 1px solid #e5e5e5;
transition: all .2s;
text-decoration: none;
letter-spacing: .3px;
}
.page-link i { font-size: 10px; }
.page-link:hover:not(.disabled),
.page-num:hover:not(.active) {
background: #111;
color: #fff;
border-color: #111;
}
.page-num.active {
background: #111;
color: #fff;
border-color: #111;
font-weight: 600;
pointer-events: none;
}
.page-link.disabled {
opacity: .4;
cursor: not-allowed;
pointer-events: none;
}
.page-numbers {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.page-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 40px;
color: #999;
font-size: 14px;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 768px) {
.search-page { padding: 20px 0 60px; }
.search-hero { padding: 20px 0 30px; }
.search-big-form {
padding: 5px 5px 5px 18px;
border-width: 1.5px;
}
.search-big-form input { font-size: 15px; padding: 10px 0; }
.search-big-form button {
padding: 12px 18px;
font-size: 11.5px;
letter-spacing: 1px;
}
.search-big-form button span { display: none; }
.search-big-icon { font-size: 16px; margin-right: 10px; }
.query-highlight { max-width: 80vw; }
.search-popular { gap: 8px; }
.search-popular-chip { font-size: 11.5px; padding: 6px 12px; }
.search-popular-label { font-size: 12px; width: 100%; justify-content: center; margin-bottom: 4px; }
.search-meta { flex-direction: column; align-items: stretch; gap: 12px; }
.search-sort-form { justify-content: space-between; }
.search-sort-form select { flex: 1; max-width: 60%; }
.search-empty { padding: 40px 16px 20px; }
.search-empty-icon { width: 76px; height: 76px; font-size: 28px; }
.search-empty-actions { flex-direction: column; }
.search-empty-actions .btn { width: 100%; }
.search-start { padding: 20px 16px; }
.search-start-icon { width: 76px; height: 76px; font-size: 28px; }
.search-categories { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.search-cat-card { padding: 16px 8px; font-size: 11px; }
.search-cat-card i { font-size: 18px; }
.search-pagination { gap: 6px; margin-top: 40px; padding-top: 24px; }
.page-link, .page-num { min-width: 36px; height: 36px; font-size: 12px; padding: 0 10px; }
.page-prev, .page-next { flex: 1; max-width: 110px; }
}
@media (max-width: 480px) {
.search-hero-title { font-size: 22px; margin-bottom: 20px; }
.search-big-form input { font-size: 14px; }
.search-big-form button { padding: 11px 14px; }
.search-suggestions { margin-top: 50px; padding-top: 36px; }
.page-numbers { display: none; } /* hide numeric page list on very small screens */
}
.search-autocomplete {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,.1);
overflow: hidden;
z-index: 20;
text-align: left;
}
.search-big-form { position: relative; }
.ac-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
transition: background .15s;
border-bottom: 1px solid #f5f5f5;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: #fafafa; }
.ac-item img {
width: 44px;
height: 55px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.ac-item strong {
display: block;
font-size: 14px;
color: #111;
font-weight: 500;
margin-bottom: 2px;
}
.ac-item span { font-size: 12.5px; color: #888; }
.ac-empty {
padding: 18px;
text-align: center;
font-size: 13px;
color: #999;
}
/* ============================================
MODERN CATEGORY / LISTING PAGE
============================================ */
.listing-page {
padding: 30px 0 80px;
background: #fff;
}
/* ---------- Head ---------- */
.listing-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 26px;
padding-bottom: 22px;
border-bottom: 1px solid #f0f0f0;
flex-wrap: wrap;
}
.listing-head-text { min-width: 0; }
.listing-title {
font-family: var(--font-serif);
font-size: clamp(26px, 3.6vw, 42px);
font-weight: 500;
color: #111;
margin: 0 0 8px;
letter-spacing: -0.3px;
line-height: 1.15;
display: flex;
align-items: center;
gap: 14px;
}
.listing-title i { font-size: .65em; }
.text-accent { color: var(--accent); }
.listing-meta {
font-size: 14px;
color: #777;
margin: 0;
}
.listing-meta strong { color: #111; font-weight: 600; }
/* Sort form */
.listing-sort-form {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.listing-sort-form label {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #888;
display: inline-flex;
align-items: center;
gap: 6px;
}
.listing-sort-form label i { font-size: 11px; }
.listing-sort-form select {
appearance: none;
-webkit-appearance: none;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 10px 38px 10px 14px;
font: inherit;
font-size: 13px;
color: #111;
cursor: pointer;
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.listing-sort-form select:focus {
border-color: #111;
box-shadow: 0 0 0 3px rgba(17,17,17,.06);
}
/* ---------- Chips ---------- */
.listing-chips {
display: flex;
gap: 8px;
margin-bottom: 28px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.listing-chips::-webkit-scrollbar { display: none; }
.listing-chip {
flex-shrink: 0;
padding: 9px 18px;
background: #f5f5f5;
border: 1px solid transparent;
border-radius: 30px;
font-size: 13px;
color: #333;
font-weight: 500;
white-space: nowrap;
transition: all .2s;
}
.listing-chip:hover {
background: #111;
color: #fff;
transform: translateY(-2px);
}
.listing-chip.active {
background: #111;
color: #fff;
border-color: #111;
}
/* ---------- Description ---------- */
.listing-description {
background: #fafafa;
border-left: 3px solid var(--accent);
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin-bottom: 28px;
font-size: 14.5px;
line-height: 1.6;
color: #555;
}
/* ---------- Grid ---------- */
.listing-grid { margin-bottom: 20px; }
/* ---------- Empty state ---------- */
.listing-empty {
text-align: center;
padding: 70px 20px 40px;
background: #fafafa;
border-radius: 16px;
border: 1px dashed #e5e5e5;
margin: 20px 0 50px;
}
.listing-empty-icon {
width: 96px;
height: 96px;
border-radius: 50%;
background: #fff;
border: 1px solid #eee;
color: #d4d4d4;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin-bottom: 22px;
box-shadow: 0 12px 30px rgba(0,0,0,.04);
}
.listing-empty h2 {
font-family: var(--font-serif);
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 500;
color: #111;
margin: 0 0 10px;
}
.listing-empty p {
font-size: 15px;
color: #777;
margin: 0 auto 30px;
max-width: 480px;
line-height: 1.6;
}
.listing-empty-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.listing-empty-actions .btn i { margin-right: 6px; font-size: 12px; }
/* ---------- Recommendations ---------- */
.listing-recommendations {
margin-top: 60px;
padding-top: 50px;
border-top: 1px solid #f0f0f0;
}
/* ---------- Pagination ---------- */
.listing-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid #f0f0f0;
flex-wrap: wrap;
}
.page-link,
.page-num {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 40px;
height: 40px;
padding: 0 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: #333;
background: #fff;
border: 1px solid #e5e5e5;
transition: all .2s;
text-decoration: none;
letter-spacing: .3px;
}
.page-link i { font-size: 10px; }
.page-link:hover:not(.disabled),
.page-num:hover:not(.active) {
background: #111;
color: #fff;
border-color: #111;
}
.page-num.active {
background: #111;
color: #fff;
border-color: #111;
font-weight: 600;
pointer-events: none;
}
.page-link.disabled {
opacity: .4;
cursor: not-allowed;
pointer-events: none;
}
.page-numbers {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.page-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 40px;
color: #999;
font-size: 14px;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 768px) {
.listing-page { padding: 20px 0 60px; }
.listing-head {
flex-direction: column;
align-items: stretch;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 18px;
}
.listing-title { font-size: 24px; }
.listing-sort-form {
justify-content: space-between;
width: 100%;
}
.listing-sort-form select {
flex: 1;
max-width: 65%;
}
.listing-chips {
margin-bottom: 22px;
gap: 6px;
}
.listing-chip { padding: 8px 14px; font-size: 12px; }
.listing-empty {
padding: 50px 20px 30px;
margin: 10px 0 40px;
}
.listing-empty-icon { width: 76px; height: 76px; font-size: 28px; }
.listing-empty-actions { flex-direction: column; }
.listing-empty-actions .btn { width: 100%; }
.listing-pagination {
gap: 6px;
margin-top: 40px;
padding-top: 24px;
}
.page-link, .page-num { min-width: 36px; height: 36px; font-size: 12px; padding: 0 10px; }
.page-prev, .page-next { flex: 1; max-width: 110px; }
}
@media (max-width: 480px) {
.listing-title { font-size: 22px; gap: 10px; }
.listing-meta { font-size: 13px; }
.page-numbers { display: none; }
.page-prev, .page-next { max-width: 100%; flex: 1; }
}
/* ============================================
MODERN CHECKOUT PAGE
============================================ */
/* ---------- Progress bar ---------- */
.checkout-progress {
background: #fafafa;
border-bottom: 1px solid #f0f0f0;
padding: 24px 0;
}
.progress-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 0;
position: relative;
}
.progress-steps li {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
max-width: 180px;
position: relative;
}
.progress-steps li::before {
content: '';
position: absolute;
top: 20px;
left: -50%;
width: 100%;
height: 2px;
background: #e5e5e5;
z-index: 0;
}
.progress-steps li:first-child::before { display: none; }
.progress-steps li.done::before,
.progress-steps li.active::before { background: #111; }
.step-icon {
position: relative;
z-index: 1;
width: 42px;
height: 42px;
border-radius: 50%;
background: #fff;
border: 2px solid #e5e5e5;
color: #999;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
transition: all .3s;
}
.progress-steps li.done .step-icon {
background: #111;
border-color: #111;
color: #fff;
font-size: 12px;
}
.progress-steps li.active .step-icon {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 0 0 6px rgba(200, 16, 46, .12);
}
.step-label {
font-size: 11.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
color: #999;
}
.progress-steps li.done .step-label,
.progress-steps li.active .step-label { color: #111; }
/* ---------- Checkout page ---------- */
.checkout-page {
padding: 40px 0 80px;
background: #fff;
}
.checkout-head {
text-align: center;
margin-bottom: 36px;
}
.checkout-title {
font-family: var(--font-serif);
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 500;
color: #111;
margin: 0 0 8px;
letter-spacing: -0.3px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.checkout-title i { color: var(--accent); font-size: .7em; }
.checkout-subtitle {
font-size: 14px;
color: #777;
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.checkout-subtitle i { color: #999; font-size: 13px; }
.checkout-subtitle a {
color: var(--accent);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- Alert ---------- */
.checkout-alert {
display: flex;
gap: 14px;
padding: 18px 20px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 10px;
margin-bottom: 28px;
color: #991b1b;
}
.checkout-alert > i { color: #dc2626; font-size: 20px; margin-top: 2px; }
.checkout-alert strong { display: block; margin-bottom: 6px; font-size: 14px; }
.checkout-alert ul { margin: 0; padding-left: 18px; }
.checkout-alert li { font-size: 13.5px; line-height: 1.6; }
/* ---------- Layout ---------- */
.checkout-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 40px;
align-items: start;
}
.checkout-form { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
/* ---------- Form cards ---------- */
.form-card {
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 14px;
overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.form-card:focus-within {
border-color: #d4d4d4;
box-shadow: 0 6px 24px rgba(0,0,0,.04);
}
.form-card-head {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
background: #fafafa;
border-bottom: 1px solid #f0f0f0;
}
.form-card-step {
width: 30px;
height: 30px;
border-radius: 50%;
background: #111;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
}
.form-card-head h2 {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 500;
color: #111;
margin: 0;
letter-spacing: .3px;
}
.form-card-head h2 small {
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 400;
letter-spacing: 1px;
color: #999;
text-transform: uppercase;
margin-left: 6px;
}
.form-card-body {
padding: 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* ---------- Fields ---------- */
.field {
display: block;
position: relative;
}
.field-label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: .8px;
color: #444;
margin-bottom: 8px;
text-transform: uppercase;
}
.field-label em {
color: var(--accent);
font-style: normal;
}
.field-label small {
font-weight: 400;
color: #999;
text-transform: none;
letter-spacing: 0;
font-size: 11.5px;
margin-left: 4px;
}
.field-input {
position: relative;
display: block;
}
.field-icon {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
color: #aaa;
font-size: 14px;
pointer-events: none;
transition: color .2s;
}
.field-input input,
.field-input select,
.field-input textarea {
width: 100%;
padding: 14px 16px;
border: 1.5px solid #e0e0e0;
border-radius: 10px;
font: inherit;
font-size: 15px;
color: #111;
background: #fff;
outline: none;
transition: border-color .2s, box-shadow .2s;
resize: vertical;
}
.field-input input:has(+ .field-icon),
.field-icon ~ input {
padding-left: 44px;
}
.field-input input:focus,
.field-input select:focus,
.field-input textarea:focus {
border-color: #111;
box-shadow: 0 0 0 4px rgba(17,17,17,.06);
}
.field-input input:focus ~ .field-icon,
.field-input select:focus ~ .field-icon {
color: #111;
}
.field-input select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
cursor: pointer;
}
/* Field states */
.field.has-error .field-input input,
.field.has-error .field-input select,
.field.has-error .field-input textarea {
border-color: #dc2626;
background: #fef2f2;
}
.field.has-error .field-label { color: #dc2626; }
.field.is-valid .field-input input,
.field.is-valid .field-input select {
border-color: #16a34a;
}
.field.is-valid .field-input::after {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #16a34a;
font-size: 12px;
pointer-events: none;
}
/* Two-column rows */
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* ---------- Shipping options ---------- */
.shipping-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.shipping-option {
position: relative;
cursor: pointer;
display: block;
}
.shipping-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.shipping-option-inner {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border: 1.5px solid #e5e5e5;
border-radius: 12px;
transition: all .2s;
background: #fff;
}
.shipping-option:hover .shipping-option-inner {
border-color: #bbb;
}
.shipping-option input:checked + .shipping-option-inner {
border-color: #111;
background: #fafafa;
box-shadow: 0 0 0 3px rgba(17,17,17,.06);
}
.shipping-option-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f0f0f0;
color: #666;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
transition: all .2s;
}
.shipping-option input:checked + .shipping-option-inner .shipping-option-icon {
background: #111;
color: #fff;
}
.shipping-option-info {
flex: 1;
min-width: 0;
}
.shipping-option-info strong {
display: block;
font-size: 14.5px;
font-weight: 600;
color: #111;
margin-bottom: 2px;
}
.shipping-option-info span {
font-size: 12.5px;
color: #888;
}
.shipping-option-price {
font-size: 15px;
font-weight: 700;
color: #111;
letter-spacing: -0.2px;
flex-shrink: 0;
}
/* ---------- Submit ---------- */
.checkout-submit { margin-top: 4px; }
.btn-checkout {
padding: 18px 24px;
font-size: 14px;
letter-spacing: 1.5px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 8px 24px rgba(200, 16, 46, .12);
}
.btn-checkout:hover:not(:disabled) {
box-shadow: 0 12px 30px rgba(200, 16, 46, .22);
transform: translateY(-1px);
}
.btn-checkout:disabled {
opacity: .8;
cursor: not-allowed;
transform: none;
}
.btn-checkout i { font-size: 13px; }
.checkout-submit-note {
font-size: 12.5px;
color: #888;
text-align: center;
margin: 12px 0 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
line-height: 1.5;
}
.checkout-submit-note i { color: #16a34a; font-size: 13px; }
/* ---------- Summary sidebar ---------- */
.checkout-summary {
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 14px;
padding: 26px;
position: sticky;
top: 90px;
}
.summary-title {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
color: #111;
margin: 0 0 20px;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.summary-count {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #888;
}
/* Items */
.summary-items {
list-style: none;
padding: 0;
margin: 0 0 20px;
max-height: 340px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
padding-right: 4px;
}
.summary-items::-webkit-scrollbar { width: 4px; }
.summary-items::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.summary-item {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 12px;
align-items: center;
}
.summary-item-image {
position: relative;
width: 60px;
height: 76px;
border-radius: 8px;
overflow: hidden;
background: #f0f0f0;
flex-shrink: 0;
}
.summary-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.summary-item-qty {
position: absolute;
top: -6px;
right: -6px;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: #111;
color: #fff;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fafafa;
}
.summary-item-info { min-width: 0; }
.summary-item-name {
font-size: 13.5px;
font-weight: 500;
color: #111;
margin: 0 0 3px;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.summary-item-variant {
font-size: 11.5px;
color: #999;
margin: 0;
}
.summary-item-total {
font-size: 14px;
font-weight: 600;
color: #111;
white-space: nowrap;
}
/* Totals */
.summary-divider {
height: 1px;
background: #e5e5e5;
margin: 16px 0;
}
.summary-totals {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.summary-totals li {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
color: #555;
}
.summary-totals li span:last-child {
font-weight: 500;
color: #111;
}
.summary-totals .muted {
font-size: 12.5px;
color: #999 !important;
font-weight: 400 !important;
font-style: italic;
}
.summary-grand-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0;
}
.summary-grand-total span {
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #111;
}
.summary-grand-total strong {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
color: #111;
letter-spacing: -0.3px;
}
/* Trust badges in summary */
.summary-trust {
list-style: none;
padding: 16px 0 0;
margin: 16px 0 0;
border-top: 1px solid #e5e5e5;
display: flex;
flex-direction: column;
gap: 8px;
}
.summary-trust li {
font-size: 12.5px;
color: #666;
display: flex;
align-items: center;
gap: 10px;
}
.summary-trust i {
color: #16a34a;
font-size: 12px;
width: 16px;
text-align: center;
}
/* Back link */
.summary-back {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
font-size: 13px;
color: #666;
transition: color .2s;
}
.summary-back:hover { color: #111; }
.summary-back i { font-size: 11px; transition: transform .2s; }
.summary-back:hover i { transform: translateX(-3px); }
/* Text accent helper (reused from cart) */
.text-accent { color: var(--accent); font-weight: 600; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 992px) {
.checkout-layout {
grid-template-columns: 1fr;
gap: 32px;
}
.checkout-summary { position: static; }
}
@media (max-width: 768px) {
.checkout-progress { padding: 16px 0; }
.progress-steps li { max-width: none; }
.step-icon { width: 36px; height: 36px; font-size: 12px; }
.step-label { font-size: 10px; letter-spacing: 1px; }
.progress-steps li::before { top: 17px; }
.checkout-page { padding: 24px 0 60px; }
.checkout-head { margin-bottom: 22px; text-align: left; }
.checkout-title { font-size: 24px; }
.checkout-subtitle { font-size: 13px; text-align: left; }
.form-card-head { padding: 14px 18px; }
.form-card-head h2 { font-size: 15px; }
.form-card-step { width: 26px; height: 26px; font-size: 12px; }
.form-card-body { padding: 18px; gap: 14px; }
.field-row { grid-template-columns: 1fr; gap: 14px; }
.field-input input,
.field-input select,
.field-input textarea {
font-size: 16px; /* prevents iOS zoom on focus */
padding: 13px 14px;
}
.field-icon { left: 14px; font-size: 13px; }
.field-icon ~ input { padding-left: 40px; }
.shipping-option-inner { padding: 14px; }
.shipping-option-info strong { font-size: 13.5px; }
.shipping-option-price { font-size: 14px; }
.checkout-summary { padding: 20px; border-radius: 12px; }
.summary-grand-total strong { font-size: 22px; }
.summary-items { max-height: 260px; }
}
@media (max-width: 480px) {
.checkout-progress { padding: 12px 0; }
.progress-steps li { gap: 5px; }
.step-icon { width: 30px; height: 30px; font-size: 11px; }
.step-label { font-size: 9px; letter-spacing: .5px; }
.form-card-body { padding: 14px; }
.btn-checkout {
padding: 16px 18px;
font-size: 13px;
letter-spacing: 1px;
}
.summary-item { grid-template-columns: 50px 1fr auto; gap: 10px; }
.summary-item-image { width: 50px; height: 64px; }
.summary-item-name { font-size: 12.5px; }
.summary-item-total { font-size: 13px; }
}
/* ============================================
ORDER SUCCESS / CONFIRMATION PAGE
============================================ */
/* ---------- Banner ---------- */
.confirmation-banner {
background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
border-bottom: 1px solid #e5f4ea;
padding: 60px 20px 50px;
text-align: center;
}
.confirmation-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: #16a34a;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 34px;
margin-bottom: 22px;
box-shadow: 0 12px 30px rgba(22, 163, 74, .25);
animation: confirmPop .6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes confirmPop {
0% { transform: scale(.5); opacity: 0; }
60% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
.confirmation-title {
font-family: var(--font-serif);
font-size: clamp(26px, 3.6vw, 40px);
font-weight: 500;
color: #111;
margin: 0 0 10px;
letter-spacing: -0.3px;
}
.confirmation-subtitle {
font-size: 15.5px;
color: #555;
margin: 0 auto 32px;
max-width: 560px;
line-height: 1.6;
}
.confirmation-meta {
display: inline-flex;
gap: 40px;
flex-wrap: wrap;
justify-content: center;
padding: 20px 32px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.05);
margin-bottom: 22px;
}
.confirmation-meta-item { text-align: center; }
.confirmation-meta-item .label {
display: block;
font-size: 10.5px;
letter-spacing: 2px;
text-transform: uppercase;
color: #888;
margin-bottom: 5px;
font-weight: 600;
}
.confirmation-meta-item strong {
font-family: var(--font-serif);
font-size: 18px;
color: #111;
font-weight: 600;
letter-spacing: .3px;
}
.status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 14px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.status-pending { background: #fef3c7; color: #92400e; }
.status-processing { background: #dbeafe; color: #1e40af; }
.status-shipped { background: #e0e7ff; color: #3730a3; }
.status-delivered { background: #d1fae5; color: #065f46; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.confirmation-email-note {
font-size: 13.5px;
color: #666;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
}
.confirmation-email-note i { color: #16a34a; }
.confirmation-email-note strong { color: #111; }
/* ---------- Page layout ---------- */
.confirmation-page { padding: 50px 0 80px; background: #fff; }
.confirmation-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 32px;
align-items: start;
}
.confirmation-main { display: flex; flex-direction: column; gap: 20px; }
.confirmation-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* ---------- Cards ---------- */
.confirmation-card {
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 14px;
padding: 24px;
}
.confirmation-card.sticky { position: sticky; top: 90px; }
.confirmation-card-title {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 500;
color: #111;
margin: 0 0 18px;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: .3px;
}
.confirmation-card-title i { color: var(--accent); font-size: 14px; }
.count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 11px;
background: #f0f0f0;
color: #555;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
margin-left: auto;
}
/* ---------- Items ---------- */
.confirmation-items { list-style: none; padding: 0; margin: 0; }
.confirmation-item {
display: grid;
grid-template-columns: 70px 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid #f0f0f0;
}
.confirmation-item:last-child { border-bottom: none; padding-bottom: 0; }
.confirmation-item:first-child { padding-top: 0; }
.confirmation-item-image {
width: 70px;
height: 88px;
border-radius: 8px;
overflow: hidden;
background: #f5f5f5;
}
.confirmation-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.confirmation-item-info { min-width: 0; }
.confirmation-item-name {
font-size: 14.5px;
font-weight: 500;
color: #111;
margin: 0 0 4px;
line-height: 1.35;
}
.confirmation-item-variant {
font-size: 12.5px;
color: #888;
margin: 0 0 4px;
}
.confirmation-item-qty {
font-size: 12.5px;
color: #999;
margin: 0;
}
.confirmation-item-total {
font-size: 15px;
font-weight: 700;
color: #111;
white-space: nowrap;
}
/* ---------- Address ---------- */
.confirmation-address {
font-style: normal;
font-size: 14px;
line-height: 1.7;
color: #555;
}
.confirmation-address strong { color: #111; display: block; margin-bottom: 4px; }
.confirmation-address-phone {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
color: #666;
font-size: 13px;
}
/* ---------- Payment ---------- */
.confirmation-payment {
font-size: 14px;
color: #555;
line-height: 1.6;
margin: 0 0 10px;
}
.confirmation-payment strong { color: #111; font-size: 15px; }
.confirmation-payment .muted { color: #888; font-size: 12.5px; }
.confirmation-payment-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: #16a34a;
font-weight: 600;
margin: 0 0 10px;
}
.confirmation-ref {
font-size: 12px;
color: #888;
margin: 10px 0 0;
padding-top: 10px;
border-top: 1px solid #f0f0f0;
word-break: break-all;
}
.confirmation-ref code {
background: #f5f5f5;
padding: 2px 6px;
border-radius: 4px;
font-size: 11.5px;
color: #555;
}
/* ---------- Delivery timeline ---------- */
.delivery-timeline {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
.timeline-step {
display: grid;
grid-template-columns: 32px 1fr;
gap: 16px;
padding-bottom: 20px;
position: relative;
}
.timeline-step:not(:last-child)::before {
content: '';
position: absolute;
left: 15px;
top: 34px;
bottom: 0;
width: 2px;
background: #e5e5e5;
}
.timeline-step.done:not(:last-child)::before { background: #16a34a; }
.timeline-dot {
width: 32px;
height: 32px;
border-radius: 50%;
background: #f0f0f0;
color: #999;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
z-index: 1;
}
.timeline-step.done .timeline-dot {
background: #16a34a;
color: #fff;
font-size: 11px;
}
.timeline-step.active .timeline-dot {
background: var(--accent);
color: #fff;
box-shadow: 0 0 0 5px rgba(200, 16, 46, .12);
}
.timeline-step strong {
display: block;
font-size: 14px;
font-weight: 600;
color: #111;
margin-bottom: 3px;
}
.timeline-step.done strong { color: #16a34a; }
.timeline-step.active strong { color: #111; }
.timeline-step p {
font-size: 13px;
color: #777;
line-height: 1.5;
margin: 0;
}
/* ---------- Summary ---------- */
.summary-totals {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.summary-totals li {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
color: #555;
}
.summary-totals li span:last-child { color: #111; font-weight: 500; }
.summary-divider {
height: 1px;
background: #e5e5e5;
margin: 16px 0;
}
.summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 20px;
}
.summary-total span {
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #111;
}
.summary-total strong {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
color: #111;
}
.text-accent { color: var(--accent); font-weight: 600; }
.confirmation-actions {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
}
.confirmation-actions .btn i { margin-right: 6px; font-size: 12px; }
.confirmation-help {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #f0f0f0;
font-size: 13px;
color: #666;
}
.confirmation-help p { margin: 0 0 8px; }
.confirmation-help p strong { color: #111; }
.confirmation-help a { color: var(--accent); }
.confirmation-chat-btn {
background: transparent;
border: none;
padding: 6px 0;
font: inherit;
font-size: 13px;
color: var(--accent);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap .2s;
}
.confirmation-chat-btn:hover { gap: 10px; }
/* ---------- Recommendations ---------- */
.confirmation-recommendations {
margin-top: 80px;
padding-top: 50px;
border-top: 1px solid #f0f0f0;
}
/* ---------- Responsive ---------- */
@media (max-width: 992px) {
.confirmation-layout { grid-template-columns: 1fr; gap: 24px; }
.confirmation-card.sticky { position: static; }
.confirmation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.confirmation-banner { padding: 40px 16px 30px; }
.confirmation-icon { width: 64px; height: 64px; font-size: 26px; margin-bottom: 16px; }
.confirmation-title { font-size: 22px; }
.confirmation-subtitle { font-size: 14px; margin-bottom: 22px; }
.confirmation-meta {
flex-direction: column;
gap: 16px;
padding: 18px 20px;
width: 100%;
box-sizing: border-box;
}
.confirmation-meta-item strong { font-size: 16px; }
.confirmation-page { padding: 30px 0 60px; }
.confirmation-card { padding: 20px; border-radius: 12px; }
.confirmation-item { grid-template-columns: 60px 1fr auto; gap: 12px; }
.confirmation-item-image { width: 60px; height: 76px; }
.confirmation-item-name { font-size: 13.5px; }
.confirmation-item-total { font-size: 14px; }
.summary-total strong { font-size: 22px; }
}
@media (max-width: 480px) {
.confirmation-item {
grid-template-columns: 50px 1fr;
grid-template-areas:
"image info"
"total total";
row-gap: 8px;
}
.confirmation-item-image { grid-area: image; width: 50px; height: 64px; }
.confirmation-item-info { grid-area: info; }
.confirmation-item-total { grid-area: total; justify-self: end; }
.confirmation-actions .btn { padding: 13px 20px; font-size: 12px; }
}
/* Print styles */
@media print {
.site-header, .site-footer, .confirmation-banner,
.confirmation-actions, .confirmation-help,
.confirmation-recommendations, .back-to-top, .chat-launcher, .chat-panel {
display: none !important;
}
.confirmation-page { padding: 0; }
.confirmation-layout { grid-template-columns: 1fr; }
.confirmation-card { border: 1px solid #ddd; page-break-inside: avoid; }
body { background: #fff; }
}
/* ============================================
MODERN PRODUCT DETAIL PAGE
============================================ */
.product-page { padding: 30px 0 80px; background: #fff; }
/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
padding: 18px 0;
font-size: 13px;
color: #888;
background: #fafafa;
border-bottom: 1px solid #f0f0f0;
}
.breadcrumbs .container {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.breadcrumbs a { color: #888; transition: color .2s; }
.breadcrumbs a:hover { color: #111; }
.breadcrumbs .sep { color: #ccc; }
.breadcrumbs [aria-current="page"] {
color: #111;
font-weight: 500;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------- Two-column layout ---------- */
.product-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
/* ---------- Gallery ---------- */
.product-gallery {
display: flex;
flex-direction: column;
gap: 16px;
position: sticky;
top: 90px;
}
.gallery-main {
position: relative;
aspect-ratio: 4/5;
background: #f5f5f5;
border-radius: 12px;
overflow: hidden;
}
.gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .18s ease, transform 1s ease;
display: block;
}
.gallery-main:hover img { transform: scale(1.04); }
.gallery-badge {
position: absolute;
top: 16px;
left: 16px;
padding: 7px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #fff;
border-radius: 4px;
z-index: 2;
}
.gallery-badge.sale { background: var(--accent); }
.gallery-badge.new { background: #111; }
.gallery-wishlist-btn {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.95);
backdrop-filter: blur(8px);
border: none;
cursor: pointer;
color: #333;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all .25s;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.gallery-wishlist-btn:hover { background: #111; color: #fff; transform: scale(1.08); }
.gallery-wishlist-btn.active { background: var(--accent); color: #fff; }
.gallery-thumbs {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.gallery-thumb {
aspect-ratio: 4/5;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
padding: 0;
cursor: pointer;
background: #f5f5f5;
transition: border-color .2s, transform .2s;
}
.gallery-thumb:hover { transform: translateY(-2px); }
.gallery-thumb.active { border-color: #111; }
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---------- Info side ---------- */
.product-info { min-width: 0; }
.product-category {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0 0 10px;
font-weight: 600;
}
.product-category a {
color: var(--accent);
transition: color .2s;
}
.product-category a:hover { color: #111; }
.product-title {
font-family: var(--font-serif);
font-size: clamp(26px, 3.2vw, 38px);
font-weight: 500;
color: #111;
margin: 0 0 14px;
line-height: 1.15;
letter-spacing: -0.3px;
}
/* Rating */
.product-rating {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
font-size: 13px;
}
.stars { display: inline-flex; gap: 2px; color: #f59e0b; font-size: 13px; }
.rating-link {
color: #666;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s;
}
.rating-link:hover { color: #111; }
/* Price */
.product-price-block {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
padding: 16px 0;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 18px;
}
.price-current {
font-family: var(--font-serif);
font-size: 32px;
font-weight: 500;
color: #111;
letter-spacing: -0.5px;
}
.price-was {
font-size: 18px;
color: #999;
text-decoration: line-through;
}
.price-save {
background: #fee2e2;
color: #991b1b;
padding: 4px 10px;
border-radius: 12px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
}
/* Stock */
.product-stock {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.stock-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
padding: 6px 12px;
border-radius: 20px;
}
.stock-pill i { font-size: 11px; }
.stock-pill.in { background: #d1fae5; color: #065f46; }
.stock-pill.low { background: #fef3c7; color: #92400e; }
.stock-pill.out { background: #fee2e2; color: #991b1b; }
.stock-sku { font-size: 11.5px; color: #999; letter-spacing: .5px; }
/* Short description */
.product-short-desc {
font-size: 15px;
line-height: 1.65;
color: #555;
margin: 0 0 24px;
}
/* ---------- Form ---------- */
.product-form {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 24px;
}
.variant-group { display: flex; flex-direction: column; gap: 10px; }
.variant-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #333;
}
.variant-selected {
color: var(--accent);
text-transform: none;
letter-spacing: 0;
margin-left: 4px;
}
.variant-select {
padding: 14px 16px;
border: 1.5px solid #e0e0e0;
border-radius: 10px;
font: inherit;
font-size: 15px;
background: #fff;
cursor: pointer;
outline: none;
transition: border-color .2s, box-shadow .2s;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 44px;
}
.variant-select:focus {
border-color: #111;
box-shadow: 0 0 0 4px rgba(17,17,17,.06);
}
/* Color swatches */
.color-swatches {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.color-swatch {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid #e5e5e5;
padding: 0;
cursor: pointer;
transition: all .2s;
box-shadow: inset 0 0 0 2px #fff;
}
.color-swatch:hover { transform: scale(1.12); border-color: #bbb; }
.color-swatch.active {
border-color: #111;
box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #111;
}
/* Actions */
.product-actions {
display: grid;
grid-template-columns: 130px 1fr;
gap: 12px;
align-items: stretch;
}
.qty-picker {
display: grid;
grid-template-columns: 40px 1fr 40px;
border: 1.5px solid #e0e0e0;
border-radius: 10px;
overflow: hidden;
background: #fff;
align-items: stretch;
}
.qty-picker:focus-within { border-color: #111; }
.qty-btn {
background: transparent;
border: none;
cursor: pointer;
color: #666;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
}
.qty-btn:hover { background: #111; color: #fff; }
.qty-btn:active { transform: scale(.94); }
.qty-picker input {
border: none;
text-align: center;
font: inherit;
font-weight: 600;
font-size: 15px;
outline: none;
background: #fff;
color: #111;
width: 100%;
min-width: 0;
-moz-appearance: textfield;
appearance: textfield;
}
.qty-picker input::-webkit-outer-spin-button,
.qty-picker input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-add-cart {
padding: 0 24px;
font-size: 13.5px;
letter-spacing: 1.5px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 54px;
transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-add-cart:hover:not(:disabled) {
background: var(--accent);
box-shadow: 0 8px 20px rgba(200,16,46,.18);
}
.btn-add-cart:disabled { opacity: .5; cursor: not-allowed; }
.btn-add-cart i { font-size: 14px; }
/* Buy Now */
.btn-buy-now {
width: 100%;
padding: 15px;
background: transparent;
border: 1.5px solid #111;
border-radius: 10px;
font: inherit;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #111;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all .2s;
}
.btn-buy-now:hover:not(:disabled) {
background: #111;
color: #fff;
}
.btn-buy-now:disabled { opacity: .4; cursor: not-allowed; }
/* Trust */
.product-trust {
list-style: none;
padding: 18px 0;
margin: 0 0 20px;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
}
.product-trust li {
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
color: #555;
line-height: 1.4;
}
.product-trust i {
color: var(--accent);
font-size: 13px;
flex-shrink: 0;
width: 16px;
text-align: center;
}
/* Accordion */
.product-accordion {
border-top: 1px solid #f0f0f0;
}
.product-accordion details {
border-bottom: 1px solid #f0f0f0;
}
.product-accordion summary {
cursor: pointer;
list-style: none;
padding: 16px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 13.5px;
font-weight: 600;
color: #111;
transition: color .2s;
user-select: none;
}
.product-accordion summary::-webkit-details-marker { display: none; }
.product-accordion summary:hover { color: var(--accent); }
.product-accordion summary > span {
display: inline-flex;
align-items: center;
gap: 10px;
letter-spacing: .3px;
}
.product-accordion summary > span i { color: var(--accent); font-size: 13px; width: 16px; }
.product-accordion .caret {
font-size: 11px;
color: #888;
transition: transform .25s;
}
.product-accordion details[open] .caret { transform: rotate(180deg); }
.accordion-body {
padding: 0 0 20px;
font-size: 14px;
line-height: 1.7;
color: #555;
}
.accordion-body p { margin: 0 0 10px; }
.accordion-body p:last-child { margin-bottom: 0; }
.accordion-body a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- Related ---------- */
.product-related {
margin-top: 100px;
padding-top: 60px;
border-top: 1px solid #f0f0f0;
}
/* ---------- Toast ---------- */
.pdp-toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 24px);
background: #111;
color: #fff;
padding: 13px 22px;
border-radius: 30px;
font-size: 13.5px;
font-weight: 500;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
z-index: 9999;
opacity: 0;
transition: opacity .3s, transform .3s;
pointer-events: none;
max-width: 90vw;
text-align: center;
}
.pdp-toast.show { opacity: 1; transform: translate(-50%, 0); }
.pdp-toast.success { background: #16a34a; }
.pdp-toast.error { background: #dc2626; }
/* ---------- Responsive ---------- */
@media (max-width: 992px) {
.product-detail { grid-template-columns: 1fr; gap: 40px; }
.product-gallery { position: static; }
}
@media (max-width: 640px) {
.product-page { padding: 20px 0 60px; }
.product-title { font-size: 24px; }
.price-current { font-size: 26px; }
.price-was { font-size: 16px; }
.gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.product-actions { grid-template-columns: 1fr; gap: 10px; }
.qty-picker {
grid-template-columns: 44px 1fr 44px;
min-height: 50px;
justify-self: stretch;
}
.btn-add-cart { min-height: 52px; padding: 0 20px; font-size: 13px; }
.product-trust { grid-template-columns: 1fr; }
.product-related { margin-top: 60px; padding-top: 40px; }
}
@media (max-width: 380px) {
.gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
.color-swatch { width: 30px; height: 30px; }
}
/* ============================================
RELATED PRODUCTS ON PDP
============================================ */
.product-related {
margin-top: 100px;
padding-top: 60px;
border-top: 1px solid #f0f0f0;
}
.product-related .section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 36px;
}
.product-related .eyebrow {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin: 0 0 8px;
}
.product-related .section-title {
font-family: var(--font-serif);
font-size: clamp(24px, 3vw, 34px);
font-weight: 500;
color: #111;
margin: 0;
letter-spacing: -0.3px;
}
.product-related .link-arrow {
font-size: 12.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
color: #111;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap .2s, color .2s;
white-space: nowrap;
}
.product-related .link-arrow:hover { color: var(--accent); gap: 12px; }
@media (max-width: 768px) {
.product-related { margin-top: 60px; padding-top: 40px; }
.product-related .section-head {
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: 24px;
}
.product-related .section-title { font-size: 22px; }
}
/* ============================================
PRODUCT CARD (site-wide)
============================================ */
.product-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 10px;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
}
.product-card-link {
display: block;
color: inherit;
text-decoration: none;
height: 100%;
}
/* Image */
.product-image {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
background: #f5f5f5;
border-radius: 10px 10px 0 0;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover .product-image img {
transform: scale(1.06);
}
/* Badges (stacked top-left) */
.product-badges {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.product-badges .badge {
display: inline-block;
padding: 5px 10px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #fff;
border-radius: 3px;
line-height: 1;
}
.badge.new { background: #111; }
.badge.sale { background: var(--accent); }
.badge.out { background: #6b7280; }
/* Info */
.product-info {
padding: 14px 4px 6px;
}
.product-cat {
font-size: 10.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #999;
margin: 0 0 6px;
font-weight: 600;
}
.product-name {
font-size: 14.5px;
font-weight: 500;
color: #111;
margin: 0 0 6px;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 38px;
transition: color .2s;
}
.product-card:hover .product-name {
color: var(--accent);
}
.product-price {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: #111;
margin: 0;
flex-wrap: wrap;
}
.product-price .price-sale { color: var(--accent); }
.product-price .price-old {
color: #999;
text-decoration: line-through;
font-weight: 400;
font-size: 13px;
}
/* ---------- Wishlist heart (top-right) ---------- */
.product-wishlist-btn {
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, .95);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: none;
cursor: pointer;
color: #333;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all .25s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
opacity: 0;
transform: scale(.85);
}
.product-card:hover .product-wishlist-btn {
opacity: 1;
transform: scale(1);
}
.product-wishlist-btn:hover {
background: #111;
color: #fff;
transform: scale(1.08);
}
.product-wishlist-btn.active {
background: var(--accent);
color: #fff;
opacity: 1;
transform: scale(1);
}
.product-wishlist-btn.active:hover {
background: #a30d24;
}
/* ---------- Buy Now button (bottom-right of image) ---------- */
.card-buy-now {
position: absolute;
bottom: 12px;
right: 12px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(17, 17, 17, .95);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
border: none;
border-radius: 20px;
font: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
cursor: pointer;
transition: all .25s ease;
box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
opacity: 0;
transform: translateY(6px);
}
.product-card:hover .card-buy-now {
opacity: 1;
transform: translateY(0);
}
.card-buy-now:hover {
background: var(--accent);
transform: translateY(0) scale(1.04);
}
.card-buy-now:disabled {
background: rgba(107, 114, 128, .95);
cursor: not-allowed;
opacity: .6;
}
.product-card:hover .card-buy-now:disabled {
opacity: .6;
}
.card-buy-now i {
font-size: 11px;
}
.card-buy-now.loading {
pointer-events: none;
background: #444;
}
.card-buy-now.success {
background: #16a34a;
}
/* ---------- Mobile: always visible ---------- */
@media (max-width: 768px) {
.product-wishlist-btn {
opacity: 1;
transform: scale(1);
width: 30px;
height: 30px;
font-size: 12px;
top: 8px;
right: 8px;
}
.card-buy-now {
opacity: 1;
transform: translateY(0);
padding: 7px 12px;
font-size: 10px;
bottom: 8px;
right: 8px;
}
.card-buy-now span {
display: none; /* icon-only on small screens */
}
.product-badges {
top: 8px;
left: 8px;
}
.product-badges .badge {
padding: 4px 8px;
font-size: 9.5px;
}
.product-info {
padding: 10px 2px 4px;
}
.product-name {
font-size: 13px;
min-height: 34px;
}
.product-price {
font-size: 14px;
}
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.product-card,
.product-card:hover,
.product-image img,
.product-card:hover .product-image img {
transform: none !important;
transition: none !important;
}
}
.card-toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 24px);
background: #111;
color: #fff;
padding: 13px 22px;
border-radius: 30px;
font-size: 13.5px;
font-weight: 500;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
z-index: 9999;
opacity: 0;
transition: opacity .3s, transform .3s;
pointer-events: none;
max-width: 90vw;
text-align: center;
}
.card-toast.show { opacity: 1; transform: translate(-50%, 0); }
.card-toast.success { background: #16a34a; }
.card-toast.error { background: #dc2626; }
/* ============================================
AUTH PAGES (login, register, forgot, reset)
============================================ */
.auth-page {
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
padding: 40px 20px;
background: #fafafa;
}
.auth-container {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1100px;
width: 100%;
margin: 0 auto;
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0,0,0,.08), 0 4px 20px rgba(0,0,0,.04);
}
.auth-container-single {
max-width: 460px;
width: 100%;
margin: 0 auto;
background: #fff;
border-radius: 20px;
padding: 40px;
box-shadow: 0 30px 60px rgba(0,0,0,.08);
}
.auth-page-narrow { padding: 60px 20px; }
/* Left visual panel */
.auth-visual {
position: relative;
background-size: cover;
background-position: center;
color: #fff;
min-height: 640px;
display: flex;
align-items: center;
padding: 60px 50px;
}
.auth-visual-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(17,17,17,.78) 0%, rgba(17,17,17,.55) 100%);
}
.auth-visual-content { position: relative; z-index: 2; }
.auth-visual-content h2 {
font-family: var(--font-serif);
font-size: 34px;
font-weight: 500;
margin: 0 0 12px;
line-height: 1.15;
letter-spacing: -0.3px;
}
.auth-visual-content p {
font-size: 15px;
color: rgba(255,255,255,.85);
line-height: 1.6;
margin: 0 0 32px;
max-width: 340px;
}
.auth-benefits {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.auth-benefits li {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: rgba(255,255,255,.9);
}
.auth-benefits i {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.12);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
/* Right form */
.auth-form-wrap {
padding: 60px 50px;
display: flex;
flex-direction: column;
justify-content: center;
max-height: 900px;
overflow-y: auto;
}
.auth-head { margin-bottom: 32px; }
.auth-title {
font-family: var(--font-serif);
font-size: 32px;
font-weight: 500;
color: #111;
margin: 0 0 8px;
letter-spacing: -0.3px;
}
.auth-subtitle {
font-size: 14.5px;
color: #777;
margin: 0;
line-height: 1.5;
}
.auth-subtitle a, .auth-link {
color: var(--accent);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Form */
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-field { display: block; }
.auth-label-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 8px;
}
.auth-label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
color: #444;
margin-bottom: 8px;
text-transform: uppercase;
}
.auth-label-row .auth-label { margin-bottom: 0; }
.auth-label small {
font-weight: 400;
color: #999;
text-transform: none;
letter-spacing: 0;
font-size: 11.5px;
}
.auth-forgot {
font-size: 12px;
color: var(--accent);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.auth-forgot:hover { text-decoration: underline; }
.auth-input-wrap {
position: relative;
display: block;
}
.auth-input-wrap > i:first-child {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
color: #aaa;
font-size: 14px;
pointer-events: none;
transition: color .2s;
}
.auth-input-wrap input {
width: 100%;
padding: 14px 46px 14px 44px;
border: 1.5px solid #e0e0e0;
border-radius: 10px;
font: inherit;
font-size: 15px;
color: #111;
background: #fff;
outline: none;
transition: border-color .2s, box-shadow .2s;
box-sizing: border-box;
}
.auth-input-wrap input:focus {
border-color: #111;
box-shadow: 0 0 0 4px rgba(17,17,17,.06);
}
.auth-input-wrap input:focus + .auth-toggle-pw,
.auth-input-wrap input:focus ~ .auth-toggle-pw { color: #111; }
.auth-toggle-pw {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
background: transparent;
border: none;
color: #999;
cursor: pointer;
padding: 6px 8px;
font-size: 14px;
border-radius: 6px;
transition: color .2s, background .2s;
}
.auth-toggle-pw:hover { color: #111; background: #f5f5f5; }
.auth-hint {
display: block;
font-size: 12px;
color: #888;
margin-top: 6px;
}
.auth-strength {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-top: 8px;
height: 4px;
}
.strength-bar {
background: #e5e5e5;
border-radius: 2px;
transition: background .3s;
}
.auth-strength[data-level="1"] .strength-bar:nth-child(1) { background: #dc2626; }
.auth-strength[data-level="2"] .strength-bar:nth-child(-n+2) { background: #f59e0b; }
.auth-strength[data-level="3"] .strength-bar:nth-child(-n+3) { background: #16a34a; }
.auth-strength[data-level="4"] .strength-bar { background: #16a34a; }
.auth-match {
display: block;
font-size: 12px;
margin-top: 6px;
min-height: 16px;
font-weight: 500;
}
.auth-match.ok { color: #16a34a; }
.auth-match.error { color: #dc2626; }
/* Checkbox */
.auth-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13.5px;
color: #555;
cursor: pointer;
user-select: none;
line-height: 1.5;
}
.auth-checkbox input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.checkbox-mark {
position: relative;
flex-shrink: 0;
width: 20px;
height: 20px;
border: 1.5px solid #ccc;
border-radius: 4px;
background: #fff;
transition: all .2s;
margin-top: 1px;
}
.checkbox-mark::after {
content: '';
position: absolute;
top: 2px;
left: 6px;
width: 5px;
height: 10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg) scale(0);
transition: transform .2s;
}
.auth-checkbox input:checked + .checkbox-mark {
background: #111;
border-color: #111;
}
.auth-checkbox input:checked + .checkbox-mark::after {
transform: rotate(45deg) scale(1);
}
.auth-checkbox a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Submit */
.btn-auth {
padding: 15px 24px;
font-size: 13px;
letter-spacing: 1.5px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
margin-top: 6px;
}
.btn-auth i { font-size: 13px; }
/* Divider */
.auth-divider {
position: relative;
text-align: center;
margin: 26px 0 20px;
}
.auth-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e5e5e5;
}
.auth-divider span {
position: relative;
background: #fff;
padding: 0 14px;
font-size: 11.5px;
color: #999;
letter-spacing: 1.2px;
text-transform: uppercase;
}
/* Social buttons */
.auth-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.auth-social {
padding: 12px;
border: 1.5px solid #e5e5e5;
border-radius: 10px;
background: #fff;
font: inherit;
font-size: 13px;
font-weight: 500;
color: #111;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all .2s;
}
.auth-social:hover:not(:disabled) {
border-color: #111;
background: #fafafa;
}
.auth-social:disabled {
opacity: .55;
cursor: not-allowed;
}
/* Alerts */
.auth-alert {
display: flex;
gap: 12px;
padding: 14px 16px;
border-radius: 10px;
font-size: 13.5px;
line-height: 1.5;
margin-bottom: 22px;
}
.auth-alert > i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.auth-alert ul {
margin: 0;
padding-left: 18px;
list-style: disc;
}
.auth-alert li { margin-bottom: 4px; }
.auth-alert li:last-child { margin-bottom: 0; }
.auth-alert.error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
.auth-alert.error > i { color: #dc2626; }
.auth-alert.success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #14532d;
}
.auth-alert.success > i { color: #16a34a; }
/* Big icons for verification pages */
.auth-big-icon {
width: 90px;
height: 90px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin: 0 auto 24px;
animation: confirmPop .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-big-icon.success {
background: #d1fae5;
color: #16a34a;
}
.auth-big-icon.error {
background: #fee2e2;
color: #dc2626;
}
/* Back link */
.auth-back-link {
display: block;
text-align: center;
margin-top: 20px;
font-size: 13.5px;
color: #666;
transition: color .2s;
}
.auth-back-link:hover { color: #111; }
.auth-back-link i { font-size: 11px; margin-right: 4px; }
.auth-footer-note {
font-size: 12px;
color: #999;
text-align: center;
margin: 22px 0 0;
line-height: 1.6;
}
.auth-footer-note a {
color: #666;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ============================================
ACCOUNT DASHBOARD
============================================ */
.account-page { padding: 40px 0 80px; background: #fafafa; }
.account-alert {
display: flex;
gap: 14px;
padding: 16px 20px;
border-radius: 12px;
margin-bottom: 22px;
font-size: 14px;
line-height: 1.5;
align-items: flex-start;
}
.account-alert > i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.account-alert.success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #14532d;
}
.account-alert.warning {
background: #fffbeb;
border: 1px solid #fde68a;
color: #78350f;
}
.account-alert.warning a {
color: var(--accent);
text-decoration: underline;
}
.account-head {
display: flex;
align-items: center;
gap: 20px;
padding: 30px;
background: #fff;
border-radius: 16px;
margin-bottom: 26px;
border: 1px solid #f0f0f0;
}
.account-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #7f1d1d);
color: #fff;
font-size: 26px;
font-weight: 500;
font-family: var(--font-serif);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.account-title {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
color: #111;
margin: 0 0 4px;
letter-spacing: -0.3px;
}
.account-subtitle {
font-size: 14px;
color: #777;
margin: 0;
}
.account-logout {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: 1px solid #e5e5e5;
border-radius: 30px;
font-size: 13px;
color: #444;
transition: all .2s;
font-weight: 500;
}
.account-logout:hover {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.account-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 30px;
}
.account-card {
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 12px;
padding: 24px;
transition: all .25s;
display: block;
text-decoration: none;
color: inherit;
}
.account-card:hover {
border-color: #111;
transform: translateY(-3px);
box-shadow: 0 16px 32px rgba(0,0,0,.06);
}
.account-card-icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: #fafafa;
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 16px;
transition: all .25s;
}
.account-card:hover .account-card-icon {
background: #111;
color: #fff;
}
.account-card h3 {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 500;
color: #111;
margin: 0 0 6px;
}
.account-card p {
font-size: 13px;
color: #888;
margin: 0;
line-height: 1.5;
}
/* Recent orders section */
.account-orders {
background: #fff;
border-radius: 14px;
padding: 26px;
border: 1px solid #f0f0f0;
}
.account-section-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 18px;
}
.account-section-head h2 {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
color: #111;
margin: 0;
}
.account-section-head a {
font-size: 13px;
color: var(--accent);
font-weight: 500;
}
.account-orders-list { display: flex; flex-direction: column; gap: 2px; }
.account-order-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 20px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid #f5f5f5;
}
.account-order-row:last-child { border-bottom: none; }
.account-order-row strong {
display: block;
font-size: 14px;
font-weight: 600;
color: #111;
margin-bottom: 2px;
font-family: var(--font-serif);
}
.account-order-row span { font-size: 12px; color: #888; }
.account-order-total {
font-size: 15px;
font-weight: 600;
color: #111;
}
.account-order-link {
font-size: 12.5px;
color: #666;
transition: color .2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.account-order-link:hover { color: var(--accent); }
.account-order-link i { font-size: 10px; }
/* Status badges */
.status-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
}
.status-pending { background: #fef3c7; color: #92400e; }
.status-processing { background: #dbeafe; color: #1e40af; }
.status-shipped { background: #e0e7ff; color: #3730a3; }
.status-delivered { background: #d1fae5; color: #065f46; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 992px) {
.auth-container { grid-template-columns: 1fr; max-width: 520px; }
.auth-visual { display: none; }
.auth-form-wrap { padding: 40px; max-height: none; }
}
@media (max-width: 640px) {
.auth-page { padding: 20px 12px; }
.auth-container, .auth-container-single { border-radius: 14px; }
.auth-form-wrap { padding: 28px 22px; }
.auth-container-single { padding: 28px 22px; }
.auth-title { font-size: 24px; }
.auth-subtitle { font-size: 13.5px; }
.auth-row { grid-template-columns: 1fr; gap: 18px; }
.auth-input-wrap input { font-size: 16px; /* prevent iOS zoom */ }
.account-head { flex-wrap: wrap; padding: 22px; gap: 14px; }
.account-title { font-size: 20px; }
.account-logout { margin-left: 0; width: 100%; justify-content: center; }
.account-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.account-card { padding: 16px; }
.account-card-icon { width: 38px; height: 38px; font-size: 15px; margin-bottom: 10px; }
.account-card h3 { font-size: 14px; }
.account-card p { font-size: 11.5px; }
.account-order-row {
grid-template-columns: 1fr auto;
grid-template-areas:
"info status"
"total link";
row-gap: 10px;
}
.account-order-row > div:first-child { grid-area: info; }
.account-order-row > div:nth-child(2) { grid-area: status; justify-self: end; }
.account-order-total { grid-area: total; }
.account-order-link { grid-area: link; justify-self: end; }
}
@media (max-width: 400px) {
.account-grid { grid-template-columns: 1fr; }
}
.user-dot {
position: absolute;
bottom: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #16a34a;
border: 1.5px solid #fff;
}
.dropdown-link-danger { color: #dc2626; }
.dropdown-link-danger:hover { color: #991b1b; }
.dropdown-link-danger i { color: #dc2626; }
/* ============================================
ACCOUNT PAGES (orders, profile, addresses, etc.)
============================================ */
.container-narrow { max-width: 720px; margin: 0 auto; }
.account-head-simple {
margin-bottom: 30px;
}
.account-head-simple.with-action {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
flex-wrap: wrap;
}
.account-head-simple .account-title {
font-family: var(--font-serif);
font-size: clamp(24px, 3vw, 32px);
font-weight: 500;
color: #111;
margin: 0 0 6px;
display: flex;
align-items: center;
gap: 12px;
}
.account-head-simple .account-title i { color: var(--accent); font-size: .75em; }
.account-head-simple .account-subtitle { font-size: 14px; color: #777; margin: 0; }
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #666;
margin-bottom: 20px;
transition: color .2s;
}
.back-link:hover { color: var(--accent); }
.back-link i { font-size: 11px; }
/* ============================================
ORDERS PAGE
============================================ */
.orders-page { padding: 40px 0 80px; background: #fafafa; }
.orders-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.orders-title {
font-family: var(--font-serif);
font-size: clamp(24px, 3vw, 34px);
font-weight: 500;
color: #111;
margin: 0 0 6px;
display: flex;
align-items: center;
gap: 12px;
}
.orders-title i { color: var(--accent); font-size: .7em; }
.orders-subtitle { font-size: 14px; color: #777; margin: 0; }
.orders-continue-link {
font-size: 13px;
color: #111;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid #e5e5e5;
border-radius: 30px;
transition: all .2s;
font-weight: 500;
background: #fff;
}
.orders-continue-link:hover {
border-color: #111;
background: #111;
color: #fff;
}
/* Filters */
.order-filters {
display: flex;
gap: 8px;
margin-bottom: 22px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 4px;
}
.order-filters::-webkit-scrollbar { display: none; }
.order-filter {
flex-shrink: 0;
padding: 8px 16px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 30px;
font-size: 13px;
font-weight: 500;
color: #444;
transition: all .2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.order-filter:hover {
border-color: #111;
color: #111;
}
.order-filter.active {
background: #111;
border-color: #111;
color: #fff;
}
.filter-count {
background: #f0f0f0;
color: #666;
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: 10px;
min-width: 20px;
text-align: center;
}
.order-filter.active .filter-count {
background: rgba(255,255,255,.2);
color: #fff;
}
/* Empty */
.orders-empty {
text-align: center;
padding: 70px 20px;
background: #fff;
border-radius: 14px;
border: 1px dashed #e5e5e5;
}
.orders-empty-icon {
width: 90px;
height: 90px;
border-radius: 50%;
background: #fafafa;
color: #ccc;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 34px;
margin-bottom: 20px;
}
.orders-empty h2 {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 500;
color: #111;
margin: 0 0 8px;
}
.orders-empty p { font-size: 14.5px; color: #777; margin: 0 0 26px; }
/* Orders list */
.orders-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.order-row {
display: flex;
align-items: center;
gap: 20px;
padding: 22px 24px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 12px;
transition: all .25s;
text-decoration: none;
color: inherit;
}
.order-row:hover {
border-color: #111;
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(0,0,0,.05);
}
.order-row-main { flex: 1; min-width: 0; }
.order-row-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.order-row-head strong {
font-family: var(--font-serif);
font-size: 16px;
color: #111;
font-weight: 600;
letter-spacing: .3px;
}
.order-row-meta {
font-size: 13px;
color: #888;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.order-row-meta i { color: #bbb; font-size: 11px; }
.order-row-meta .dot { color: #ccc; }
.order-row-arrow {
width: 36px;
height: 36px;
border-radius: 50%;
background: #fafafa;
color: #666;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all .2s;
}
.order-row:hover .order-row-arrow {
background: #111;
color: #fff;
}
/* Single order view */
.order-header-card {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
padding: 28px;
background: #fff;
border-radius: 14px;
border: 1px solid #f0f0f0;
margin-bottom: 22px;
flex-wrap: wrap;
}
.order-label {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: #888;
font-weight: 600;
margin: 0 0 6px;
}
.order-number-lg {
font-family: var(--font-serif);
font-size: clamp(22px, 3vw, 30px);
font-weight: 500;
color: #111;
margin: 0 0 6px;
letter-spacing: .5px;
}
.order-placed { font-size: 13.5px; color: #777; margin: 0; }
.order-status-block {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
/* Progress */
.order-progress {
display: flex;
justify-content: space-between;
padding: 24px 40px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 14px;
margin-bottom: 22px;
position: relative;
}
.order-progress::before {
content: '';
position: absolute;
top: 52px;
left: 12%;
right: 12%;
height: 2px;
background: #e5e5e5;
z-index: 0;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: relative;
z-index: 1;
flex: 1;
}
.progress-dot {
width: 38px;
height: 38px;
border-radius: 50%;
background: #fff;
border: 2px solid #ddd;
color: #999;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
transition: all .3s;
}
.progress-step.done .progress-dot {
background: #16a34a;
border-color: #16a34a;
color: #fff;
font-size: 13px;
}
.progress-step.active .progress-dot {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 0 0 6px rgba(200,16,46,.12);
}
.progress-label {
font-size: 11.5px;
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 600;
color: #999;
}
.progress-step.done .progress-label { color: #16a34a; }
.progress-step.active .progress-label { color: var(--accent); }
/* Detail layout */
.order-detail-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 24px;
align-items: start;
}
.order-detail-main { display: flex; flex-direction: column; gap: 20px; }
.order-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.order-card {
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 14px;
padding: 24px;
}
.order-card-title {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 500;
color: #111;
margin: 0 0 18px;
display: flex;
align-items: center;
gap: 10px;
}
.order-card-title i { color: var(--accent); font-size: 14px; }
.order-items { list-style: none; padding: 0; margin: 0; }
.order-item {
display: grid;
grid-template-columns: 70px 1fr auto;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid #f5f5f5;
align-items: center;
}
.order-item:first-child { padding-top: 0; }
.order-item:last-child { border-bottom: none; padding-bottom: 0; }
.order-item-image {
width: 70px;
height: 88px;
border-radius: 8px;
overflow: hidden;
background: #f5f5f5;
}
.order-item-image img { width: 100%; height: 100%; object-fit: cover; }
.order-item-info { min-width: 0; }
.order-item-name {
font-size: 14.5px;
font-weight: 500;
color: #111;
margin: 0 0 4px;
display: block;
line-height: 1.35;
transition: color .2s;
}
.order-item-name:hover { color: var(--accent); }
.order-item-variant {
font-size: 12.5px;
color: #888;
margin: 0 0 4px;
}
.order-item-qty { font-size: 12.5px; color: #999; margin: 0; }
.order-item-total {
font-size: 15px;
font-weight: 700;
color: #111;
white-space: nowrap;
}
.order-address {
font-style: normal;
font-size: 14px;
line-height: 1.7;
color: #555;
}
.order-address strong { color: #111; display: block; margin-bottom: 4px; }
.order-payment-method {
font-size: 14px;
color: #555;
margin: 0 0 8px;
line-height: 1.6;
}
.order-payment-method strong { color: #111; }
.order-payment-method .muted { font-size: 12.5px; color: #888; }
.order-payment-ref {
font-size: 12px;
color: #888;
margin: 10px 0 0;
padding-top: 10px;
border-top: 1px solid #f5f5f5;
word-break: break-all;
}
.order-payment-ref code {
background: #f5f5f5;
padding: 2px 6px;
border-radius: 4px;
font-size: 11.5px;
color: #555;
}
.order-summary-card {
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 14px;
padding: 24px;
position: sticky;
top: 90px;
}
.order-summary-list {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.order-summary-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
color: #555;
}
.order-summary-list li span:last-child { color: #111; font-weight: 500; }
.order-summary-divider {
height: 1px;
background: #e5e5e5;
margin: 4px 0 16px;
}
.order-summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 20px;
}
.order-summary-total span {
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
color: #111;
}
.order-summary-total strong {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
color: #111;
}
.order-actions {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
}
.order-actions .btn i { margin-right: 6px; font-size: 12px; }
.order-help-link {
font-size: 13px;
color: #666;
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: center;
padding: 8px 0;
transition: color .2s;
}
.order-help-link:hover { color: var(--accent); }
/* ============================================
SETTINGS FORM (profile, password, addresses)
============================================ */
.settings-form {
display: flex;
flex-direction: column;
gap: 22px;
}
.settings-card {
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 14px;
padding: 26px;
display: flex;
flex-direction: column;
gap: 18px;
}
.settings-card-title {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 500;
color: #111;
margin: 0 0 4px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.settings-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.settings-field {
display: block;
}
.settings-label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #444;
margin-bottom: 8px;
}
.settings-label small {
font-weight: 400;
color: #999;
text-transform: none;
letter-spacing: 0;
font-size: 11.5px;
}
.settings-field input[type="text"],
.settings-field input[type="email"],
.settings-field input[type="tel"],
.settings-field input[type="password"],
.settings-field select,
.settings-input-wrap input {
width: 100%;
padding: 13px 16px;
border: 1.5px solid #e0e0e0;
border-radius: 10px;
font: inherit;
font-size: 15px;
color: #111;
background: #fff;
outline: none;
transition: border-color .2s, box-shadow .2s;
box-sizing: border-box;
}
.settings-field input:focus,
.settings-field select:focus,
.settings-input-wrap input:focus {
border-color: #111;
box-shadow: 0 0 0 4px rgba(17,17,17,.06);
}
.settings-input-wrap { position: relative; display: block; }
.settings-input-wrap input { padding-right: 130px; }
.settings-input-wrap .auth-toggle-pw { top: 50%; right: 12px; transform: translateY(-50%); }
.settings-hint {
display: block;
font-size: 12px;
color: #888;
margin-top: 6px;
line-height: 1.5;
}
.verified-badge, .unverified-badge {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
letter-spacing: .5px;
}
.verified-badge {
background: #d1fae5;
color: #065f46;
}
.verified-badge i { font-size: 10px; margin-right: 3px; }
.unverified-badge {
background: #fef3c7;
color: #92400e;
}
.unverified-badge i { font-size: 10px; margin-right: 3px; }
.settings-actions {
display: flex;
gap: 12px;
align-items: center;
padding-top: 4px;
}
.settings-actions .btn i { margin-right: 6px; font-size: 12px; }
.settings-cancel {
font-size: 13.5px;
color: #666;
padding: 10px 16px;
transition: color .2s;
}
.settings-cancel:hover { color: #111; }
/* Danger zone */
.settings-danger {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-top: 30px;
padding: 22px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 14px;
flex-wrap: wrap;
}
.settings-danger h3 {
font-size: 15px;
font-weight: 600;
color: #991b1b;
margin: 0 0 4px;
display: flex;
align-items: center;
gap: 8px;
}
.settings-danger h3 i { font-size: 14px; }
.settings-danger p { font-size: 13px; color: #991b1b; opacity: .8; margin: 0; }
.btn-danger-outline {
padding: 11px 22px;
background: transparent;
color: #dc2626;
border: 1.5px solid #dc2626;
border-radius: 8px;
font: inherit;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all .2s;
flex-shrink: 0;
}
.btn-danger-outline:hover {
background: #dc2626;
color: #fff;
}
/* Settings note */
.settings-note {
display: flex;
gap: 14px;
padding: 18px 22px;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 12px;
margin-top: 30px;
align-items: flex-start;
}
.settings-note > i {
color: #2563eb;
font-size: 20px;
flex-shrink: 0;
margin-top: 2px;
}
.settings-note strong {
display: block;
font-size: 14px;
color: #1e40af;
margin-bottom: 3px;
}
.settings-note p {
font-size: 13px;
color: #1e40af;
opacity: .85;
line-height: 1.55;
margin: 0;
}
/* ============================================
ADDRESSES
============================================ */
.addresses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 18px;
}
.address-card {
position: relative;
background: #fff;
border: 1.5px solid #f0f0f0;
border-radius: 14px;
padding: 22px;
transition: all .25s;
display: flex;
flex-direction: column;
gap: 16px;
}
.address-card:hover {
border-color: #ccc;
box-shadow: 0 12px 24px rgba(0,0,0,.05);
}
.address-card.default {
border-color: #111;
box-shadow: 0 0 0 3px rgba(17,17,17,.04);
}
.address-default-badge {
position: absolute;
top: -10px;
right: 18px;
padding: 4px 10px;
background: #111;
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 12px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.address-default-badge i { font-size: 9px; color: #facc15; }
.address-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}
.address-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 6px;
}
.address-label i { font-size: 11px; }
.address-card-body {
font-style: normal;
font-size: 14px;
line-height: 1.65;
color: #555;
flex: 1;
}
.address-card-body strong {
color: #111;
display: block;
margin-bottom: 6px;
font-size: 15px;
}
.address-card-body i {
color: #999;
font-size: 11px;
margin-right: 4px;
}
.address-card-actions {
display: flex;
align-items: center;
gap: 8px;
padding-top: 14px;
border-top: 1px solid #f0f0f0;
flex-wrap: wrap;
}
.address-action {
background: transparent;
border: none;
color: #666;
font: inherit;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
padding: 6px 10px;
border-radius: 6px;
transition: all .2s;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.address-action:hover {
background: #f5f5f5;
color: #111;
}
.address-action-danger:hover {
background: #fef2f2;
color: #dc2626;
}
.address-action i { font-size: 11px; }
/* Label chips (radio) */
.label-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip-radio {
position: relative;
cursor: pointer;
}
.chip-radio input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.chip-radio span {
display: inline-block;
padding: 8px 18px;
background: #fff;
border: 1.5px solid #e0e0e0;
border-radius: 30px;
font-size: 13px;
color: #555;
transition: all .2s;
}
.chip-radio:hover span { border-color: #bbb; }
.chip-radio input:checked + span {
background: #111;
color: #fff;
border-color: #111;
}
/* ============================================
VERIFY EMAIL PAGE
============================================ */
.verify-card {
background: #fff;
border-radius: 16px;
padding: 50px 40px;
border: 1px solid #f0f0f0;
text-align: center;
}
.verify-icon {
width: 90px;
height: 90px;
border-radius: 50%;
background: linear-gradient(135deg, #eff6ff, #dbeafe);
color: #2563eb;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 38px;
margin-bottom: 22px;
}
.verify-title {
font-family: var(--font-serif);
font-size: clamp(24px, 3vw, 32px);
font-weight: 500;
color: #111;
margin: 0 0 12px;
}
.verify-lead {
font-size: 15px;
color: #666;
line-height: 1.65;
margin: 0 auto 30px;
max-width: 480px;
}
.verify-lead strong { color: #111; word-break: break-all; }
.verify-form { margin-bottom: 30px; }
.verify-form .btn {
padding: 15px 24px;
font-size: 13px;
letter-spacing: 1.5px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
}
.verify-tips {
padding: 22px;
background: #fafafa;
border-radius: 12px;
text-align: left;
margin-bottom: 22px;
}
.verify-tips h3 {
font-size: 14px;
font-weight: 600;
color: #111;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
}
.verify-tips h3 i { color: #2563eb; font-size: 14px; }
.verify-tips ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.verify-tips li {
font-size: 13.5px;
color: #555;
line-height: 1.55;
padding-left: 18px;
position: relative;
}
.verify-tips li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent);
font-weight: 600;
}
.verify-tips a {
color: var(--accent);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 992px) {
.order-detail-layout { grid-template-columns: 1fr; gap: 20px; }
.order-summary-card { position: static; }
.order-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.orders-page, .account-page { padding: 24px 0 60px; }
.account-head-simple.with-action { align-items: stretch; gap: 14px; }
.account-head-simple.with-action .btn { width: 100%; justify-content: center; }
.orders-head { gap: 14px; }
.orders-continue-link { width: 100%; justify-content: center; }
.order-header-card { padding: 20px; }
.order-status-block { align-items: flex-start; }
.order-progress { padding: 18px 12px; }
.progress-dot { width: 32px; height: 32px; font-size: 12px; }
.progress-label { font-size: 10px; letter-spacing: .5px; }
.order-progress::before { top: 34px; left: 14%; right: 14%; }
.order-card { padding: 18px; }
.order-item { grid-template-columns: 60px 1fr auto; gap: 12px; }
.order-item-image { width: 60px; height: 76px; }
.order-summary-total strong { font-size: 22px; }
.settings-card { padding: 20px; border-radius: 12px; }
.settings-row { grid-template-columns: 1fr; gap: 16px; }
.settings-field input, .settings-field select { font-size: 16px; }
.settings-input-wrap input { padding-right: 120px; }
.settings-actions { flex-direction: column-reverse; align-items: stretch; }
.settings-actions .btn { width: 100%; justify-content: center; }
.settings-cancel { text-align: center; }
.settings-danger { flex-direction: column; align-items: stretch; text-align: center; }
.btn-danger-outline { width: 100%; }
.addresses-grid { grid-template-columns: 1fr; }
.verify-card { padding: 34px 22px; }
.verify-icon { width: 70px; height: 70px; font-size: 30px; }
}
@media (max-width: 400px) {
.order-item { grid-template-columns: 1fr; gap: 8px; }
.order-item-image { width: 60px; height: 76px; }
}
/* ============================================
ORDER DETAILS (page-specific additions)
============================================ */
/* Guest notice */
.guest-notice {
display: flex;
gap: 14px;
padding: 16px 20px;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 12px;
margin-bottom: 22px;
align-items: flex-start;
}
.guest-notice > i {
color: #2563eb;
font-size: 18px;
flex-shrink: 0;
margin-top: 2px;
}
.guest-notice strong {
display: block;
font-size: 14px;
color: #1e40af;
margin-bottom: 4px;
}
.guest-notice p {
font-size: 13.5px;
color: #1e40af;
opacity: .85;
margin: 0;
line-height: 1.55;
}
.guest-notice a {
color: #1e40af;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
}
/* Cancelled order banner */
.order-progress-cancelled {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 22px 26px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 14px;
margin-bottom: 22px;
}
.order-progress-cancelled > i {
color: #dc2626;
font-size: 22px;
flex-shrink: 0;
margin-top: 2px;
}
.order-progress-cancelled strong {
display: block;
font-size: 15px;
font-weight: 600;
color: #991b1b;
margin-bottom: 4px;
}
.order-progress-cancelled p {
font-size: 13.5px;
color: #991b1b;
opacity: .85;
margin: 0;
line-height: 1.55;
}
/* ============================================
DELETE ACCOUNT PAGE
============================================ */
.delete-warning-card {
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 14px;
padding: 26px;
margin-bottom: 22px;
}
.delete-warning-card h2 {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 500;
color: #78350f;
margin: 0 0 20px;
display: flex;
align-items: center;
gap: 10px;
}
.delete-warning-card h2 i { color: #f59e0b; font-size: 16px; }
.delete-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.delete-list li {
display: flex;
gap: 14px;
align-items: flex-start;
}
.delete-list li > i {
color: #f59e0b;
font-size: 15px;
flex-shrink: 0;
margin-top: 2px;
width: 18px;
text-align: center;
}
.delete-list li > i.fa-circle-info { color: #2563eb; }
.delete-list strong {
display: block;
font-size: 14px;
font-weight: 600;
color: #78350f;
margin-bottom: 3px;
}
.delete-list p {
font-size: 13px;
color: #78350f;
opacity: .8;
margin: 0;
line-height: 1.5;
}
/* Delete actions */
.delete-actions {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
padding-top: 4px;
}
.btn-delete {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 28px;
background: #dc2626;
color: #fff;
border: none;
border-radius: 10px;
font: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
cursor: pointer;
transition: all .2s;
}
.btn-delete:hover:not(:disabled) {
background: #991b1b;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(220, 38, 38, .2);
}
.btn-delete:disabled {
background: #e5e5e5;
color: #999;
cursor: not-allowed;
}
.btn-delete i { font-size: 13px; }
@media (max-width: 640px) {
.delete-actions { flex-direction: column-reverse; align-items: stretch; }
.btn-delete { width: 100%; justify-content: center; }
.delete-actions .settings-cancel { text-align: center; }
.delete-warning-card { padding: 20px; }
.guest-notice { padding: 14px 16px; }
.order-progress-cancelled { padding: 18px 20px; }
}
/* Print styles for order details */
@media print {
.site-header, .site-footer, .breadcrumbs, .order-actions, .guest-notice,
.back-to-top, .chat-launcher, .chat-panel {
display: none !important;
}
.order-header-card, .order-card, .order-summary-card {
border: 1px solid #ddd;
page-break-inside: avoid;
}
.order-progress { display: none !important; }
body { background: #fff; }
.orders-page { padding: 0; }
.order-detail-layout { grid-template-columns: 1fr; }
}
/* ============================================
VERIFY EMAIL PAGE — EXTENDED
============================================ */
.verify-wrapper {
text-align: center;
max-width: 520px;
}
.verify-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.verify-actions .btn-auth {
padding: 15px 24px;
font-size: 13px;
letter-spacing: 1.5px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
}
.verify-actions .btn-auth i { font-size: 13px; }
/* Recovery box (for expired / missing states) */
.verify-recovery {
padding: 22px;
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 12px;
margin-bottom: 20px;
text-align: left;
}
.verify-recovery > p {
font-size: 13.5px;
color: #555;
margin: 0 0 14px;
line-height: 1.6;
}
.verify-recovery > p i {
color: var(--accent);
margin-right: 6px;
font-size: 14px;
}
.verify-recovery > p strong {
color: #111;
word-break: break-all;
}
.verify-recovery-form {
margin: 0;
}
.verify-tips-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.verify-tips-list li {
font-size: 13px;
color: #666;
line-height: 1.55;
padding-left: 20px;
position: relative;
}
.verify-tips-list li::before {
content: '•';
position: absolute;
left: 6px;
color: var(--accent);
font-weight: 700;
font-size: 16px;
line-height: 1.4;
}
/* Big icon (if not already defined) */
.auth-big-icon {
width: 90px;
height: 90px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin: 0 auto 24px;
animation: verifyPop .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-big-icon.success {
background: #d1fae5;
color: #16a34a;
}
.auth-big-icon.error {
background: #fee2e2;
color: #dc2626;
}
@keyframes verifyPop {
0% { transform: scale(.6); opacity: 0; }
60% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
/* Title + subtitle */
.auth-title {
font-family: var(--font-serif);
font-size: clamp(24px, 3.2vw, 32px);
font-weight: 500;
color: #111;
margin: 0 0 12px;
letter-spacing: -0.3px;
}
.auth-subtitle {
font-size: 15px;
color: #666;
line-height: 1.65;
margin: 0 0 30px;
}
.auth-subtitle strong {
color: #111;
word-break: break-all;
}
/* Responsive */
@media (max-width: 480px) {
.verify-wrapper { padding: 30px 20px; }
.auth-big-icon { width: 72px; height: 72px; font-size: 32px; margin-bottom: 18px; }
.auth-title { font-size: 22px; }
.auth-subtitle { font-size: 14px; margin-bottom: 24px; }
.verify-recovery { padding: 18px; }
}