/*
Theme Name: Colossux Commerce
Theme URI: https://example.com/colossux-commerce
Author: OpenAI
Author URI: https://openai.com
Description: A fast, mobile-first WooCommerce-ready marketplace theme with a Temu-inspired layout tailored to Colossux content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: colossux-commerce
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: ecommerce, blog, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, wooocommerce
*/

:root {
  --cx-bg: #f7f7f7;
  --cx-surface: #ffffff;
  --cx-surface-2: #fff6ef;
  --cx-text: #1f2937;
  --cx-muted: #6b7280;
  --cx-border: #e5e7eb;
  --cx-primary: #ff6a00;
  --cx-primary-dark: #e85c00;
  --cx-accent: #111827;
  --cx-success: #0f766e;
  --cx-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
  --cx-radius: 18px;
  --cx-radius-sm: 12px;
  --cx-container: min(1240px, calc(100% - 28px));
  --cx-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--cx-font);
  color: var(--cx-text);
  background: var(--cx-bg);
  line-height: 1.65;
}
img, svg, iframe, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cx-primary-dark); }
button, input, select, textarea { font: inherit; }
.screen-reader-text { position:absolute; left:-9999px; }
.site-wrap { min-height: 100vh; display:flex; flex-direction:column; }
.container { width: var(--cx-container); margin-inline: auto; }
.skip-link { position:absolute; top:-40px; left:0; background:#000; color:#fff; padding:8px 12px; z-index:999; }
.skip-link:focus { top:10px; }
.cx-topbar { background: linear-gradient(90deg, #ff7a1a, var(--cx-primary)); color:#fff; font-size:.92rem; }
.cx-topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; }
.cx-topbar-note { font-weight:800; }
.cx-topbar-badges { display:flex; flex-wrap:wrap; gap:10px; }
.cx-topbar-badges span { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:5px 10px; line-height:1; }
.site-header { position:sticky; top:0; z-index:80; background:rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom:1px solid rgba(229,231,235,.85); }
.site-header-inner { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:14px 0; }
.branding { display:flex; align-items:center; gap:12px; min-width:0; }
.branding-mark { width:48px; height:48px; border-radius:14px; background:linear-gradient(140deg, var(--cx-primary), #ffb347); display:grid; place-items:center; color:#fff; font-weight:900; box-shadow:var(--cx-shadow); }
.branding-title { font-size:1.15rem; font-weight:800; margin:0; line-height:1.1; }
.branding-tagline { font-size:.88rem; color:var(--cx-muted); }
.search-shell { display:flex; align-items:center; gap:10px; min-width:0; }
.search-form { flex:1; display:grid; grid-template-columns:1fr auto; align-items:center; background:#f8fafc; border:2px solid rgba(255,106,0,.16); border-radius:999px; overflow:hidden; }
.search-field { width:100%; padding:13px 18px; border:0; background:transparent; outline:none; }
.search-submit { border:0; background:var(--cx-accent); color:#fff; width:52px; height:52px; cursor:pointer; }
.header-actions { display:flex; align-items:center; gap:10px; }
.header-pill, .header-icon-btn, .cta-btn, .promo-btn, .load-more-link, .button, .wp-element-button, button, input[type="submit"] {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.header-pill, .header-icon-btn { background:#f9fafb; border:1px solid var(--cx-border); padding:11px 14px; }
.header-pill:hover, .header-icon-btn:hover, .cta-btn:hover, .promo-btn:hover, .load-more-link:hover { transform:translateY(-1px); box-shadow:var(--cx-shadow); }
.mobile-toggle { display:none; border:1px solid var(--cx-border); background:#fff; padding:10px 12px; border-radius:14px; }
.nav-shell { border-top:1px solid var(--cx-border); background:#fff; }
.primary-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.menu, .sub-menu { list-style:none; margin:0; padding:0; }
.menu { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.menu > li > a { display:block; padding:10px 14px; border-radius:999px; font-weight:700; }
.menu > li.current-menu-item > a, .menu > li > a:hover { background:var(--cx-surface-2); color:var(--cx-primary-dark); }
.menu-item-has-children { position:relative; }
.menu-item-has-children > a::after { content:''; }
.sub-menu { position:absolute; top:100%; left:0; min-width:220px; background:#fff; border:1px solid var(--cx-border); border-radius:16px; box-shadow:var(--cx-shadow); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .18s ease; }
.menu-item-has-children:hover > .sub-menu, .menu-item-has-children:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.sub-menu a { display:block; padding:10px 12px; border-radius:12px; }
.sub-menu a:hover { background:#f8fafc; }
.nav-meta { display:flex; gap:8px; flex-wrap:wrap; }
.nav-chip { background:#fff6ef; color:#9a3f00; border:1px solid rgba(255,106,0,.12); border-radius:999px; padding:8px 12px; font-size:.9rem; font-weight:700; }
.main-content { flex:1; }
.hero { padding:26px 0 18px; }
.hero-grid { display:grid; grid-template-columns:1.25fr .85fr; gap:22px; align-items:stretch; }
.hero-card, .panel-card, .product-card, .article-card, .category-card, .metric-card, .newsletter-card, .template-card {
  background:var(--cx-surface); border:1px solid rgba(229,231,235,.8); border-radius:var(--cx-radius); box-shadow:var(--cx-shadow);
}
.hero-card {
  position:relative; overflow:hidden; padding:34px; background:linear-gradient(135deg, #fff7f0 0%, #fff 50%, #fff3e4 100%);
}
.hero-card::before {
  content:''; position:absolute; inset:auto -10% -20% auto; width:280px; height:280px; background:radial-gradient(circle, rgba(255,106,0,.18), transparent 60%); border-radius:50%;
}
.kicker { display:inline-flex; gap:8px; align-items:center; background:#fff; padding:8px 12px; border:1px solid rgba(255,106,0,.18); border-radius:999px; font-size:.9rem; color:#9a3f00; font-weight:700; }
.hero-title { margin:14px 0 12px; font-size:clamp(2rem, 4vw, 3.45rem); line-height:1.02; font-weight:900; letter-spacing:-.04em; max-width:12ch; }
.hero-copy { max-width:68ch; color:#374151; font-size:1.02rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.cta-btn, .promo-btn, .load-more-link, .button, .wp-element-button, input[type="submit"] {
  background:var(--cx-primary); color:#fff; padding:13px 18px; font-weight:800; border:0; cursor:pointer;
}
.cta-btn.is-secondary, .promo-btn.is-secondary { background:#111827; }
.hero-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:22px; }
.metric-card { padding:16px; }
.metric-label { color:var(--cx-muted); font-size:.92rem; display:block; }
.metric-value { font-size:1.5rem; font-weight:900; }
.hero-side { display:grid; gap:16px; }
.panel-card { padding:22px; }
.promo-stack { display:grid; gap:12px; }
.promo-bar { display:flex; justify-content:space-between; gap:10px; align-items:center; background:#fff6ef; border:1px solid rgba(255,106,0,.14); border-radius:14px; padding:12px 14px; }
.promo-bar strong { display:block; }
.promo-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.template-card { padding:18px; min-height:160px; background:linear-gradient(160deg, #fff, #f8fafc); }
.template-card h3 { margin:0 0 8px; font-size:1rem; }
.template-card p { margin:0; color:var(--cx-muted); font-size:.95rem; }
.section { padding:14px 0 10px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:14px; }
.section-title { margin:0; font-size:clamp(1.4rem, 3vw, 2rem); line-height:1.1; }
.section-subtitle { margin:4px 0 0; color:var(--cx-muted); max-width:64ch; }
.categories-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.category-card { padding:20px; position:relative; overflow:hidden; min-height:150px; }
.category-card::after { content:''; position:absolute; right:-28px; bottom:-28px; width:110px; height:110px; border-radius:999px; background:rgba(255,106,0,.09); }
.category-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; font-size:1.5rem; background:#fff6ef; }
.category-title { margin:16px 0 8px; font-size:1.08rem; font-weight:800; }
.category-meta { display:flex; justify-content:space-between; gap:12px; color:var(--cx-muted); font-size:.94rem; }
.product-toolbar { display:flex; gap:10px; flex-wrap:wrap; }
.filter-chip { border:1px solid var(--cx-border); background:#fff; border-radius:999px; padding:9px 14px; font-weight:700; }
.filter-chip.is-active { background:#111827; color:#fff; border-color:#111827; }
.product-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.product-card { overflow:hidden; display:flex; flex-direction:column; min-height:100%; }
.product-media { aspect-ratio: 4 / 3; background:linear-gradient(135deg, #fff2e1, #f5f7fb); position:relative; overflow:hidden; }
.product-media::before {
  content:''; position:absolute; inset:14px; border-radius:24px; background:linear-gradient(135deg, rgba(255,106,0,.22), rgba(17,24,39,.05));
}
.product-badge { position:absolute; top:14px; left:14px; z-index:2; background:#fff; border-radius:999px; padding:7px 10px; font-size:.8rem; font-weight:800; color:#9a3f00; border:1px solid rgba(255,106,0,.12); }
.product-body { padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-category { font-size:.85rem; font-weight:800; color:var(--cx-primary-dark); text-transform:uppercase; letter-spacing:.06em; }
.product-title { margin:0; font-size:1rem; line-height:1.35; font-weight:800; }
.product-excerpt { color:var(--cx-muted); font-size:.92rem; margin:0; }
.product-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.price-wrap { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.price-current { font-weight:900; font-size:1.15rem; }
.price-old { color:var(--cx-muted); text-decoration:line-through; font-size:.92rem; }
.rating { color:#b45309; font-size:.92rem; font-weight:700; }
.deal-banner { padding:22px; background:linear-gradient(90deg, #111827, #1f2937); color:#fff; display:grid; grid-template-columns:1.15fr auto; gap:18px; align-items:center; }
.deal-banner strong { color:#ffd089; }
.amazon-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.amazon-card { padding:18px; background:#fff; border:1px solid var(--cx-border); border-radius:16px; box-shadow:var(--cx-shadow); }
.amazon-card p { color:var(--cx-muted); margin:.5rem 0 0; font-size:.94rem; }
.notice { padding:14px 16px; border-radius:16px; background:#fff6ef; border:1px solid rgba(255,106,0,.16); color:#9a3f00; }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
.entry-card, .sidebar-card { background:#fff; border:1px solid var(--cx-border); border-radius:var(--cx-radius); box-shadow:var(--cx-shadow); padding:28px; }
.entry-header { margin-bottom:20px; }
.entry-title { margin:0; font-size:clamp(1.8rem, 4vw, 2.6rem); line-height:1.05; }
.entry-meta { margin-top:8px; color:var(--cx-muted); font-size:.95rem; }
.entry-thumbnail { margin:18px 0 24px; border-radius:20px; overflow:hidden; }
.entry-content > *:first-child { margin-top:0; }
.entry-content h2, .entry-content h3, .entry-content h4 { line-height:1.15; }
.entry-content table { width:100%; border-collapse:collapse; overflow-x:auto; display:block; }
.entry-content td, .entry-content th { border:1px solid var(--cx-border); padding:10px; }
.entry-content a { color:var(--cx-primary-dark); word-break:break-word; }
.wp-block-embed, .entry-content iframe { border-radius:18px; overflow:hidden; }
.post-list { display:grid; gap:16px; }
.article-card { display:grid; grid-template-columns:180px 1fr; overflow:hidden; }
.article-thumb { min-height:100%; background:linear-gradient(135deg, #fff2e1, #e5edff); }
.article-body { padding:18px; }
.article-body h2 { margin:0 0 8px; font-size:1.15rem; }
.article-body p { margin:0 0 12px; color:var(--cx-muted); }
.sidebar-card h3 { margin-top:0; }
.footer-newsletter { padding:24px 0 10px; }
.newsletter-card { padding:28px; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; background:linear-gradient(135deg, #fff6ef 0%, #fff 100%); }
.newsletter-form { display:flex; gap:12px; flex-wrap:wrap; }
.newsletter-form input { min-width:250px; flex:1; border-radius:999px; border:1px solid var(--cx-border); padding:13px 16px; }
.site-footer { padding:18px 0 34px; }
.footer-grid { display:grid; grid-template-columns:1.2fr .85fr .85fr .95fr; gap:18px; }
.footer-card { background:#fff; border:1px solid var(--cx-border); border-radius:20px; padding:24px; box-shadow:var(--cx-shadow); }
.footer-card h3 { margin-top:0; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-links a { color:#374151; }
.footer-meta { text-align:center; color:var(--cx-muted); margin-top:18px; font-size:.92rem; }
.mobile-bottom-bar { display:none; }
.pagination, .nav-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.pagination .page-numbers, .nav-links a, .nav-links span { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 14px; background:#fff; border:1px solid var(--cx-border); border-radius:999px; }
.alignwide, .alignfull { max-width:100%; }
.wp-caption { max-width:100%; }
.gallery { display:grid; gap:12px; }
@media (max-width: 1100px) {
  .hero-grid, .content-grid, .footer-grid, .newsletter-card { grid-template-columns:1fr; }
  .categories-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .product-grid, .amazon-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .site-header-inner { grid-template-columns:auto 1fr auto; }
  .search-shell { grid-column:1 / -1; order:3; }
  .primary-nav { align-items:flex-start; flex-direction:column; }
  .nav-meta { width:100%; }
  .categories-grid, .product-grid, .amazon-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .article-card { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .cx-topbar-inner { flex-direction:column; align-items:flex-start; }
  .mobile-toggle { display:inline-flex; }
  .nav-shell { display:none; }
  .nav-shell.is-open { display:block; }
  .menu { flex-direction:column; align-items:stretch; width:100%; }
  .menu > li > a { border-radius:14px; }
  .sub-menu { position:static; opacity:1; visibility:visible; transform:none; min-width:0; box-shadow:none; border:0; padding:6px 0 0 12px; display:none; }
  .menu-item-has-children.is-open > .sub-menu { display:block; }
  .hero-card, .panel-card, .entry-card, .sidebar-card, .footer-card, .newsletter-card { padding:20px; }
  .hero-stats { grid-template-columns:1fr; }
  .promo-grid { grid-template-columns:1fr; }
  .categories-grid, .product-grid, .amazon-grid { grid-template-columns:1fr; }
  .deal-banner { grid-template-columns:1fr; }
  .header-actions .header-pill { display:none; }
  .newsletter-form { flex-direction:column; }
  .newsletter-form input { min-width:0; width:100%; }
  .mobile-bottom-bar {
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px; position:sticky; bottom:10px; z-index:60; width:var(--cx-container); margin:16px auto 0; background:rgba(255,255,255,.98); border:1px solid var(--cx-border); border-radius:22px; padding:8px; box-shadow:var(--cx-shadow);
  }
  .mobile-bottom-bar a { text-align:center; padding:8px 6px; border-radius:14px; font-size:.82rem; font-weight:700; }
  .mobile-bottom-bar a:hover { background:#fff6ef; }
}