/*
Theme Name: Wiktor Stribog Minimal
Theme URI: https://wiktorstribog.pl/
Author: Wiktor Stribog
Description: Stabilna baza z ulepszonymi kafelkami sklepu, Customizerem (w tym cena/stock) i poprawkami mobile menu.
Version: 1.37.15
Text Domain: wiktor-stribog-minimal
*/

:root{
  --container:1200px;
  --container-wide:1400px;
  --border-thick:14px;
  --gutter-x:24px;
  --title-size-clamp:clamp(48px,10vw,180px);
  --title-line:0.86;
  --menu-highlight:#ffe45e;
  --page-bg:#f6f6f6;
  --shop-bg:#f6f6f6;
  --footer-link:#b8b8b8;
  --anchor-w-offset:10px;
  --nav-lift:-4px;
  /* --btn_bg, --btn_bg_hover, --btn_txt, --price_color, --stock_color wstrzykiwane inline */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{color:#000;background:var(--page-bg)}
a{color:#333;text-decoration:none;transition:color .2s ease,opacity .2s ease}
a:hover{color:#000;opacity:.9}
body,button,input,textarea,select{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:400;color:#111;background:transparent;line-height:1.65;font-size:16px}
h1,h2,h3,h4,h5{font-family:"Inter Tight",Helvetica,Arial,sans-serif;font-weight:900;letter-spacing:-0.02em;color:#111;margin:0 0 .4em}

/* Header & menu */
.site-header{position:sticky;top:0;z-index:2000;border-top:var(--border-thick) solid #000;background:#fff}
.site-brand{text-align:center;padding:20px 0 0}
.brand-block{display:inline-block;margin:0 auto;position:relative;width:auto}
.site-title{margin:0;font-weight:900;text-transform:lowercase;font-size:var(--title-size-clamp);line-height:var(--title-line);letter-spacing:-0.10em;white-space:nowrap}
.site-title a{color:inherit;text-decoration:none}
.site-title .ch{display:inline-block}

#site-nav-wrap{position:relative;display:block;width:max-content;margin:var(--nav-lift) 0 0;z-index:5;background:transparent;transition:margin .2s ease,width .2s ease}
#site-nav-wrap .site-nav{margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,1.8vw,28px);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
#site-nav-wrap .site-nav a{text-decoration:none;color:#000;font-weight:500;font-size:clamp(13px,1.7vw,22px);white-space:nowrap;line-height:1.2;background-image:linear-gradient(var(--menu-highlight),var(--menu-highlight));background-repeat:no-repeat;background-size:0 45%;background-position:0 88%;transition:background-size .22s ease,color .2s ease}
#site-nav-wrap .menu-item.current-menu-item>a,#site-nav-wrap .site-nav a:hover{background-size:100% 45%}
#site-nav-wrap li,#site-nav-wrap li *{list-style:none !important}
#site-nav-wrap li::marker,#site-nav-wrap li::before,#site-nav-wrap li::after{content:none !important;display:none !important}

.nav-bottom-bar{position:relative;z-index:1;margin-top:11px;height:var(--border-thick);background:#000;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.site-main{padding:24px var(--gutter-x) 80px;max-width:var(--container-wide);margin:0 auto}

/* === MOBILE NAV – burger obok tytułu, dropdown nie porusza czarnej belki === */
@media (max-width:768px){
  .site-brand{ text-align:left; padding-left:var(--gutter-x); padding-right:var(--gutter-x) }
  .brand-block{
    position:relative;
    display:flex; align-items:center; justify-content:flex-start; gap:12px;
    width:100%; flex-wrap:wrap;
  }
.site-title{ padding-right:48px } /* rezerwujemy miejsce na burgera */

  .nav-toggle{
  position:absolute; right:var(--gutter-x); top:8px;   /* zawsze widoczny w prawym górnym rogu */
  width:auto; height:auto; margin:0;
  border:none; background:var(--btn_bg); color:var(--btn_txt);
  border-radius:8px; padding:8px 12px;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  z-index:1002;                                      /* nad tytułem */
}

  .nav-toggle .bar{ display:block; width:22px; height:2px; background:var(--btn_txt) }

  /* CZARNA BELKA – pełna szerokość i nie rusza się przy otwarciu menu */
  .nav-bottom-bar{
    order:97;
    align-self:stretch;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* pozostaje tuż pod logotypem niezależnie od dropdownu */
  }

  /* Dropdown – absolutnie pod belką, nie wypycha jej */
  #site-nav-wrap{
    order:98; width:100%; margin:0; position:relative;
  }
  #site-nav-wrap .site-nav{
    position:absolute; left:var(--gutter-x); right:var(--gutter-x);
    top: calc(100% + 12px); z-index:1001;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border:1px solid #ddd; border-radius:10px; overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
  }
  #site-nav-wrap .site-nav li a{ display:block; padding:12px 14px; font-size:16px; line-height:1.2 }
  #site-nav-wrap .site-nav li + li a{ border-top:1px solid #eee }
  #site-nav-wrap[data-open=true] .site-nav{ display:flex }
}


@media (min-width:769px){
  .nav-toggle{display:none !important}
  .nav-toggle .bar{display:none !important}
}

/* Products grid */
.woocommerce ul.products{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:18px !important;margin:24px 0 8px !important;padding:0 !important}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none !important}
.woocommerce ul.products li.product{width:auto !important;float:none !important;margin:0 !important;text-align:center}
.woocommerce ul.products li.product a{position:relative;display:block;transform:translateY(0);transition:transform .18s ease,box-shadow .18s ease}
.woocommerce ul.products li.product a:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.06)}
.woocommerce ul.products li.product a img{width:100% !important;height:auto !important;border:1px solid #ddd;border-radius:6px;background:#fff}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:17px;font-weight:400;margin-top:10px;color:#111}
.woocommerce ul.products li.product .price{color:var(--price_color)}
.woocommerce ul.products .star-rating,.woocommerce ul.products .woocommerce-product-rating,.woocommerce ul.products .rating{display:none !important}
@media (max-width:1100px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr) !important}}
@media (max-width:820px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr) !important}}
@media (max-width:520px){.woocommerce ul.products{grid-template-columns:1fr !important}}

