@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap');
:root { --ink: #182426; --muted: #607174; --paper: #f6f8f4; --line: #dce5df; --green: #176b55; --coral: #e76f51; --yellow: #f5c451; }
:root[data-theme="dark"] { --ink: #e8f0ee; --muted: #a7b7b2; --paper: #101614; --line: #24312d; --green: #3fbf98; --coral: #f08a68; --yellow: #f5c451; }
* { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; } a { color: inherit; } button, input, select, textarea { font: inherit; }
button, .button { border: 0; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; text-decoration: none; font-weight: 700; }
.button--primary { color: white; background: var(--green); } .button--quiet { color: var(--green); background: #e5efe9; } .button--danger { color: #fff; background: var(--coral); } .button-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .product-price { color: var(--green); font-size: 1.05rem; font-weight: 700; } .contact-panel { margin: 18px 0; } .contact-terms-label { font-weight: 700; } .contact-terms-box { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 10px 0; } .contact-terms-box iframe { width: 100%; height: 260px; border: 0; background: #fff; display: block; } .contact-agree { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; margin: 10px 0; } .contact-agree input { width: auto; margin-top: 3px; } .contact-panel .contact-terms-box + .error { margin: 8px 0; }
.site-header { border-bottom: 1px solid var(--line); background: rgba(246,248,244,.92); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(12px); }
.nav { max-width: 1180px; margin: auto; padding: 16px 24px; display: flex; gap: 28px; align-items: center; } .brand { font: 700 1.35rem 'Space Grotesk', sans-serif; text-decoration: none; color: var(--green); }
.nav-links { display: flex; gap: 20px; margin-left: auto; align-items: center; } .nav-links a { text-decoration: none; color: var(--muted); font-weight: 700; } .nav-links a:hover, .nav-link--active { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.page { max-width: 1180px; margin: auto; padding: 28px 24px 72px; } .hero { min-height: 390px; padding: clamp(28px, 7vw, 76px); display: flex; align-items: center; background: linear-gradient(110deg, rgba(245,196,81,.9), rgba(231,111,81,.72)), url('../Visuamall/bgg2.avif') center/cover; border-radius: 8px; }
.hero h1 { max-width: 650px; margin: 0 0 18px; font: 700 clamp(2.5rem, 7vw, 5.4rem)/.98 'Space Grotesk', sans-serif; } .hero p { max-width: 510px; font-size: 1.1rem; line-height: 1.6; }
.section { padding: 58px 0 0; } .section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 20px; } h2 { font: 700 2rem 'Space Grotesk', sans-serif; margin: 0; }
.category-grid, .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .category-card, .product-card { background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.category-card { min-height: 185px; position: relative; display: flex; align-items: end; padding: 20px; background-size: cover; background-position: center; } .category-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(0,0,0,.68)); } .category-card h3 { position: relative; color: white; margin: 0; font: 700 1.3rem 'Space Grotesk', sans-serif; }
.product-card img { width: 100%; height: 200px; object-fit: cover; background: #e5efe9; } .product-card__body { padding: 17px; display: grid; gap: 8px; } .product-card h3 { margin: 0; font: 700 1.1rem 'Space Grotesk', sans-serif; } .product-card p { margin: 0; color: var(--muted); } .availability { color: var(--coral); font-size: .86rem; font-weight: 700; text-transform: capitalize; }
.empty, .error { padding: 28px; border: 1px dashed var(--line); color: var(--muted); background: white; } .site-footer { padding: 30px 24px; border-top: 1px solid var(--line); color: var(--muted); } :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.filter-bar, .form-panel { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin: 24px 0; } .filter-bar { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; } label { display: grid; gap: 7px; font-weight: 700; } input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 12px; color: var(--ink); background: #fff; } .form-panel { max-width: 560px; margin: 48px auto; } .form-panel form { display: grid; gap: 16px; } .form-panel button { justify-self: start; } .detail { display: grid; grid-template-columns: minmax(280px, 1fr) 1fr; gap: 34px; margin-top: 28px; } .detail > img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 8px; } .detail > div, .detail { align-items: start; } .detail h1 { font: 700 3rem 'Space Grotesk', sans-serif; margin-top: 0; } .detail .button { margin: 8px 8px 0 0; }
@media (max-width: 767px) { .category-grid, .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .category-card h3 { font-size: 1.1rem; } }
@media (max-width: 1024px) and (min-width: 768px) { .category-grid, .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px) { .category-grid, .product-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 720px) { .nav { padding: 14px 16px; flex-wrap: wrap; } .nav-links { flex-basis: 100%; width: 100%; overflow-x: auto; gap: 16px; } .page { padding: 16px 16px 52px; } .hero { min-height: 420px; } .filter-bar, .detail { grid-template-columns: 1fr; } .section-heading { align-items: start; flex-direction: column; } .detail h1 { font-size: 2.25rem; } }

.home-page { background: #fff; color: #171717; padding-bottom: 0; }
[data-theme="dark"] .home-page { background: #101614; color: #e8f0ee; }
.live-header { background: url('../Visuamall/general/bg 2.jpg') center/cover; padding: 16px 24px; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.live-nav { max-width: 1220px; min-height: 42px; margin: auto; display: flex; align-items: center; gap: 24px; }
.live-logo { font: 800 1.2rem 'Space Grotesk', sans-serif; text-decoration: none; white-space: nowrap; }
.live-links { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.live-links a { font-size: .86rem; font-weight: 700; text-decoration: none; padding: 9px 12px; border-radius: 7px; }
.live-links a:hover { background: rgba(255,255,255,.65); }
.menu-trigger { display: none; width: 38px; min-height: 38px; padding: 8px; border-radius: 50%; background: transparent; flex-direction: column; gap: 4px; }
.menu-trigger span { width: 20px; height: 2px; background: #850fa8; }
.live-main { max-width: 1220px; margin: auto; padding: 12px 24px 64px; }
.arrival-hero { min-height: 360px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; padding: 28px 7%; border-radius: 10px; background: url('../Visuamall/general/hero.jpeg') center/cover; }
.arrival-copy > span { font-weight: 800; font-size: .95rem; } .arrival-copy h1 { margin: 10px 0 25px; display: grid; font: 900 clamp(3rem, 7vw, 5.8rem)/.88 'Space Grotesk', sans-serif; }
.live-explore { display: inline-block; padding: 12px 30px; color: #111; background: #e5ddd1; border-radius: 14px; font-weight: 800; text-decoration: none; }
.arrival-hero > img { width: min(51%, 560px); height: 360px; object-fit: contain; align-self: end; }
.live-section { padding-top: 34px; } .live-section > h2, .live-heading h2 { font: 800 1.25rem 'Space Grotesk', sans-serif; margin: 0 0 18px; }
.spotlight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .spotlight-card { min-height: 220px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 16px; text-decoration: none; overflow: hidden; }
.spotlight-card img { width: 100%; height: 150px; object-fit: contain; } .spotlight-card span { font-weight: 800; } .spotlight-card strong { color: #6d43a1; font-size: .88rem; } .spotlight-card--lavender { background: #ded2f1; } .spotlight-card--mint { background: #cde6de; } .spotlight-card--rose { background: #f5d1d3; } .spotlight-card--blue { background: #c9dff1; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 42px 0 8px; } .benefits article { display: flex; gap: 14px; align-items: start; } .benefits b { font-size: 1.8rem; color: #9556ba; } .benefits h3 { margin: 0 0 7px; font-size: 1rem; } .benefits p { margin: 0; color: #666; font-size: .88rem; line-height: 1.45; }
.live-heading { display: flex; align-items: center; justify-content: space-between; } .live-heading a { color: #6d43a1; font-weight: 800; text-decoration: none; } .picks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .picks-grid .product-card { border-radius: 18px; box-shadow: 0 7px 20px rgba(0,0,0,.08); } .picks-grid .product-card img { height: 180px; } .live-empty, .live-error { padding: 24px; color: #687078; }
.live-footer { display: flex; justify-content: space-between; gap: 40px; padding: 34px max(24px, calc((100% - 1172px)/2)); color: white; background: #24172f; } .live-footer h2 { font-size: 1rem; } .live-footer a { display: block; color: #e8d9f2; text-decoration: none; margin-top: 9px; font-size: .9rem; }
.mobile-drawer, .drawer-overlay { display: none; }
.brand-avatar { width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: transparent; box-shadow: 0 2px 8px rgba(0,0,0,.25); } .brand-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-toggle { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 1.2rem; line-height: 1; background: rgba(255,255,255,.18); color: inherit; } .theme-toggle__icon { display: block; }
[data-theme="dark"] .site-header { background-color: #0c120f; border-color: var(--line); }
[data-theme="dark"] .live-header { background-color: #0c120f; background-image: linear-gradient(rgba(16,22,20,.92), rgba(16,22,20,.92)), url('../Visuamall/general/bg 2.jpg'); border-color: var(--line); }
[data-theme="dark"] .live-logo, [data-theme="dark"] .live-links a { color: #e8f0ee; }
[data-theme="dark"] .category-card, [data-theme="dark"] .product-card, [data-theme="dark"] .form-panel, [data-theme="dark"] .filter-bar, [data-theme="dark"] .empty, [data-theme="dark"] .error { background: #131b18; border-color: var(--line); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #101614; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .product-card img { background: #1b2622; }
[data-theme="dark"] .button--quiet { background: #1f2d28; }
[data-theme="dark"] .button--primary { background: var(--green); }
[data-theme="dark"] .detail > img { background: #1b2622; }
[data-theme="dark"] .live-footer { background: #0c120f; }
[data-theme="dark"] .live-empty, [data-theme="dark"] .live-error { color: var(--muted); }
.avatar-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 16px 50px rgba(0,0,0,.4); } .avatar-popup img { display: block; max-width: min(440px, 80vw); max-height: 62vh; border-radius: 10px; } .avatar-popup-close { position: absolute; top: -16px; right: -16px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; font-size: 1.3rem; line-height: 1; color: #fff; background: var(--coral, #e76f51); box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; }
[data-theme="dark"] .avatar-popup { background: #131b18; }
@media (max-width: 800px) { .live-header { padding: 12px 16px; } .menu-trigger { display: inline-flex; } .live-links { display: none; } .live-main { padding: 8px 16px 48px; } .arrival-hero { min-height: 380px; padding: 28px 22px; } .arrival-hero > img { width: 57%; } .spotlight-grid, .picks-grid { grid-template-columns: repeat(2, 1fr); } .benefits { grid-template-columns: 1fr; gap: 18px; } .live-footer { flex-direction: column; padding: 30px 24px; } .mobile-drawer { display: flex; position: fixed; inset: 0 auto 0 0; width: min(320px, 82vw); padding: 24px; z-index: 30; transform: translateX(-105%); transition: transform .25s ease; flex-direction: column; background: url('../Visuamall/general/menu bg.avif') center/cover; } .mobile-drawer.is-open { transform: translateX(0); } .mobile-drawer a { color: white; font-weight: 800; text-decoration: none; padding: 15px 0; } .drawer-close { align-self: end; color: white; background: transparent; font-size: 2rem; min-height: 36px; padding: 0 8px; } .drawer-overlay { display: block; position: fixed; inset: 0; z-index: 20; opacity: 0; visibility: hidden; background: rgba(0,0,0,.45); transition: opacity .25s ease; } .drawer-overlay.is-open { opacity: 1; visibility: visible; } }
@media (max-width: 480px) { .arrival-hero { min-height: 430px; align-items: start; } .arrival-copy { z-index: 1; } .arrival-hero > img { position: absolute; width: 86%; right: -12%; margin-top: 165px; } .spotlight-grid, .picks-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .spotlight-card { min-height: 175px; padding: 10px; } .spotlight-card img { height: 110px; } }