/* Knobs theme - skandynawski minimalizm. External file (no inline CSS). */

:root{
  --k-ink:#1b1a18; --k-ink-soft:#3d3b37; --k-muted:#8a857c;
  --k-base:#fff; --k-surface:#f7f6f3; --k-surface-2:#efece6; --k-line:#e6e2da;
  --k-brass:#b08d57; --k-copper:#a9713f; --k-sale:#8a3b2e;
  /* Warianty tekstowe (WCAG AA, >=4.5:1 na bialym) dla DROBNEGO tekstu i linkow.
     Oryginalny --k-brass/--k-muted zostaja dla ikon, badge'y i obramowan (tam wystarcza 3:1). */
  --k-brass-text:#8a6b3d; --k-muted-text:#6f6a61;
  --k-shadow:0 1px 2px rgba(27,26,24,.04), 0 8px 30px rgba(27,26,24,.06);
  --k-radius:3px;
  --k-ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
/* prevent horizontal scroll from off-canvas elements (WC mini-cart drawer, 100vw panels).
   overflow-x:clip (not hidden) so the sticky header still works. */
html, body{ overflow-x:clip; max-width:100%; }
html{ -webkit-text-size-adjust:100% }
body{ background:var(--k-base); color:var(--k-ink); text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased }
img{ max-width:100%; height:auto }
a{ text-decoration:none; color:inherit; transition:color .2s var(--k-ease) }
/* screen-reader-only (visually hidden but present for SEO/a11y) */
.knobs-visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:where(a,button,input,summary):focus-visible{ outline:2px solid var(--k-brass); outline-offset:3px; border-radius:2px }

/* ---------------- Header ---------------- */
.knobs-topbar{ background:var(--k-ink); color:#f3f0ea; font-size:.78rem; letter-spacing:.03em }
.knobs-topbar__inner{ display:flex; gap:clamp(1rem,4vw,3rem); justify-content:center; flex-wrap:wrap; padding:.55rem 1rem }
.knobs-topbar__item{ display:inline-flex; gap:.5rem; align-items:center; color:#e6e1d8 }
.knobs-topbar__item svg{ color:var(--k-brass); flex:0 0 auto }
/* Mobile: zamiast chować pozostałe USP - rotujemy je jeden po drugim (crossfade, JS w knobs.js).
   Itemy nakładają się na siebie (absolute), widoczny tylko .is-active. */
@media(max-width:640px){
  /* itemy absolute nie dają wysokości -> min-height (border-box) definiuje pasek;
     ~2.9em daje napisom tyle samo powietrza co desktop */
  .knobs-topbar__inner{ position:relative; min-height:2.9em; flex-wrap:nowrap; padding-top:0; padding-bottom:0 }
  .knobs-topbar__item{ position:absolute; inset:0; margin:auto; width:max-content; max-width:94%; justify-content:center; opacity:0; transition:opacity .5s var(--k-ease); pointer-events:none; white-space:nowrap }
  .knobs-topbar__item.is-active{ opacity:1 }
}

/* action icons (wishlist / account) + mini-cart */
.knobs-actions{ gap:1.1rem; align-items:center }
.knobs-ico-btn{ display:inline-flex; align-items:center; gap:.4rem; color:var(--k-ink-soft); position:relative; background:none; border:0; padding:0; cursor:pointer; font:inherit; line-height:0 }
.knobs-ico-btn:hover{ color:var(--k-brass) }
.knobs-account span{ font-size:.85rem; font-weight:500 }
@media(max-width:900px){ .knobs-account span{ display:none } }
.knobs-actions .wc-block-mini-cart__button{ color:var(--k-ink-soft) }
.knobs-actions .wc-block-mini-cart__button:hover{ color:var(--k-brass) }
.tinvwl-counter, .knobs-ico-btn .count{ position:absolute; top:-8px; right:-10px; background:var(--k-brass); color:#fff; font-size:.62rem; font-weight:700; min-width:16px; height:16px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 3px }

/* ---------------- KATEGORIE mega-menu ---------------- */
.knobs-nav{ gap:0; align-items:stretch; position:relative }
.knobs-mega{ position:relative; flex:0 0 auto }
.knobs-mega__trigger{
  display:inline-flex; align-items:center; gap:.55rem; height:100%; padding:.9rem 1.5rem .9rem 0;
  background:none; border:0; cursor:pointer; font-size:.82rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--k-ink);
}
.knobs-mega__burger{ display:inline-flex; color:var(--k-brass) }
.knobs-mega__panel{
  position:absolute; top:100%; left:0; z-index:60; display:flex; width:min(1240px,96vw);
  background:var(--k-base); border:1px solid var(--k-line); border-radius:0 0 8px 8px; box-shadow:var(--k-shadow);
}
.knobs-mega__panel[hidden]{ display:none }
.knobs-mega__left{ flex:0 0 240px; border-right:1px solid var(--k-line); padding:.75rem 0; background:var(--k-surface) }
.knobs-mega__cat{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 1.25rem; font-size:.9rem; color:var(--k-ink-soft) }
.knobs-mega__cat:hover, .knobs-mega__cat.is-active{ background:var(--k-base); color:var(--k-ink); font-weight:600 }
.knobs-mega__arrow{ color:var(--k-muted) }
.knobs-mega__right{ flex:1; padding:1.25rem 1.5rem; overflow-x:auto }
.knobs-mega__subs{ display:none }
.knobs-mega__subs.is-active{ display:block }
/* subcategories as small image cards. Flex-wrap inside a capped width so MANY
   subcategories wrap sideways into 2 rows (wider panel) while FEW stay on one row
   (panel shrinks to fit). Avoids a tall single column. */
.knobs-mega__grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem 1.1rem; align-items:start }
.knobs-mega__card{ width:auto; max-width:none }
.knobs-mega__card{ display:flex; flex-direction:column; gap:.4rem }
.knobs-mega__card-img{ display:block; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--k-surface) }
.knobs-mega__card-img:empty{ display:none }                       /* no image assigned -> just show the name */
.knobs-mega__card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .35s var(--k-ease) }
.knobs-mega__card:hover .knobs-mega__card-img img{ transform:scale(1.05) }
.knobs-mega__card-name{ font-size:.82rem; color:var(--k-ink-soft); line-height:1.25 }
.knobs-mega__card:hover .knobs-mega__card-name{ color:var(--k-brass) }
.knobs-mega__banner{ position:relative; display:block; aspect-ratio:16/9; max-width:420px; border-radius:8px; overflow:hidden; background:var(--k-surface) }
.knobs-mega__banner img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--k-ease) }
.knobs-mega__banner:hover img{ transform:scale(1.04) }
.knobs-mega__banner-label{ position:absolute; inset:auto 0 0 0; padding:.75rem .9rem; color:#fff; font-weight:600; font-size:.9rem; background:linear-gradient(to top,rgba(27,26,24,.72),rgba(27,26,24,0)) }
.knobs-mega__all{ color:var(--k-brass); font-weight:600 }
@media(max-width:1100px){ .knobs-mega__grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
/* Mobile: keep KATEGORIE reachable -> full-width dropdown anchored to the nav row
   (was display:none). Panel spans the nav width, not the narrow trigger. */
/* MOBILE MENU: one clean menu (the wp:navigation overlay carries the full nav -
   categories + brands + all links). Drop the clunky KATEGORIE mega + its hamburger. */
@media(max-width:900px){
  .knobs-mega{ display:none !important }
  /* overlayMenu:"mobile" -> WP core pokazuje inline-liste od 600px, a my wymuszamy pigulke
     hamburgera do 900px. Bez tego 600-900px renderuje OBA. Chowamy zamknieta liste; overlay
     (.is-menu-open) po kliknieciu hamburgera dziala normalnie. */
  .knobs-nav .wp-block-navigation__responsive-container:not(.is-menu-open){ display:none !important }
  .knobs-nav{ position:relative; justify-content:flex-start; padding:.4rem 0 }
  /* the single hamburger -> a branded pill button matching the PC KATEGORIE trigger
     (brass burger icon + uppercase ink label in a bordered surface pill). */
  .knobs-nav .wp-block-navigation__responsive-container-open{
    display:inline-flex !important; align-items:center; gap:.6rem;
    padding:.62rem 1.15rem; background:var(--k-surface);
    border:1px solid var(--k-line); border-radius:999px; box-shadow:0 1px 2px rgba(27,26,24,.05);
    font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--k-ink);
  }
  .knobs-nav .wp-block-navigation__responsive-container-open:hover{ border-color:var(--k-brass) }
  .knobs-nav .wp-block-navigation__responsive-container-open::after{ content:"Menu" }
  .knobs-nav .wp-block-navigation__responsive-container-open svg{ width:20px; height:20px; fill:var(--k-brass); color:var(--k-brass) }
  /* full-screen overlay -> clean, tap-friendly list (like the reference shop) */
  .wp-block-navigation__responsive-container.is-menu-open{ background:var(--k-base); padding:clamp(1.25rem,5vw,2rem) }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ padding-top:2.5rem; width:100% !important; align-items:flex-start !important }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container{ width:100% !important }
  /* left-aligned, full-width list (override the desktop justify-content:center) */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ gap:0; align-items:stretch !important; justify-content:flex-start !important; text-align:left }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{ border-bottom:1px solid var(--k-line); width:100%; align-items:flex-start !important; justify-content:flex-start !important }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ justify-content:flex-start; text-align:left }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{ text-align:left }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
    padding:.95rem 0; font-size:1rem; font-weight:500; color:var(--k-ink);
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
    position:static !important; opacity:1 !important; visibility:visible !important;
    width:100% !important; min-width:0 !important; left:auto !important; top:auto !important;
    border:0 !important; box-shadow:none !important; background:transparent !important;
    padding:0 0 .5rem .75rem !important; transform:none !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{ border-bottom:0 }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    padding:.55rem 0; font-size:.92rem; font-weight:400; color:var(--k-ink-soft);
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{ color:var(--k-ink); top:1.25rem; right:1.25rem }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle{ padding-right:0 }
}

