/*
Theme Name: CANZIZ Marketplace
Theme URI: https://canziz.example
Author: CANZIZ
Description: Custom marketplace theme for CANZIZ — mega menu, category rows, WooCommerce-ready storefront and info pages. Built to match the CANZIZ brand system (indigo + coral, Bricolage Grotesque / Inter).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: canziz
*/

/* ============================== DESIGN TOKENS ============================== */
:root{
  --ink:#17152A; --ink-soft:#6E6B85; --bg:#F5F3EF; --surface:#FFFFFF;
  --teal:#362F8F; --teal-deep:#14122A; --gold:#FF5A3C; --gold-soft:#FFE1D6;
  --star:#F0A93B; --rose:#E8443D; --line:#E7E4E9; --line-soft:#EFEDF2; --lav:#EEECFB;
  --shadow-xs:0 1px 2px rgba(23,21,42,.05);
  --shadow-sm:0 2px 8px rgba(23,21,42,.06),0 1px 2px rgba(23,21,42,.05);
  --shadow-md:0 8px 24px rgba(23,21,42,.10),0 2px 6px rgba(23,21,42,.06);
  --shadow-lg:0 20px 44px rgba(23,21,42,.16);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:'Inter',sans-serif; color:var(--ink); background:var(--bg);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button, input, select, textarea{font-family:inherit;}
h1,h2,h3,h4{line-height:1.12; margin:0;}
p{color:var(--ink-soft); margin:0 0 1em;}
.cz-serif{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; letter-spacing:-0.02em;}
.cz-mono{font-family:'IBM Plex Mono',monospace;}
.cz-wrap{max-width:1180px; margin:0 auto; padding:0 20px;}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px;}
::selection{background:var(--lav); color:var(--teal-deep);}

/* ============================== BUTTONS / CARDS / INPUTS ============================== */
.cz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 22px; border-radius:999px; border:1.5px solid var(--teal);
  background:var(--teal); color:#fff; font-weight:600; font-size:14px;
  box-shadow:var(--shadow-xs); transition:filter .15s ease, transform .08s ease, box-shadow .15s ease;
  cursor:pointer;
}
.cz-btn:hover{filter:brightness(1.12); box-shadow:var(--shadow-sm); color:#fff;}
.cz-btn:active{transform:scale(.97);}
.cz-btn-gold{background:var(--gold); border-color:var(--gold);}
.cz-btn-outline{background:transparent; color:var(--teal); box-shadow:none; border:1.5px solid var(--line);}
.cz-btn-outline:hover{background:var(--lav); color:var(--teal);}
.cz-btn-sm{padding:7px 15px; font-size:13px;}
.cz-card{background:var(--surface); border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--shadow-xs);}
.cz-input{width:100%; padding:10px 14px; border:1.5px solid var(--line); border-radius:14px; background:#fff; font-size:14px;}
.cz-input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--lav);}
.cz-eyebrow{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); font-weight:700;}
.cz-pcard{transition:box-shadow .2s ease, transform .15s ease;}
.cz-pcard:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.cz-seal{display:inline-flex; align-items:center; justify-content:center; text-align:center; border-radius:50%; border:1.5px dashed currentColor; transform:rotate(-8deg); font-weight:700; letter-spacing:.02em; line-height:1.1;}
.cz-lattice{height:5px; background:repeating-linear-gradient(90deg, var(--teal) 0 22px, var(--gold) 22px 30px, var(--star) 30px 34px, var(--teal) 34px 56px);}

