/*
Theme Name: Jogoka
Theme URI: https://jogoka.com
Author: Jogoka
Author URI: https://jogoka.com
Description: Custom WooCommerce theme for Jogoka.com — premium curated products, globally delivered.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Private
Text Domain: jogoka
Tags: woocommerce, ecommerce, custom
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --black:#0c0c0e;
  --white:#ffffff;
  --off:#f7f6f4;
  --purple:#7F77DD;
  --purple-light:#EEEDFE;
  --purple-mid:#AFA9EC;
  --purple-dark:#534AB7;
  --purple-deep:#3C3489;
  --muted:#6b6a72;
  --border:rgba(12,12,14,0.08);
  --font-d:'Syne',sans-serif;
  --font-b:'DM Sans',sans-serif;
  --max-w:1280px;
}

body{font-family:var(--font-b);background:var(--white);color:var(--black);overflow-x:hidden;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* NAV */
.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,0.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--max-w);margin:0 auto;padding:0 2rem;height:62px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.site-logo{font-family:var(--font-d);font-size:21px;font-weight:800;letter-spacing:-0.5px;color:var(--black)}
.site-logo span{color:var(--purple-dark)}
.main-nav ul{display:flex;gap:2rem;list-style:none}
.main-nav a{font-size:14px;color:var(--muted);transition:color .18s}
.main-nav a:hover{color:var(--black)}
.nav-actions{display:flex;align-items:center;gap:10px}
.btn-outline{font-family:var(--font-b);font-size:13px;font-weight:500;padding:8px 18px;border-radius:100px;border:1px solid var(--border);color:var(--black);background:transparent;cursor:pointer;transition:all .18s}
.btn-outline:hover{background:var(--off)}
.btn-filled{font-family:var(--font-b);font-size:13px;font-weight:500;padding:8px 18px;border-radius:100px;background:var(--purple-dark);color:#fff;border:1px solid var(--purple-dark);cursor:pointer;transition:all .18s}
.btn-filled:hover{background:var(--purple-deep)}

/* HERO */
.hero-section{display:grid;grid-template-columns:1fr 1fr;min-height:88vh;align-items:stretch}
.hero-left{padding:5rem 3.5rem 5rem 2rem;display:flex;flex-direction:column;justify-content:center;gap:1.75rem;max-width:680px}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:var(--purple-light);color:var(--purple-deep);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:6px 14px;border-radius:100px;width:fit-content}
.hero-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--purple-dark);flex-shrink:0}
.hero-h1{font-family:var(--font-d);font-size:clamp(40px,4.5vw,64px);font-weight:800;line-height:1.0;letter-spacing:-2px}
.hero-h1 em{font-style:normal;color:var(--muted)}
.hero-sub{font-size:16px;font-weight:300;color:var(--muted);line-height:1.75;max-width:420px}
.hero-cta{display:flex;gap:1rem;align-items:center}
.btn-primary{font-family:var(--font-b);font-size:15px;font-weight:500;padding:14px 32px;border-radius:100px;background:var(--black);color:#fff;border:none;cursor:pointer;display:inline-block;transition:all .2s}
.btn-primary:hover{background:#1c1c20;transform:translateY(-1px)}
.btn-ghost{font-family:var(--font-b);font-size:14px;color:var(--muted);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:5px;transition:color .18s}
.btn-ghost:hover{color:var(--black)}
.trust-row{display:flex;gap:2rem;padding-top:1.25rem;border-top:1px solid var(--border);flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.trust-icon{width:32px;height:32px;border-radius:8px;background:var(--purple-light);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.hero-right{background:var(--off);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:3rem}

/* MARQUEE */
.marquee-bar{background:var(--black);overflow:hidden;padding:13px 0;display:flex}
.marquee-track{display:flex;gap:3rem;animation:marq 22s linear infinite;white-space:nowrap;flex-shrink:0;padding-right:3rem}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.m-item{font-family:var(--font-d);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.45);display:flex;align-items:center;gap:12px}
.m-item::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--purple-mid);flex-shrink:0}

/* SECTIONS */
.section-wrap{max-width:var(--max-w);margin:0 auto;padding:5rem 2rem}
.sec-label{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;display:flex;align-items:center;gap:10px}
.sec-label::before{content:'';width:20px;height:1px;background:var(--muted)}
.sec-title{font-family:var(--font-d);font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-1px;line-height:1.1;margin-bottom:2.5rem}

/* CATEGORIES */
.cat-bg{background:var(--off)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
.cat-card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:1.75rem 1.5rem;cursor:pointer;transition:all .22s;display:block;position:relative;color:inherit}
.cat-card:hover{border-color:var(--purple);transform:translateY(-3px)}
.cat-card:hover .cat-arrow{color:var(--purple);transform:translate(3px,-3px)}
.cat-arrow{position:absolute;top:1.25rem;right:1.25rem;font-size:16px;color:var(--muted);transition:all .2s}
.cat-icon{font-size:32px;margin-bottom:1.25rem;display:block}
.cat-name{font-family:var(--font-d);font-size:17px;font-weight:700;margin-bottom:5px}
.cat-desc{font-size:12px;color:var(--muted)}

/* PRODUCTS */
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.filter-row{display:flex;gap:8px;flex-wrap:wrap}
.filter-btn{font-family:var(--font-b);font-size:13px;padding:7px 16px;border-radius:100px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--muted);transition:all .15s}
.filter-btn.active,.filter-btn:hover{background:var(--black);color:#fff;border-color:var(--black)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media(max-width:1100px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.product-grid{grid-template-columns:1fr}}

/* WooCommerce product card overrides */
.woocommerce ul.products li.product,.product-card{background:var(--off);border-radius:20px;overflow:hidden;transition:all .22s;border:1px solid transparent;position:relative}
.woocommerce ul.products li.product:hover,.product-card:hover{border-color:var(--border);transform:translateY(-3px)}
.woocommerce ul.products li.product a img{width:100%;height:200px;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title,.product-name{font-family:var(--font-b);font-size:13px;font-weight:500;line-height:1.4;padding:.875rem 1.125rem 0}
.woocommerce ul.products li.product .price,.product-price{font-family:var(--font-d);font-size:17px;font-weight:700;padding:0 1.125rem 1.125rem;display:block}
.woocommerce ul.products li.product .button{background:var(--black);color:#fff;border:none;border-radius:10px;font-family:var(--font-b);font-size:13px;font-weight:500;padding:9px 16px;cursor:pointer;transition:background .18s;width:calc(100% - 2.25rem);margin:0 1.125rem 1.125rem;display:block}
.woocommerce ul.products li.product .button:hover{background:#1c1c20}

/* FEATURE STRIP */
.feat-strip{background:var(--black);display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:768px){.feat-strip{grid-template-columns:repeat(2,1fr)}}
.feat-item{padding:2.25rem 1.75rem;border-right:1px solid rgba(255,255,255,0.07)}
.feat-item:last-child{border-right:none}
.feat-icon{font-size:20px;margin-bottom:.75rem}
.feat-title{font-family:var(--font-d);font-size:15px;font-weight:700;color:#fff;margin-bottom:.4rem}
.feat-desc{font-size:13px;color:rgba(255,255,255,0.38);line-height:1.6}

/* PROMO */
.promo-outer{padding:4.5rem 2rem}
.promo-block{max-width:var(--max-w);margin:0 auto;background:var(--purple-light);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:320px}
@media(max-width:768px){.promo-block{grid-template-columns:1fr}}
.promo-left{padding:3.5rem 3rem;display:flex;flex-direction:column;justify-content:center;gap:1.25rem}
.promo-pill{display:inline-block;background:var(--purple-dark);color:#fff;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 13px;border-radius:100px;width:fit-content}
.promo-title{font-family:var(--font-d);font-size:clamp(26px,2.5vw,38px);font-weight:800;letter-spacing:-1px;color:var(--purple-deep);line-height:1.05}
.promo-desc{font-size:14px;color:var(--purple-dark);line-height:1.7;max-width:280px}
.btn-purple{font-family:var(--font-b);font-size:14px;font-weight:500;padding:12px 26px;border-radius:100px;background:var(--purple-dark);color:#fff;border:none;cursor:pointer;width:fit-content;display:inline-block;transition:all .2s}
.btn-purple:hover{background:var(--purple-deep);transform:translateY(-1px)}
.promo-right{background:var(--purple-mid);display:flex;align-items:center;justify-content:center;font-size:100px}

/* TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr}}
.testi-card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:1.75rem}
.testi-stars{color:#f5a520;font-size:13px;margin-bottom:.875rem}
.testi-text{font-size:14px;line-height:1.75;color:#3a3a3e;margin-bottom:1.25rem;font-weight:300}
.testi-author{display:flex;align-items:center;gap:10px}
.testi-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:#fff;flex-shrink:0}
.testi-name{font-size:13px;font-weight:500}
.testi-loc{font-size:11px;color:var(--muted)}

/* NEWSLETTER */
.nl-section{text-align:center;padding:4.5rem 2rem}
.nl-section h2{font-family:var(--font-d);font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-1px;margin-bottom:.75rem}
.nl-section p{font-size:15px;color:var(--muted);margin-bottom:1.75rem}
.nl-form{display:flex;gap:8px;max-width:400px;margin:0 auto}
.nl-input{flex:1;font-family:var(--font-b);font-size:14px;padding:12px 18px;border:1px solid var(--border);border-radius:100px;background:var(--off);outline:none;color:var(--black);transition:border-color .18s}
.nl-input:focus{border-color:var(--purple)}

/* FOOTER */
.site-footer{background:var(--black);color:#fff;padding:3.5rem 2rem 1.75rem}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,0.07)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand-desc{font-size:13px;color:rgba(255,255,255,0.35);line-height:1.75;max-width:220px;margin-top:.875rem}
.footer-contact{display:inline-flex;align-items:center;gap:6px;background:rgba(127,119,221,0.15);border:1px solid rgba(127,119,221,0.25);color:var(--purple-mid);font-size:12px;padding:5px 12px;border-radius:100px;margin-top:.75rem}
.footer-col h4{font-family:var(--font-d);font-size:13px;font-weight:700;margin-bottom:1.125rem;color:#fff}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.625rem}
.footer-col a{font-size:13px;color:rgba(255,255,255,0.35);transition:color .18s}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(255,255,255,0.25);flex-wrap:wrap;gap:.5rem}
.footer-accent{color:var(--purple-mid);font-weight:600}

/* WOOCOMMERCE GLOBAL OVERRIDES */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:var(--black)!important;color:#fff!important;border-radius:100px!important;font-family:var(--font-b)!important;font-size:14px!important;font-weight:500!important;padding:12px 28px!important;border:none!important;transition:background .18s!important}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:#1c1c20!important}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--purple-dark)!important}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--purple-deep)!important}
.woocommerce-message,.woocommerce-info{border-top-color:var(--purple-dark)!important}
.woocommerce-message::before,.woocommerce-info::before{color:var(--purple-dark)!important}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea{font-family:var(--font-b)!important;border:1px solid var(--border)!important;border-radius:12px!important;padding:12px 16px!important;font-size:14px!important}
.woocommerce form .form-row input.input-text:focus{border-color:var(--purple)!important;outline:none!important}
#add-to-cart-btn{background:var(--black);color:#fff;font-family:var(--font-b);font-size:15px;font-weight:500;padding:14px 32px;border-radius:100px;border:none;cursor:pointer;width:100%;transition:all .2s;margin-top:1rem}
#add-to-cart-btn:hover{background:#1c1c20}

/* RESPONSIVE */
@media(max-width:960px){
  .hero-section{grid-template-columns:1fr}
  .hero-right{display:none}
  .feat-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .nav-inner .main-nav{display:none}
  .hero-left{padding:3rem 1.5rem}
  .section-wrap{padding:3rem 1.5rem}
  .cat-grid{grid-template-columns:1fr 1fr}
  .nl-form{flex-direction:column}
}