/*
Theme Name: EpickieKarty (Woo)
Theme URI: https://epickiekarty.pl
Author: ChatGPT
Description: Lekki, kolorowy szablon pod WooCommerce w stylu TCG (minimal + dziecięcy vibe). Zawiera gotową stronę główną.
Version: 1.0.0
Text Domain: epickiekarty-theme
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Tags: e-commerce, woocommerce, responsive, custom-colors
*/

/* ====== Design Tokens ====== */
:root{
  --ek-bg: #ffffff;
  --ek-surface: #f7f8fb;
  --ek-text: #0f172a;
  --ek-muted: #64748b;
  --ek-primary: #2563eb;
  --ek-green: #22c55e;
  --ek-yellow: #f59e0b;
  --ek-red: #ef4444;
  --ek-radius: 18px;
  --ek-radius-sm: 14px;
  --ek-border: 1px solid rgba(15,23,42,.12);
  --ek-shadow: 0 18px 50px rgba(2,6,23,.12);
  --ek-shadow-sm: 0 10px 28px rgba(2,6,23,.10);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  color: var(--ek-text);
  background: radial-gradient(1200px 600px at 15% -10%, rgba(37,99,235,.16), transparent 60%),
              radial-gradient(900px 500px at 95% 10%, rgba(34,197,94,.12), transparent 55%),
              linear-gradient(180deg, #fff, #f8fbff);
}
a{ color: inherit; text-decoration:none; }
a:hover{ opacity:.95; }

.ek-container{ max-width: 1200px; margin:0 auto; padding: 0 18px; }

.ek-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .65rem;
  border-radius:999px;
  background: rgba(37,99,235,.10);
  color: var(--ek-primary);
  font-weight: 800;
  font-size: .85rem;
}

.ek-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .75rem 1.05rem;
  border-radius:999px;
  border: var(--ek-border);
  background:#fff;
  font-weight: 900;
  gap: .5rem;
}
.ek-btn--primary{
  background: var(--ek-primary);
  border-color: transparent;
  color:#fff;
}
.ek-btn--primary:hover{ filter: brightness(.95); }
.ek-btn--ghost:hover{ background: rgba(15,23,42,.03); }

.ek-card{
  background:#fff;
  border: var(--ek-border);
  border-radius: var(--ek-radius);
  box-shadow: var(--ek-shadow-sm);
}

.ek-header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.76);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.ek-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 12px;
}
.ek-brand{ display:flex; align-items:center; gap: 10px; font-weight: 1000; letter-spacing: .2px; }
.ek-brand img{ height: 34px; width:auto; }
.ek-brand span{ font-size: 1.05rem; }

.ek-nav{ display:flex; gap: 14px; align-items:center; }
.ek-nav a{ font-weight: 800; color: rgba(15,23,42,.78); padding: 8px 10px; border-radius: 999px; }
.ek-nav a:hover{ background: rgba(15,23,42,.05); }

.ek-icons{ display:flex; gap: 10px; align-items:center; }
.ek-iconbtn{
  width: 42px; height: 42px;
  border-radius: 999px;
  border: var(--ek-border);
  background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight: 900;
}
.ek-cartcount{
  position: relative;
}
.ek-cartcount b{
  position:absolute; top:-6px; right:-6px;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ek-red);
  color:#fff;
  font-size: 12px;
  display:flex; align-items:center; justify-content:center;
}