/* ============================== HEADER ============================== */
.cz-topbar{background:var(--teal-deep); color:#A9A6C4; font-size:12px;}
.cz-topbar .cz-wrap{padding:6px 20px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.cz-topbar a{margin-left:16px;}
.cz-topbar a:first-child{margin-left:0;}
.cz-mainbar{background:#fff; border-bottom:1px solid var(--line-soft); box-shadow:var(--shadow-xs); position:relative; z-index:5;}
.cz-mainbar .cz-wrap{padding:16px 20px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.cz-logo{display:flex; align-items:center; gap:8px; font-size:22px;}
.cz-logo .cz-mark{width:34px; height:34px; border-radius:10px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center;}
.cz-search{flex:1; display:flex; max-width:640px; background:var(--bg); border-radius:14px; overflow:hidden; min-width:200px;}
.cz-search input{flex:1; padding:11px 16px; border:none; background:transparent; font-size:14px;}
.cz-search button{border:none; background:var(--teal); color:#fff; padding:0 20px; cursor:pointer;}
.cz-actions{display:flex; align-items:center; gap:20px; font-size:12px; margin-left:auto;}
.cz-actions a{display:flex; flex-direction:column; align-items:center; gap:2px; position:relative;}
.cz-actions .badge{position:absolute; top:-6px; right:-10px; background:var(--gold); color:#fff; font-size:10px; font-weight:700; border-radius:50%; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center;}

/* Category bar + mega menu */
.cz-catbar{background:var(--teal); color:#fff; position:relative;}
.cz-catbar .cz-wrap{display:flex; align-items:center; gap:4px; position:relative;}
.cz-catbar nav{display:flex; overflow-x:auto; gap:22px; font-size:12.5px;}
.cz-catbar nav a{padding:10px 0; white-space:nowrap; color:#fff; opacity:.92; font-weight:500;}
.cz-catbar nav a:hover{opacity:1;}
.cz-mega-toggle{border:none; background:none; color:#fff; padding:10px 14px; display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; cursor:pointer; border-radius:10px 10px 0 0;}
.cz-mega{position:relative;}
.cz-mega-panel{
  position:absolute; top:100%; left:0; width:780px; max-width:calc(100vw - 40px);
  background:#fff; border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--shadow-lg);
  display:none; overflow:hidden; z-index:30;
}
.cz-mega:hover .cz-mega-panel, .cz-mega-panel:hover{display:flex;}
.cz-mega-side{width:220px; background:var(--bg); padding:8px; flex-shrink:0;}
.cz-mega-side a{display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:12.5px; border-radius:10px; color:var(--ink); font-weight:500;}
.cz-mega-side a:hover{background:#fff; box-shadow:var(--shadow-sm); font-weight:700;}
.cz-mega-side .sep{border-top:1px solid var(--line); margin:6px 4px;}
.cz-mega-side .cta{color:var(--teal)!important; font-weight:600!important;}
.cz-mega-body{flex:1; padding:20px 22px; display:flex; gap:24px;}
.cz-mega-cols{flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.cz-mega-cols h5{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:0 0 10px; font-weight:700;}
.cz-mega-cols a{display:block; font-size:12.5px; color:var(--ink); padding:4px 0;}
.cz-mega-promo{width:170px; flex-shrink:0; position:relative; border-radius:14px; overflow:hidden; height:190px;}
.cz-mega-promo img{width:100%; height:100%; object-fit:cover;}
.cz-mega-promo .overlay{position:absolute; inset:0; background:linear-gradient(0deg, var(--teal-deep) 10%, rgba(20,18,42,.05) 75%); opacity:.85;}
.cz-mega-promo .txt{position:absolute; bottom:12px; left:12px; right:12px; color:#fff;}

/* Quick links row (replaces plain category repeat) */
.cz-quicklinks{background:var(--teal); color:#fff;}
.cz-quicklinks .cz-wrap{display:flex; gap:22px; overflow-x:auto; font-size:12.5px; padding:0 20px;}
.cz-quicklinks a{padding:10px 0; white-space:nowrap; color:#fff; opacity:.92; display:flex; align-items:center; gap:5px;}

/* ============================== HERO / FLASH BAR ============================== */
.cz-flashbar{background:var(--teal-deep); color:#fff; display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 20px; font-size:12.5px;}
.cz-flashbar .chip{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); padding:3px 7px; border-radius:6px; font-weight:600;}
.cz-hero{position:relative; background:var(--teal); color:#fff; overflow:hidden;}
.cz-hero .diag{position:absolute; top:0; right:-6%; width:42%; height:100%; clip-path:polygon(38% 0,100% 0,100% 100%,0 100%); overflow:hidden;}
.cz-hero .diag img{width:100%; height:100%; object-fit:cover;}
.cz-hero .diag .wash{position:absolute; inset:0; background:var(--gold); opacity:.55; mix-blend-mode:multiply;}
.cz-hero-grid{max-width:1180px; margin:0 auto; padding:56px 20px 64px; position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:center;}
.cz-hero h1{font-size:44px; line-height:1.05; margin:12px 0 18px; color:#fff;}
.cz-hero h1 mark{background:#fff; color:var(--teal-deep); padding:0 8px; border-radius:8px; font:inherit;}
.cz-hero p{color:#E6E4FF; max-width:420px; margin-bottom:26px;}
.cz-banners{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.cz-banners a{position:relative; border-radius:16px; padding:16px; color:#fff; overflow:hidden; min-height:96px; display:flex; flex-direction:column; justify-content:flex-end;}
.cz-banners a img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cz-banners a .wash{position:absolute; inset:0; opacity:.86;}
.cz-banners a .txt{position:relative;}
.cz-banners a.wide{grid-column:1/-1;}

/* Category rail */
.cz-catrail{display:flex; overflow-x:auto; gap:22px; padding:36px 0 8px;}
.cz-catrail a{flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:8px; width:92px; text-align:center;}
.cz-catrail .ico{position:relative; width:66px; height:66px; border-radius:50%; border:1.5px solid var(--line); overflow:hidden;}
.cz-catrail .ico img{width:100%; height:100%; object-fit:cover;}
.cz-catrail .ico .emoji{position:absolute; bottom:-2px; right:-2px; width:24px; height:24px; border-radius:50%; background:#fff; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px;}
.cz-catrail span{font-size:11px; font-weight:500; line-height:1.25;}

/* ============================== PRODUCT GRID ============================== */
.cz-section-title{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap;}
.cz-section-title .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block; margin-right:12px;}
.cz-section-title h2{font-size:28px;}
.cz-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.cz-grid.cols-5{grid-template-columns:repeat(5,1fr);}
.cz-product{display:flex; flex-direction:column; overflow:hidden;}
.cz-product .thumb{position:relative;}
.cz-product .thumb img{width:100%; aspect-ratio:1/1; object-fit:cover;}
.cz-product .badge-sale{position:absolute; top:10px; left:10px; background:var(--gold); color:#fff; font-size:11px; font-weight:700; padding:4px 9px; border-radius:8px;}
.cz-product .body{padding:12px; display:flex; flex-direction:column; gap:6px;}
.cz-product .brand{font-size:11px; color:var(--ink-soft);}
.cz-product .name{font-size:13px; font-weight:600; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.cz-price{font-family:'IBM Plex Mono',monospace; font-size:17px; font-weight:700; color:var(--gold);}
.cz-price .old{font-size:11px; color:var(--ink-soft); text-decoration:line-through; margin-left:8px;}
.cz-ship{font-size:10.5px; color:#1E8A3C; font-weight:600;}

/* ============================== FOOTER ============================== */
.cz-back-top{background:var(--teal); color:#fff; padding:14px 0; text-align:center; font-size:13px; cursor:pointer;}
.cz-footer{background:var(--teal-deep); color:#C7C4E0;}
.cz-footer-cols{max-width:1180px; margin:0 auto; padding:40px 20px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px;}
.cz-footer-cols h4{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px;}
.cz-footer-cols a{display:block; font-size:12.5px; line-height:2;}
.cz-footer-chat{margin-bottom:12px; background:#fff; color:var(--teal); border:none;}
.cz-footer-sub{border-top:1px solid rgba(255,255,255,.12);}
.cz-footer-sub .inner{max-width:1180px; margin:0 auto; padding:26px 20px; display:grid; grid-template-columns:1.3fr 1fr; gap:24px;}
.cz-payment-row{display:flex; flex-wrap:wrap; gap:8px;}
.cz-payment-row span{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:6px 11px; font-size:12px;}
.cz-store-badge{display:inline-flex; align-items:center; gap:10px; background:#000; border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:8px 14px 8px 12px; position:relative; transition:transform .12s ease, border-color .12s ease;}
.cz-store-badge:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.5);}
.cz-store-badge .ribbon{position:absolute; top:-8px; right:-8px; background:var(--gold); color:#fff; font-size:9px; font-weight:700; padding:2px 7px; border-radius:999px;}
.cz-footer-bottom{border-top:1px solid rgba(255,255,255,.12);}
.cz-footer-bottom .inner{max-width:1180px; margin:0 auto; padding:18px 20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px;}

/* ============================== INFO / PAGE TEMPLATE ============================== */
.cz-page-hero{position:relative; height:200px; overflow:hidden;}
.cz-page-hero img{width:100%; height:100%; object-fit:cover;}
.cz-page-hero .wash{position:absolute; inset:0; background:linear-gradient(90deg, var(--teal-deep) 0%, rgba(20,18,42,.25) 65%, rgba(20,18,42,.05) 100%);}
.cz-page-content{max-width:760px; margin:0 auto; padding:40px 20px 60px;}
.cz-page-content .stats{display:flex; gap:10px; margin:22px 0;}
.cz-page-content .stats div{flex:1; text-align:center; padding:14px 12px;}
.cz-page-content .stats .val{font-size:20px; color:var(--teal);}
.cz-page-content .stats .lbl{font-size:11px; color:var(--ink-soft); margin-top:2px;}
.cz-page-content ul.bullets{list-style:none; padding:0; margin:18px 0; display:flex; flex-direction:column; gap:10px;}
.cz-page-content ul.bullets li{display:flex; gap:10px; font-size:14px;}
.cz-page-content ul.bullets li:before{content:"✓"; color:#1E8A3C; font-weight:700;}

@media (max-width:900px){
  .cz-hero-grid{grid-template-columns:1fr;}
  .cz-mega-panel{width:calc(100vw - 40px);}
  .cz-mega-cols{grid-template-columns:1fr 1fr;}
  .cz-grid, .cz-grid.cols-5{grid-template-columns:repeat(2,1fr);}
  .cz-footer-cols{grid-template-columns:repeat(2,1fr);}
  .cz-footer-sub .inner{grid-template-columns:1fr;}
}