/* =============================
   Kraftsy Color – Design Tokens
   ============================= */
:root{
  --kf-bg:#ffffff;
  --kf-fg:#13151a;
  --kf-muted:#626877;
  --kf-primary:#0a66c2;           /* Cobalt */
  --kf-accent:#7b5dff;            /* Indigo */
  --kf-pink:#ff5ea8;
  --kf-border:#e7e9ee;
  --kf-card:rgba(255,255,255,.65);
  --kf-radius:16px;
  --kf-gap:16px;
  --kf-shadow:0 6px 24px rgba(16,24,40,.08);
}

/* Background accents */
body:before{
  content:''; position:fixed; inset:-30% -30% auto -30%; height:60vh; z-index:-1;
  background:
    radial-gradient(800px 500px at 0% 0%, rgba(123,211,255,.55), transparent 55%),
    radial-gradient(700px 480px at 100% 0%, rgba(202,167,255,.55), transparent 50%);
  pointer-events:none;
}

/* =============================
   Global Typography
   ============================= */
@font-face{
  font-family:'BankGothicMenu';
  src:url('/wp-content/uploads/fonts/BankGothicLightRegular.woff2') format('woff2'),
      url('/wp-content/uploads/fonts/BankGothicLightRegular.woff') format('woff');
  font-weight:300; font-style:normal; font-display:swap;
}

html, body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--kf-fg);
  background: var(--kf-bg);
}

h1,h2,h3,h4,h5,h6{ letter-spacing:.2px; line-height:1.2; color:var(--kf-fg); }

.main-header-menu a,
.ast-header-break-point .main-header-menu-toggle {
  font-family:'BankGothicMenu', system-ui, sans-serif !important;
  letter-spacing:.4px;
}

a{ color: var(--kf-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

button, .button, .wp-element-button,
.woocommerce a.button, .woocommerce button.button{
  border-radius:12px; border:1px solid transparent; box-shadow:none;
  background: linear-gradient(135deg, var(--kf-primary), var(--kf-accent));
  color:#fff;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .wp-element-button:hover{ filter:brightness(.95) }

.ast-woo-shop-archive .products .product,
.wp-block-post {
  border:1px solid var(--kf-border);
  border-radius:var(--kf-radius);
  background: var(--kf-card);
  box-shadow: var(--kf-shadow);
  overflow:hidden; padding:14px;
}
.woocommerce ul.products li.product .price{ font-weight:600;}

.woocommerce ul.products li.product a img{ transition: transform .15s ease }
.woocommerce ul.products li.product a:hover img{ transform: scale(1.02) }

/* =============================
   Top menu – embed product search
   ============================= */
.kf-menu-search form{
  display:flex; align-items:center; gap:8px;
  margin-left:12px;
}
.kf-menu-search .search-field{
  min-height:36px; padding:6px 10px; border-radius:10px;
  border:1px solid var(--kf-border); width:200px;
}
.kf-menu-search button{
  min-height:36px; padding:0 12px; border-radius:10px;
}

/* =============================
   Categories bar above products
   ============================= */
.kf-catbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 0 12px; margin-bottom:6px;
  border-bottom:1px solid var(--kf-border);
}
.kf-catbar-list{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap }
.kf-catbar-link{
  display:inline-block; padding:8px 12px; border-radius:999px; line-height:1;
  color:var(--kf-fg); background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  border:1px solid var(--kf-border); text-decoration:none;
}
.kf-catbar-link:hover{ filter:brightness(.97) }
.kf-catbar-link.is-active{ border-color: var(--kf-primary); color: var(--kf-primary) }

/* =============================
   Sidebar – desktop
   ============================= */
.woocommerce-page #secondary{
  flex:0 0 200px;
  max-width:200px;
  min-width:200px;
  font-size:14px;
  align-self:flex-start;
  background:rgba(255,255,255,.82);
  border:1px solid var(--kf-border);
  border-radius:12px;
  padding:14px !important;
  box-shadow:0 2px 8px rgba(16,24,40,.05);
  position:sticky;
  top:40px;
}
.woocommerce-page:not(.ast-no-sidebar) #primary{
  flex:1 1 auto;
  min-width:0;
  max-width:calc(100% - 220px);
}
#secondary .widget{ margin-bottom:10px }
#secondary .widget-title,
#secondary .wp-block-heading{ font-size:14px; margin-bottom:6px }