.knobs-header{
  background:var(--k-base); border-bottom:1px solid var(--k-line);
  position:sticky; top:0; z-index:50;
}
/* Mobilne poziome menu (quicklinks) - odzwierciedla nav desktop, tylko na telefonach */
.knobs-quicklinks{ display:none }
@media(max-width:900px){
  .knobs-quicklinks{ display:block; border-top:1px solid var(--k-line); background:var(--k-base) }
  .knobs-quicklinks__scroll{
    display:flex; gap:.5rem; overflow-x:auto; overscroll-behavior-x:contain;
    padding:.55rem clamp(1rem,4vw,1.5rem); -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .knobs-quicklinks__scroll::-webkit-scrollbar{ display:none }
  .knobs-quicklink{
    flex:0 0 auto; white-space:nowrap; font-size:.82rem; font-weight:600;
    color:var(--k-ink-soft); background:var(--k-surface); border:1px solid var(--k-line);
    border-radius:999px; padding:.44rem .9rem; text-decoration:none; transition:border-color .15s,color .15s;
  }
  .knobs-quicklink:hover,.knobs-quicklink:focus-visible{ border-color:var(--k-brass); color:var(--k-ink) }
}
.knobs-header .wp-block-site-title a{ letter-spacing:.14em; text-transform:uppercase; font-weight:700; white-space:nowrap }
.knobs-header__row{ align-items:center; gap:clamp(1rem,3vw,2.5rem); padding-top:.7rem !important; padding-bottom:.7rem !important }
.knobs-logo{ flex:0 0 auto; margin:0; display:flex; align-items:center }
.knobs-logo img, .knobs-logo .custom-logo{ display:block; width:170px; height:auto; max-height:56px; object-fit:contain }
@media(max-width:781px){ .knobs-logo img, .knobs-logo .custom-logo{ width:130px } }
/* Mobile header: the row is flexWrap:nowrap in markup, which crushes the search on
   phones (unshrinkable Szukaj button). Wrap the row and give search its own full line. */
@media(max-width:781px){
  .knobs-header__row{ flex-wrap:wrap !important; row-gap:.7rem; column-gap:.75rem !important }
  .knobs-logo{ order:1 }
  .knobs-actions{ order:2; margin-left:auto }
  .knobs-search{ order:3; flex:1 1 100% !important; width:100%; min-width:100% }
}
.knobs-search{ flex:1 1 auto; justify-content:center; min-width:0 }
.knobs-search .wp-block-shortcode, .knobs-search .dgwt-wcas-search-wrapp{ margin:0 !important }
.knobs-search .dgwt-wcas-search-form{ margin:0 !important }
.knobs-actions{ flex:0 0 auto }
.knobs-nav .knobs-mega__trigger{ padding-top:.7rem; padding-bottom:.7rem }
/* tighten the nav row height too */
.knobs-nav .wp-block-navigation-item__content{ padding-block:.7rem }

/* nav */
.knobs-nav .wp-block-navigation{ justify-content:center; gap:clamp(1rem,2.5vw,2.25rem) }
.knobs-nav .wp-block-navigation-item__content{
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--k-ink-soft);
  padding-block:1.1rem;
}
.knobs-nav .wp-block-navigation-item__content:hover{ color:var(--k-brass) }
.knobs-nav .wp-block-navigation .wp-block-navigation-submenu:hover>.wp-block-navigation__submenu-container{ box-shadow:var(--k-shadow) }

/* header action icons row */
.knobs-actions{ display:flex; gap:1.1rem; align-items:center }
.knobs-actions a{ color:var(--k-ink-soft) }
.knobs-actions a:hover{ color:var(--k-brass) }

/* ---------------- USP / trust bar (in body) ---------------- */
.knobs-usp{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; padding:1.25rem 0 }
.knobs-usp__item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem }
.knobs-usp__t{ font-weight:600; font-size:.92rem }
.knobs-usp__s{ color:var(--k-muted-text); font-size:.8rem }

/* ---------------- Hero: DSG banner slide styled to match the reference ---------------- */
.knobs-hero-wrap{ background:var(--k-surface); border-radius:0 }
.knobs-hero-wrap .dsg-carousel, .knobs-hero-wrap .swiper{ background:transparent }
.knobs-hero-wrap .dsg-banner{
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:clamp(1.5rem,4vw,3.5rem) !important; align-items:center !important;
  max-width:var(--wp--style--global--content-size,1300px); margin:0 auto; padding:clamp(1.5rem,4vw,2.5rem) 0; background:transparent;
}
.knobs-hero-wrap .swiper-slide{ height:auto !important }
.knobs-hero-wrap .dsg-banner__content, .knobs-hero-wrap .dsg-banner__image{ width:auto !important; max-width:none !important; margin:0 !important }
.knobs-hero-wrap .dsg-banner--image-left{ direction:rtl } .knobs-hero-wrap .dsg-banner--image-left>*{ direction:ltr }
.knobs-hero-wrap .dsg-banner__content{ order:0 }
.knobs-hero-wrap .dsg-banner__image{ order:1 }
.knobs-hero-wrap .dsg-banner__eyebrow{ text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:var(--k-brass-text); font-weight:700; margin:0 0 .4rem }
.knobs-hero-wrap .dsg-banner__headline{ font-family:var(--wp--preset--font-family--display); font-size:clamp(2.25rem,5vw,3.75rem); font-weight:600; line-height:1.08; letter-spacing:-.015em; color:var(--k-ink); margin:0 0 .6rem }
.knobs-hero-wrap .dsg-banner__subline{ color:var(--k-ink-soft); font-size:clamp(1rem,1.4vw,1.25rem); line-height:1.6; max-width:46ch; margin:0 0 1.5rem }
.knobs-hero-wrap .dsg-banner__buttons{ display:flex; flex-wrap:wrap; gap:.75rem }
.knobs-hero-wrap .dsg-banner__btn{ display:inline-flex; align-items:center; padding:.9rem 1.75rem; border-radius:3px; font-size:.875rem; font-weight:600; letter-spacing:.03em; transition:all .2s var(--k-ease) }
.knobs-hero-wrap .dsg-banner__btn--primary{ background:var(--k-ink); color:#fff; border:1px solid var(--k-ink) }
.knobs-hero-wrap .dsg-banner__btn--primary:hover{ background:var(--k-brass); border-color:var(--k-brass) }
.knobs-hero-wrap .dsg-banner__btn--secondary{ background:transparent; color:var(--k-ink); border:1px solid var(--k-ink) }
.knobs-hero-wrap .dsg-banner__btn--secondary:hover{ background:var(--k-ink); color:#fff }
.knobs-hero-wrap .dsg-banner__image img{ width:100%; height:100%; object-fit:cover; border-radius:8px; aspect-ratio:4/3 }
.knobs-hero-wrap .swiper-button-next, .knobs-hero-wrap .swiper-button-prev{ color:var(--k-ink) }
.knobs-hero-wrap .swiper-pagination-bullet-active{ background:var(--k-brass) }
/* single hero banner: hide swiper nav + pagination (only one slide) */
.knobs-hero-wrap .swiper-button-next,
.knobs-hero-wrap .swiper-button-prev,
.knobs-hero-wrap .swiper-pagination,
.knobs-hero-wrap .dsg-carousel__nav,
.knobs-hero-wrap .dsg-carousel__controls{ display:none !important }
/* Mobile hero: bazowa reguła wyżej ma `grid-template-columns:1fr 1fr !important`,
   więc override MUSI też być !important. Składamy w kolumnę: obraz na górze (16:9),
   treść pod, przyciski full-width jeden pod drugim (primary nad secondary). */
@media(max-width:800px){
  .knobs-hero-wrap .dsg-banner{
    grid-template-columns:1fr !important; gap:1.25rem !important;
    padding-top:1rem !important; padding-bottom:2.25rem !important;
  }
  .knobs-hero-wrap .dsg-banner__image{ order:-1 !important }
  .knobs-hero-wrap .dsg-banner__image img{ aspect-ratio:16/9 !important }
  .knobs-hero-wrap .dsg-banner__headline{ font-size:clamp(1.75rem,6.5vw,2.4rem) }
  .knobs-hero-wrap .dsg-banner__subline{ max-width:none }
  .knobs-hero-wrap .dsg-banner__buttons{ flex-direction:column; align-items:stretch }
  .knobs-hero-wrap .dsg-banner__btn{ width:100%; justify-content:center }
}

.knobs-hero{ position:relative; background:var(--k-surface); overflow:clip }
.knobs-hero__inner{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center }
@media(min-width:800px){ .knobs-hero--split .knobs-hero__inner{ grid-template-columns:1.05fr .95fr } }
.knobs-hero__eyebrow{ text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:var(--k-brass-text); font-weight:700 }
.knobs-hero h1{ margin:.4em 0 .3em; line-height:1.08 }
.knobs-hero p{ color:var(--k-ink-soft); max-width:46ch }

/* ---------------- Mid banner (editorial) ---------------- */
.knobs-banner{ padding-inline:0 }
.knobs-banner__link{ position:relative; display:block; min-height:clamp(280px,34vw,440px); border-radius:10px; overflow:clip; color:#fff }
.knobs-banner__media{ position:absolute; inset:0; background:var(--k-surface-2) center/cover no-repeat; transition:transform .6s var(--k-ease) }
.knobs-banner__link:hover .knobs-banner__media{ transform:scale(1.03) }
.knobs-banner__link::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,19,17,.78) 0%, rgba(20,19,17,.45) 45%, rgba(20,19,17,.05) 100%) }
.knobs-banner__content{ position:relative; z-index:1; max-width:clamp(320px,44%,560px); padding:clamp(1.75rem,4vw,3.5rem) }
.knobs-banner__eyebrow{ text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; font-weight:700; color:#e9c9a0 }
.knobs-banner__content h2{ color:#fff; margin:.4rem 0 .6rem; font-size:clamp(1.5rem,3vw,2.25rem) }
.knobs-banner__content p{ color:#e8e4dd; max-width:44ch; margin:0 0 1rem }
.knobs-banner__cta{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.85rem; letter-spacing:.03em; border-bottom:2px solid var(--k-brass); padding-bottom:.2rem }
.knobs-banner__cta::after{ content:"\2192"; transition:transform .25s var(--k-ease) }
.knobs-banner__link:hover .knobs-banner__cta::after{ transform:translateX(4px) }

/* ---------------- Brands strip ---------------- */
.knobs-brands__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.5rem,4vw,3.5rem); align-items:center }
.knobs-brands__row a{ font-size:clamp(1rem,1.6vw,1.35rem); font-weight:600; letter-spacing:.02em; color:var(--k-muted); transition:color .2s }
.knobs-brands__row a:hover{ color:var(--k-ink) }

/* ---------------- Editorial split ---------------- */
.knobs-why{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.85rem }
.knobs-why li{ position:relative; padding-left:1.7rem; color:var(--k-ink-soft); line-height:1.55 }
.knobs-why li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--k-brass) }
.knobs-why strong{ color:var(--k-ink) }

/* ---------------- Blog / poradnik ---------------- */
.knobs-posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem) }
@media(max-width:781px){ .knobs-posts{ grid-template-columns:1fr } }
.knobs-post{ display:flex; flex-direction:column; gap:.6rem; padding:clamp(1.25rem,2.5vw,1.75rem); background:var(--k-surface); border:1px solid var(--k-line); border-radius:8px; min-height:150px; justify-content:space-between; transition:transform .3s var(--k-ease),box-shadow .3s var(--k-ease) }
.knobs-post:hover{ transform:translateY(-3px); box-shadow:var(--k-shadow) }
.knobs-post__tag{ align-self:flex-start; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:700; color:var(--k-brass-text) }
.knobs-post__title{ font-size:1.05rem; font-weight:600; color:var(--k-ink); line-height:1.3 }