.ek-hero{
  margin: 18px 0 0;
  border-radius: calc(var(--ek-radius) + 10px);
  overflow:hidden;
  border: var(--ek-border);
  box-shadow: var(--ek-shadow);
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(245,158,11,.24), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(37,99,235,.24), transparent 62%),
    radial-gradient(700px 450px at 95% 95%, rgba(34,197,94,.18), transparent 55%),
    linear-gradient(180deg, #ffffff, #f5f9ff);
}
.ek-hero__inner{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  padding: 34px 22px;
  align-items:center;
}
@media (max-width: 920px){
  .ek-nav{ display:none; }
  .ek-hero__inner{ grid-template-columns: 1fr; }
}
.ek-hero h1{ margin: 10px 0 10px; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.05; }
.ek-hero p{ margin:0; color: var(--ek-muted); font-size: 1.06rem; }
.ek-hero__cta{ margin-top: 16px; display:flex; flex-wrap:wrap; gap: 10px; }
.ek-hero__banner{
  border-radius: var(--ek-radius);
  border: var(--ek-border);
  background: rgba(15,23,42,.04);
  min-height: 210px;
  display:flex; align-items:center; justify-content:center;
  position: relative;
  overflow:hidden;
}
.ek-hero__banner::before{
  content:"";
  position:absolute; inset:-40px;
  background:
    radial-gradient(180px 120px at 20% 20%, rgba(37,99,235,.28), transparent 60%),
    radial-gradient(160px 120px at 75% 30%, rgba(245,158,11,.24), transparent 60%),
    radial-gradient(180px 140px at 60% 80%, rgba(34,197,94,.20), transparent 60%);
  transform: rotate(-6deg);
}
.ek-hero__banner img{
  position: relative;
  width: min(340px, 90%);
  height:auto;
  filter: drop-shadow(0 18px 30px rgba(2,6,23,.20));
}

.ek-section{ margin-top: 22px; }
.ek-section__title{ margin: 0 0 12px; font-weight: 1000; }

.ek-cats{
  display:grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px){ .ek-cats{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .ek-cats{ grid-template-columns: 1fr; } }
.ek-cat{
  position:relative;
  padding: 16px;
  border-radius: var(--ek-radius);
  border: var(--ek-border);
  background: linear-gradient(180deg, #fff, rgba(15,23,42,.02));
  box-shadow: var(--ek-shadow-sm);
  overflow:hidden;
}
.ek-cat__icon{
  position:absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 1000;
  background: rgba(245,158,11,.18);
}
.ek-cat h3{ margin: 0 0 6px; font-weight: 1000; }
.ek-cat p{ margin: 0; color: var(--ek-muted); }

.woocommerce ul.products{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 1100px){ .woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .woocommerce ul.products{ grid-template-columns: 1fr; } }

.woocommerce ul.products li.product{
  float:none !important;
  width: auto !important;
  margin: 0 !important;
  border: var(--ek-border);
  border-radius: var(--ek-radius);
  padding: 12px;
  background:#fff;
  box-shadow: var(--ek-shadow-sm);
  position: relative;
}
.woocommerce ul.products li.product img{
  border-radius: var(--ek-radius-sm);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-weight: 1000;
  font-size: 1rem;
}
.woocommerce ul.products li.product .price{
  font-weight: 1000;
  color: rgba(15,23,42,.85);
}
.woocommerce ul.products li.product .button{
  border-radius: 999px !important;
  font-weight: 1000 !important;
  background: var(--ek-primary) !important;
  color:#fff !important;
  border: none !important;
}

.woocommerce span.onsale{
  border-radius: 999px !important;
  padding: .35rem .6rem !important;
  background: var(--ek-red) !important;
  color:#fff !important;
  font-weight: 1000 !important;
  min-height: auto !important;
}

.ek-badge-new{
  position:absolute; top: 12px; left: 12px;
  border-radius: 999px;
  padding: .35rem .6rem;
  background: rgba(34,197,94,.95);
  color: #fff; font-weight: 1000;
  font-size: .8rem;
  box-shadow: var(--ek-shadow-sm);
}

.ek-footer{
  margin-top: 34px;
  padding: 28px 0;
  border-top: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.70);
}
.ek-footer__grid{
  display:grid; gap: 14px;
  grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 920px){ .ek-footer__grid{ grid-template-columns: 1fr; } }
.ek-footer h4{ margin:0 0 10px; font-weight:1000; color: rgba(15,23,42,.90); }
.ek-footer a{ color: rgba(15,23,42,.75); }
.ek-footer a:hover{ text-decoration: underline; }

/* Basic content spacing */
.ek-page{ padding: 18px 0; }