/* =============================
   Mobile – Kategorien drawer toggle button
   ============================= */
.kf-filter-toggle{
  display:none;
  background: linear-gradient(135deg,var(--kf-primary), var(--kf-accent));
  color:#fff; border:0; padding:8px 14px; border-radius:10px; margin:4px 0 10px; cursor:pointer;
}

/* Drawer overlay backdrop */
.kf-drawer-overlay{
  display:none;
  position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.35);
  opacity:0; transition:opacity .25s ease;
}

@media (max-width: 768px){
  /* ---- Drawer panel – fixed slide-in from left ---- */
  .kf-drawer-panel {
    display:block;
    position:fixed; top:0; left:0; z-index:1000;
    width:82vw; max-width:320px; height:100dvh;
    background:#fff;
    overflow-y:auto;
    padding:0;
    transform:translateX(-105%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:2px 0 20px rgba(0,0,0,.08);
  }

  /* Drawer open state */
  .kf-drawer-open .kf-drawer-panel {
    transform:translateX(0);
  }
  .kf-drawer-open .kf-drawer-overlay {
    display:block; opacity:1;
  }

  /* Toggle button – full width, gradient */
  .kf-filter-toggle {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; margin-bottom:12px;
    padding:10px 16px;
    background: linear-gradient(135deg,var(--kf-primary), var(--kf-accent));
    color:#fff; border:0; border-radius:10px;
    font-size:14px; font-weight:500; cursor:pointer;
  }
  .kf-filter-toggle::before {
    content:''; display:inline-block; width:16px; height:16px;
    background:currentColor;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
    mask-size:contain; mask-repeat:no-repeat; mask-position:center;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
    -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  }

  /* ---- Drawer header ---- */
  .kf-drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid var(--kf-border);
    position:sticky; top:0; background:#fff; z-index:2;
  }
  .kf-drawer-title {
    font-family:'BankGothicMenu', system-ui, sans-serif;
    font-weight:400; font-size:15px; letter-spacing:.06em;
    color:var(--kf-fg); text-transform:uppercase;
  }
  .kf-drawer-close {
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:#f3f4f6; border:0; color:var(--kf-fg);
    font-size:20px; line-height:1; cursor:pointer;
    padding:0; margin:0;
  }

  /* ---- Category list ---- */
  .kf-drawer-nav { padding:8px 0; }
  .kf-drawer-cats { list-style:none; margin:0; padding:0; }
  .kf-drawer-cats .kf-cat-item { margin:0; }
  .kf-cat-link {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 18px;
    color:var(--kf-fg); text-decoration:none;
    font-size:14px; line-height:1.3;
    border-bottom:1px solid #f5f5f7;
    transition:background .15s ease, color .15s ease;
  }
  .kf-cat-link:hover,
  .kf-cat-link:active {
    background:#f9fafb; color:var(--kf-primary); text-decoration:none;
  }
  .kf-cat-link.is-active {
    font-weight:600; color:var(--kf-primary); background:#f0f4ff;
  }
  .kf-cat-name { flex:1; }
  .kf-cat-count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:22px; padding:0 7px;
    border-radius:11px;
    background:#eef0f4; color:var(--kf-muted);
    font-size:11px; font-weight:500; line-height:1;
    flex-shrink:0; margin-left:10px;
  }

  /* Loading / error states */
  .kf-drawer-loading,
  .kf-drawer-error,
  .kf-drawer-empty {
    padding:24px 18px; text-align:center;
    color:var(--kf-muted); font-size:14px;
  }

  /* Body scroll lock */
  body.kf-drawer-locked{ overflow:hidden; }

  .kf-menu-search .search-field{ width:140px; }
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr) !important; column-gap:12px !important; }
  .ast-search-icon{ display:none !important; }
}

/* =============================
   Layout – spacing & sidebar panel
   ============================= */