/* ---------------- Category tiles (natywne bloki - edytowalne w Site Editorze) ---------------- */
/* Pelnoszerokosciowy baner "Uchwyty do mebli" (Cover) */
.knobs-cat-hero{ position:relative; border-radius:var(--k-radius); overflow:clip }
.knobs-cat-hero .wp-block-cover__image-background{ transition:transform .6s var(--k-ease) }
.knobs-cat-hero:hover .wp-block-cover__image-background{ transform:scale(1.03) }
.knobs-cat-hero__title{ font-size:clamp(1.6rem,3.5vw,2.4rem); margin:0 }
.knobs-cat-hero__title a{ color:#fff; text-decoration:none }
.knobs-cat-hero__title a::after{ content:""; position:absolute; inset:0; z-index:1 } /* caly baner klikalny */
/* Siatka pozostalych kategorii: 4/rzad desktop, 2 na mobile */
.knobs-cat-grid{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:clamp(.75rem,1.5vw,1.25rem) }
.knobs-cat-tile{ position:relative; margin:0 }
.knobs-cat-tile .knobs-cat-tile__img{ margin:0; border-radius:var(--k-radius); overflow:clip; background:var(--k-surface); border:1px solid var(--k-line) }
.knobs-cat-tile .knobs-cat-tile__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .5s var(--k-ease) }
.knobs-cat-tile:hover .knobs-cat-tile__img img{ transform:scale(1.05) }
.knobs-cat-tile__label{ margin:.6rem 0 0; font-weight:600; font-size:.95rem; color:var(--k-ink); text-align:center }
.knobs-cat-tile__label a{ color:inherit; text-decoration:none }
.knobs-cat-tile__label a::after{ content:""; position:absolute; inset:0 } /* caly kafelek klikalny */
.knobs-cat-tile:hover .knobs-cat-tile__label a{ color:var(--k-brass-text) }
@media(max-width:781px){ .knobs-cat-grid{ grid-template-columns:repeat(2,1fr) } }

/* ---------------- Product grid & cards (WooCommerce) ---------------- */
/* Listings are a consistent 4-up on desktop (see the block rule below). */
.woocommerce ul.products,
ul.products{
  display:grid !important; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2vw,1.5rem); margin:0; padding:0; list-style:none;
}
/* WooCommerce adds ::before/::after clearfix pseudo-elements that become phantom grid
   cells (empty first/last slot). Neutralise them. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products::before, ul.products::after{ content:none !important; display:none !important }
/* Category / shop archives render via the Product Collection block
   (.wp-block-woocommerce-product-template.columns-N), NOT ul.products. Force a
   consistent 4-up grid regardless of the block's own columns-N class. */
.wp-block-woocommerce-product-template,
.wp-block-woocommerce-product-template.columns-3,
.wc-block-product-template__responsive.columns-3{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important;
  gap:clamp(1rem,2vw,1.5rem) !important; margin:0 !important; padding:0 !important;
}
@media(max-width:1100px){
  .woocommerce ul.products, ul.products,
  .wp-block-woocommerce-product-template,
  .wp-block-woocommerce-product-template.columns-3,
  .wc-block-product-template__responsive.columns-3{ grid-template-columns:repeat(3,1fr) !important }
}
@media(max-width:900px){
  .wp-block-woocommerce-product-template,
  .wp-block-woocommerce-product-template.columns-3,
  .wc-block-product-template__responsive.columns-3{ grid-template-columns:repeat(2,1fr) !important }
  .woocommerce ul.products, ul.products{ grid-template-columns:repeat(2,1fr) !important }
}
/* ---------------- Category filters sidebar (native WooCommerce filter blocks) ---------------- */
.knobs-shop-layout{ gap:clamp(1.5rem,3vw,2.5rem) !important; align-items:flex-start }
.knobs-filters{ flex:0 0 230px; position:sticky; top:calc(var(--knobs-header-h,130px) + .5rem) }
.knobs-filters__title{ font-size:1rem !important; margin:0 0 1rem !important; padding-bottom:.6rem; border-bottom:1px solid var(--k-line) }
.knobs-filters h3, .knobs-filters .wc-block-components-title{ font-size:.82rem !important; text-transform:uppercase; letter-spacing:.05em; color:var(--k-ink); font-weight:600; margin:0 0 .7rem !important }
.knobs-filters .wp-block-woocommerce-price-filter,
.knobs-filters .wp-block-woocommerce-attribute-filter,
.knobs-filters .wp-block-woocommerce-active-filters{ margin:0 0 1.6rem !important }
.knobs-filters .wc-block-components-checkbox__label,
.knobs-filters .wc-block-components-filter-title, .knobs-filters label{ font-size:.85rem; color:var(--k-ink-soft) }
.knobs-filters input[type=checkbox]{ accent-color:var(--k-brass) }
.knobs-filters .wc-block-components-checkbox__input:checked{ background:var(--k-brass); border-color:var(--k-brass) }
.knobs-filters .wc-block-components-price-slider__range-input-progress{ --range-color:var(--k-brass) }
.knobs-filters .wc-block-price-filter__range-input-progress{ --range-color:var(--k-brass) }
.knobs-filters .wc-block-components-filter-submit-button{ background:var(--k-ink) !important; border:0 !important; border-radius:3px !important; color:#fff !important; font-weight:600 }
.knobs-filters .wc-block-components-filter-submit-button:hover{ background:var(--k-brass) !important }
.knobs-filters .wc-block-components-price-slider__amount{ border:1px solid var(--k-line) !important; border-radius:3px }
.knobs-filters .wc-block-active-filters .wc-block-components-chip{ background:var(--k-surface) }
/* products sit in a narrower main column -> 3-up (override the global 4-up listing rule) */
.knobs-shop-main .wp-block-woocommerce-product-template,
.knobs-shop-main .wp-block-woocommerce-product-template.columns-3{ grid-template-columns:repeat(3,1fr) !important }
@media(max-width:1100px){ .knobs-shop-main .wp-block-woocommerce-product-template{ grid-template-columns:repeat(2,1fr) !important } }
/* mobile: filters stack above the products, full width */
@media(max-width:900px){
  .knobs-shop-layout{ flex-direction:column }
  .knobs-filters{ flex:1 1 100% !important; width:100%; position:static; top:auto }
  .knobs-shop-main .wp-block-woocommerce-product-template,
  .knobs-shop-main .wp-block-woocommerce-product-template.columns-3{ grid-template-columns:repeat(2,1fr) !important }
}

ul.products li.product{ position:relative; margin:0 !important; width:auto !important; text-align:left }
/* image wrapper positioning context for the sale badge */
li.product > a:first-of-type, li.product .wp-block-woocommerce-product-image,
.wc-block-grid__product-image, .wp-block-post .wc-block-components-product-image{ position:relative; display:block }

li.product, .wc-block-grid__product, .wp-block-post{
  container-type:inline-size;
  /* MUST be relative: the wishlist heart (.tinvwl-loop-button-wrapper) is position:absolute
     and anchors to calc(100cqw-70px)/right:12px INSIDE the card. Bloki Product Collection
     (ul.wp-block-post-template) nie łapały `ul.products li.product{position:relative}`, więc
     serce uciekało do <main> i lądowało nad opisem kategorii. */
  position:relative;
}
li.product a img, .wc-block-grid__product-image img,
.wc-block-components-product-image img, .wp-block-woocommerce-product-image img{
  background:#fff; border:1px solid var(--k-line); border-radius:var(--k-radius);
  aspect-ratio:1 !important; object-fit:contain !important; width:100% !important; height:auto; padding:8%;
  transition:transform .4s var(--k-ease);
}
/* Formani ma zdjęcia z produktem wypełniającym kadr od krawędzi (ciasny crop, brak marginesu),
   przez co na kartach wyglądają za duże względem innych marek. Więcej paddingu = oddech.
   Per-marka (klasa product_brand-formani na karcie) -> działa globalnie dla wszystkich Formani. */
.product_brand-formani a img,
.product_brand-formani .wc-block-components-product-image img,
.product_brand-formani .wp-block-woocommerce-product-image img{ padding:12% !important }
/* the block image wrapper defaults to aspect-ratio:auto -> variable heights; pin it square */
.wc-block-components-product-image--aspect-ratio-auto,
.wc-block-components-product-image{ aspect-ratio:1 !important; display:block }
li.product:hover a img{ transform:scale(1.03) }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
li.product h2, li.product h3{
  font-size:.95rem !important; font-weight:500; color:var(--k-ink-soft); margin:.75rem 0 .25rem; line-height:1.35;
}
.woocommerce ul.products li.product .price{ color:var(--k-ink); font-weight:600; font-size:1rem }
.woocommerce ul.products li.product .price del{ color:var(--k-muted); font-weight:400; margin-right:.4rem }
.woocommerce ul.products li.product .price ins{ color:var(--k-sale); text-decoration:none }
/* Mobile: Piotr keeps long SEO titles (5+ lines) which made card heights ragged so
   the price/heart never aligned across a 2-up row. Clamp the title to a fixed 3-line
   box (full text stays in the DOM -> SEO intact) and reserve that height so short and
   long titles all push their price to the same baseline. */
@media(max-width:900px){
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  li.product h2, li.product h3,
  .wp-block-post .wp-block-post-title,
  .wc-block-grid__product-title{
    font-size:.82rem !important; line-height:1.3 !important; margin:.55rem 0 .2rem !important;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(3 * 1.3 * .82rem);
  }
}

/* add-to-cart reveal on hover (pointer devices) */
.woocommerce ul.products li.product .button,
li.product .wp-block-button__link{
  margin-top:.6rem; font-size:.8rem; letter-spacing:.03em;
}
@media(hover:hover) and (min-width:700px){
  li.product:has(.woocommerce-loop-product__title) .button{ opacity:0; transform:translateY(4px); transition:opacity .25s,transform .25s }
  /* :focus-within -> uzytkownik klawiatury nie taboje po niewidocznym (opacity:0) przycisku */
  li.product:hover .button,
  li.product:focus-within .button{ opacity:1; transform:none }
}

/* Sale badge. Structure (blockified):
     .wp-block-woocommerce-product-sale-badge        <- OUTER wrapper: renders even for
                                                        products WITHOUT a badge (empty) ->
                                                        must stay transparent (no black blob)
       .wc-block-components-product-sale-badge        <- INNER pill, only present with "Promocja"
   So: outer = positioning only; the black pill lives on the INNER badge (+ classic span.onsale). */
.wp-block-woocommerce-product-sale-badge{
  position:absolute !important; top:8px !important; left:8px !important; right:auto !important; bottom:auto !important;
  margin:0 !important; padding:0 !important; background:none !important; z-index:3; min-height:0; min-width:0;
}
.woocommerce span.onsale,
.wc-block-components-product-sale-badge,
li.product .onsale{
  position:absolute !important; top:8px !important; left:8px !important; right:auto !important; bottom:auto !important;
  transform:none !important; margin:0 !important; z-index:3;
  background:var(--k-ink); color:#fff; border-radius:99px; min-height:0; min-width:0;
  padding:.22rem .62rem; font-size:.66rem; line-height:1.2; letter-spacing:.04em; font-weight:600; white-space:nowrap;
}
/* the INNER pill sits inside the already-positioned outer wrapper -> static, not absolute again */
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge{ position:static !important; top:auto !important; left:auto !important }
/* hide empty badges (no "Promocja" text) so no stray pill shows */
.wc-block-components-product-sale-badge:empty,
.wp-block-woocommerce-product-sale-badge:empty,
li.product .onsale:empty{ display:none !important; background:none !important; padding:0 !important }
.wc-block-components-product-sale-badge.alignright,
.wc-block-components-product-sale-badge.aligncenter,
.wc-block-components-product-sale-badge.alignleft{ left:auto !important; right:auto !important; margin:0 !important }
/* Klasyczny [products] (homepage) idzie przez wpautop, który wstawia zbłąkane <br> wokół
   badge'a .onsale w linku produktu -> obrazek spychany w dół, badge ląduje NAD nim i rozwala
   szereg. Ukrywamy te <br> (nie ma legalnych <br> w loop-linku) -> badge wraca w róg miniatury. */
ul.products li.product .woocommerce-LoopProduct-link br{ display:none !important }
li.product, .wc-block-product, .wp-block-post,
.wc-block-components-product-image, .wc-block-components-product-image__inner-container{ overflow:visible }
.wc-block-components-product-image{ position:relative }

/* ---------------- Wishlist heart on product cards ---------------- */
/* The ti-wishlist loop button normally renders as a text link at the very
   bottom of the card; with variable-height titles those links never line up
   across a row. Pin it as an icon-only round button in the thumbnail's
   bottom-right corner so alignment is height-independent. The thumbnail is
   square (aspect-ratio:1) and full card width, and li.product is an
   inline-size container, so its bottom edge sits at 100cqw from the top. */
.tinvwl-loop-button-wrapper{
  position:absolute !important; top:calc(100cqw - 70px); right:12px; left:auto; bottom:auto;
  margin:0 !important; padding:0 !important; z-index:4; width:auto; line-height:0;
}
/* the plugin wraps the button in a <p> with a default margin that pushed the heart
   ~34px down (out below the thumbnail); collapse the wrapper's inner spacing so the
   button sits exactly at the positioned top. */
.tinvwl-loop-button-wrapper p{ margin:0 !important; padding:0 !important; line-height:0 }
.tinvwl-loop-button-wrapper p:empty,
.tinvwl-loop-button-wrapper .tinvwl-wishlist-clear{ display:none !important }
.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin:0; padding:0;
  background:rgba(255,255,255,.92); border:1px solid var(--k-line); border-radius:50%;
  color:var(--k-ink-soft); box-shadow:0 1px 4px rgba(0,0,0,.06);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:color .2s var(--k-ease), background .2s, transform .2s, box-shadow .2s;
}
.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:hover{
  color:var(--k-sale); background:#fff; transform:scale(1.08); box-shadow:0 3px 10px rgba(0,0,0,.12);
}
/* icon-only: hide EVERY text label + tooltip in ANY state. The plugin re-shows
   ".tinvwl_remove_from_wishlist-text" (display:block !important) once the product is
   on the list, so we need a selector at least as specific as theirs, plus a catch-all
   on the button's own child spans, to keep it a clean icon after adding. */
.tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button > span,
.tinvwl-loop-button-wrapper a.tinvwl_add_to_wishlist_button > b,
.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist-text,
.tinvwl-loop-button-wrapper .tinvwl_remove_from_wishlist-text,
.tinvwl-loop-button-wrapper.tinvwl-loop-button-wrapper .tinvwl_remove_from_wishlist-text,
.tinvwl-loop-button-wrapper .tinvwl-txt,
.tinvwl-loop-button-wrapper .tinvwl-tooltip{
  display:none !important;
}
.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button::before{
  margin:0 !important; font-size:1.05rem; line-height:1;
}
/* already-on-list state -> filled accent heart */
.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
.tinvwl-loop-button-wrapper a.tinvwl_remove_from_wishlist_button{
  color:var(--k-sale); border-color:var(--k-sale);
}

/* ---------------- Category archive: SEO descriptions ---------------- */
/* top intro under the category title */
.term-description, .taxonomy-description, .woocommerce-products-header__description,
.wp-block-term-description{
  max-width:var(--wp--style--global--content-size,1300px); color:var(--k-ink-soft); font-size:.95rem; line-height:1.7; margin:.5rem 0 2rem;
}
.term-description strong, .wp-block-term-description strong{ color:var(--k-ink) }
/* bottom long-form SEO article */
.knobs-cat-seo{ border-top:1px solid var(--k-line); margin-top:var(--wp--preset--spacing--60); padding-top:var(--wp--preset--spacing--50) }
.knobs-cat-seo__inner{ max-width:none; margin:0; color:var(--k-ink-soft); font-size:.95rem; line-height:1.75 }
/* full-width prose is hard to read as one column -> flow body paragraphs in 2 columns
   on wide screens (headings/tables/lists span full width) */
@media(min-width:1000px){
  .knobs-cat-seo__inner{ column-count:2; column-gap:3rem }
  .knobs-cat-seo__inner h2, .knobs-cat-seo__inner h3, .knobs-cat-seo__inner table{ column-span:all }
  .knobs-cat-seo__inner h2{ margin-top:1.5rem }
}
.knobs-cat-seo__inner h2{ font-size:1.4rem; margin:2rem 0 .75rem }
.knobs-cat-seo__inner h3{ font-size:1.1rem; margin:1.5rem 0 .5rem }
.knobs-cat-seo__inner p{ margin:0 0 1rem }
.knobs-cat-seo__inner ul,.knobs-cat-seo__inner ol{ margin:0 0 1rem 1.25rem }
.knobs-cat-seo__inner a{ color:var(--k-brass-text); text-decoration:underline }
.knobs-cat-seo__inner table{ width:100%; border-collapse:collapse; font-size:.88rem; margin:1rem 0 }
.knobs-cat-seo__inner th,.knobs-cat-seo__inner td{ text-align:left; padding:.5rem .75rem; border-bottom:1px solid var(--k-line) }

/* ---------------- Single product ---------------- */
.knobs-single .knobs-product-top{ align-items:flex-start }
.knobs-single .wp-block-woocommerce-breadcrumbs{ color:var(--k-muted-text); font-size:.8rem }
/* Breadcrumbs default to alignwide (wideSize 1600) -> on wide screens they bleed ~150px
   left of the header/mega-menu container (contentSize 1300). Constrain to contentSize so
   they line up with the nav and the product/archive content. */
.wc-block-breadcrumbs.alignwide{ max-width:var(--wp--style--global--content-size,1300px); margin-left:auto; margin-right:auto }
/* gallery panel (DSG or default) - FIXED container that FILLS the column (DSG otherwise
   caps itself ~350px). never changes size with image dims. */
.knobs-single .woocommerce-product-gallery,
.knobs-single .dsg-wc-gallery,
.knobs-single .dsg-wc-gallery--bottom-thumbs,
.knobs-single .wp-block-woocommerce-product-image-gallery{
  background:var(--k-surface); border-radius:10px; padding:clamp(1rem,2vw,1.75rem);
  width:100% !important; max-width:100% !important; box-sizing:border-box; margin:0 !important;
}
/* WooCommerce classic CSS caps div.images at 48% -> force full column width */
.knobs-single .images,
.knobs-single div.product div.images,
.knobs-single .woocommerce-product-gallery{ width:100% !important; max-width:100% !important; float:none !important; margin:0 !important }
/* inner DSG containers must also fill (swiper/wrapper otherwise stay narrow) */
.knobs-single .dsg-wc-gallery > *,
.knobs-single .dsg-wc-gallery .swiper,
.knobs-single .dsg-wc-gallery .swiper-wrapper,
.knobs-single .dsg-wc-gallery .swiper-slide{ width:100% !important; max-width:100% !important }
/* main image: constant square stage, image is contained (letterboxed) so the frame never jumps */
.knobs-single .dsg-wc-main-image,
.knobs-single .dsg-wc-gallery-link,
.knobs-single .woocommerce-product-gallery__image{
  aspect-ratio:1/1 !important; width:100% !important; max-width:100% !important; height:auto !important;
  display:flex !important; align-items:center; justify-content:center; overflow:hidden;
  background:var(--k-base); border-radius:8px;
}
.knobs-single .dsg-wc-main-image img,
.knobs-single .dsg-wc-gallery-link img,
.knobs-single .woocommerce-product-gallery__image img{
  width:100% !important; height:100% !important; object-fit:contain !important;
  mix-blend-mode:multiply; padding:6%;
}
/* thumbnails keep their own look (no blend, fixed squares) */
.knobs-single .dsg-wc-thumb img{ mix-blend-mode:normal; object-fit:cover }
.knobs-single .dsg-wc-thumb{ width:64px !important; height:64px !important }

/* summary column */
.knobs-product-summary{ position:sticky; top:calc(var(--knobs-header-h,130px) + .5rem) }
@media(max-width:781px){ .knobs-product-summary{ position:static } }
.knobs-product-brand{ text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--k-brass-text); font-weight:700 }
.knobs-product-brand a{ color:var(--k-brass-text) }
.knobs-single .knobs-price .price,
.knobs-single .knobs-price{ font-size:1.75rem; font-weight:600; color:var(--k-ink) }
.knobs-single .knobs-price del{ color:var(--k-muted); font-weight:400; font-size:1.1rem }
.knobs-single .knobs-price ins{ text-decoration:none; color:var(--k-sale) }
/* Omnibus (wc-price-history) lowest-price note */
.knobs-single .wc-price-history,
.knobs-single .ry-wcph-lowest-price-message{ font-size:.78rem; color:var(--k-muted-text); margin:.35rem 0 0 }
/* add to cart */
.knobs-single .quantity input{ height:57px; box-sizing:border-box; border:1px solid var(--k-line); border-radius:3px }
/* keep qty box and the add-to-cart button on one baseline-aligned row */
.knobs-single form.cart .quantity{ display:inline-flex; align-items:stretch }
.knobs-single form.cart .quantity input{ align-self:stretch }
.knobs-single .single_add_to_cart_button,
.knobs-single .wc-block-components-product-button .wp-block-button__link{
  width:100%; max-width:360px; padding:1rem 1.5rem !important; font-size:.95rem;
}
.knobs-single form.cart{ margin:1.25rem 0 }

