:root {
  --color-primary: #431456;
  --color-primary-light: #5E2380;
  --color-primary-dark: #260C32;
  --primary-rgb: 67, 20, 86;
  --color-accent: #C98A6B;
  --accent-rgb: 201, 138, 107;
  --color-text-main: #1E0E28;
  --color-text-muted: #5d5560;
  --color-bg: #ffffff;
  --color-bg-alt: #faf7fb;
  --warm-1: #F4EEF7;
  --warm-2: #E7DBEC;
  --warm-3: #F0E8F4;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); line-height: 1.15; }
img { max-width: 100%; display: block; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.wrap { max-width: 680px; margin: 0 auto; }

/* hero */
.hero {
  text-align: center; padding: calc(2.4rem + var(--safe-t)) 1.5rem 2.4rem; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(var(--accent-rgb),0.10) 0%, transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(var(--primary-rgb),0.06) 0%, transparent 45%),
    linear-gradient(180deg, var(--warm-1), #ffffff);
}
.hero-logo { height: 64px; width: auto; margin: 0 auto 1.1rem; }
.hero .kicker { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.72rem; font-weight: 700; margin-bottom: 0.6rem; }
.hero h1 { font-size: clamp(1.5rem, 5.5vw, 1.9rem); color: var(--color-primary); margin-bottom: 0.5rem; font-weight: 600; }
.hero .sub { color: var(--color-text-muted); font-weight: 300; font-size: 0.98rem; max-width: 34ch; margin: 0 auto; }
.hero .flags { margin-top: 0.9rem; color: var(--color-text-muted); font-size: 0.82rem; }
.hero .rule { width: 46px; height: 2px; background: var(--color-accent); margin: 1rem auto 0; border-radius: 2px; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid rgba(var(--primary-rgb),0.1); border-radius: 14px; margin: 1.4rem 1.2rem 0; box-shadow: 0 8px 26px rgba(var(--primary-rgb),0.07); overflow: hidden; }
.stat { text-align: center; padding: 1.05rem 0.5rem; border-right: 1px solid rgba(var(--primary-rgb),0.08); }
.stat:last-child { border-right: none; }
.stat .num { font-family: var(--font-heading); font-size: clamp(1.05rem, 4.6vw, 1.5rem); font-weight: 700; color: var(--color-primary); display: block; line-height: 1; white-space: nowrap; }
.stat .lbl { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); margin-top: 0.35rem; }

/* section heading */
.section-head { text-align: center; margin: 2.4rem 0 1.5rem; padding: 0 1.2rem; }
.section-head .label { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.7rem; font-weight: 600; display: block; margin-bottom: 0.5rem; }
.section-head h2 { font-size: 1.6rem; }
.section-head .rule { width: 46px; height: 2px; background: var(--color-accent); margin: 0.7rem auto 0; border-radius: 2px; }

/* collection cards */
.collections { display: flex; flex-direction: column; gap: 0.8rem; padding: 0 1.2rem 1rem; }
.collection-card { background: #fff; border: 1px solid rgba(var(--primary-rgb),0.1); border-radius: 14px; padding: 0.8rem; display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; text-decoration: none; color: inherit; position: relative; overflow: hidden; }
.collection-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-accent); transform: scaleY(0); transition: transform 0.22s ease; }
.collection-card:active { transform: translateY(-1px); }
@media (hover:hover) { .collection-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--primary-rgb),0.12); border-color: var(--color-accent); } .collection-card:hover::before { transform: scaleY(1); } }
.collection-thumb { width: 72px; height: 72px; border-radius: 10px; flex-shrink: 0; overflow: hidden; background: var(--warm-2); }
.collection-thumb img { width: 100%; height: 100%; object-fit: cover; }
.collection-meta { flex: 1; min-width: 0; }
.collection-meta .cname { font-family: var(--font-heading); font-size: 1.12rem; font-weight: 600; color: var(--color-primary); }
.collection-meta .cdesc { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 300; }
.collection-meta .ccount { font-size: 0.66rem; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-top: 0.25rem; }
.collection-arrow { color: var(--color-accent); font-size: 1.3rem; transition: transform 0.22s ease; }
@media (hover:hover) { .collection-card:hover .collection-arrow { transform: translateX(4px); } }
.empty { text-align: center; color: var(--color-text-muted); font-weight: 300; padding: 2rem 1.2rem; }