.ast-container{
  padding-left:1.2em !important;
  padding-right:1.2em !important;
  max-width:100% !important;
  width:100% !important;
}
.site-content,
.ast-plain-container,
.content-area{
  max-width:100% !important;
  width:100% !important;
}
.woocommerce-page .ast-container{
  gap:20px !important;
}
@media(min-width:769px){
  .kf-catbar{ display:none; }
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
}

/* =============================
   Footer – legal links layout
   ============================= */
.site-footer .kraftsy-legal{
  display:flex; gap:14px; flex-wrap:wrap; font-size:.95rem;
}
.site-footer .kraftsy-legal a{ text-decoration:none }

/* =============================
   Blog compact tweaks
   ============================= */
.wp-block-post{ margin-bottom: var(--kf-gap); }
.wp-block-post-excerpt__more-link{ text-decoration:none }

/* RESPONSIVE MOBILE */
@media(max-width:1024px){
  .woocommerce-page:not(.ast-no-sidebar) #primary{ max-width:calc(100% - 190px); }
  .woocommerce-page #secondary{ flex:0 0 170px; max-width:170px; min-width:170px; width:170px; }
}

@media(max-width:768px){
  .woocommerce-page .ast-container{ display:flex !important; flex-direction:column !important; }
  .woocommerce-page:not(.ast-no-sidebar) #primary{ max-width:100%; flex:1 1 100%; order:1; }
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr) !important; column-gap:12px !important; }
  .ast-search-icon{ display:none !important; }
}

@media(max-width:480px){
  .woocommerce ul.products{ grid-template-columns:repeat(1,1fr) !important; }
}

/* === TYPOGRAFIA – naglowki sklepu i produktow === */
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h1.woocommerce-products-header__title,
.woocommerce-page h1.page-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.single-product h1.product_title {
  font-family: 'BankGothicMenu', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
}

.woocommerce-products-header__title,
.woocommerce-page h1.page-title,
.woocommerce-page .page-title {
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  font-size: 1.9rem !important;
}

/* === MOBILE – Warenkorb, Mein Konto === */
@media(max-width:768px){
  html,body{overflow-x:hidden !important;}

  .woocommerce-cart-form,
  .cart-collaterals,
  .cart-collaterals .cart_totals{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
  }

  .entry-content,.ast-container,.site-content{
    max-width:100% !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }
}

/* === MOBILE – Uber uns === */
@media(max-width:980px){
  .kf-grid-2,.kf-grid-3{
    grid-template-columns:1fr !important;
  }
  .kf-gallery{
    grid-template-columns:1fr 1fr !important;
  }
}
@media(max-width:640px){
  .kf-gallery{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:768px){
  .kf-hero{
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }
}

/* === MOBILE – WooCommerce Block Cart === */
@media(max-width:768px){
  .wc-block-components-sidebar-layout{
    flex-direction:column !important;
  }
  .wc-block-components-main,
  .wc-block-components-sidebar{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    box-sizing:border-box !important;
  }
  .wp-block-woocommerce-cart.alignwide,
  .wp-block-woocommerce-checkout.alignwide{
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:100% !important;
  }

  .woocommerce-account table,
  .woocommerce-account .woocommerce-orders-table,
  .woocommerce-account .woocommerce-MyAccount-content table{
    display:block !important;
    overflow-x:auto !important;
    width:100% !important;
    max-width:100% !important;
    -webkit-overflow-scrolling:touch !important;
    box-sizing:border-box !important;
  }
}

/* === MOBILE – Mein Konto tabela === */
@media(max-width:768px){
  .woocommerce-account .woocommerce,
  .woocommerce-account #primary .woocommerce{
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content{
    overflow-x:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }
  .woocommerce-account table{
    display:table !important;
    margin-left:0 !important;
    max-width:100% !important;
  }
}

/* === MOBILE – Mein Konto wyrownanie === */
@media(max-width:768px){
  .woocommerce-account .entry-content .woocommerce,
  .woocommerce-account .woocommerce{
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation{
    float:none !important;
    width:100% !important;
    margin:0 0 16px 0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:auto !important;
    box-sizing:border-box !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content table{
    display:table !important;
    width:100% !important;
    margin:0 !important;
  }
}