:root { --bg: #ffffff; --text: #111111; --muted: #666666; --border: #eaeaea; --accent: #0070f3; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 0; line-height: 1.6; color: var(--text); background: var(--bg); }
.container { max-width: 720px; margin: 0 auto; padding: 0 20px; }

.site-header { border-bottom: 1px solid var(--border); padding: 30px 0; margin-bottom: 30px; }
.site-header h1 { font-weight: 900; font-size: 1.8rem; letter-spacing: -1px; margin: 0; }
.site-header h1 a { color: var(--text); text-decoration: none; }
.tagline { color: var(--muted); font-size: 0.95rem; margin-top: 5px; }

.feed-heading { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 15px; font-weight: 700; }
.item { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.item:hover { opacity: 0.7; }
.title { font-weight: 500; flex: 1; padding-right: 20px; font-size: 1.05rem; }
.price { font-weight: 700; color: #d32f2f; font-size: 1.1rem; white-space: nowrap; }

.product-view .back { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.product-view h1 { font-size: 1.4rem; font-weight: 700; margin-top: 15px; letter-spacing: -0.5px; }
.price-hero { font-size: 2.5rem; font-weight: 800; color: #d32f2f; margin: 20px 0; }
.cta-button { display: block; background: #000; color: #fff; padding: 16px; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 1.1rem; text-align: center; margin: 30px 0; }
.cta-button:hover { background: #333; }
.data-box { background: #f9f9f9; border: 1px solid var(--border); padding: 20px; border-radius: 6px; font-size: 0.9rem; margin-top: 20px; }
.data-box ul { margin: 0; padding-left: 20px; color: var(--muted); }

.site-footer { margin-top: 60px; border-top: 1px solid var(--border); padding: 30px 0; font-size: 0.8rem; color: var(--muted); }
.footer-links { display: flex; gap: 15px; margin: 10px 0; }
.footer-links a { color: var(--muted); text-decoration: underline; }
.ftc-notice { font-style: italic; }

.search-box{
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    margin:0 0 20px 0;
    border:1px solid var(--border);
    border-radius:6px;
    font-size:16px;
}

.site-logo{
    width:40px;
    height:40px;
    object-fit:cover;
    border-radius:8px;
    margin-right:12px;
}

.site-header h1 a{
    display:flex;
    align-items:center;
}

.site-header h1{
    margin:0;
}

:root{
    --header:#ffffff;
}

body.dark{
    --bg:#111111;
    --text:#f2f2f2;
    --muted:#aaaaaa;
    --border:#333333;
    --header:#181818;
}

.header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:inherit;
    text-decoration:none;
    flex:1;
}

.brand-name{
    font-size:2rem;
    font-weight:800;
    letter-spacing:-1px;
}

.site-header{
    background:var(--header);
    padding:18px 0;
}

.site-logo{
    width:34px;
    height:34px;
    border-radius:8px;
}

.icon-button{
    background:none;
    border:none;
    font-size:24px;
    cursor:pointer;
    color:inherit;
    padding:6px;
}

.menu-panel{

    display:none;

    position:absolute;

    top:70px;

    left:20px;

    width:240px;

    background:var(--bg);

    border:1px solid var(--border);

    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    z-index:100;
}

.menu-panel.open{
    display:block;
}

.menu-panel a{
    display:block;
    padding:14px 18px;
    color:inherit;
    text-decoration:none;
}

.menu-panel a:hover{
    background:#f5f5f5;
}

body.dark .menu-panel a:hover{
    background:#222;
}

body.dark .price{
    color:#ff7878;
}

.header-actions{
    display:flex;
    gap:4px;
}

.site-header{
    padding:8px 0;
}

.search-container{
    margin-bottom:12px;
}

.search-box{
    width:100%;
    transition:.2s;
}

.search-box.collapsed{
    display:none;
}

.brand-name{
    font-size:1.7rem;
}

.tagline{
    display:none;
}

.header-search{

    flex:1;

    height:40px;

    border:1px solid var(--border);

    border-radius:8px;

    background:var(--bg);

    color:var(--text);

    padding:0 14px;

    font-size:16px;

    margin:0 10px;

    outline:none;

}

.header-search:focus{

    border-color:var(--accent);

}


.hidden{
    display:none !important;
}

.header-search{
    flex:1;
    min-width:0;
    height:38px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--bg);
    color:var(--text);
    font-size:15px;
    margin:0 10px;
    outline:none;
}

.header-search:focus{
    border-color:var(--accent);
}

/* ---------- Compact Header ---------- */

.site-header{
    padding:14px 0 !important;
    margin-bottom:18px !important;
}

.header-row{
    min-height:44px;
    align-items:center;
}

.brand{
    gap:12px;
}

.site-logo{
    width:32px !important;
    height:32px !important;
    border-radius:6px;
}

.site-header h1{
    font-size:2rem;
    line-height:1;
}

.tagline{
    margin-top:8px;
    margin-bottom:0;
    font-size:.95rem;
}

.header-actions{
    gap:8px;
}

.icon-button{
    width:40px;
    height:40px;
}

/* ---------- Search ---------- */

.search-area{
    margin:12px 0 20px;
}

.search-box{
    margin:0;
}

/* ---------- Feed ---------- */

.feed-heading{
    margin:0 0 12px;
}

.item{
    padding:16px 0;
}

/* ---------- Mobile ---------- */

@media (max-width:700px){

    .container{
        padding:0 16px;
    }

    .site-header{
        padding:12px 0 !important;
    }

    .site-header h1{
        font-size:1.8rem;
    }

    .tagline{
        font-size:.9rem;
    }

}

/* ============================================================
   Dark Theme
   ============================================================ */

body.dark{

    --bg:#121212;
    --text:#f3f3f3;
    --muted:#b5b5b5;
    --border:#303030;

    background:var(--bg);
    color:var(--text);

}

/* backgrounds */

body.dark .site-header,
body.dark .site-footer{
    background:var(--bg);
    border-color:var(--border);
}

body.dark .menu-panel{
    background:#1b1b1b;
    border-color:var(--border);
}

body.dark .data-box{

    background:#1c1c1c;
    border:1px solid var(--border);
    color:var(--text);

}

body.dark .search-box,
body.dark .header-search{

    background:#1f1f1f;
    color:var(--text);
    border:1px solid #444;

}

body.dark .search-box::placeholder,
body.dark .header-search::placeholder{

    color:#888;

}

/* links */

body.dark a{

    color:var(--text);

}

body.dark .back{

    color:var(--muted);

}

body.dark .footer-links a{

    color:#d0d0d0;

}

/* metadata */

body.dark .data-box ul{

    color:#d0d0d0;

}

body.dark .data-box strong{

    color:#ffffff;

}

/* button */

body.dark .cta-button{

    background:#2b2b2b;
    border:1px solid #444;

}

body.dark .cta-button:hover{

    background:#383838;

}

/* rows */

body.dark .item{

    border-bottom:1px solid var(--border);

}

body.dark .feed-heading{

    color:#bcbcbc;

}