/* AfroMerchants — storefront styles. Theme colours come from CSS variables injected in from Admin → Settings, so re-branding is instant. */ *{box-sizing:border-box;margin:0;padding:0} :root{ --green:#1F4D3A; --accent:#D99A2B; --terra:#B85C38; --ink:#1A1815; --dark:#16140F; --cream:#FAF6EF; --line:#EBE6DE; --muted:#9a9182; --muted2:#5b554c; --tile:#F1EADF; --maxw:1240px; } html,body{margin:0;padding:0} body{font-family:'Jost','Avenir Next','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;color:inherit;border:none;background:none} input,select,textarea{font-family:inherit} ::selection{background:var(--green);color:#fff} .wrap{max-width:var(--maxw);margin:0 auto;padding-left:32px;padding-right:32px} .flex{display:flex}.between{justify-content:space-between}.center{align-items:center} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--green);color:#fff;padding:15px 32px;font-size:12.5px;letter-spacing:.18em; font-weight:500;text-transform:uppercase;border:none;transition:filter .15s} .btn:hover{filter:brightness(1.08)} .btn-ghost{background:#fff;border:1px solid #D8D0C4;color:var(--muted2)} .btn-accent{background:var(--accent);color:var(--dark);font-weight:600} .kicker{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--terra);font-weight:600} .uplabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);font-weight:600} /* Header */ .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96); backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)} .site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 32px;max-width:var(--maxw);margin:0 auto} .logo img{height:50px;width:auto} .logo .wordmark{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .logo .wordmark .am{color:var(--green)} .nav{display:flex;align-items:center;gap:30px} .nav a,.nav button{font-size:12.5px;letter-spacing:.18em;font-weight:500;padding:6px 0;color:var(--ink)} .nav .sep{width:1px;height:22px;background:#E3DDD3} .icn{padding:4px;color:#3a352e;position:relative;display:flex} .cart-badge{position:absolute;top:-3px;right:-6px;background:var(--terra);color:#fff;font-size:10px; font-weight:600;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px} .hamburger{display:none;color:var(--ink)} .mobile-menu{display:none;border-top:1px solid var(--line);background:#fff;padding:10px 22px 18px;flex-direction:column} .mobile-menu a{font-size:14px;letter-spacing:.12em;padding:12px 4px;border-bottom:1px solid #F2EEE7} .mobile-menu.open{display:flex} /* Category strip */ .catstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff} .catstrip .inner{display:flex;align-items:center;gap:22px;flex-wrap:wrap;overflow-x:auto;padding:16px 32px;max-width:var(--maxw);margin:0 auto} .catstrip .lbl{font-size:11px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;font-weight:600;white-space:nowrap} .catlink{font-size:12px;letter-spacing:.12em;padding:6px 2px;color:#6E665C;border-bottom:2px solid transparent;white-space:nowrap} .catlink.active{color:var(--green);font-weight:600;border-bottom-color:var(--green)} /* Hero */ .hero{position:relative;overflow:hidden;background:var(--cream)} .hero .grid{max-width:var(--maxw);margin:0 auto;padding:88px 40px 78px;display:grid; grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;position:relative;z-index:3} .hero h1{font-size:clamp(38px,5vw,68px);line-height:1.02;font-weight:600;letter-spacing:-.01em; text-transform:uppercase;margin:16px 0 22px;text-wrap:balance} .hero p{font-size:17px;line-height:1.6;font-weight:300;color:var(--muted2);max-width:430px;margin:0 0 34px} .hero-art{position:relative;height:520px} .hero-art .feature{position:absolute;inset:0;border-radius:6px;box-shadow:0 30px 60px -28px rgba(40,28,12,.5); background-size:cover;background-position:center} .hero-badge{position:absolute;background:#fff;padding:14px 18px;box-shadow:0 18px 40px -20px rgba(40,28,12,.4)} .hero-badge.tl{top:-22px;left:-26px;animation:float 6s ease-in-out infinite} .hero-badge.br{bottom:-18px;right:-22px;background:var(--green);color:#fff;animation:float 7.5s ease-in-out infinite} .round-btn{width:46px;height:46px;border:1px solid #D8D0C4;background:#fff;display:flex;align-items:center; justify-content:center;border-radius:50%;color:var(--ink)} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .fade{animation:fade .6s ease both} /* Product grid */ .section{max-width:var(--maxw);margin:0 auto;padding:64px 32px 30px} .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px} .section-head h2{font-size:30px;font-weight:500;letter-spacing:-.01em} .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px} .card{cursor:pointer;display:flex;flex-direction:column;gap:12px} .card .thumb{position:relative;aspect-ratio:4/5;background:var(--tile);overflow:hidden;display:flex;align-items:center;justify-content:center} .card .thumb .tex{position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(40,28,12,.05) 0 1px,transparent 1px 9px)} .card .mono{position:relative;font-size:54px;font-weight:600;color:rgba(40,28,12,.14);letter-spacing:.04em} .card .tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted2);padding:5px 9px;font-weight:600} .card .name{font-size:15.5px;font-weight:500} .card .stars{font-size:12px;color:var(--accent);letter-spacing:.06em} .card .meta{font-size:11.5px;color:var(--muted)} .card .shopname{font-size:13px;font-weight:300;color:var(--muted)} .card .price{font-size:15px;font-weight:600;color:var(--green);margin-top:2px} /* Value props */ .valueprops{background:var(--cream);margin-top:50px;border-top:1px solid var(--line)} .valueprops .inner{max-width:var(--maxw);margin:0 auto;padding:40px 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .valueprops .vp span:first-child{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--green);display:block;margin-bottom:6px} .valueprops .vp span:last-child{font-size:13px;font-weight:300;color:var(--muted2)} /* Product detail */ .pd{max-width:var(--maxw);margin:0 auto;padding:30px 32px 80px} .crumbs{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:28px;flex-wrap:wrap} .pd-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:start} .pd-main{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--tile);display:flex;align-items:center;justify-content:center} .pd-main .mono{position:relative;font-size:120px;font-weight:600;color:rgba(40,28,12,.12)} .pd h1{font-size:34px;font-weight:500;margin:0 0 12px;letter-spacing:-.01em} .pd .price{font-size:28px;font-weight:600;color:var(--green);margin-bottom:22px} .shopcard{display:flex;align-items:center;gap:13px;border:1px solid var(--line);background:var(--cream);padding:12px 14px;width:100%;text-align:left;margin-bottom:26px} .shop-av{width:42px;height:42px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0} .variant-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px} .variant-btn{background:#fff;color:var(--ink);border:1px solid #D8D0C4;padding:10px 18px;font-size:13px} .variant-btn.active{background:var(--green);color:#fff;border-color:var(--green)} .qty{display:flex;align-items:center;border:1px solid #D8D0C4} .qty button{width:46px;height:54px;font-size:20px;color:var(--muted2)} .qty span{width:40px;text-align:center;font-size:16px;font-weight:500} .assure{margin-top:24px;display:flex;flex-direction:column;gap:10px;font-size:13px;font-weight:300;color:var(--muted2)} .reviews-grid{display:grid;grid-template-columns:.6fr 1.4fr;gap:48px;align-items:start} .review-score{background:var(--cream);border:1px solid var(--line);padding:28px;text-align:center} .review-score .big{font-size:52px;font-weight:600;line-height:1;color:var(--green)} .review-item{padding:20px 0;border-bottom:1px solid #F2EEE7} /* Cart / checkout */ .page{max-width:1100px;margin:0 auto;padding:48px 32px 90px} .page h1{font-size:30px;font-weight:500;margin:0 0 30px;letter-spacing:-.01em} .co-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:44px;align-items:start} .summary{background:var(--cream);border:1px solid var(--line);padding:30px} .summary h3{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin:0 0 22px} .sumrow{display:flex;justify-content:space-between;font-size:14px;font-weight:300;margin-bottom:12px} .sumtotal{display:flex;justify-content:space-between;font-size:19px;font-weight:600;border-top:1px solid #E3DDD3;padding-top:18px;margin-top:6px} .cart-line{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:center} .cart-thumb{position:relative;width:84px;height:96px;flex-shrink:0;overflow:hidden;background:var(--tile);display:flex;align-items:center;justify-content:center} .field{width:100%;border:1px solid #D8D0C4;padding:14px 16px;font-size:14px;background:#fff;margin-bottom:0} .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .empty{border:1px solid var(--line);padding:70px 30px;text-align:center} /* Sell / Affiliates */ .band{background:var(--dark);color:#fff} .band .inner{max-width:1100px;margin:0 auto;padding:80px 32px;text-align:center} .band h1{font-size:clamp(34px,5vw,56px);font-weight:600;margin:0 0 18px;line-height:1.05;text-wrap:balance} .band p{font-size:17px;font-weight:300;color:#cfc7ba;max-width:560px;margin:0 auto 32px;line-height:1.6} .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .tier{background:#fff;border:1px solid var(--line);padding:28px;position:relative;display:flex;flex-direction:column} .tier.featured{border:2px solid var(--green)} .tier .pop{position:absolute;top:0;right:0;background:var(--accent);color:var(--dark);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:5px 12px} .tier .price{display:flex;align-items:baseline;gap:4px;margin:14px 0 4px} .tier .price b{font-size:36px;font-weight:600} .perk{display:flex;gap:9px;font-size:13px;font-weight:300;color:var(--muted2)} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center} .formcard{background:#fff;border:1px solid var(--line);padding:36px} .formcard label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);font-weight:600;display:block;margin-bottom:7px} .formcard input,.formcard select{width:100%;border:1px solid #D8D0C4;padding:12px 14px;font-size:14px;background:#fff} /* Footer */ .site-footer{background:var(--dark);color:#cfc7ba;margin-top:auto} .site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:60px 32px 30px} .footcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} .footcols h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600;margin:0 0 16px} .footcols a,.footcols .lnk{display:block;font-size:13px;font-weight:300;color:#cfc7ba;margin-bottom:11px} .footcols .gold{color:var(--accent);font-weight:500} .footbar{border-top:1px solid #2c2820;margin-top:44px;padding-top:24px;display:flex;justify-content:space-between; flex-wrap:wrap;gap:14px;align-items:center;font-size:12px;font-weight:300;color:#7d756a} .footbar a{color:var(--accent);display:flex;align-items:center;gap:9px;font-weight:500} /* Toast */ .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff; padding:14px 26px;font-size:13px;letter-spacing:.04em;z-index:200;box-shadow:0 14px 40px -16px rgba(0,0,0,.5);animation:fade .3s ease both} .layout{min-height:100vh;display:flex;flex-direction:column} main{flex:1} /* Header search (Etsy-style) */ .searchbar{flex:1;max-width:680px;display:flex;align-items:center;background:#fff;border:1.5px solid #E3DDD3;border-radius:30px;overflow:hidden;transition:border-color .15s,box-shadow .15s} .searchbar:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(31,77,58,.12)} .searchbar input{flex:1;border:none;outline:none;padding:14px 24px;font-size:15px;background:transparent} .searchbar button{background:var(--green);color:#fff;border:none;width:54px;height:50px;display:flex;align-items:center;justify-content:center;margin:1px;border-radius:24px} .searchbar button:hover{filter:brightness(1.08)} @media (max-width:880px){.searchbar{order:3;max-width:none;flex-basis:100%;margin-top:10px}} /* Product card hover overlay */ .card .thumb{transition:box-shadow .2s} .card .thumb img,.card .thumb>div:first-child{transition:transform .5s cubic-bezier(.2,.7,.3,1)} .card:hover .thumb{box-shadow:0 18px 40px -22px rgba(40,28,12,.45)} .card:hover .thumb img,.card:hover .thumb>div:first-child{transform:scale(1.06)} .card .overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center; background:linear-gradient(to top,rgba(22,20,15,.55),rgba(22,20,15,0) 55%);opacity:0;transition:opacity .25s;padding-bottom:16px} .card:hover .overlay{opacity:1} .card .overlay span{background:#fff;color:var(--ink);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:9px 16px;border-radius:24px;box-shadow:0 6px 18px -8px rgba(0,0,0,.4);transform:translateY(8px);transition:transform .25s} .card:hover .overlay span{transform:none} .card .fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92); display:flex;align-items:center;justify-content:center;color:#9a9182;box-shadow:0 4px 12px -6px rgba(0,0,0,.35);opacity:0;transition:opacity .25s} .card:hover .fav{opacity:1} /* Blog / journal */ .bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .blogcard{display:flex;flex-direction:column;gap:12px;cursor:pointer} .blogcard .cover{aspect-ratio:16/10;background:var(--tile);overflow:hidden;border-radius:6px;position:relative} .blogcard .cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .blogcard:hover .cover img{transform:scale(1.05)} .blogcard h3{font-size:18px;font-weight:600;margin:0;line-height:1.3} .blogcard p{font-size:13.5px;font-weight:300;color:var(--muted2);line-height:1.6;margin:0} .blogcard .date{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600} .article{max-width:760px;margin:0 auto;padding:48px 32px 80px} .article h1{font-size:clamp(28px,4vw,44px);font-weight:600;line-height:1.1;margin:14px 0 18px} .article .hero-img{width:100%;border-radius:8px;margin:18px 0 28px;aspect-ratio:16/9;object-fit:cover} .article .body{font-size:16px;line-height:1.8;font-weight:300;color:#33302a} .article .body p{margin:0 0 18px} /* Responsive */ @media (max-width:880px){ .nav{display:none} .hamburger{display:flex} .hero .grid{grid-template-columns:1fr;gap:24px;padding:54px 22px 44px} .hero-art{height:340px} .grid{grid-template-columns:repeat(2,1fr)} .pd-grid,.co-grid,.reviews-grid{grid-template-columns:1fr;gap:28px} .wrap,.section,.pd,.page{padding-left:18px;padding-right:18px} .footcols{grid-template-columns:1fr 1fr} .kpis,.tiers,.valueprops .inner{grid-template-columns:1fr 1fr} .formgrid{grid-template-columns:1fr} .bloggrid{grid-template-columns:1fr} }