/* SmartFinanceCore — shared styles for the public pages (index, category, product) */
:root { --pine:#4A5D3A; --tan:#B08B4A; --bg:#FAF6EC; --line:#DDD6C8; --ink:#2E2E2A; --muted:#8A8A82; --red:#8A3B33; }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { font-family: -apple-system, Segoe UI, Helvetica, Arial, sans-serif; background:var(--bg); margin:0; color:var(--ink); }
.wrap { max-width:1320px; margin:0 auto; padding:0 1rem; }

/* Top bar */
.topbar { border-bottom:1px solid var(--line); background:#fff; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:60px; }
.topbar .brand { display:flex; align-items:center; gap:0.6rem; color:var(--pine); font-weight:700; text-decoration:none; font-size:1.05rem; }
.topbar .brand img { width:34px; height:34px; border-radius:8px; }
.topbar nav { display:flex; align-items:center; gap:1.2rem; font-size:0.9rem; }
.topbar nav a { color:var(--ink); text-decoration:none; }
.topbar nav a:hover { color:var(--pine); }
.topbar nav { gap:0.8rem; }
.topbar nav a.btn { color:#fff; }
.topbar nav a.btn.secondary { color:var(--pine); }
.topbar nav a:not(.btn) { margin-right:0.4rem; }
.topbar nav a { white-space:nowrap; }
@media (max-width: 480px) { .topbar .brand-name { display:none; } }

/* Search (top bar) */
.topbar .search { flex:1; max-width:420px; position:relative; margin:0 1rem; }
.topbar .search input { width:100%; padding:0.55rem 2.6rem 0.55rem 1rem; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--ink); font:inherit; font-size:0.9rem; -webkit-appearance:none; appearance:none; }
.topbar .search input:focus { outline:none; border-color:var(--pine); background:#fff; box-shadow:0 0 0 3px rgba(74,93,58,.12); }
.topbar .search button { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:none; border-radius:50%; background:none; color:var(--pine); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.topbar .search button:hover { background:#EFE9DC; }
@media (max-width: 760px) {
  .topbar .wrap { flex-wrap:wrap; height:auto; padding-top:0.6rem; padding-bottom:0.6rem; row-gap:0.6rem; }
  .topbar .search { order:3; flex-basis:100%; max-width:none; margin:0; }
  .topbar .search input { font-size:16px; } /* no iOS zoom on focus */
}
.topbar .suggest { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(46,46,42,.14); overflow:hidden; }
.topbar .suggest[hidden] { display:none; }
.suggest-item { display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:0.7rem; padding:0.55rem 0.8rem; text-decoration:none; color:var(--ink); border-bottom:1px solid #F1ECE1; }
.suggest-item img { grid-row:1 / 3; width:44px; height:44px; object-fit:cover; border-radius:6px; background:#F3EFE5; }
.suggest-item .s-title { font-size:0.85rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:end; }
.suggest-item .s-price { font-size:0.8rem; font-weight:700; color:var(--pine); display:flex; align-items:center; gap:0.4rem; }
.suggest-item .s-price s { font-weight:400; color:var(--muted); }
.suggest-item .demo-badge { font-size:0.65rem; padding:0.05rem 0.4rem; }
.suggest-item:hover, .suggest-item.active, .suggest-all:hover, .suggest-all.active { background:#F6F2E8; }
.suggest-all { display:block; padding:0.6rem 0.8rem; font-size:0.85rem; font-weight:600; color:var(--tan); text-decoration:none; }
.suggest-empty { padding:0.8rem; font-size:0.85rem; color:var(--muted); }
.search-info { margin:1.5rem 0 1rem; color:var(--muted); }
.search-info strong { color:var(--ink); }
.search-info a { color:var(--tan); font-weight:600; }
.btn.btn-sm { padding:0.5rem 1rem; font-size:0.9rem; }
@media (max-width: 560px) { .topbar nav .hide-sm { display:none; } }

/* Home header */
header.hero { text-align:center; padding:1.5rem 1rem 2rem; }
header.hero .banner { display:block; width:100%; height:auto; border-radius:14px; margin-bottom:1.5rem; box-shadow:0 6px 20px rgba(46,46,42,.15); }
header.hero h1 { font-size:1.6rem; color:var(--pine); margin:0 0 0.6rem; letter-spacing:-0.01em; }
header.hero p { font-size:1.1rem; color:var(--muted); margin:0 0 1.8rem; }

.btn { display:inline-block; padding:0.75rem 1.4rem; background:var(--pine); color:#fff; border-radius:8px; text-decoration:none; font-weight:600; }
.btn:hover { background:#3C4C2F; }
.btn.secondary { background:#fff; color:var(--pine); border:1px solid var(--line); }
.btn.secondary:hover { border-color:var(--pine); background:#fff; }

/* Category sidebar + product grid */
.layout { display:grid; grid-template-columns:230px 1fr; gap:2rem; align-items:start; padding-bottom:4rem; }
.filters { display:flex; flex-direction:column; gap:0.2rem; }
.filters a { font-size:0.9rem; padding:0.5rem 0.8rem; border-radius:8px; color:var(--ink); text-decoration:none; display:flex; justify-content:space-between; align-items:center; gap:0.6rem; }
.filters a .n { font-size:0.75rem; font-weight:600; color:var(--muted); background:#EFE9DC; border-radius:999px; padding:0.05rem 0.5rem; min-width:1.6rem; text-align:center; }
.filters a.active .n { color:var(--pine); background:#fff; }
.filters a:hover { background:#EFE9DC; }
.filters a.active { background:var(--pine); color:#fff; }
@media (max-width: 800px) {
  .layout { grid-template-columns:1fr; gap:1rem; }
  .filters { flex-direction:row; position:static; overflow-x:auto; max-height:none; padding-bottom:0.5rem; }
  .filters a { flex:none; white-space:nowrap; border:1px solid var(--line); border-radius:999px; background:#fff; }
}
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:1.5rem; }
.card { position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s; }
.card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(46,46,42,.08); }
.card[hidden] { display:none; }
.card img { width:100%; aspect-ratio:1/1; object-fit:contain; background:#F3EFE5; display:block; }
.card .body { padding:1rem; display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.card h2, .card h3 { font-size:0.95rem; font-weight:500; line-height:1.4; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .foot { margin-top:auto; display:flex; justify-content:space-between; align-items:center; }
.card .view { font-size:0.85rem; color:var(--tan); font-weight:600; white-space:nowrap; }
.card .foot { gap:0.5rem; }
.card .foot-left { display:flex; align-items:center; flex-wrap:wrap; gap:0.3rem 0.5rem; }
.demo-badge { font-size:0.72rem; font-weight:700; color:var(--pine); background:#EAF0E4; border:1px solid #CFDCC5; padding:0.12rem 0.5rem; border-radius:999px; white-space:nowrap; }
.price { font-weight:700; color:var(--pine); }
.price s { font-weight:400; color:var(--muted); font-size:0.85em; margin-left:0.3rem; }
.badge { position:absolute; top:0.7rem; left:0.7rem; background:var(--red); color:#fff; font-size:0.8rem; font-weight:700; padding:0.25rem 0.55rem; border-radius:6px; z-index:1; }
.empty { text-align:center; color:var(--muted); padding-bottom:4rem; }

/* Breadcrumbs + category intro */
.crumbs { font-size:0.85rem; color:var(--muted); margin:1.5rem 0 1rem; }
.crumbs a { color:var(--muted); }
.page-head h1 { color:var(--pine); font-size:1.8rem; margin:0 0 0.6rem; }
.page-head p { line-height:1.65; max-width:760px; margin:0 0 2rem; }

/* Product page */
.product { display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem; align-items:start; margin-bottom:3rem; }
.product > *, .layout > * { min-width:0; } /* let the thumbnail strip scroll instead of widening the column */
/* Product slider */
.stage-wrap { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#F3EFE5; }
.stage { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; outline:none; }
.stage::-webkit-scrollbar { display:none; }
.slide { flex:0 0 100%; aspect-ratio:1/1; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; }
.slide img, .slide video { width:100%; height:100%; object-fit:contain; display:block; }
.slide video { background:#111; }
.stage-wrap .nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,.92); color:var(--pine); font-size:1.8rem; line-height:1; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.15); opacity:0; transition:opacity .2s, background .2s; display:flex; align-items:center; justify-content:center; padding:0 0 4px; }
.stage-wrap .nav.prev { left:12px; }
.stage-wrap .nav.next { right:12px; }
.stage-wrap:hover .nav, .stage-wrap:focus-within .nav { opacity:1; }
.stage-wrap .nav:hover { background:#fff; }
.counter { position:absolute; bottom:12px; right:12px; background:rgba(46,46,42,.75); color:#fff; font-size:0.8rem; padding:0.25rem 0.6rem; border-radius:999px; pointer-events:none; }
@media (hover: none) { .stage-wrap .nav { opacity:1; width:38px; height:38px; font-size:1.5rem; } }
.stage .slide img { cursor:zoom-in; }

/* Full-screen view */
.lightbox { position:fixed; inset:0; z-index:100; background:#121210; }
.lightbox[hidden] { display:none; }
.lb-track { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.lb-track::-webkit-scrollbar { display:none; }
.lb-slide { flex:0 0 100%; height:100%; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; padding:3.5rem 5rem; }
.lb-slide img, .lb-slide video { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; display:block; }
.lb-close { position:absolute; top:12px; right:14px; width:44px; height:44px; border:none; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:1.9rem; line-height:1; cursor:pointer; }
.lb-close:hover { background:rgba(255,255,255,.25); }
.lightbox .nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:none;
  background:rgba(255,255,255,.12); color:#fff; font-size:2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 4px; }
.lightbox .nav:hover { background:rgba(255,255,255,.25); }
.lightbox .nav.prev { left:16px; }
.lightbox .nav.next { right:16px; }
.lightbox .counter { right:auto; left:50%; transform:translateX(-50%); bottom:16px; background:rgba(255,255,255,.12); }
@media (max-width: 800px) {
  .lb-slide { padding:3.5rem 0.5rem; }
  .lightbox .nav { width:40px; height:40px; font-size:1.6rem; background:rgba(0,0,0,.45); }
  .lightbox .nav.prev { left:8px; }
  .lightbox .nav.next { right:8px; }
}

.thumbs { position:relative; display:flex; gap:0.5rem; margin-top:0.6rem; overflow-x:auto; padding-bottom:0.3rem; scrollbar-width:thin; }
.thumbs button { position:relative; flex:none; padding:0; border:2px solid transparent; border-radius:8px; background:none; cursor:pointer; opacity:.65; transition:opacity .15s, border-color .15s; }
.thumbs button:hover, .thumbs button.active { opacity:1; }
.thumbs button.active { border-color:var(--pine); }
.thumbs img { width:72px; height:72px; object-fit:cover; border-radius:6px; display:block; }
.thumbs button.is-video::after { content:"▶"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; background:rgba(0,0,0,.35); border-radius:6px; }
.info h1 { font-size:1.45rem; line-height:1.35; margin:0 0 1rem; }
.info .price { font-size:1.6rem; }
.info .sale-note { color:var(--red); font-size:0.9rem; margin:0.4rem 0 0; }
.info .tax-note { color:var(--muted); font-size:0.8rem; margin:0.4rem 0 0; }
.info .btn { margin-top:1.5rem; font-size:1.05rem; padding:0.9rem 1.8rem; }
.info .meta { margin-top:1.5rem; font-size:0.9rem; color:var(--muted); }
.info .meta a { color:var(--tan); font-weight:600; }
.desc { background:#fff; border:1px solid var(--line); border-radius:14px; padding:2rem; margin-bottom:3rem; line-height:1.7; }
.desc h2 { color:var(--pine); font-size:1.3rem; margin:0 0 1rem; }
.desc p { margin:0 0 1rem; }
.related h2 { color:var(--pine); font-size:1.3rem; margin:0 0 1rem; }
.related { padding-bottom:4rem; }
@media (max-width: 800px) { .product { grid-template-columns:1fr; gap:1.5rem; } .desc { padding:1.3rem; } }

/* Live demo page */
.demo-page { margin:0; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.demo-bar { flex:none; display:flex; align-items:center; gap:1rem; padding:0.5rem 1rem; background:#fff; border-bottom:1px solid var(--line); }
.demo-bar .back { color:var(--pine); text-decoration:none; font-weight:600; font-size:0.9rem; white-space:nowrap; }
.demo-bar .demo-title { flex:1; min-width:0; text-align:center; font-size:0.9rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demo-bar .demo-title strong { color:var(--red); }
.demo-bar .btn { white-space:nowrap; }
.demo-page iframe { flex:1; width:100%; border:0; background:#fff; }
@media (max-width: 560px) { .demo-bar .hide-sm { display:none; } .demo-bar { gap:0.6rem; padding:0.5rem 0.7rem; } }
.btn-demo { margin-left:0.5rem; }
.info .demo-note { color:var(--muted); font-size:0.8rem; margin:0.6rem 0 0; }

/* Etsy reviews */
.stars { color:#C99A45; letter-spacing:1px; }
.stars .off { color:#DDD6C8; }
.rating-line { display:inline-block; font-size:0.9rem; color:var(--muted); text-decoration:none; margin:0 0 0.8rem; }
.rating-line strong { color:var(--ink); }
.rating-line:hover { color:var(--pine); }
/* Home: rating card on the left (above the category list), heading on the right (above the products) */
.hero-row { display:grid; grid-template-columns:230px 1fr; gap:2rem; align-items:center; }
.hero-row .hero-text { grid-column:2; }
.hero-row .hero-text p { margin-bottom:0; }
.rating-card { grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:center; gap:0.1rem; padding:0.9rem 1rem; background:#fff; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--muted); font-size:0.85rem; transition:border-color .15s, box-shadow .15s; }
.rating-card:hover { border-color:var(--pine); box-shadow:0 4px 14px rgba(46,46,42,.08); }
.rating-card .stars { font-size:1.1rem; }
.rating-card strong { font-size:1.6rem; line-height:1.2; color:var(--ink); }
@media (max-width: 800px) {
  .hero-row { grid-template-columns:1fr; gap:1rem; }
  .hero-row .hero-text, .rating-card { grid-column:1; grid-row:auto; }
  .rating-card { flex-direction:row; justify-content:center; gap:0.5rem; order:2; padding:0.6rem 1rem; }
  .rating-card strong { font-size:1.1rem; }
}
.info .rating-line { display:table; margin:-0.4rem 0 0.7rem; }
.card-rating { font-size:0.8rem; color:var(--ink); }
.card-rating span:not(.stars):not(.off) { color:var(--muted); }
.reviews { margin-bottom:3rem; }
.reviews h2 { color:var(--pine); font-size:1.3rem; margin:0 0 0.4rem; }
.reviews-sum { color:var(--muted); font-size:0.9rem; margin:0 0 1.2rem; }
.reviews-sum a { color:var(--tan); font-weight:600; }
.reviews-sum .rating-line { margin:0; }
.review-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap:1rem; }
.review { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.2rem; }
.review-head { font-size:0.85rem; margin-bottom:0.5rem; }
.review-head .who { color:var(--muted); font-size:0.8rem; margin-left:0.3rem; }
.review p { margin:0; line-height:1.6; font-size:0.93rem; }
.review img { margin-top:0.8rem; width:96px; height:96px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }

/* About */
.about { display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; background:#fff; border:1px solid var(--line); border-radius:14px; padding:2.5rem; margin-bottom:4rem; }
.about h1 { color:var(--pine); font-size:1.8rem; margin:0 0 1rem; }
.about p { line-height:1.65; margin:0 0 1rem; }
.about a { color:var(--tan); font-weight:600; }
.about a.btn { color:#fff; margin-top:0.5rem; }
.about ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.about li { padding-left:2rem; position:relative; color:var(--muted); font-size:0.95rem; }
.about li::before { content:"✓"; position:absolute; left:0; top:0; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--pine); color:#fff; font-size:0.8rem; display:flex; align-items:center; justify-content:center; }
.about li strong { display:block; color:var(--ink); }
@media (max-width: 800px) { .about { grid-template-columns:1fr; padding:1.5rem; gap:1.5rem; } }

footer { border-top:1px solid var(--line); padding:1.5rem 0; text-align:center; font-size:0.85rem; color:var(--muted); }
footer a { color:var(--muted); }
footer .legal { margin-top:0.5rem; font-size:0.72rem; opacity:0.8; }