/* Single product */
.woocommerce div.product{
  display:grid !important;grid-template-columns:1fr 1fr !important;gap:32px !important;
  max-width:var(--container-wide) !important;margin:28px auto !important;
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary{width:100% !important;max-width:none !important;float:none !important}
.woocommerce div.product .woocommerce-product-gallery__image img{width:100% !important;height:auto !important;border:1px solid #ddd;border-radius:6px;background:#fff}

/* Cena i stan na single */
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--price_color) !important}
.woocommerce div.product .stock{color:var(--stock_color) !important;font-weight:600}

/* Długi opis na całą szerokość + podobne */
.product-longdesc{grid-column:1/-1;margin-top:32px;padding-top:24px;border-top:1px solid #eee}
.related-wrap{grid-column:1/-1;margin-top:40px}
.related-wrap ul.products{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:18px !important}
@media (max-width:1100px){.related-wrap ul.products{grid-template-columns:repeat(3,1fr) !important}}
@media (max-width:820px){.related-wrap ul.products{grid-template-columns:repeat(2,1fr) !important}}
@media (max-width:520px){.related-wrap ul.products{grid-template-columns:1fr !important}}

/* Kolejność na mobile: zdjęcie -> opis -> opis długi -> podobne */
@media (max-width:768px){
  .woocommerce div.product{grid-template-columns:1fr !important;gap:18px !important}
  .woocommerce div.product div.images{order:1}
  .woocommerce div.product div.summary{order:2}
  .product-longdesc{order:3}
  .related-wrap{order:4}
  .woocommerce div.product .flex-control-nav,
  .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs{
    display:flex !important;flex-wrap:wrap;gap:8px;margin-top:10px;justify-content:flex-start
  }
  .woocommerce div.product .flex-control-thumbs li{width:64px}
  .woocommerce div.product .flex-control-thumbs img{border:1px solid #ddd;border-radius:6px}
}

/* --- Kafelki: 1/4,1/2,3/4,1/1 + h-full/h-half --- */
.woocommerce ul.products.ws-tiles-grid{gap:18px !important;margin:24px 0 8px !important;padding:0 !important}
.woocommerce ul.products.ws-tiles-grid .ws-tile{list-style:none !important;margin:0 !important}
.woocommerce ul.products.ws-tiles-grid .ws-tile a{display:block;text-align:center}
.woocommerce ul.products.ws-tiles-grid .tile-box{width:100%;border:1px solid #ddd;border-radius:6px;background:#fff;overflow:hidden;position:relative}
.woocommerce ul.products.ws-tiles-grid .tile-box img{width:100%;height:100%;object-fit:cover;display:block}
.woocommerce ul.products.ws-tiles-grid .woocommerce-loop-product__title{font-size:17px;font-weight:400;margin-top:10px;color:#111}

.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-1{grid-column:span 1}
.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-2{grid-column:span 2}
.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-3{grid-column:span 3}
.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-4{grid-column:span 4}

.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-1.h-full .tile-box{aspect-ratio:1/1}
.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-2.h-full .tile-box{aspect-ratio:2/1}
.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-3.h-full .tile-box{aspect-ratio:3/1}
.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-4.h-full .tile-box{aspect-ratio:4/1}

.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-1.h-half .tile-box{aspect-ratio:2/1}
.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-2.h-half .tile-box{aspect-ratio:4/1}
.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-3.h-half .tile-box{aspect-ratio:6/1}
.woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-4.h-half .tile-box{aspect-ratio:8/1}

@media (max-width:820px){
  .woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-3,
  .woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-4{grid-column:span 2}
  .woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-1.h-full .tile-box{aspect-ratio:1/1}
  .woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-2.h-full .tile-box,
  .woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-3.h-full .tile-box,
  .woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-4.h-full .tile-box{aspect-ratio:2/1}
  .woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-1.h-half .tile-box{aspect-ratio:2/1}
  .woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-2.h-half .tile-box,
  .woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-3.h-half .tile-box,
  .woocommerce ul.products.ws-tiles-grid .ws-tile.ws-tile-w-4.h-half .tile-box{aspect-ratio:4/1}
}
@media (max-width:520px){
  .woocommerce ul.products.ws-tiles-grid .ws-tile{grid-column:span 1 !important}
  .woocommerce ul.products.ws-tiles-grid .h-full .tile-box{aspect-ratio:1/1}
  .woocommerce ul.products.ws-tiles-grid .h-half .tile-box{aspect-ratio:2/1}
}

/* UX: "Zobacz koszyk" po dodaniu – w kolorach motywu (mniejsze) */
.woocommerce ul.products li.product a.added_to_cart.wc-forward{
  display:inline-block !important;margin-left:10px !important;padding:6px 12px !important;
  font-size:13px !important;line-height:1 !important;text-decoration:none !important;
  border:none !important;border-radius:6px !important;
  background:var(--btn_bg) !important;color:var(--btn_txt) !important;
}
.woocommerce ul.products li.product a.added_to_cart.wc-forward:hover{
  background:var(--btn_bg_hover) !important;color:var(--btn_txt) !important;
}

/* Woo Blocks: Checkout w kolorach CTA */
.wc-block-cart__submit .wp-element-button,
.wc-block-cart__submit .wc-block-components-button,
.wc-block-cart__submit .wc-block-components-checkout-button{
  background:var(--btn_bg) !important;color:var(--btn_txt) !important;border-radius:6px !important;
  border:none !important;box-shadow:none !important;padding:12px 16px !important;font-weight:600 !important;
}
.wc-block-cart__submit .wp-element-button:hover,
.wc-block-cart__submit .wc-block-components-button:hover,
.wc-block-cart__submit .wc-block-components-checkout-button:hover{
  background:var(--btn_bg_hover) !important;color:var(--btn_txt) !important;
}

/* Woo Blocks: "Usuń" jako chip w kolorach motywu */
.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link button,
.wc-block-cart-item__remove-link a{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;
  min-width:32px !important;height:28px !important;padding:0 10px !important;
  border:none !important;border-radius:6px !important;background:var(--btn_bg) !important;color:var(--btn_txt) !important;
  text-decoration:none !important;font-weight:600 !important;line-height:1 !important;
}
.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link button:hover,
.wc-block-cart-item__remove-link a:hover{background:var(--btn_bg_hover) !important;color:var(--btn_txt) !important}
.wc-block-cart-item__remove-link button::before{content:"✕";margin-right:4px;font-size:14px}

/* Woo Blocks: ilość +/- na szaro */
.wc-block-components-quantity-selector{display:inline-flex;align-items:center;gap:2px}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input{
  max-width:80px !important;border:1px solid rgba(0,0,0,.15) !important;border-radius:6px !important;height:32px !important;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{
  background:#f7f7f7 !important;color:#222 !important;border:1px solid rgba(0,0,0,.15) !important;border-radius:6px !important;
  width:32px !important;height:32px !important;line-height:30px !important;padding:0 !important;text-align:center !important;box-shadow:none !important;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover{background:#eee !important}

/* Global Woo messages */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  border:1px solid rgba(0,0,0,.12) !important;background:#fff !important;color:#111 !important;border-radius:8px !important;padding:12px 16px !important;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before{display:none !important}

/* FOOTER */
.site-footer{background:#000;color:#fff;margin-top:56px}
.site-footer a{color:var(--footer-link);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-inner{
  max-width:var(--container-wide);
  margin:0 auto;
  padding:32px var(--gutter-x) 40px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.footer-col h3{
  margin:0 0 12px;
  font-family:"Inter Tight",Helvetica,Arial,sans-serif;
  font-size:16px;font-weight:900;color:#f0f0f0
}
.footer-menu,.footer-menu ul{margin:0;padding:0;list-style:none}
.footer-menu li{margin:6px 0}
.footer-menu a{
  display:block;
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:15px;line-height:1.6;text-align:left;color:var(--footer-link);
}
.footer-bottom{border-top:1px solid #222;margin-top:24px;padding-top:18px;font-size:13px;color:#aaa;grid-column:1/-1}
@media (max-width:820px){.footer-inner{grid-template-columns:1fr;gap:12px}}

/* FAB koszyka */
.ws-cart-fab{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:52px; padding:0 14px; background:#111; color:#fff !important;
  border-radius:26px; box-shadow:0 8px 24px rgba(0,0,0,.18); text-decoration:none;
}
.ws-cart-fab .ws-cart-icon{ font-size:18px; line-height:1 }
.ws-cart-fab .ws-cart-count{
  min-width:24px; height:24px; line-height:24px; padding:0 6px; text-align:center;
  background:#fff; color:#111; border-radius:12px; font-size:12px; font-weight:700;
}
.ws-cart-fab:hover{ filter:brightness(0.92) }


/* === HOTFIX: mobile header + side drawer (musi być na końcu) === */

/* Jeszcze mniejsze litery na bardzo wąskich ekranach */
@media (max-width: 420px) {
  :root{
    /* jeszcze agresywniejszy clamp dla tytułu */
    --title-size-clamp: clamp(24px, 8.5vw, 64px);
  }
  .site-title{
    max-width: calc(100% - 56px);   /* zostaw bufor na burgera */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* MOBILE: burger + off-canvas szuflada z prawej */
@media (max-width: 768px) {
  /* Burger zawsze widoczny w prawym górnym rogu */
  .brand-block{ position: relative; } /* jeżeli już jest, to ok */
  .nav-toggle{
    display: inline-flex !important;
    position: absolute; right: var(--gutter-x, 16px); top: 8px;
    z-index: 1002;
    border: none; border-radius: 8px;
    padding: 8px 12px;
    background: var(--btn_bg, #111); color: var(--btn_txt, #fff);
    align-items: center; justify-content: center; gap: 4px;
  }
  .nav-toggle .bar{
    width: 20px; height: 2px; display: block; background: currentColor;
  }

  /* SIDE MENU: przerabiamy .site-nav na szufladę z prawej */
  #site-nav-wrap .site-nav{
    position: fixed;
    top: 12px; right: 12px; bottom: auto;
    width: min(84vw, 360px);
	max-height: 84vh;
    overflow: auto;
    border-radius: 12px;
    transform: translateX(100%);              /* domyślnie poza ekranem */
    transition: transform 240ms ease;
    z-index: 1001;
    background: var(--drawer-bg, #fff);
    display: none !important;                 /* nie chowamy displayem – tylko wyjeżdżamy */
    flex-direction: column;
    gap: 0.25rem;
    padding: 16px;
    box-shadow: -16px 0 32px rgba(0,0,0,.12);
  }
  
  /* Itemy w szufladzie – spójne, gęstsze */
 #site-nav-wrap .site-nav a{
   display:block;
   padding:10px 14px;
   font-size: clamp(18px, 4.8vw, 21px); /* większe, ale nie „banerowe” */
   line-height:1.25;
   font-weight:700;                     /* czytelny bold */
   background-image:none;
 }


  
  /* półprzezroczyste tło pod szufladę */
  #site-nav-wrap[data-open="true"]::before{
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: saturate(120%) blur(2px);
	pointer-events: none; /* NIE zasłania klików w burgera */
    z-index: 1000;
  }
  /* stan otwarty: szuflada wjeżdża */
  #site-nav-wrap[data-open="true"] .site-nav{
	display: flex !important;
    transform: translateX(0);
  }

  /* tytuł nie „wpada” pod burgera */
  .site-title{
    text-align: left !important;
    padding-right: 56px !important;
  }
}

/* DESKTOP – bez zmian: burger ukryty, zwykłe menu */
@media (min-width: 769px) {
  .nav-toggle{ display: none !important; }
}

/* === FINAL FIX: mobile tytuł + klikalność burgera (koniec pliku) === */

/* iPhone/telefony: większy tytuł bez ucinania ogonków i z buforem na burgera */
@media (max-width: 420px) {
  .site-title{
    /* bezpieczna liniatura – nie ucina „g” */
    line-height: 1 !important;
    /* trochę większy rozmiar niż dotąd */
    font-size: clamp(28px, 8.6vw, 68px) !important;
    /* niech nie wpada pod burgera */
    padding-right: 60px !important;
    /* delikatnie mniejsza ściskawa liter – czytelniejsze */
    letter-spacing: -0.10em !important;
    /* i w razie ciasnoty – elipsa zamiast rozwalenia */
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
}

/* Szuflada: domyślnie nie chwytaj klików (żeby nic niewidzialnego nie zasłaniało burgera) */
@media (max-width: 768px) {
  #site-nav-wrap:not([data-open="true"]) .site-nav{
    pointer-events: none;
  }
  #site-nav-wrap[data-open="true"] .site-nav{
    pointer-events: auto;
  }
}