/* stock availability: a calm one-line indicator, not a stray floating paragraph */
.knobs-single .knobs-product-summary p.stock{
  display:inline-flex; align-items:center; gap:.5rem; margin:.25rem 0 1rem;
  font-size:.82rem; font-weight:500; letter-spacing:.01em; color:var(--k-muted);
}
.knobs-single .knobs-product-summary p.stock::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--k-muted); flex:0 0 auto;
}
.knobs-single .knobs-product-summary p.stock.in-stock{ color:var(--k-ink-soft) }
.knobs-single .knobs-product-summary p.stock.in-stock::before{ background:#3f9e4d }
.knobs-single .knobs-product-summary p.stock.out-of-stock::before{ background:var(--k-sale) }

/* "Szczegółowe informacje o produkcie" -> tidy icon link that jumps to the details tab */
.knobs-detail-link{
  display:flex; align-items:center; gap:.6rem; width:100%; max-width:360px;
  margin:.9rem 0 0; padding:.7rem .9rem;
  border:1px solid var(--k-line); border-radius:6px; background:var(--k-base);
  color:var(--k-ink-soft); font-size:.85rem; font-weight:500; text-decoration:none;
  transition:border-color .2s var(--k-ease), background .2s, color .2s;
}
.knobs-detail-link:hover{ border-color:var(--k-brass); color:var(--k-ink); background:var(--k-surface) }
.knobs-detail-link__ico{ flex:0 0 auto; color:var(--k-brass) }
.knobs-detail-link__txt{ flex:1 1 auto; line-height:1.3 }
.knobs-detail-link__arrow{ flex:0 0 auto; color:var(--k-muted); transition:transform .2s var(--k-ease) }
.knobs-detail-link:hover .knobs-detail-link__arrow{ transform:translateX(3px); color:var(--k-brass) }

/* delivery cost list under the price: collapsible <details>, chevron like the
   "Bezpieczeństwo i producent" link (pulled live from the WC shipping zone) */
.knobs-shiptime{ display:inline-flex; align-items:center; gap:.45rem; margin:.55rem 0 .2rem; font-size:.9rem; font-weight:600; color:var(--k-ink-soft) }
.knobs-shiptime__ico{ flex:0 0 auto; color:var(--k-brass) }
.knobs-shiptime--out{ color:var(--k-sale) }
.knobs-delivery{ max-width:360px; margin:.9rem 0 1.1rem; border:1px solid var(--k-line); border-radius:6px; overflow:hidden }
.knobs-delivery__head{
  display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; cursor:pointer; list-style:none;
  font-size:.85rem; font-weight:600; color:var(--k-ink-soft); user-select:none;
  transition:background .2s var(--k-ease);
}
.knobs-delivery__head::-webkit-details-marker{ display:none }
.knobs-delivery__head:hover{ background:var(--k-surface) }
.knobs-delivery__ico{ flex:0 0 auto; color:var(--k-brass) }
.knobs-delivery__title{ flex:1 1 auto }
.knobs-delivery__arrow{ flex:0 0 auto; color:var(--k-muted); transition:transform .2s var(--k-ease) }
.knobs-delivery[open] .knobs-delivery__arrow{ transform:rotate(90deg); color:var(--k-brass) }
.knobs-delivery__list{ list-style:none; margin:0; padding:.1rem .9rem .6rem; border-top:1px solid var(--k-line) }
.knobs-delivery__list li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.4rem 0; font-size:.85rem }
.knobs-delivery__list li + li{ border-top:1px solid var(--k-line) }
.knobs-delivery__name{ color:var(--k-ink-soft) }
.knobs-delivery__cost{ flex:0 0 auto; font-weight:600; color:var(--k-ink); white-space:nowrap }
.knobs-delivery__cost .woocommerce-Price-amount{ font-weight:600 }

/* brand block under the gallery (graphical logo) + fills the empty space so the
   two product columns even out in height */
.knobs-product-media{ display:flex; flex-direction:column }
.knobs-brand-block{
  margin-top:var(--wp--preset--spacing--40); padding-top:var(--wp--preset--spacing--40);
  border-top:1px solid var(--k-line); display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center;
}
.knobs-brand-block__label{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--k-muted) }
.knobs-brand-block__logo{ display:inline-flex; align-items:center; justify-content:center; max-width:220px }
.knobs-brand-block__logo img{ max-width:100%; max-height:56px; width:auto; height:auto; object-fit:contain; opacity:.9; transition:opacity .2s var(--k-ease) }
.knobs-brand-block__logo:hover img{ opacity:1 }
.knobs-brand-block__name{ font-size:1.15rem; font-weight:600; letter-spacing:.02em; color:var(--k-ink) }
/* brand already shown as a logo under the gallery -> drop the duplicate "Marka:" row
   in product-meta (only the brand line; keep SKU/categories) */
.knobs-product-summary .posted_in:has(a[href*="/marka/"]){ display:none }

/* short description (Shoper productDescriptionGrid): drop the leftover grid columns,
   render the spec lines as a clean definition-style list */
.knobs-product-summary .productDescriptionGrid,
.knobs-product-summary .productDescriptionGrid .container,
.knobs-product-summary .productDescriptionGrid .row,
.knobs-product-summary .productDescriptionGrid [class*="col-"]{
  display:block !important; width:auto !important; max-width:none !important;
  float:none !important; margin:0 !important; padding:0 !important;
}
.knobs-product-summary .productDescriptionGrid p{ margin:.15rem 0; font-size:.9rem; line-height:1.55; color:var(--k-ink-soft) }
.knobs-product-summary .productDescriptionGrid strong{ color:var(--k-ink); font-weight:600 }
.knobs-product-summary .productDescriptionGrid .left_column{ margin-bottom:.6rem !important }

/* trust list */
.knobs-trust-list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.knobs-trust-list li{ position:relative; padding-left:1.6rem; font-size:.88rem; color:var(--k-ink-soft) }
.knobs-trust-list li::before{ content:"✓"; position:absolute; left:0; color:var(--k-brass); font-weight:700 }
.knobs-trust-list strong{ color:var(--k-ink) }
/* meta */
.knobs-single .wc-block-components-product-details,
.knobs-single .product_meta{ font-size:.85rem; color:var(--k-muted) }
/* tabs / details + attributes */
.knobs-product-tabs{ border-top:1px solid var(--k-line); padding-top:var(--k-space,2rem) }
.knobs-single table.shop_attributes,
.knobs-single table.wc-block-product-details__attributes{ width:100%; border-collapse:collapse; font-size:.9rem }
.knobs-single table.shop_attributes th{ text-align:left; color:var(--k-muted); font-weight:500; padding:.6rem 1rem .6rem 0; width:38%; border-bottom:1px solid var(--k-line) }
.knobs-single table.shop_attributes td{ padding:.6rem 0; border-bottom:1px solid var(--k-line) }
/* related products -> horizontal snap slider (eye-catchy, swipeable) */
.knobs-related-slider{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:clamp(1rem,2vw,1.5rem);
  padding:.25rem .25rem 1.25rem; scrollbar-width:thin; scroll-behavior:smooth;
}
.knobs-related-slider::-webkit-scrollbar{ height:6px }
.knobs-related-slider::-webkit-scrollbar-thumb{ background:var(--k-line); border-radius:99px }
.knobs-rel-card{ flex:0 0 clamp(200px,22%,240px); scroll-snap-align:start; display:flex; flex-direction:column }
.knobs-rel-card__img{ display:block; background:var(--k-surface); border-radius:8px; overflow:hidden; aspect-ratio:1; }
.knobs-rel-card__img img{ width:100%; height:100%; object-fit:contain; padding:8%; mix-blend-mode:multiply; transition:transform .4s var(--k-ease) }
.knobs-rel-card:hover .knobs-rel-card__img img{ transform:scale(1.04) }
.knobs-rel-card__brand{ margin-top:.6rem; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--k-brass-text); font-weight:700 }
.knobs-rel-card__title{ margin-top:.25rem; font-size:.9rem; color:var(--k-ink-soft); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.knobs-rel-card__price{ margin-top:.35rem; font-weight:600; color:var(--k-ink); font-size:.95rem }
.knobs-rel-card__price del{ color:var(--k-muted); font-weight:400; margin-right:.3rem }
.knobs-rel-card__price ins{ text-decoration:none; color:var(--k-sale) }

/* reviews / opinie section */
.knobs-single #reviews, .knobs-single .woocommerce-Reviews{ max-width:760px }
.knobs-single .comment-reply-title, .knobs-single #reply-title{ font-size:1.15rem; font-weight:600; margin-bottom:.5rem }
.knobs-single .woocommerce-Reviews .comment-form label{ display:block; font-size:.85rem; color:var(--k-muted); margin:.75rem 0 .3rem }
.knobs-single .comment-form input[type=text], .knobs-single .comment-form input[type=email], .knobs-single .comment-form textarea{
  width:100%; padding:.8rem 1rem; border:1px solid var(--k-line); border-radius:3px; background:var(--k-base); font:inherit; font-size:.95rem;
}
.knobs-single .comment-form input:focus, .knobs-single .comment-form textarea:focus{ outline:none; border-color:var(--k-brass) }
.knobs-single .comment-form textarea{ min-height:120px; resize:vertical }
.knobs-single .comment-form-rating .stars a{ color:var(--k-brass) }
.knobs-single .comment-form .submit, .knobs-single #respond .submit{
  background:var(--k-ink) !important; color:#fff !important; border:0 !important; border-radius:3px !important;
  padding:.85rem 2rem !important; font-weight:600; letter-spacing:.03em; cursor:pointer; margin-top:1rem;
}
.knobs-single .comment-form .submit:hover, .knobs-single #respond .submit:hover{ background:var(--k-brass) !important }
.knobs-single .woocommerce-noreviews{ color:var(--k-muted); padding:1rem 0 }
.knobs-single .commentlist .comment_container{ border:1px solid var(--k-line); border-radius:6px; padding:1rem 1.25rem; margin-bottom:1rem }
.knobs-single .star-rating span::before, .knobs-single .stars a::before{ color:var(--k-brass) }

/* GPSR safety block (legacy inline styling, kept as fallback) */
.knobs-single .gpsr-product-information,
.knobs-single .gpsr-section{ margin-top:var(--wp--preset--spacing--40); padding:1.25rem; background:var(--k-surface); border-radius:6px; font-size:.85rem }

/* GPSR now lives in its own tab -> render as a clean two-column info list.
   The plugin repeats an <h3> that duplicates the tab title, so hide it. */
#tab-knobs_gpsr .gpsr-fields > h3{ display:none }
#tab-knobs_gpsr .gpsr-fields{ max-width:760px; font-size:.9rem; color:var(--k-ink-soft) }
#tab-knobs_gpsr .gpsr-fields p{
  display:grid; grid-template-columns:minmax(140px,220px) 1fr; gap:.4rem 1.25rem;
  margin:0; padding:.6rem 0; border-bottom:1px solid var(--k-line); line-height:1.5;
}
#tab-knobs_gpsr .gpsr-fields p strong{ color:var(--k-ink); font-weight:600 }
@media(max-width:560px){
  #tab-knobs_gpsr .gpsr-fields p{ grid-template-columns:1fr; gap:.1rem }
}

/* ---------------- Sections / helpers ---------------- */
.knobs-section-head{ display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem }
.knobs-section-head h2{ margin:0 }
.knobs-section-head a{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--k-muted); font-weight:600; white-space:nowrap }
.knobs-section-head a:hover{ color:var(--k-brass) }
.knobs-rule{ height:1px; background:var(--k-line); border:0 }

/* ---------------- Wishlist page (TI Wishlist) ---------------- */
.tinv-wishlist{ font-size:.95rem }
.tinv-wishlist .tinvwl-table, .tinv-wishlist table.tinvwl-table{ width:100%; border-collapse:collapse }
.tinv-wishlist table.tinvwl-table thead th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--k-muted);
  font-weight:700; padding:.75rem 1rem; border-bottom:1px solid var(--k-line);
}
.tinv-wishlist table.tinvwl-table td{ padding:1rem; border-bottom:1px solid var(--k-line); vertical-align:middle }
.tinv-wishlist .tinvwl-table .product-thumbnail img{ width:72px; height:72px; object-fit:contain; background:var(--k-surface); border-radius:6px; padding:6% }
.tinv-wishlist .product-name a{ color:var(--k-ink); font-weight:500; line-height:1.35 }
.tinv-wishlist .product-name a:hover{ color:var(--k-brass) }
.tinv-wishlist .product-price .amount, .tinv-wishlist .product-price{ color:var(--k-ink); font-weight:600 }
.tinv-wishlist .product-price del{ color:var(--k-muted); font-weight:400; margin-right:.4rem }
.tinv-wishlist .product-price ins{ text-decoration:none; color:var(--k-sale) }
.tinv-wishlist .product-stock .stock.in-stock, .tinv-wishlist .stock{ color:var(--k-ink-soft) }
/* buttons */
.tinv-wishlist .button, .tinv-wishlist button.button, .tinv-wishlist a.button,
.tinv-wishlist .tinvwl-btn, .tinv-wishlist input.button{
  background:var(--k-ink) !important; color:#fff !important; border:0 !important; border-radius:3px !important;
  padding:.7rem 1.25rem !important; font-size:.82rem; font-weight:600; letter-spacing:.02em; line-height:1.2;
  text-transform:none; cursor:pointer; transition:background .2s;
}
.tinv-wishlist .button:hover, .tinv-wishlist a.button:hover, .tinv-wishlist button.button:hover{ background:var(--k-brass) !important }
/* remove (x) */
.tinv-wishlist .product-remove button, .tinv-wishlist .product-remove .button{
  background:var(--k-surface) !important; color:var(--k-ink-soft) !important; border:1px solid var(--k-line) !important;
  border-radius:99px !important; width:34px; height:34px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center;
}
.tinv-wishlist .product-remove button:hover{ background:var(--k-sale) !important; color:#fff !important; border-color:var(--k-sale) !important }
/* footer actions row */
.tinv-wishlist .tinvwl-tfoot, .tinv-wishlist .social-buttons{ margin-top:1.25rem }
.tinv-wishlist select{ height:44px; border:1px solid var(--k-line); border-radius:3px; padding:0 .75rem; background:var(--k-base) }
.tinv-wishlist .tinv-wishlist-clear, .tinv-wishlist .tinvwl-input-group-btn{ gap:.5rem }
.tinv-wishlist .social-buttons ul li a{ color:var(--k-ink-soft) }
.tinv-wishlist .social-buttons ul li a:hover{ color:var(--k-brass) }
.tinvwl-tab-header, .tinv-wishlist h2{ font-size:1.4rem; font-weight:600 }
/* Wishlist: brandowy checkbox zaznaczania (był goły natywny) */
.tinv-wishlist input[type="checkbox"]{ width:20px; height:20px; accent-color:var(--k-brass); cursor:pointer; vertical-align:middle; margin:0 }
.tinv-wishlist .product-cb{ text-align:center }

@media(max-width:781px){ .tinv-wishlist table.tinvwl-table, .tinv-wishlist thead, .tinv-wishlist tbody, .tinv-wishlist th, .tinv-wishlist td, .tinv-wishlist tr{ display:block } .tinv-wishlist thead{ display:none } .tinv-wishlist td{ border:0; padding:.35rem 1rem } .tinv-wishlist tr{ border-bottom:1px solid var(--k-line); padding:.75rem 0 } }
/* Mobile: checkbox NIE na środku u góry, tylko w lewym rogu karty OBOK produktu (+ etykieta
   "Zaznacz"), przycisk usuwania (X) w prawym rogu. Miniatura/nazwa/cena płyną pod spodem. */
@media(max-width:781px){
  .tinv-wishlist .tinvwl-table tr{ position:relative }
  .tinv-wishlist td.product-cb{
    position:absolute !important; top:.9rem !important; left:1rem !important; z-index:2;
    width:auto !important; padding:0 !important; margin:0 !important;
    display:flex !important; align-items:center; gap:.5rem;
  }
  .tinv-wishlist td.product-cb::after{ content:"Zaznacz"; font-size:.8rem; color:var(--k-muted); letter-spacing:.01em }
  .tinv-wishlist td.product-remove{
    position:absolute !important; top:.6rem !important; right:0 !important; left:auto !important; z-index:2;
    width:auto !important; padding:0 1rem 0 0 !important; margin:0 !important; text-align:right !important;
  }
  .tinv-wishlist td.product-thumbnail{ padding-top:2.75rem !important }
}

/* ---------------- Contact Form 7 ---------------- */
.knobs-cf7, .wpcf7-form{ max-width:640px }
.wpcf7-form p{ margin:0 0 1rem }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel],
.wpcf7-form textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--k-line); border-radius:3px;
  background:var(--k-base); color:var(--k-ink); font:inherit; font-size:.95rem; transition:border-color .2s;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus{ outline:none; border-color:var(--k-brass) }
.wpcf7-form textarea{ min-height:150px; resize:vertical }
.wpcf7-form .wpcf7-acceptance{ font-size:.85rem; color:var(--k-muted); margin:.5rem 0 1rem }
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item{ margin:0 }
/* checkbox + tekst zgody w JEDNEJ linii: checkbox lewo-góra, tekst obok (zawija się pod tekstem, nie pod checkboxem) */
.wpcf7-form .wpcf7-acceptance label{ display:flex; align-items:flex-start; gap:.5rem; margin:0; cursor:pointer; line-height:1.4 }
.wpcf7-form .wpcf7-acceptance input[type=checkbox]{ width:18px !important; height:18px; margin:.1rem 0 0 !important; flex:0 0 auto; accent-color:var(--k-brass); cursor:pointer }
.wpcf7-form .wpcf7-acceptance a{ color:var(--k-brass); text-decoration:underline }
.wpcf7-form .wpcf7-submit{
  background:var(--k-ink); color:#fff; border:0; border-radius:3px; padding:.9rem 2rem;
  font-weight:600; letter-spacing:.03em; font-size:.9rem; cursor:pointer; transition:background .2s;
}
.wpcf7-form .wpcf7-submit:hover{ background:var(--k-brass) }
.wpcf7-form .wpcf7-not-valid-tip{ color:var(--k-sale); font-size:.8rem }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output{ border-color:var(--k-sale) }
.wpcf7-response-output{ border-radius:3px; padding:.75rem 1rem !important; font-size:.9rem }

/* ---------------- My Account (WooCommerce) ---------------- */
.woocommerce-account .woocommerce{ display:flex; gap:clamp(1.5rem,3vw,3rem); align-items:flex-start }
/* Strona logowania: formularz to jedyne dziecko flex-owego .woocommerce -> był wąski (289px)
   i przyklejony do lewej. Poszerz i wyśrodkuj (auto-margin działa na flex-item). */
.woocommerce-account .woocommerce-form-login{ width:100%; max-width:480px; margin-left:auto; margin-right:auto }
.woocommerce-account .woocommerce-MyAccount-navigation{ flex:0 0 240px; width:240px; float:none; margin:0 }
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0; border:1px solid var(--k-line); border-radius:8px; overflow:hidden; background:var(--k-base);
}
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0; padding:0 }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:.85rem 1.1rem; font-size:.9rem; color:var(--k-ink-soft); text-decoration:none;
  border-bottom:1px solid var(--k-line); transition:background .15s var(--k-ease), color .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a{ border-bottom:0 }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ background:var(--k-surface); color:var(--k-ink) }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--k-ink); color:#fff; font-weight:600 }
.woocommerce-account .woocommerce-MyAccount-content{ flex:1 1 auto; min-width:0; float:none; width:auto; margin:0 }
.woocommerce-account .woocommerce-MyAccount-content > p{ color:var(--k-ink-soft); line-height:1.7 }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button){ color:var(--k-brass) }
.woocommerce-account .woocommerce-MyAccount-content mark{ background:var(--k-surface-2); color:var(--k-ink) }
/* tables (orders / downloads / order details) */
.woocommerce-account table.shop_table{
  border:1px solid var(--k-line); border-radius:8px; border-collapse:separate; border-spacing:0; width:100%; overflow:hidden;
}
.woocommerce-account table.shop_table th{
  background:var(--k-surface); text-align:left; padding:.8rem 1rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--k-muted); font-weight:600;
}
.woocommerce-account table.shop_table td{ padding:.85rem 1rem; border-top:1px solid var(--k-line); font-size:.9rem; color:var(--k-ink-soft) }
.woocommerce-account .woocommerce-button, .woocommerce-account .woocommerce-Button, .woocommerce-account .button{
  background:var(--k-ink) !important; color:#fff !important; border:0 !important; border-radius:3px !important;
  padding:.55rem 1.1rem !important; font-size:.82rem; font-weight:600; letter-spacing:.02em; display:inline-block; text-decoration:none;
}
.woocommerce-account .button:hover, .woocommerce-account .woocommerce-Button:hover{ background:var(--k-brass) !important; color:#fff !important }
/* addresses (WC uses a float-based .col2-set layout + <h2> titles -> normalise to a grid) */
.woocommerce-account .woocommerce-Addresses{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:1.5rem !important; margin-top:1rem; align-items:start }
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2,
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2{ width:auto !important; max-width:none !important; float:none !important; margin:0 !important }
/* WC assigns the cards to staggered grid cells -> pin billing left, shipping right, same row */
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .u-column1{ grid-area:1 / 1 !important }
.woocommerce-account .woocommerce-Addresses .col-2,
.woocommerce-account .woocommerce-Addresses .u-column2{ grid-area:1 / 2 !important }
.woocommerce-account .woocommerce-Address{ border:1px solid var(--k-line); border-radius:8px; padding:1.25rem 1.4rem; margin:0 !important }
.woocommerce-account .woocommerce-Address-title{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; margin-bottom:.6rem }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{ font-size:1.05rem !important; line-height:1.3 !important; margin:0 !important; font-weight:600 }
.woocommerce-account .woocommerce-Address-title .edit{ font-size:.82rem; color:var(--k-brass) !important; background:none !important; padding:0 !important; white-space:nowrap; display:inline; flex:0 0 auto }
.woocommerce-account .woocommerce-Address address{ font-style:normal; color:var(--k-ink-soft); line-height:1.7; font-size:.9rem }
/* forms (edit-account, address) */
.woocommerce-account form .form-row label, .woocommerce-account .woocommerce-form-row label{ display:block; font-size:.85rem; color:var(--k-ink-soft); margin-bottom:.3rem }
.woocommerce-account form input.input-text, .woocommerce-account form .woocommerce-Input, .woocommerce-account form input[type=email], .woocommerce-account form input[type=password], .woocommerce-account form select{
  width:100%; padding:.7rem .85rem; border:1px solid var(--k-line); border-radius:4px; background:var(--k-base); font:inherit; font-size:.95rem; color:var(--k-ink);
}
.woocommerce-account form input.input-text:focus, .woocommerce-account form input:focus, .woocommerce-account form select:focus{ outline:none; border-color:var(--k-brass); box-shadow:0 0 0 2px rgba(176,141,87,.2) }
.woocommerce-account fieldset{ border:1px solid var(--k-line); border-radius:8px; padding:1.25rem 1.4rem; margin-top:1.5rem }
.woocommerce-account fieldset legend{ font-weight:600; padding:0 .5rem; color:var(--k-ink) }
.woocommerce-account .woocommerce-password-strength{ font-size:.8rem; border-radius:3px }
/* account area on mobile: nav on top + stacked order tables */
@media(max-width:781px){
  .woocommerce-account .woocommerce{ flex-direction:column }
  .woocommerce-account .woocommerce-MyAccount-navigation{ flex:1 1 100%; width:100% }
  .woocommerce-account .woocommerce-Addresses{ grid-template-columns:1fr }
  .woocommerce-account table.shop_table thead{ display:none }
  .woocommerce-account table.shop_table tr{ display:block; border-top:1px solid var(--k-line) }
  .woocommerce-account table.shop_table td{ display:flex; justify-content:space-between; gap:1rem; border:0; padding:.5rem 1rem; text-align:right }
  .woocommerce-account table.shop_table td::before{ content:attr(data-title); font-weight:600; color:var(--k-ink); text-align:left }
  .woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions{ justify-content:flex-end }
}

/* ---------------- WPNest Returns wizard -> knobs brand (default theme is blue) ---------------- */
.wpnestreturns-app .btn-primary, .wpnestreturns-app .button.alt, .wpnestreturns-app button[type="submit"]{
  background:var(--k-ink) !important; border-color:var(--k-ink) !important; color:#fff !important;
  border-radius:3px !important; box-shadow:none !important; text-shadow:none;
}
.wpnestreturns-app .btn-primary:hover, .wpnestreturns-app .button.alt:hover, .wpnestreturns-app button[type="submit"]:hover{
  background:var(--k-brass) !important; border-color:var(--k-brass) !important;
}
.wpnestreturns-stepper li span{ background:var(--k-surface-2) !important; color:var(--k-ink) }
.wpnestreturns-stepper li.is-active{ color:var(--k-ink) !important; border-color:var(--k-ink) !important }
.wpnestreturns-stepper li.is-active span{ background:var(--k-ink) !important; color:#fff !important }
.wpnestreturns-app a{ color:var(--k-brass) }
.wpnestreturns-app .wpnestreturns-section, .wpnestreturns-app .wpnestreturns-wizard,
.wpnestreturns-app .wpnestreturns-item{ border-color:var(--k-line) !important }
.wpnestreturns-app .button:not(.btn-primary):not(.alt){
  background:var(--k-base) !important; color:var(--k-ink) !important; border:1px solid var(--k-line) !important; border-radius:3px !important;
}
.wpnestreturns-app .button:not(.btn-primary):not(.alt):hover{ border-color:var(--k-brass) !important; color:var(--k-brass) !important }

/* ---------------- Footer ---------------- */
.knobs-footer{ background:var(--k-surface); border-top:1px solid var(--k-line); color:var(--k-ink-soft) }
.knobs-footer h2,.knobs-footer h3{ font-size:.8rem !important; text-transform:uppercase; letter-spacing:.1em; color:var(--k-ink); margin:0 0 1rem }
.knobs-footer a{ color:var(--k-ink-soft); font-size:.9rem; line-height:2 }
.knobs-footer a:hover{ color:var(--k-brass) }
.knobs-footer__bottom{ border-top:1px solid var(--k-line); font-size:.8rem; color:var(--k-muted-text) }
/* Mobile: wyśrodkuj sekcję brandu (logo KNOBS.PL + opis) - domyślnie leci do lewej */
@media(max-width:781px){
  .knobs-footer .wp-block-columns > .wp-block-column:first-child{ text-align:center }
  .knobs-footer .wp-block-columns > .wp-block-column:first-child p{ margin-left:auto; margin-right:auto; max-width:34ch }
}

/* Pusty koszyk: WooCommerce domyślnie pokazuje czarną "buźkę" (okrąg z oczami) w currentColor.
   Podmieniamy maskę na czysty kontur torby w kolorze brandowym (muted), mniejszy, z oddechem. */
.wp-block-woocommerce-empty-cart-block{ text-align:center; padding:1rem 1rem 3rem }
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{
  background-color:var(--k-muted) !important; opacity:.6;
  width:4em !important; height:4em !important; margin:0 auto 1.25em !important;
  mask-size:contain !important; -webkit-mask-size:contain !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 7h14l-1 13H6L5 7Z'/%3E%3Cpath d='M9 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E") !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 7h14l-1 13H6L5 7Z'/%3E%3Cpath d='M9 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E") !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title{ font-weight:600 }
.wp-block-woocommerce-empty-cart-block .wp-block-buttons{ margin-top:1.5rem }

/* ---------------- Mobilny dolny pasek nawigacji (bottom bar) ---------------- */
.knobs-bottombar{ display:none }
@media(max-width:900px){
  .knobs-bottombar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1000;
    background:var(--k-base); border-top:1px solid var(--k-line);
    box-shadow:0 -2px 14px rgba(0,0,0,.07);
    padding-bottom:env(safe-area-inset-bottom,0);
    justify-content:space-around; align-items:stretch;
  }
  .knobs-bb__item{
    flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:8px 2px 6px; min-height:54px; color:var(--k-ink-soft); text-decoration:none;
    background:none; border:0; cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent;
    transition:color .18s var(--k-ease);
  }
  .knobs-bb__item.is-active{ color:var(--k-brass) }
  .knobs-bb__item:active{ color:var(--k-ink) }
  .knobs-bb__ico{ position:relative; display:flex; line-height:0 }
  .knobs-bb__lbl{ font-size:.66rem; letter-spacing:.01em; line-height:1 }
  .knobs-bb__badge{
    position:absolute; top:-7px; right:-10px; min-width:16px; height:16px; padding:0 4px;
    background:var(--k-brass); color:#fff; font-size:.6rem; font-weight:700; line-height:1;
    border-radius:99px; display:flex; align-items:center; justify-content:center;
  }
  .knobs-bb__badge[hidden]{ display:none }
  /* rezerwa miejsca: treść nie chowa się pod paskiem */
  body{ padding-bottom:calc(54px + env(safe-area-inset-bottom,0)) }
  /* na dystrakcyjnym checkoucie paska nie ma (patrz wp_footer guard) -> bez rezerwy;
     strona podziekowania (order-received) pasek MA, wiec ja wykluczamy */
  body.woocommerce-checkout:not(.woocommerce-order-received){ padding-bottom:0 }
  /* nie duplikuj z cookie bannerem - podnieś banner nad pasek gdy oba widoczne */
  #cm, .cc-window{ margin-bottom:calc(54px + env(safe-area-inset-bottom,0)) }
}
/* agency credit (Realizacja: chcedointernetu.pl) */
.knobs-credit{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; opacity:.75; transition:opacity .2s var(--k-ease) }
.knobs-credit:hover{ opacity:1 }
.knobs-credit__label{ font-size:.72rem; color:var(--k-muted-text); letter-spacing:.02em }
/* scoped + explicit: na stronach WooCommerce reguła `.woocommerce img{height:auto}`
   (spec 0,1,1) nadpisywała samą klasę (0,1,0) i logo kredytu puchło. Podnosimy spec. */
.knobs-credit .knobs-credit__logo{ display:block; width:auto; height:26px; max-width:150px; }

/* WPNest Returns (obszar Moje konto/zwroty) SAM deklaruje niezgodność z blokiem Koszyk,
   przez co WooCommerce pokazuje adminom notice na koszyku/checkoucie. Zwroty nie dotykają
   koszyka - to false-positive; nie da się nadpisać deklaracji (konflikt). Ukrywamy notice
   (i tak widoczny tylko dla adminów). */
.wc-blocks-incompatible-extensions-notice{ display:none !important }
@media(max-width:600px){
  .knobs-footer__bottom{ justify-content:center; text-align:center; gap:.4rem }
  .knobs-footer__bottom > *{ flex:0 0 100% }
}

/* ---------------- Buttons (block) ---------------- */
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; color:var(--k-ink); border:1px solid var(--k-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{ background:var(--k-ink); color:#fff }

/* ---------------- Kill purple accents (WooCommerce #7f54b3 + cookie banner) ---------------- */
:root{
  --wc-primary:var(--k-ink); --wc-primary-text:#fff;
  --wc-highlight:var(--k-brass);
}
.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner{
  border-top-color:var(--k-brass) !important;
}
.woocommerce-info::before, .wc-block-components-notice-banner__content a{ color:var(--k-brass) !important }
.wc-block-components-button.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-totals-item .wc-block-components-button{
  background:var(--k-ink) !important; color:#fff !important;
}
.wc-block-components-button:hover{ background:var(--k-brass) !important }
a{ } /* links already inherit ink/brass from theme.json */
/* PressiCookie buttons (.c-bn) carry a configured indigo bg -> force brand. */
.c-bn{ background:var(--k-ink) !important; color:#fff !important; border-radius:3px !important }
.c-bn:hover{ background:var(--k-brass) !important; color:#fff !important }
.c-bn.c_link, .c-bn.cc_link, .cm__btn--secondary{ background:var(--k-surface-2) !important; color:var(--k-ink) !important }
.c-bn.c_link:hover{ background:var(--k-line) !important }
#cc-main a, .cm__desc a, .pm__badge{ color:var(--k-brass) !important }

/* ---------------- FiboSearch in header (Szukaj button, no floating magnifier) ---------------- */
.knobs-search, .knobs-header .dgwt-wcas-search-wrapp{ width:min(640px,52vw); max-width:640px }
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input[type=search]{ height:48px !important; border:1px solid var(--k-line) !important; border-radius:3px 0 0 3px !important; background:var(--k-base) !important; padding-left:1rem !important }
/* hide the inside magnifier icon (we use a Szukaj button instead) */
.knobs-header .dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier{ display:none !important }
/* the search field wrapper must be a flex row so input + Szukaj sit side by side */
.knobs-header .dgwt-wcas-search-form{ margin:0 !important }
.knobs-header .dgwt-wcas-sf-wrapp{ display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; height:48px !important; position:relative }
/* FiboSearch/wpautop can wrap the submit (and input) in <p> blocks; flatten them so
   input + Szukaj are true flex siblings and never stack (button "dropping" below). */
.knobs-header .dgwt-wcas-sf-wrapp > p{ display:contents !important; margin:0 !important }
.knobs-header .dgwt-wcas-sf-wrapp .dgwt-wcas-search-input[type=search]{ flex:1 1 auto !important; min-width:0 !important }
/* Szukaj submit button. FiboSearch renders the submit inconsistently across pages
   (sometimes a "Szukaj" text node, sometimes only a magnifier icon) -> hide whatever
   it outputs (font-size:0 + svg hidden) and always paint our own "Szukaj" via ::after. */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit{
  flex:0 0 auto !important; position:static !important; width:auto !important;
  background:var(--k-ink) !important; color:#fff !important; border:0 !important; height:48px !important; min-height:0 !important;
  border-radius:0 3px 3px 0 !important; padding:0 1.4rem !important; margin:0 !important; font-size:0 !important; cursor:pointer;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:hover{ background:var(--k-brass) !important }
.knobs-header .dgwt-wcas-search-submit svg,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier{ display:none !important }
/* kill the stray ::before notch; paint the label with ::after */
.knobs-header .dgwt-wcas-search-submit::before{ content:none !important; display:none !important }
.knobs-header .dgwt-wcas-search-submit::after{
  content:"Szukaj"; display:inline !important; color:#fff;
  font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; line-height:1;
}
/* hide voice search mic (not needed) */
.knobs-header .dgwt-wcas-voice-search{ display:none !important }
@media(max-width:781px){ .knobs-search, .knobs-header .dgwt-wcas-search-wrapp{ width:100%; max-width:none } }
/* FiboSearch mobilna nakładka (.dgwt-wcas-om-bar) żyje POZA .knobs-header, więc łapała tylko
   GLOBALNE reguły submita (czarne tło + font-size:0 + ukryta lupa), a layout flex i label "Szukaj"
   są .knobs-header-scoped -> submit spadał pod input jako pusty czarny kwadrat. Tu: flex inline +
   biała lupa (label tekstowy się nie mieści w wąskim kwadracie nakładki). */
.dgwt-wcas-om-bar .dgwt-wcas-sf-wrapp{ display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important }
.dgwt-wcas-om-bar .dgwt-wcas-sf-wrapp > p{ display:contents !important; margin:0 !important }
.dgwt-wcas-om-bar .dgwt-wcas-search-input[type=search]{ flex:1 1 auto !important; min-width:0 !important }
.dgwt-wcas-om-bar .dgwt-wcas-search-submit{ flex:0 0 auto !important }
.dgwt-wcas-om-bar .dgwt-wcas-search-submit::after{
  content:"" !important; display:block !important; width:20px; height:20px; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------------- Gallery arrows -> brand (kill purple/pink chevrons) ---------------- */
.dsg-wc-arrow{ color:var(--k-ink) !important; background:#fff !important; box-shadow:var(--k-shadow) }
.dsg-wc-arrow svg, .dsg-wc-arrow svg *{ stroke:var(--k-ink) !important; fill:none !important; color:var(--k-ink) !important }
.dsg-wc-arrow:hover svg, .dsg-wc-arrow:hover svg *{ stroke:var(--k-brass) !important }
.pswp__button--arrow--left, .pswp__button--arrow--right{ color:#fff }

/* ---------------- Variation swatches (colour dots + button chips) ---------------- */
.woo-variation-swatches .variable-items-wrapper{ gap:.5rem }
.woo-variation-swatches .color-variable-item, ul.variable-items-wrapper li.color-variable-item{
  width:34px !important; height:34px !important; border-radius:50% !important;
  box-shadow:0 0 0 1px var(--k-line); padding:0 !important;
}
.woo-variation-swatches .color-variable-item .variable-item-span{ border-radius:50% !important; width:100% !important; height:100% !important }
.woo-variation-swatches .color-variable-item.selected, .woo-variation-swatches .color-variable-item:hover{
  box-shadow:0 0 0 2px var(--k-brass); outline:none;
}
.woo-variation-swatches .button-variable-item, ul.variable-items-wrapper li.button-variable-item{
  min-width:44px; border-radius:3px !important; border:1px solid var(--k-line) !important;
  background:var(--k-base) !important; color:var(--k-ink-soft) !important; font-size:.8rem; padding:.4rem .7rem !important;
}
.woo-variation-swatches .button-variable-item.selected{ border-color:var(--k-ink) !important; background:var(--k-ink) !important; color:#fff !important }
.wvs-selected-label, .woo-variation-swatches-variable-item-selected{ font-size:.85rem; color:var(--k-muted) }

/* flying heart to wishlist (Gosia-style) */
.knobs-fly-heart{
  position:fixed; z-index:9999; font-size:22px; line-height:1; color:var(--k-brass); pointer-events:none;
  transform:translate(0,0) scale(1); opacity:1; margin:-11px 0 0 -11px; will-change:transform,opacity;
  transition:transform 1.2s cubic-bezier(.45,-0.15,.3,1), opacity 1.2s ease-in;
  text-shadow:0 2px 8px rgba(176,141,87,.4);
}
/* trailing ghosts: fainter so the leading heart reads as the head of a comet trail */
.knobs-fly-heart--trail{ opacity:.5; text-shadow:0 1px 5px rgba(176,141,87,.3) }
.knobs-actions .knobs-ico-btn.knobs-heart-pulse{ animation:knobs-heartPulse .48s ease }
@keyframes knobs-heartPulse{ 0%,100%{ transform:scale(1) } 40%{ transform:scale(1.35); color:var(--k-brass) } }

/* ---------------- Mobile polish (audit fixes) ---------------- */
/* product tabs: scroll horizontally instead of overflowing the viewport */
.knobs-product-tabs ul.tabs, .knobs-product-tabs .wc-tabs, .knobs-product-tabs [role="tablist"]{
  overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
@media(max-width:781px){
  /* search results / blog grids -> single column on phones */
  .wp-block-post-template.is-layout-grid{ grid-template-columns:1fr !important }
  /* section headers (H2 + "Zobacz wszystko") can collide when narrow */
  .knobs-section-head{ flex-wrap:wrap }
}
/* roomier cards: tighten gaps on small phones (2-up stays, cards get a touch more room) */
@media(max-width:420px){
  .woocommerce ul.products, ul.products,
  .wp-block-woocommerce-product-template,
  .wc-block-product-template__responsive.columns-3{ gap:.7rem .8rem !important }
}
/* 44px touch target for the wishlist heart on touch devices */
@media(pointer:coarse){
  .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button{ width:44px; height:44px }
}

/* reduce motion */
@media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } }

/* ---------------- Header coupon widget (tag icon + popover, Gosia-style) ---------------- */
.knobs-coupon{ position:relative; display:inline-flex }
.knobs-coupon__pop{
  position:absolute; top:calc(100% + 12px); right:0; z-index:70; width:250px;
  background:var(--k-base); border:1px solid var(--k-line); border-radius:8px; box-shadow:var(--k-shadow); padding:.9rem;
}
.knobs-coupon__pop[hidden]{ display:none }
.knobs-coupon__pop::before{
  content:""; position:absolute; top:-6px; right:15px; width:11px; height:11px; background:var(--k-base);
  border-left:1px solid var(--k-line); border-top:1px solid var(--k-line); transform:rotate(45deg);
}
.knobs-coupon__label{ display:block; font-size:.8rem; color:var(--k-ink-soft); margin-bottom:.55rem }
.knobs-coupon__form{ display:flex; gap:.4rem }
.knobs-coupon__input{
  flex:1; min-width:0; height:38px; border:1px solid var(--k-line); border-radius:4px; padding:0 .6rem;
  font-size:.85rem; background:var(--k-base); color:var(--k-ink);
}
.knobs-coupon__input:focus{ outline:none; border-color:var(--k-brass) }
.knobs-coupon__apply{
  flex:0 0 38px; width:38px; height:38px; border:0; border-radius:4px; cursor:pointer;
  background:var(--k-ink); color:#fff; font-size:1rem; line-height:1; transition:background .2s var(--k-ease);
}
.knobs-coupon__apply:hover{ background:var(--k-brass) }
.knobs-coupon__toggle[aria-expanded="true"]{ color:var(--k-brass) }
@media(max-width:900px){ .knobs-coupon__pop{ right:-40px } }

/* #7: after add-to-cart we auto-open the mini-cart drawer (knobs.js) -> hide the
   default inline "Zobacz koszyk" link WooCommerce injects next to the button */
.woocommerce a.added_to_cart, a.added_to_cart.wc-forward, .wc-block-components-product-button .added_to_cart{ display:none !important }

/* ---------------- Added-to-cart modal (centered popup, Gosia-style) ---------------- */
.knobs-cart-modal[hidden]{ display:none }
.knobs-cart-modal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center }
.knobs-cart-modal__overlay{ position:absolute; inset:0; background:rgba(27,26,24,.5) }
.knobs-cart-modal__box{
  position:relative; z-index:1; width:min(460px,92vw); background:var(--k-base); border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.25); padding:1.5rem 1.5rem 1.6rem; animation:knobs-modal-in .25s var(--k-ease);
}
@keyframes knobs-modal-in{ from{ opacity:0; transform:translateY(10px) scale(.98) } to{ opacity:1; transform:none } }
.knobs-cart-modal__close{ position:absolute; top:.7rem; right:.7rem; width:32px; height:32px; border:0; background:none; cursor:pointer; color:var(--k-muted); font-size:1.5rem; line-height:1; border-radius:6px }
.knobs-cart-modal__close:hover{ color:var(--k-ink); background:var(--k-surface) }
.knobs-cart-modal__title{ font-size:1.15rem; font-weight:600; color:var(--k-ink); margin-bottom:1rem; padding-right:2rem }
.knobs-cart-modal__product{ display:flex; gap:1rem; align-items:center; background:var(--k-surface); border-radius:8px; padding:.85rem; margin-bottom:1.3rem }
.knobs-cart-modal__img{ width:64px; height:64px; object-fit:contain; background:#fff; border-radius:6px; flex:0 0 64px; padding:4px }
.knobs-cart-modal__info{ display:flex; flex-direction:column; gap:.35rem; min-width:0 }
.knobs-cart-modal__name{ font-size:.92rem; color:var(--k-ink); line-height:1.35 }
.knobs-cart-modal__price{ font-weight:700; color:var(--k-brass) }
.knobs-cart-modal__price del{ color:var(--k-muted); font-weight:400; margin-right:.35rem }
.knobs-cart-modal__price ins{ text-decoration:none }
.knobs-cart-modal__actions{ display:flex; gap:.75rem }
.knobs-cart-modal__cont, .knobs-cart-modal__go{
  flex:1; text-align:center; padding:.85rem 1rem; border-radius:6px; font-weight:600; font-size:.85rem;
  letter-spacing:.03em; cursor:pointer; transition:all .2s var(--k-ease); text-transform:uppercase; text-decoration:none;
}
.knobs-cart-modal__cont{ background:none; border:1.5px solid var(--k-ink); color:var(--k-ink) }
.knobs-cart-modal__cont:hover{ background:var(--k-ink); color:#fff }
.knobs-cart-modal__go{ background:var(--k-brass); border:1.5px solid var(--k-brass); color:#fff }
.knobs-cart-modal__go:hover{ background:var(--k-ink); border-color:var(--k-ink) }
body.knobs-modal-open{ overflow:hidden }