/* category back button */
.cat-back { display: inline-flex; align-items: center; gap: 0.4rem; margin: calc(1.5rem + var(--safe-t)) 1.2rem 0; background: var(--warm-1); color: var(--color-primary); border: none; cursor: pointer; font-size: 0.85rem; font-weight: 600; padding: 0.6rem 1rem; border-radius: 999px; min-height: 40px; text-decoration: none; transition: background 0.2s ease; }
.cat-back:active { background: var(--warm-2); }

/* category intro */
.cat-intro { padding: 0 1.2rem; text-align: center; margin: 1.5rem 0 1.4rem; }
.cat-intro .label { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.7rem; font-weight: 600; }
.cat-intro h2 { font-size: 1.8rem; margin: 0.3rem 0; }
.cat-intro p { color: var(--color-text-muted); font-weight: 300; font-size: 0.92rem; max-width: 46ch; margin: 0 auto; }

/* product grid */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; padding: 0 1.2rem 1rem; }
.tile { cursor: pointer; border: none; background: none; padding: 0; text-align: left; }
.tile .ph { aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; position: relative; background: var(--warm-2); box-shadow: 0 4px 14px rgba(var(--primary-rgb),0.10); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.tile .ph img { width: 100%; height: 100%; object-fit: cover; }
.tile:active .ph { transform: scale(0.985); }
@media (hover:hover) { .tile:hover .ph { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(var(--primary-rgb),0.18); } }
.tile .cap { padding: 0.5rem 0.2rem 0; }
.tile .cap .nm { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 600; color: var(--color-primary); line-height: 1.2; }
.tile .cap .cd { font-size: 0.72rem; color: var(--color-text-muted); letter-spacing: 0.04em; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(38,12,50,0.86); display: none; align-items: center; justify-content: center; padding: calc(1.2rem + var(--safe-t)) 1.2rem calc(1.2rem + var(--safe-b)); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.lightbox.open { display: flex; }
.lb-card { background: #fff; border-radius: 16px; overflow: hidden; max-width: 440px; width: 100%; margin: auto; }
.lb-img { width: 100%; background: var(--warm-2); }
.lb-img img { width: 100%; height: auto; display: block; max-height: 70vh; object-fit: contain; }
.lb-body { padding: 1.3rem 1.4rem 1.5rem; }
.lb-body .cd { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; font-weight: 700; min-height: 0.8rem; }
.lb-body h3 { font-size: 1.4rem; margin: 0.2rem 0 0.5rem; }
.lb-body .detail { color: var(--color-text-muted); font-size: 0.88rem; font-weight: 300; margin-bottom: 1.1rem; white-space: pre-line; }
.lb-actions { display: flex; flex-direction: column; gap: 0.55rem; }
.lb-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 48px; border-radius: 10px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 0.85rem; padding: 0.9rem; transition: all 0.25s ease; }
.lb-btn.wa { background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); }
.lb-btn.wa:active { opacity: 0.9; }
.lb-btn.email { background: #fff; color: var(--color-primary); border: 1px solid rgba(var(--primary-rgb),0.25); }
@media (hover:hover) { .lb-btn.wa:hover { background: transparent; color: var(--color-accent); } .lb-btn.email:hover { border-color: var(--color-accent); } }
.lb-close { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.92); color: var(--color-primary); font-size: 1.3rem; cursor: pointer; line-height: 1; }

/* contact cta (dark accent) */
.cta { margin: 1.6rem 1.2rem 0; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-radius: 18px; padding: 2rem 1.5rem; text-align: center; color: #fff; }
.cta h2 { color: #fff; font-size: 1.55rem; }
.cta p { color: rgba(255,255,255,0.78); font-weight: 300; font-size: 0.9rem; margin-top: 0.3rem; margin-bottom: 1.3rem; }
.cta-btns { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 48px; background: #fff; color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: 0.88rem; padding: 0.85rem; border-radius: 10px; transition: transform 0.2s ease; }
.cta-btn:active { transform: scale(0.98); }
.cta-btn.primary { background: var(--color-accent); color: #fff; }

/* footer */
.footer { text-align: center; padding: 2.2rem 1.2rem calc(2.2rem + var(--safe-b)); color: var(--color-text-muted); border-top: 1px solid rgba(var(--primary-rgb),0.08); margin-top: 2.2rem; }
.footer .foot-logo { height: 38px; width: auto; margin: 0 auto 0.7rem; }
.footer .fmeta { font-size: 0.78rem; margin-top: 0.35rem; }
.footer a { color: var(--color-accent); text-decoration: none; }

@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }