/*
Theme Name: Hilvanar
Theme URI: https://hilvanar.pl
Author: Hilvanar
Description: Editorial WooCommerce theme for Hilvanar - handmade notebooks. Built from the Hilvanar Hi-fi design canvas.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: hilvanar
WC requires at least: 8.0
WC tested up to: 9.9
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root{
  --bg:#f7f7f7;
  --ink:#2e2b26;
  --ink-2:#524d45;

  /*
   * The three quiet greys, at WCAG AA on every ground they sit on (the page,
   * both creams, white): 4.6 / 4.7 / 5.0. They were #a49d8e (2.52), #8f8879
   * (3.29) and #6f6a60, so two of the three failed - and they carried real
   * information: breadcrumbs, form labels, placeholders, product descriptors.
   *
   * They now sit close together on purpose. At 4.5:1 against a near-white page
   * there is very little room left, so a three-step ladder of lightness is not
   * available. The hierarchy comes from size, tracking and case instead, which
   * is what the design leans on anyway. Do not "restore" the lighter values.
   */
  --muted:#6f6a60;
  --muted-2:#756e61;
  --faint:#776f60;

  --line:rgba(46,43,38,.09);
  --line-2:rgba(46,43,38,.10);
  --line-3:rgba(46,43,38,.07);
  /*
   * --rule and --rule-2 stay light: they draw decorative borders, which WCAG
   * does not require to meet a contrast ratio. --field is different - these
   * inputs are underline-only, so that line is the only thing showing where
   * the field is, which makes it a component boundary at 3:1 (1.4.11).
   */
  --rule:#ece7db;
  --rule-2:#ddd7c8;
  --field:#8f8878;

  /* #6e7757 measured 4.42 - a hair under AA, and it carries every link. */
  --olive:#69724f;
  --olive-dark:#4e522a;
  --olive-deep:#4b5320;

  --cream:#faf9eb;
  --cream-2:#faf9f4;
  --sand:#e8e4d9;
  --sand-2:#e0ddd0;
  --sand-3:#dfdcd0;

  --nav-h:86px;
  --maxw:1440px;
  --pad:clamp(24px,4vw,64px);
  --gap:clamp(40px,5vw,80px);

  --display:"Carson Sans",Georgia,serif;
  --body:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ==========================================================================
   2. Fonts
   ========================================================================== */

@font-face{
  font-family:"Carson Sans";
  src:url("assets/fonts/carson-sans.woff2") format("woff2"),
      url("assets/fonts/carson-sans.otf") format("opentype");
  font-weight:400;
  font-style:normal;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

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

/*
 * The UA rule for [hidden] is display:none at specificity (0,1,0), so any
 * component rule that sets display with a class - .zap-summary-rail .zap-btn,
 * for one - silently outranks it and the element stays on screen with the
 * attribute set. That is exactly how "przejdź do płatności" kept showing on the
 * płatność step. This makes the attribute mean what it says everywhere, which
 * is also why the per-component [hidden] rules further down are now redundant.
 */
[hidden]{display:none !important;}

/*
 * Panel images.
 *
 * These panels used to carry their picture as an inline background-image: one
 * fixed URL at every viewport, no srcset, no lazy loading, no intrinsic size
 * and no alt text. They are real <img> elements now - see zap_render_cover() -
 * laid over the panel, so WordPress supplies the srcset and the browser picks a
 * file that fits the slot. Each panel keeps its own background colour
 * underneath as the placeholder while the image decodes.
 *
 * Every holder therefore needs position:relative and overflow:hidden, and any
 * content sitting on top of one needs its own stacking context.
 */
.zap-cover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.zap-cover--contain{object-fit:contain;}
.zap-cover--top{object-position:top;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:2;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}
a:hover{color:var(--olive);}
img{max-width:100%;height:auto;display:block;}
p{margin:0;}

/*
 * Carson Sans ships in one weight. Left at the browser default, every heading
 * asks for bold, gets no bold to load, and is rendered as synthetic faux-bold -
 * smeared outlines on a face whose whole character is its thinness. Nothing in
 * this design wants a bold heading, so reset all six here rather than repeat
 * font-weight in a dozen rules.
 */
h1,h2,h3,h4,h5,h6{font-weight:400;}

.zap-shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.zap-full{margin-inline:calc(-1 * var(--pad));}

.zap-display{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.1em;
  line-height:1.15;
  text-transform:uppercase;
  color:var(--ink);
}
.zap-h1{font-size:clamp(38px,4.6vw,58px);}
.zap-h2{font-size:clamp(22px,2.2vw,30px);letter-spacing:.16em;line-height:1.6;}
.zap-h3{font-size:26px;letter-spacing:.16em;}
.zap-h4{font-size:20px;letter-spacing:.14em;}

.zap-eyebrow{
  font:300 11px var(--body);
  letter-spacing:.24em;
  color:var(--faint);
  text-transform:uppercase;
}
.zap-lede{
  font:300 15px/2.1 var(--body);
  color:var(--ink-2);
  max-width:600px;
  margin:32px auto 0;
}
.zap-prose{font:300 16px/2 var(--body);color:var(--ink-2);}

/* Buttons - the design uses three: solid olive, outline olive, outline ink */

.zap-btn,
.zap-btn:hover{color:var(--bg);}
.zap-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--olive-deep);
  border:1px solid var(--olive-deep);
  padding:16px 40px;
  font:300 12px var(--body);
  letter-spacing:.2em;
  text-align:center;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.zap-btn:hover{background:var(--olive-dark);border-color:var(--olive-dark);}
.zap-btn[disabled],.zap-btn.is-disabled{background:#ded9c9;border-color:#ded9c9;cursor:default;pointer-events:none;}
/*
 * Waiting on the server. Not [disabled]: that greys the button out and drops it
 * from the tab order for the few hundred milliseconds it takes, which reads as
 * something having gone wrong.
 */
.zap-btn.is-loading{opacity:.6;pointer-events:none;}

.zap-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:1px solid var(--olive-dark);
  color:var(--olive-dark);
  padding:14px 38px;
  font:300 12px var(--body);
  letter-spacing:.2em;
  cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.zap-btn-ghost:hover{background:var(--olive-dark);color:var(--bg);}

.zap-link{
  font:300 12px var(--body);
  letter-spacing:.16em;
  color:var(--olive);
  cursor:pointer;
}

.zap-panel-olive{background:var(--olive-deep);color:var(--bg);}
.zap-panel-cream{background:var(--cream);}

/* ==========================================================================
   4. Header / Nav
   ========================================================================== */

.zap-nav{
  position:sticky;
  top:0;
  z-index:200;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.zap-nav__inner{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  display:flex;
  flex-wrap:wrap;
  gap:14px 24px;
  align-items:center;
  justify-content:space-between;
  min-height:var(--nav-h);
}
/*
 * order:-1 because the menu now sits last in the markup - the hamburger that
 * opens it belongs on the right of the bar, and putting it there in the markup
 * instead of with CSS keeps the tab order matching what is on screen. On
 * desktop the menu goes back to the left, where the design has it.
 */
.zap-nav__menu{display:flex;flex-wrap:wrap;gap:12px 26px;margin:0;padding:0;list-style:none;order:-1;}
.zap-nav__menu a,
.zap-nav__utils span,
.zap-nav__utils a{
  font:300 13px/1 var(--body);
  letter-spacing:.14em;
  white-space:nowrap;
  color:var(--muted);
  transition:color .2s ease;
}
.zap-nav__menu .current-menu-item > a,
.zap-nav__menu .current_page_item > a,
.zap-nav__menu a:hover{color:var(--ink);}

.zap-nav__brand{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.zap-nav__brand img{height:26px;width:auto;}
.zap-nav__wordmark{
  font-family:var(--display);
  font-size:22px;
  letter-spacing:.32em;
  padding-left:.32em;
  color:var(--ink);
}
.zap-nav__utils{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:flex-end;}

/*
 * On desktop the panel is not a panel at all: display:contents drops it out of
 * the layout so the menu sits in the bar exactly as before. The hamburger and
 * the panel's own search form belong to the phone layout only.
 */
.zap-nav__panel{display:contents;}
.zap-nav__panel-search{display:none;}
.zap-nav__burger{display:none;}
.zap-nav__search{color:var(--muted);}
.zap-nav__cart{color:var(--ink);}
.zap-nav__cart.is-active{color:var(--olive);}

/*
 * The compact header. Below 900px the centred wordmark has nowhere to go
 * without landing on the menu, so the bar becomes an explicit two-row grid:
 * wordmark and cart on the first row, the menu underneath. Grid areas rather
 * than flex-wrap, because a wrapped flex item at width:100% resolves against a
 * container it is itself widening.
 */
@media (max-width:900px){
  /*
   * One row: hamburger, brand, cart. The menu and the search form leave the bar
   * for the panel below it, so the second row is gone. The hero sizes itself as
   * "one screen minus the bar", so this wants to stay close to the real height:
   * 10px padding either side of a ~26px row. Estimated, not re-measured.
   */
  :root{--nav-h:56px;}

  .zap-nav__inner{
    gap:14px;
    min-height:0;
    padding-top:10px;
    padding-bottom:10px;
  }

  .zap-nav__burger{
    display:flex;
    flex:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:26px;
    height:26px;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
  }
  .zap-nav__burger-bar{
    display:block;
    width:100%;
    height:1px;
    background:var(--ink);
    transition:transform .3s ease,opacity .2s ease;
  }
  /* Into an X. The bars are 1px with a 5px gap, so 6px carries each to centre. */
  .zap-nav__burger[aria-expanded="true"] .zap-nav__burger-bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .zap-nav__burger[aria-expanded="true"] .zap-nav__burger-bar:nth-child(2){opacity:0;}
  .zap-nav__burger[aria-expanded="true"] .zap-nav__burger-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  .zap-nav__brand{
    position:static;
    transform:none;
    flex-direction:row;
    align-items:center;
    gap:10px;
    min-width:0;
    margin-right:auto;
  }
  /*
   * The desktop padding-left balances the trailing letter-spacing so the
   * centred wordmark sits truly central. Left-aligned beside the sygnet it is
   * just an extra gap.
   */
  .zap-nav__wordmark{padding-left:0;}
  .zap-nav__brand img{height:22px;}
  .zap-nav__utils{justify-content:flex-end;min-width:0;}

  /*
   * Closed from the first paint. This used to wait for hilvanar.js to mark the
   * nav ready, which meant the menu rendered as a visible second row and then
   * vanished - a flash on every single page load.
   *
   * Not the hidden attribute: display:none cannot be animated, so visibility
   * does what hidden would - out of the tab order and out of the accessibility
   * tree, but still transitionable. Its own transition waits for the fade to
   * finish, which stops the panel disappearing before it has faded.
   *
   * With scripting off nothing can open it, so the noscript block in header.php
   * puts the menu back as a plain second row.
   */
  .zap-nav__panel{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:block;
    padding:22px var(--pad) 26px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 30px -26px rgba(46,43,38,.55);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .26s ease,transform .26s ease,visibility 0s linear .26s;
  }
  .zap-nav__panel.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity .26s ease,transform .26s ease,visibility 0s;
  }
  .zap-nav__menu{flex-direction:column;gap:18px;min-width:0;}
  .zap-nav__menu a{font-size:15px;}
  .zap-nav__panel-search{
    display:block;
    margin-top:22px;
    padding-top:22px;
    border-top:1px solid var(--line);
  }
  /* The trigger opens a panel of its own; here the form is already in the menu. */
  .zap-nav__search{display:none;}
}

@media (max-width:420px){
  .zap-nav__wordmark{font-size:18px;letter-spacing:.24em;}
  .zap-nav__menu{gap:8px 16px;}
  .zap-nav__menu a,
  .zap-nav__utils a{font-size:12px;letter-spacing:.1em;}
}

/* ==========================================================================
   5. Home
   ========================================================================== */

.zap-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));}
.zap-hero__media{
  position:relative;
  height:calc(100svh - var(--nav-h));
  min-height:420px;
  background:var(--sand-2);
  overflow:hidden;
}
.zap-hero__media video,
.zap-hero__media img{width:100%;height:100%;object-fit:cover;display:block;}
.zap-hero__still{
  position:relative;
  overflow:hidden;
  height:calc(100svh - var(--nav-h));
  min-height:420px;
  background:var(--sand-3);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 24px clamp(48px,7vh,96px);
}
.zap-hero__cta{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;}
.zap-hero__cta-label{
  font:300 17px var(--body);
  letter-spacing:.2em;
  color:var(--bg);
  text-transform:uppercase;
}
.zap-hero__cta-button{
  border:1px solid rgba(247,247,247,.85);
  color:var(--bg);
  padding:16px 44px;
  font:300 12px var(--body);
  letter-spacing:.2em;
  text-align:center;
  transition:background .25s ease;
}
.zap-hero__cta:hover{color:var(--bg);}
.zap-hero__cta:hover .zap-hero__cta-button{background:rgba(247,247,247,.14);}

.zap-claim{text-align:center;padding:clamp(80px,9vw,130px) var(--pad) 0;}
.zap-claim__text{
  max-width:980px;
  /* Block-level heading: without this it would sit left of the centred section. */
  margin-inline:auto;
  font-family:var(--display);
  font-size:clamp(26px,2.6vw,36px);
  letter-spacing:.14em;
  line-height:1.65;
  color:var(--ink);
}
.zap-claim__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px;}
.zap-claim__actions .zap-btn{padding:14px 40px;}
.zap-claim__actions .zap-btn-ghost{border-color:var(--olive-deep);}

.zap-intro{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,9vw,130px) var(--pad) 0;}
.zap-intro__title{
  font-family:var(--display);
  font-size:clamp(52px,7vw,96px);
  letter-spacing:.06em;
  line-height:1;
  text-transform:lowercase;
  color:var(--ink);
}
.zap-intro__row{
  display:grid;
  grid-template-columns:1.6fr auto;
  gap:60px;
  align-items:end;
  margin-top:44px;
  padding-bottom:26px;
}
.zap-intro__row p{max-width:620px;}
.zap-intro__row .zap-btn-ghost{border-color:var(--olive);color:var(--ink);white-space:nowrap;}
/*
 * The rule above is as specific as .zap-btn-ghost:hover (two classes each) and
 * comes later, so it also won on hover - near-black text on the olive fill.
 * Restated here for the hover state only.
 */
.zap-intro__row .zap-btn-ghost:hover{color:var(--bg);}
@media (max-width:760px){
  .zap-intro__row{grid-template-columns:1fr;gap:32px;align-items:start;}
}

.zap-trio{max-width:var(--maxw);margin:0 auto;padding:56px var(--pad) clamp(80px,9vw,130px);}
.zap-trio__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:56px;}

.zap-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));}
.zap-split__media{position:relative;min-height:560px;background:var(--sand-2);overflow:hidden;}
.zap-split__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.zap-split__body{display:flex;align-items:center;padding:100px clamp(32px,5vw,110px);}
.zap-split__body > div{max-width:520px;}
.zap-split__body.is-centered{justify-content:center;padding-block:90px;}
.zap-split__body.is-centered > div{text-align:center;}
.zap-split__body .zap-prose h2,
.zap-split__body .zap-prose h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(22px,2.2vw,30px);
  letter-spacing:.16em;
  line-height:1.6;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 26px;
}
.zap-split__body .zap-prose p{margin:0 0 20px;}
.zap-split__body .zap-prose p:last-child{margin-bottom:0;}
.zap-panel-olive .zap-h2,
.zap-panel-olive .zap-prose{color:var(--bg);}
.zap-panel-olive .zap-btn-ghost{border-color:rgba(247,247,247,.45);color:var(--bg);}
.zap-panel-olive .zap-btn-ghost:hover{background:var(--bg);color:var(--olive-deep);}

.zap-play{
  width:78px;
  height:78px;
  border:1px solid rgba(46,43,38,.35);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  margin:auto;
  color:var(--ink);
}

.zap-instagram{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(80px,9vw,130px);}
.zap-instagram__tile{position:relative;aspect-ratio:1;background:var(--sand-2);overflow:hidden;}
.zap-instagram__tile:nth-child(2){background-color:#dcd8cb;}
.zap-instagram__card{
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:24px;
  background:var(--olive-deep);
  text-align:center;
}
.zap-instagram__card-title{
  font-family:var(--display);
  font-size:19px;
  letter-spacing:.16em;
  text-transform:lowercase;
  color:var(--bg);
  line-height:1.7;
}
.zap-instagram__card .zap-btn-ghost{
  border-color:rgba(243,241,234,.55);
  color:var(--bg);
  padding:11px 28px;
  font-size:11px;
  letter-spacing:.18em;
  max-width:100%;
}
@media (max-width:900px){
  .zap-instagram{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .zap-instagram__card{padding:18px;gap:16px;}
  .zap-instagram__card-title{font-size:16px;}
  .zap-instagram__card .zap-btn-ghost{padding:10px 14px;letter-spacing:.12em;}
}

/* ==========================================================================
   6. Product card (bw -> colour swap, floating caption)
   ========================================================================== */

.zap-card{position:relative;display:block;padding:0 0 66px 42px;cursor:pointer;}
.zap-card__inner{position:relative;width:100%;}
.zap-card__nr{
  position:absolute;
  left:-42px;
  top:12%;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--display);
  font-style:italic;
  font-size:16px;
  letter-spacing:.22em;
  color:var(--muted);
}
.zap-card__media{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--sand);}
.zap-card__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.zap-card__media .zap-card__hover{opacity:0;transition:opacity .5s ease;}
.zap-card:hover .zap-card__hover,
.zap-card:focus-visible .zap-card__hover{opacity:1;}

.zap-card__caption{
  position:absolute;
  left:0;
  right:14%;
  bottom:-66px;
  background:var(--cream-2);
  border:1px solid var(--rule);
  padding:24px 22px 22px;
  transition:border-color .4s ease,box-shadow .4s ease;
}
.zap-card:hover .zap-card__caption,
.zap-card:focus-visible .zap-card__caption{
  border-color:var(--olive-deep);
  box-shadow:0 6px 24px rgba(46,43,38,.09);
}
.zap-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.zap-card__name{
  font-family:var(--display);
  font-size:18px;
  letter-spacing:.12em;
  text-transform:capitalize;
  color:var(--ink);
  white-space:nowrap;
}
.zap-card__price{font:300 16px var(--body);color:var(--ink-2);white-space:nowrap;}
.zap-card__desc{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  padding-top:12px;
  font:300 11px var(--body);
  letter-spacing:.08em;
  color:var(--muted-2);
}
.zap-card__desc .zap-sep{color:var(--rule-2);}

/* Compact grid card - shop archive + related */

.zap-tile{display:flex;flex-direction:column;gap:14px;}
.zap-tile__media{
  position:relative;
  aspect-ratio:4/5;
  background:var(--sand);
  overflow:hidden;
}
.zap-tile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.zap-tile__badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  font:300 10px var(--body);
  letter-spacing:.14em;
  background:var(--bg);
  padding:6px 12px;
  color:var(--olive);
}
.zap-tile__edition{
  position:absolute;
  bottom:0;
  right:0;
  z-index:2;
  background:var(--cream-2);
  border:1px solid var(--rule);
  padding:8px 12px;
  font:300 10px var(--body);
  letter-spacing:.16em;
  color:var(--olive);
}
.zap-tile__name{
  font-family:var(--display);
  font-size:15px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}
.zap-tile__desc{font:300 12px var(--body);color:var(--muted-2);}
.zap-tile__price{font:300 13px var(--body);color:var(--ink-2);}
.zap-tile__price del{opacity:.5;margin-right:8px;}
.zap-tile__price ins{text-decoration:none;}

/* ==========================================================================
   7. Shop archive
   ========================================================================== */

.zap-shop__head{padding:64px 0 44px;}
.zap-shop__bar{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);}
.zap-shop__bar-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:22px 0;}
.zap-shop__filters{display:flex;flex-wrap:wrap;gap:34px;}
.zap-shop__filter{
  font:300 12px var(--body);
  letter-spacing:.14em;
  color:var(--muted);
  cursor:pointer;
  background:none;
  border:0;
  padding:0;
}
.zap-shop__filter[aria-expanded="true"]{color:var(--ink);}
.zap-shop__meta{display:flex;flex-wrap:wrap;gap:28px;align-items:center;font:300 12px var(--body);letter-spacing:.1em;color:var(--faint);}
.zap-shop__panel{
  display:flex;
  flex-wrap:wrap;
  gap:16px 34px;
  align-items:center;
  padding:20px 0;
  border-top:1px solid var(--line-3);
  font:300 12px var(--body);
  color:var(--ink-2);
}
.zap-shop__panel[hidden]{display:none;}
.zap-shop__panel-label{
  font:9px ui-monospace,Menlo,monospace;
  letter-spacing:.1em;
  color:var(--faint);
  text-transform:lowercase;
}
.zap-shop__panel a{color:var(--ink-2);}
.zap-shop__panel a.is-active{color:var(--olive);}
.zap-shop__panel-clear{margin-left:auto;color:var(--faint);}
.zap-shop__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
  gap:34px;
  padding:44px 0 0;
}
.zap-shop__foot{padding:70px 0 120px;}
.zap-shop__empty{padding:80px 0 120px;text-align:center;}

.zap-pagination{display:flex;justify-content:center;gap:22px;font:300 12px var(--body);letter-spacing:.12em;}
.zap-pagination .page-numbers{color:var(--faint);}
.zap-pagination .page-numbers.current{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;}

/* Woo's own sorting select, restyled to sit in the bar */
.zap-shop__meta select,
.zap-shop__meta .woocommerce-ordering select{
  background:none;
  border:0;
  font:300 12px var(--body);
  letter-spacing:.1em;
  color:var(--ink-2);
  cursor:pointer;
  padding:0;
}
.zap-shop__meta form{margin:0;}

/* ==========================================================================
   8. Single product
   ========================================================================== */

.zap-breadcrumb{padding:26px 0;font:300 11px var(--body);letter-spacing:.14em;color:var(--faint);}
.zap-breadcrumb a{color:var(--faint);}
.zap-breadcrumb a:hover{color:var(--ink);}

.zap-product{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));
  gap:var(--gap);
  padding-bottom:110px;
}
.zap-gallery{display:flex;flex-direction:column;gap:18px;}
.zap-gallery__main{position:relative;aspect-ratio:4/5;background:var(--sand);overflow:hidden;}
.zap-gallery__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.zap-gallery__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.zap-gallery__note{font:300 11px/1.8 var(--body);color:var(--muted-2);margin:6px 0 0;}
.zap-gallery__thumb{
  position:relative;
  aspect-ratio:1;
  background:var(--sand);
  border:1px solid var(--rule-2);
  cursor:pointer;
  padding:0;
  overflow:hidden;
}
.zap-gallery__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.zap-gallery__thumb[aria-pressed="true"]{border-color:var(--olive);border-width:2px;}

/*
 * The film fills the frame. The footage is 9:16 letterboxed - it carries black
 * bars of its own - so cover crops those away instead of framing them in more
 * black, which is what contain did.
 */
.zap-player{position:absolute;inset:0;background:#141311;}
.zap-player__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/*
 * The chevrons sit over the frame. A translucent disc rather than a bare glyph
 * because what is behind them is a photograph - a dark chevron disappears on a
 * dark shot, a light one on a pale one.
 *
 * z-index is explicit: the player and the zoom button both fill the frame, so
 * source order alone would decide this, and source order is easy to disturb.
 */
.zap-gallery__nav{
  position:absolute;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(20,19,17,.45);
  color:#f7f7f7;
  cursor:pointer;
  opacity:.85;
  transition:opacity .25s ease,background .25s ease;
}
.zap-gallery__nav:hover,
.zap-gallery__nav:focus-visible{opacity:1;background:rgba(20,19,17,.7);}
.zap-gallery__nav.is-prev{left:12px;}
.zap-gallery__nav.is-next{right:12px;}

/* The play badge over the thumbnail that stands for the film. */
.zap-gallery__thumb--video{position:relative;}
.zap-gallery__play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

/*
 * The film fills its container everywhere, the lightbox included: cover, never
 * contain. These files carry black bars of their own, and contain framed those
 * bars in yet more black.
 */
.zap-player--lightbox .zap-player__video{object-fit:cover;}

/*
 * The zoom control fills the frame and is transparent, so the photo below it
 * is what shows; .zap-gallery__main img is positioned against this button, so
 * it has to cover the frame exactly.
 */
.zap-gallery__zoom{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:none;
  cursor:zoom-in;
}

/*
 * PhotoSwipe, toned to the shop. Its own stylesheet does the layout; these are
 * the variables it exposes for colour, plus the counter in the theme's type.
 */
.pswp{
  --pswp-bg:#141311;
  --pswp-icon-color:#f7f7f7;
  --pswp-icon-color-secondary:#141311;
  --pswp-placeholder-bg:#2b2926;
}
.pswp__counter{
  font:300 11px var(--body);
  letter-spacing:.2em;
  opacity:.75;
}

/*
 * The built-in zoom control is a single toggle between fit and filled. It is
 * replaced by the two stepping buttons registered in hilvanar.js, so it is
 * hidden here - 5.4.4 has no option to leave it out. display:none also takes
 * it out of the tab order, which a visibility hack would not.
 */
.pswp__button--zoom{display:none !important;}

/* Our icons are stroked; PhotoSwipe's own are filled. */
.pswp__button--zap-zoom-in .pswp__icn,
.pswp__button--zap-zoom-out .pswp__icn{
  fill:none;
  stroke:var(--pswp-icon-color);
  stroke-width:1.6;
  stroke-linecap:round;
}

.zap-summary{display:flex;flex-direction:column;padding-top:12px;}
.zap-summary__collection{
  font:300 11px var(--body);
  letter-spacing:.24em;
  color:var(--olive);
  margin-bottom:20px;
  text-transform:uppercase;
}
.zap-summary__title{
  font-family:var(--display);
  font-size:clamp(30px,3.2vw,42px);
  letter-spacing:.14em;
  text-transform:capitalize;
  line-height:1.3;
  color:var(--ink);
}
/*
 * Bigger, and sitting directly above the cart form - the price is the last
 * thing read before the button, so it is no longer tucked under the excerpt.
 */
.zap-summary__price{font:300 clamp(22px,2vw,26px) var(--body);margin:0 0 18px;color:var(--ink-2);}
.zap-summary__price del{opacity:.5;margin-right:10px;}
.zap-summary__price ins{text-decoration:none;}
.zap-summary__excerpt{margin:20px 0 0;max-width:44ch;}

/* "edycja limitowana" - the rule-bounded panel above add-to-cart */

.zap-limited{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:22px 0;
  margin: 12px 0 36px 0;
}
.zap-limited__label{
  font:300 11px var(--body);
  letter-spacing:.24em;
  color:var(--olive);
  text-transform:uppercase;
  margin-bottom:8px;
}
.zap-limited__text{font:300 13px/1.8 var(--body);color:var(--ink-2);}

.zap-gift-note{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0 0 22px;
  color:var(--olive);
}
@media (max-width:900px){
  .zap-gift-note{padding-left:0;}
}
.zap-gift-note svg{flex:none;margin-top:2px;}
.zap-gift-note p{font:300 12px/1.85 var(--body);color:var(--muted);max-width:46ch;}

.zap-atc{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px;}
.zap-qty{display:flex;align-items:center;border:1px solid rgba(46,43,38,.35);}
.zap-qty button{
  width:42px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  cursor:pointer;
  font:300 15px var(--body);
  color:var(--ink);
}
.zap-qty input{
  width:38px;
  height:52px;
  text-align:center;
  border:0;
  background:none;
  font:300 13px var(--body);
  color:var(--ink);
  -moz-appearance:textfield;
  appearance:textfield;
}
.zap-qty input::-webkit-outer-spin-button,
.zap-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.zap-atc .zap-btn{flex:1;min-width:200px;}

/*
 * WooCommerce appends this itself after a successful add - its own script
 * listens for added_to_cart and puts a link to the cart after the button. It
 * comes in unstyled, because the theme drops WooCommerce CSS entirely.
 *
 * flex-basis:100% drops it onto its own row rather than squeezing beside a
 * button that already wants the full width. The underline is text-decoration,
 * not a border: a border would run the width of the row, not the words.
 */
.zap-atc .added_to_cart{
  flex-basis:100%;
  text-align:center;
  font:300 12px var(--body);
  letter-spacing:.16em;
  text-transform:lowercase;
  color:var(--olive);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--rule-2);
  text-underline-offset:4px;
}
.zap-atc .added_to_cart:hover{color:var(--olive-deep);text-decoration-color:var(--olive);}

.zap-accordion{border-top:1px solid var(--line-2);}
.zap-accordion__trigger{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  width:100%;
  padding:20px 0;
  border:0;
  border-bottom:1px solid var(--line-2);
  background:none;
  font:300 13px var(--body);
  letter-spacing:.06em;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
}
.zap-accordion__symbol{color:var(--faint);}
/*
 * Reveal and collapse. The height is animated through a grid row going 0fr to
 * 1fr: height:auto cannot be transitioned, and the max-height trick either
 * clips tall content or runs visibly out of time with its own easing. The
 * padding sits on the inner element so a closed panel measures zero.
 *
 * The hidden attribute is the no-JS state. display:none cannot animate, so
 * hilvanar.js removes it on load and drives .is-open instead - which is why
 * the rule below still has to exist.
 *
 * The reduced-motion block at the end of this file cancels the transition.
 */
.zap-accordion__panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  font:300 13px/2 var(--body);
  color:var(--muted);
  transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1),opacity .3s ease;
}
.zap-accordion__panel.is-open{grid-template-rows:1fr;opacity:1;}
.zap-accordion__panel[hidden]{display:none;}
.zap-accordion__inner{overflow:hidden;min-height:0;}
/*
 * The padding sits here rather than on the wrapper above: overflow:hidden clips
 * content, never the element own padding, so 40px of it outlived a collapsed
 * panel and showed up as a gap between the rows.
 */
.zap-accordion__list{display:flex;flex-direction:column;gap:8px;margin:0;padding:18px 0 22px;list-style:none;}
.zap-accordion__list li{display:flex;gap:10px;align-items:baseline;}
.zap-accordion__list li::before{content:"\00b7";color:var(--muted);font-weight:700;}

.zap-story{display:grid;grid-template-columns:1.15fr 1fr;}
.zap-story__body{display:flex;align-items:center;padding:100px clamp(32px,5vw,110px);background:var(--cream);}
.zap-story__body .zap-prose{color:#3f4a47;}
.zap-story__body > div{max-width:520px;}
.zap-story__title{
  font-family:var(--display);
  font-size:26px;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.6;
  margin-bottom:26px;
  color:var(--ink);
}
.zap-story__media{position:relative;min-height:460px;background:var(--sand-2);overflow:hidden;}
@media (max-width:860px){.zap-story{grid-template-columns:1fr;}}

.zap-reviews{padding:120px 0;}
.zap-reviews__head{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;margin-bottom:44px;}
.zap-reviews__write{
  font:300 12px var(--body);
  letter-spacing:.16em;
  color:var(--olive);
  border-bottom:1px solid var(--olive);
  padding-bottom:3px;
  cursor:pointer;
}
.zap-reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:34px;}
.zap-review{border:1px solid var(--rule-2);padding:36px;list-style:none;}
.zap-review__stars{font:300 11px var(--body);letter-spacing:.3em;margin-bottom:16px;color:var(--olive);}
.zap-review__text{font:300 13px/2 var(--body);color:var(--ink-2);margin:0 0 18px;}
.zap-review__author{font:300 11px var(--body);letter-spacing:.14em;color:var(--faint);}
.zap-reviews__form{margin-top:60px;max-width:620px;}

.zap-related{padding-bottom:130px;}
.zap-related__title{
  font-family:var(--display);
  font-size:26px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:40px;
  color:var(--ink);
}
.zap-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:34px;max-width:840px;}
.zap-related__grid .zap-tile__media{border:1px solid #2b2b2b;}
.zap-tile.is-compact{gap:14px;}
.zap-related{padding-top:clamp(60px,7vw,100px);}

/* ==========================================================================
   9. Cart + checkout (four steps)
   ========================================================================== */

.zap-checkout__head{padding:60px 0 44px;}
.zap-steps{
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  margin-top:34px;
  font:300 12px var(--body);
  letter-spacing:.18em;
}
/*
 * Step state was colour alone, which fails 1.4.1, and the upcoming-step grey
 * (#c4bdae, 1.74:1) was unreadable besides. Now: readable in every state, with
 * a mark that does not depend on colour, and aria-current on the live step.
 */
.zap-steps__item{display:inline-flex;align-items:baseline;gap:8px;color:var(--faint);}
.zap-steps__item.is-done{color:var(--olive);}
.zap-steps__item.is-current{color:var(--ink);}
.zap-steps__item::before{
  content:"";
  width:6px;
  height:6px;
  flex:none;
  border:1px solid currentColor;
  border-radius:50%;
  transform:translateY(-2px);
}
.zap-steps__item.is-done::before{background:currentColor;}
.zap-steps__item.is-current::before{
  background:currentColor;
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px currentColor;
}

.zap-checkout__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  gap:var(--gap);
  padding-bottom:120px;
  align-items:start;
}

/* Cart lines */
.zap-cart__lines{border-top:1px solid rgba(46,43,38,.12);}
.zap-cart__line{display:flex;gap:26px;padding:30px 0;border-bottom:1px solid var(--line-2);}
.zap-cart__thumb{width:120px;flex:none;aspect-ratio:3/4;background:var(--sand) center/cover no-repeat;overflow:hidden;}
.zap-cart__thumb img{width:100%;height:100%;object-fit:cover;}
.zap-cart__body{flex:1;display:flex;flex-direction:column;gap:10px;}
.zap-cart__row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;}
.zap-cart__name{font-family:var(--display);font-size:18px;letter-spacing:.12em;color:var(--ink);}
.zap-cart__sum{font:300 15px var(--body);color:var(--ink);white-space:nowrap;}
.zap-cart__variant{font:300 12px var(--body);color:var(--muted-2);letter-spacing:.06em;}
.zap-cart__variant p{margin:0;}
.zap-cart__foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-top:auto;}
.zap-cart__remove{
  font:300 11px var(--body);
  letter-spacing:.14em;
  color:var(--faint);
  border-bottom:1px solid var(--rule-2);
  padding-bottom:2px;
  cursor:pointer;
}
.zap-cart__empty{padding:60px 0;text-align:center;}
.zap-cart__empty p{margin:0 0 26px;}
.zap-cart__continue{padding-top:30px;}

.zap-cart .zap-qty button{width:34px;height:40px;font-size:16px;}
.zap-cart .zap-qty input{width:30px;height:40px;}
.zap-cart .zap-qty{border-color:rgba(46,43,38,.28);}

/* Summary rail */
.zap-summary-rail{background:var(--cream);padding:44px 40px;}

/*
 * The rail follows the customer down the form on desktop.
 *
 * 900px is where .zap-checkout__cols collapses to one column; below it the rail
 * is the last thing on the page, so there is nothing to stick past anyway.
 * Sticky works here because .zap-checkout__cols sets align-items:start - a
 * stretched grid item is already as tall as the row and cannot move - and
 * because no ancestor (.zap-shell, form.checkout) clips overflow. Do not add
 * overflow to either of them without checking this.
 *
 * max-height matters more than it looks: the rail ends with the primary action
 * ("przejdź do płatności", then "kupuję i płacę"). Pinning the top of a rail
 * taller than the viewport would push that button permanently off-screen, so
 * the rail scrolls internally instead. Carts short enough to fit - most of them
 * - never show the scrollbar and look exactly as before.
 */
@media (min-width:901px){
  .zap-summary-rail{
    position:sticky;
    top:calc(var(--nav-h) + 24px);
    max-height:calc(100vh - var(--nav-h) - 48px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}
.zap-summary-rail__title{
  font-family:var(--display);
  font-size:22px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:32px;
}
.zap-summary-rail__lines{display:flex;flex-direction:column;gap:16px;font:300 16px var(--body);color:var(--ink-2);}
.zap-summary-rail__row{display:flex;justify-content:space-between;gap:16px;}
.zap-summary-rail__total{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-top:20px;
  margin-top:8px;
  border-top:1px solid #e4dfcf;
  font-size:18px;
  color:var(--ink);
}
.zap-summary-rail__note{font:300 11px/1.9 var(--body);color:var(--muted-2);margin:22px 0 0;text-align:center;}

.zap-gift{border-top:1px solid var(--rule);margin-top:28px;padding-top:24px;}
.zap-gift__row{display:flex;align-items:center;gap:12px;margin-bottom:10px;cursor:pointer;}
.zap-gift__row input{position:absolute;opacity:0;width:0;height:0;}
.zap-gift__box{
  width:17px;
  height:17px;
  flex:none;
  border:1px solid var(--field);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .3s ease,border-color .3s ease;
}
.zap-gift__row input:checked ~ .zap-gift__box{background:var(--olive-deep);border-color:var(--olive-deep);}
.zap-gift__row input:checked ~ .zap-gift__box::after{
  content:"";
  width:9px;
  height:5px;
  border-left:1.5px solid var(--bg);
  border-bottom:1.5px solid var(--bg);
  transform:translateY(-1px) rotate(-45deg);
}
.zap-gift__row input:focus-visible ~ .zap-gift__box{outline:2px solid var(--olive);outline-offset:2px;}
.zap-gift__label{
  font:300 11px var(--body);
  letter-spacing:.24em;
  color:var(--olive);
  text-transform:uppercase;
}
.zap-gift__desc{font:300 12px/1.85 var(--body);color:var(--muted);}

.zap-gift__panel{margin-top:18px;}
.zap-gift__panel[hidden]{display:none;}
.zap-gift__field-label{
  display:block;
  font:300 11px var(--body);
  letter-spacing:.18em;
  color:var(--muted);
  margin-bottom:10px;
}
.zap-gift__panel textarea{
  width:100%;
  border:1px solid var(--field);
  background:var(--bg);
  padding:12px 14px;
  font:300 13px/1.8 var(--body);
  color:var(--ink);
  resize:vertical;
  outline:none;
}
.zap-gift__panel textarea:focus{border-color:var(--olive);}
.zap-gift__panel textarea::placeholder{color:var(--faint);}
.zap-gift__meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  font:300 11px var(--body);
  color:var(--muted-2);
}
.zap-gift__status{color:var(--olive);}
.zap-gift__submit{
  margin-top:16px;
  background:none;
  border:0;
  padding:0;
  font:300 12px var(--body);
  letter-spacing:.14em;
  color:var(--olive);
  cursor:pointer;
  text-decoration:underline;
}
/* With JS the control saves itself as you type, so the button is redundant. */
.zap-gift.is-enhanced .zap-gift__submit{display:none;}

/* The note read back on the payment step */

.zap-gift-confirm{
  border:1px solid var(--rule);
  background:var(--cream-2);
  padding:24px 26px;
  margin:0 0 26px;
}
.zap-gift-confirm__label{
  font:300 11px var(--body);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--olive);
  margin-bottom:10px;
}
.zap-gift-confirm__text{font:300 12px/1.9 var(--body);color:var(--muted);}
.zap-gift-confirm__quote{
  margin:14px 0 16px;
  padding-left:14px;
  border-left:1px solid var(--rule-2);
  font:300 13px/1.8 var(--body);
  font-style:italic;
  color:var(--ink-2);
  white-space:pre-line;
}

/* ... and on the order-received page and in the account */

.zap-gift-message{
  border:1px solid var(--rule);
  background:var(--cream-2);
  padding:24px 26px;
  margin:26px 0 0;
}
.zap-gift-message__label{
  font:300 11px var(--body);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--olive);
  margin-bottom:10px;
}
.zap-gift-message__text{
  font:300 13px/1.8 var(--body);
  color:var(--ink-2);
  white-space:pre-line;
}
.zap-summary-rail .zap-btn{display:flex;width:100%;padding:17px 0;}
.zap-summary-rail__items{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:24px;
  margin-bottom:20px;
  border-bottom:1px solid #e4dfcf;
  font:300 13px var(--body);
  color:var(--ink-2);
}
.zap-summary-rail__item{display:flex;justify-content:space-between;gap:16px;}

.zap-coupon{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--field);padding:26px 0 12px;margin-bottom:30px;}
.zap-coupon input{
  flex:1;
  border:0;
  background:none;
  font:300 13px var(--body);
  color:var(--ink);
  padding:0;
  outline:none;
}
.zap-coupon input::placeholder{color:var(--faint);}
.zap-coupon button{
  background:none;
  border:0;
  font:300 12px var(--body);
  letter-spacing:.14em;
  color:var(--olive);
  cursor:pointer;
  padding:0;
}

/* Checkout form fields - the design's underline style */
.zap-form .form-row{margin:0 0 26px;padding:0;}
.zap-form label,
.zap-field label{
  font:300 11px var(--body);
  letter-spacing:.18em;
  color:var(--faint);
  margin-bottom:10px;
  display:block;
}
.zap-form .required{color:var(--olive);text-decoration:none;}
.zap-form input[type="text"],
.zap-form input[type="email"],
.zap-form input[type="tel"],
.zap-form input[type="password"],
.zap-form textarea,
.zap-form select,
.zap-form .select2-container .select2-selection--single{
  width:100%;
  border:0;
  border-bottom:1px solid var(--field);
  background:none;
  padding:0 0 12px;
  font:300 16px var(--body);
  color:var(--ink);
  border-radius:0;
  outline:none;
  height:auto;
  transition:border-color .2s ease;
}
.zap-form textarea{
  border:1px solid var(--field);
  padding:16px;
  min-height:150px;
  line-height:1.9;
}
.zap-form input:focus,
.zap-form textarea:focus,
.zap-form select:focus{border-color:var(--olive);}
.zap-form input::placeholder,
.zap-form textarea::placeholder{color:var(--faint);}
.zap-form .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;
  line-height:inherit;
  color:var(--ink);
}
.zap-form .select2-container--default .select2-selection--single .select2-selection__arrow{top:0;right:0;}

.zap-form .woocommerce-form__label-for-checkbox,
.zap-form .woocommerce-form__label-for-checkbox span{
  display:inline;
  font:300 12px/1.9 var(--body);
  letter-spacing:0;
  color:var(--muted);
  text-transform:none;
}
.zap-form .woocommerce-form__input-checkbox{margin-right:10px;accent-color:var(--olive-deep);}

/*
 * Contact Form 7 inside .zap-form. Its fields are plain inputs, so they are
 * already dressed by the rules above; what needs saying is its own furniture -
 * the response box and the per-field errors. CF7's stylesheet is still loaded
 * on that page (it is what hides .screen-reader-response), and it loads after
 * this file, hence the !important on the two properties it sets itself.
 */
/*
 * The honeypot. Off-screen rather than display:none or hidden: a bot worth
 * trapping skips fields it can tell are invisible, and this one is meant to be
 * filled in. aria-hidden and tabindex keep it away from anybody real.
 */
.zap-hp{
  position:absolute !important;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.zap-form__note{font:300 11px/1.8 var(--body);color:var(--muted-2);margin:0 0 22px;}
.zap-form__note a{color:var(--olive);border-bottom:1px solid var(--rule-2);}
.wpcf7-response-output{
  margin:22px 0 0 !important;
  padding:14px 18px !important;
  border:1px solid var(--rule);
  font:300 12px/1.8 var(--body);
  color:var(--ink-2);
}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--olive);}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{border-color:#8f3a3a;}
.wpcf7-not-valid-tip{
  display:block;
  margin-top:6px;
  font:300 11px var(--body);
  color:#8f3a3a;
}
.wpcf7-form .zap-btn{width:100%;}

/*
 * The privacy checkbox. CF7 wraps it in a <label>, which .zap-form would
 * otherwise draw as an 11px letterspaced block - unreadable for a sentence.
 * The list-item margin is CF7's own and has to go, or the row sits indented.
 */
.zap-form .wpcf7-acceptance .wpcf7-list-item{margin:0;}
.zap-form .wpcf7-acceptance label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  font:300 12px/1.7 var(--body);
  letter-spacing:0;
  color:var(--muted);
  cursor:pointer;
}
.zap-form .wpcf7-acceptance input[type="checkbox"]{
  flex:none;
  margin-top:3px;
  accent-color:var(--olive-deep);
}
.zap-form .wpcf7-acceptance a{color:var(--olive);border-bottom:1px solid var(--rule-2);}

.zap-fieldset{margin-bottom:44px;}
.zap-fieldset__title{
  font-family:var(--display);
  font-size:22px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 32px;
}
.zap-fields-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0 34px;}

/* Selectable option rows - shipping + payment */
.zap-options{display:flex;flex-direction:column;gap:14px;margin:0 0 44px;padding:0;list-style:none;}
.zap-option{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid var(--rule);
  padding:20px 24px;
  cursor:pointer;
  transition:border-color .2s ease;
}
.zap-option:hover{border-color:var(--rule-2);}
/*
 * Selected: from the radio itself. .is-selected comes from checkout-steps.js,
 * which does not run on the order-pay page - its form is form#order_review,
 * not form.checkout - so relying on the class alone left the highlight stuck
 * on the first method there.
 */
.zap-option.is-selected,
.zap-option:has(> .zap-option__label > input:checked){border-color:var(--olive);}
.zap-option input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.zap-option__name{font:300 16px var(--body);color:var(--ink);}
.zap-option__note,
.zap-option__time{font:300 12px var(--body);color:var(--muted-2);}
.zap-option__price{font:300 16px var(--body);color:var(--ink-2);white-space:nowrap;}
.zap-option__body{display:flex;flex-direction:column;gap:4px;}
.zap-option__label{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;cursor:pointer;margin:0;}

/* Payment box */
.zap-payment{list-style:none;margin:0 0 44px;padding:0;}
/*
 * The row is a flex line, and the box is its second child - without wrapping,
 * it sat beside the full-width label and shrank to a sliver, leaving Paynow's
 * BLIK label visible but its code field unusable.
 */
.zap-payment .zap-option{flex-wrap:wrap;}
.zap-payment .payment_box{
  flex:0 0 100%;
  box-sizing:border-box;
  cursor:auto;
  font:300 12px/1.9 var(--body);
  color:var(--muted);
  background:var(--cream);
  padding:18px 22px;
  margin:14px 0 0;
}
.zap-payment .payment_box p{margin:0;}
/*
 * The gateway logo in an option row. Scoped to the row's own label: a bare
 * "label img" also matched the bank tiles Paynow draws inside the payment box,
 * and the left margin pushed every bank logo off centre.
 */
.zap-payment .zap-option__label img{display:inline-block;max-height:24px;width:auto;margin-left:10px;vertical-align:middle;}
.zap-note{
  background:var(--cream);
  padding:22px 24px;
  font:300 12px/1.9 var(--body);
  color:var(--muted);
}
.zap-terms{margin:0 0 26px;}

/*
 * Paynow's BLIK code, inside the payment box. The markup borrows Bootstrap
 * class names (row, col-md-4, form-control) this theme does not have, and the
 * plugin's own CSS only sets letter-spacing - so it is dressed like the search
 * input: a single underline, no box.
 */
.zap-payment .paynow-blik-white-label label{display:block;margin:0 0 6px;color:var(--ink-2);}
.zap-payment #paynow_blik_code{
  border:0;
  border-bottom:1px solid var(--field);
  border-radius:0;
  background:none;
  padding:8px 0;
  font:400 20px var(--body);
  color:var(--ink);
  outline:none;
}
.zap-payment #paynow_blik_code:focus{border-bottom-color:var(--olive);}

/*
 * Order-pay rail. Its rows are $order->get_order_item_totals(), so a value can
 * carry more than a price - "przez Paczkomaty InPost", and the pickup point
 * Polkurier appends under it - and has to wrap beneath rather than squeeze.
 */
.zap-pay .zap-summary-rail__row > span:last-child{text-align:right;}
.zap-pay .zap-summary-rail .shipped_via{display:block;margin-top:4px;font-size:12px;color:var(--muted-2);}
.zap-pay .zap-summary-rail .italic{font-size:12px;color:var(--muted-2);}
.zap-pay .zap-summary-rail .product-quantity{font-weight:300;}
.zap-pay .wc-item-meta{list-style:none;margin:6px 0 0;padding:0;font-size:12px;color:var(--muted-2);}
.zap-pay .wc-item-meta p{display:inline;margin:0;}
.zap-pay__submit{margin-top:30px;}

/* E-mail verification: shown instead of the order when a guest is not recognised. */
.zap-verify__form{max-width:460px;margin:44px auto 0;text-align:left;}
.zap-verify__form label{
  display:block;
  font:300 11px var(--body);
  letter-spacing:.18em;
  color:var(--muted);
  margin-bottom:12px;
}
.zap-verify__row{display:flex;flex-wrap:wrap;gap:12px;}
.zap-verify__row input[type="email"]{
  flex:1;
  min-width:200px;
  border:0;
  border-bottom:1px solid var(--field);
  border-radius:0;
  background:none;
  padding:12px 0;
  font:300 15px var(--body);
  color:var(--ink);
  outline:none;
}
.zap-verify__row input[type="email"]:focus{border-bottom-color:var(--olive);}
.zap-verify__row .zap-btn{padding:14px 32px;}

/* Step machinery */
.zap-step[hidden]{display:none;}
.zap-step__nav{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:8px;}
.zap-step__back{
  font:300 12px var(--body);
  letter-spacing:.16em;
  color:var(--olive);
  cursor:pointer;
  background:none;
  border:0;
  padding:0;
}
.zap-steps__item[data-clickable="true"]{cursor:pointer;}

/* Order received */
.zap-thanks{text-align:center;padding:72px 0 70px;}
.zap-thanks__eyebrow{font:300 12px var(--body);letter-spacing:.24em;color:var(--olive);margin-bottom:26px;}
.zap-thanks__title{
  font-family:var(--display);
  font-size:clamp(34px,4.2vw,56px);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.25;
  color:var(--ink);
}
/*
 * Output of woocommerce_before_thankyou. For Paynow this is the "potwierdź
 * płatność BLIK" screen, which the plugin styles only as far as centring its
 * picture; it stands in for the hero while the payment is being confirmed.
 */
.zap-thanks__before{text-align:center;padding:72px 0 30px;}
.zap-thanks__before + .zap-thanks{padding-top:40px;}
.paynow-confirm-blik h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(28px,3.4vw,44px);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.25;
  color:var(--ink);
  margin:0 0 30px;
}
.paynow-confirm-blik img{display:block;max-width:min(240px,70%);height:auto;margin:0 auto;}

.zap-thanks__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  gap:var(--gap);
  padding-bottom:60px;
  align-items:start;
}
/* The order column carries a table and two addresses; "co dalej" is three lines. */
@media (min-width:901px){
  .zap-thanks__cols{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);}
}
.zap-thanks__order{border:1px solid var(--rule);padding:40px;}
.zap-thanks__next{background:var(--cream);padding:40px;}
.zap-thanks__steps{display:flex;flex-direction:column;gap:20px;font:300 13px/1.9 var(--body);color:var(--ink-2);}
.zap-thanks__steps > div{display:flex;gap:14px;}
.zap-thanks__steps span:first-child{color:var(--olive);}
.zap-thanks__related{padding-top:70px;}

/*
 * Woo's order-details and customer-details markup. These class names are
 * Woo's, not ours, and the same markup renders on the confirmation page and in
 * Moje konto -> zamówienia - so these rules are deliberately unscoped and dress
 * both. Only the few rules below that are scoped to .zap-thanks__order are
 * specific to the narrow confirmation column. Anything a plugin hooks into the
 * order table (Polkurier's pickup point, our gift message) lands in here too.
 */

/* The column already carries "Zamówienie #123". */
.zap-thanks__order .woocommerce-order-details__title{display:none;}

.woocommerce-order-details .shop_table{
  width:100%;
  border-collapse:collapse;
  margin:0;
  font:300 13px/1.7 var(--body);
  color:var(--ink-2);
}
.woocommerce-order-details .shop_table th,
.woocommerce-order-details .shop_table td{
  text-align:left;
  padding:14px 0;
  vertical-align:top;
  font-weight:400;
}
.woocommerce-order-details .shop_table td:last-child,
.woocommerce-order-details .shop_table tfoot td{text-align:right;white-space:nowrap;}
.woocommerce-order-details .shop_table thead th{
  padding-top:0;
  border-bottom:1px solid var(--rule);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.woocommerce-order-details .shop_table thead th:last-child{text-align:right;}
.woocommerce-order-details .shop_table tbody tr{border-bottom:1px solid var(--rule);}
.woocommerce-order-details .shop_table tbody a{color:var(--ink);border-bottom:1px solid var(--rule-2);}
.woocommerce-order-details .product-quantity{font-weight:400;color:var(--muted-2);}
.woocommerce-order-details .shop_table tfoot th{color:var(--muted-2);}
.woocommerce-order-details .shop_table tfoot tr:last-child th,
.woocommerce-order-details .shop_table tfoot tr:last-child td{
  padding-bottom:0;
  font-size:17px;
  color:var(--ink);
}

/* "przez Paczkomaty InPost", and the point Polkurier appends under it. */
.woocommerce-order-details .shipped_via{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--muted-2);
}
.woocommerce-order-details .shop_table .italic{font-style:italic;color:var(--muted-2);}
.woocommerce-order-details .shop_table td strong{font-weight:400;color:var(--ink);}

/* Addresses. Stacked, because this column is not wide enough for two. */
.woocommerce-customer-details{margin-top:38px;}
.zap-thanks__order .woocommerce-columns--addresses{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}
.woocommerce-column__title{
  font-family:var(--display);
  font-size:12px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin:0 0 12px;
}
.woocommerce-customer-details address{
  font:300 13px/1.9 var(--body);
  font-style:normal;
  color:var(--ink-2);
  border:0;
  padding:0;
}
.woocommerce-customer-details address p{margin:6px 0 0;}
.woocommerce-customer-details address strong{font-weight:400;color:var(--ink);}
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email{color:var(--muted-2);}

/* ==========================================================================
   10. Contact / generic pages
   ========================================================================== */

.zap-page__head{text-align:center;padding:72px 0 70px;}
.zap-page__title{
  font-family:var(--display);
  font-size:clamp(40px,5vw,72px);
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.15;
  color:var(--ink);
}
.zap-page__lede{
  max-width:60ch;
  margin:26px auto 0;
  font:300 15px/2.1 var(--body);
  color:var(--muted-2);
}
.zap-page__lede p{margin:0 0 14px;}
.zap-page__lede p:last-child{margin-bottom:0;}

.zap-page__body{max-width:760px;margin:0 auto;padding-bottom:120px;font:300 15px/2.1 var(--body);color:var(--ink-2);}
.zap-page__body p{margin:0 0 26px;}
.zap-page__body h2,.zap-page__body h3{
  font-family:var(--display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  margin:48px 0 20px;
}
.zap-page__body h2{font-size:24px;}
.zap-page__body h3{font-size:18px;}
.zap-page__body ul,.zap-page__body ol{margin:0 0 26px;padding-left:20px;}
.zap-page__body li{margin-bottom:10px;}
.zap-page__body a{color:var(--olive);border-bottom:1px solid var(--rule-2);}
.zap-page__body strong{font-weight:400;color:var(--ink);}
/* The statutory withdrawal form on /zwroty/ - meant to be copied out. */
.zap-page__body blockquote{
  margin:0 0 26px;
  padding:26px 28px;
  background:var(--cream-2);
  border:1px solid var(--rule);
  font-size:16px;
  line-height:2;
}
.zap-page__body blockquote p{margin:0 0 12px;}
.zap-page__body blockquote p:last-child{margin-bottom:0;}

.zap-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:var(--gap);padding-bottom:120px;}
.zap-contact__list{display:flex;flex-direction:column;gap:34px;}
.zap-contact__item{border-bottom:1px solid var(--rule);padding-bottom:22px;}
.zap-contact__label{font:300 11px var(--body);letter-spacing:.2em;color:var(--faint);margin-bottom:12px;}
.zap-contact__value{font:300 15px var(--body);color:var(--ink);}
.zap-contact__media{margin-top:44px;position:relative;aspect-ratio:1;background:var(--sand);}

/*
 * O nas: a square group photo cropped into a tall panel. Centring it takes the
 * crop out of the middle and cuts the faces off at the top.
 */
.page-o-nas .zap-split__media .zap-cover{object-position:top;}
.zap-contact__form-title{
  font-family:var(--display);
  font-size:22px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:34px;
}

/* ==========================================================================
   11. Kolekcje
   ========================================================================== */

/* Top padding matches .zap-page__head, so Kolekcje starts level with O nas
   and Kontakt - it used to run from 80px to 130px with the viewport. */
.zap-collection__head{text-align:center;padding:72px 0 56px;}

/*
 * A little tighter again on a phone, where there is far less screen to give
 * away. padding-top only: the gap between each heading and what follows it is
 * the same as on desktop.
 *
 * After all the heading rules on purpose - they sit at the same specificity, so
 * this has to come later to win. The article heading is not here; it already
 * carries its own, smaller, mobile value.
 */
@media (max-width:900px){
  .zap-page__head,
  .zap-collection__head,
  .zap-thanks,
  .zap-thanks__before{padding-top:56px;}
  .zap-shop__head{padding-top:50px;}
  .zap-checkout__head{padding-top:46px;}
}
.zap-collection__title{
  font-family:var(--display);
  font-size:clamp(44px,5.6vw,78px);
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.1;
  color:var(--ink);
}
.zap-collection__meta{font:300 11px var(--body);letter-spacing:.24em;color:var(--faint);margin-top:24px;}
.zap-collection__intro{font:300 16px/2 var(--body);color:var(--ink-2);max-width:560px;margin:28px auto 0;}
.zap-collection__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:56px;
  padding-bottom:140px;
}

/* Search form + 404 */

/*
 * The panel the "szukaj" trigger drops under the nav bar. .zap-nav is
 * position:sticky, which is a positioned element, so this anchors to it
 * without needing position:relative - and because it is out of flow, opening
 * it leaves the height of the bar (and therefore the hero) untouched.
 */
.zap-nav__search-panel{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  box-shadow:0 20px 30px -26px rgba(46,43,38,.55);
}
.zap-nav__search-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:24px var(--pad) 30px;
}
.zap-nav__search[aria-expanded="true"]{color:var(--ink);}


.zap-search label{
  display:block;
  font:300 11px var(--body);
  letter-spacing:.18em;
  color:var(--muted);
  margin-bottom:12px;
  text-transform:lowercase;
}
.zap-search__row{display:flex;flex-wrap:wrap;gap:12px;}
.zap-search input[type="search"]{
  flex:1;
  min-width:200px;
  border:0;
  border-bottom:1px solid var(--field);
  background:none;
  padding:12px 0;
  font:300 15px var(--body);
  color:var(--ink);
  outline:none;
}
.zap-search input[type="search"]:focus{border-bottom-color:var(--olive);}
.zap-search input[type="search"]::placeholder{color:var(--faint);}
.zap-search .zap-btn{padding:14px 32px;}

.zap-404{
  max-width:620px;
  margin:0 auto;
  padding-bottom:90px;
  text-align:center;
}
.zap-404__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:56px;}
.zap-404__search{
  max-width:520px;
  margin:0 auto;
  text-align:left;
  border-top:1px solid var(--line);
  padding-top:36px;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.zap-footer{background:var(--bg);padding:0 var(--pad);}
.zap-badges{
  max-width:1100px;
  margin:0 auto;
  padding:110px 0 100px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:60px;
}
.zap-badge{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;}
.zap-badge__icon{
  width:92px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--olive);
}
.zap-badge__icon img{width:72px;height:auto;}
.zap-badge__label{
  font:400 15px var(--body);
  letter-spacing:.16em;
  line-height:1.7;
  color:#2b2b2b;
  text-transform:lowercase;
  text-wrap:pretty;
}
.zap-badge__desc{
  max-width:280px;
  font:300 12px/1.9 var(--body);
  color:var(--muted);
  padding:0 22px 18px;
  text-wrap:pretty;
}

.zap-footer__cols{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:48px;
  padding:56px 0;
  border-top:1px solid var(--line);
}
.zap-footer__brand{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;width:fit-content;}
/*
 * width:auto and align-self matter here: .zap-footer__brand is a column flex
 * box, so the default align-items:stretch blows the sygnet out to the column
 * width - 26px tall and as wide as the wordmark. The nav copy of this rule
 * already carried width:auto, which is why only the footer was affected.
 */
.zap-footer__brand img{height:26px;width:auto;align-self:flex-start;}
.zap-footer__wordmark{font-family:var(--display);font-size:19px;letter-spacing:.3em;color:var(--ink);}
.zap-footer__tagline{font:300 13px/1.9 var(--body);color:var(--muted);max-width:250px;}
.zap-footer__title{font:400 12px var(--body);letter-spacing:.14em;color:var(--ink);margin-bottom:20px;}
.zap-footer__list{display:flex;flex-direction:column;gap:13px;font:300 13px var(--body);color:var(--muted);margin:0;padding:0;list-style:none;}
.zap-footer__social{display:flex;flex-wrap:wrap;gap:14px 20px;font:300 13px var(--body);color:var(--muted);}
.zap-footer__social a{display:flex;align-items:center;gap:8px;}
.zap-newsletter{display:flex;border-bottom:1px solid var(--field);padding-bottom:11px;margin-bottom:22px;}
.zap-newsletter input{flex:1;border:0;background:none;font:300 13px var(--body);color:var(--ink);outline:none;}
.zap-newsletter input::placeholder{color:var(--faint);}
.zap-newsletter button{background:none;border:0;color:var(--olive);cursor:pointer;font:300 12px var(--body);letter-spacing:.14em;}
.zap-footer__legal{
  max-width:var(--maxw);
  margin:0 auto;
  padding:22px 0 30px;
  border-top:1px solid var(--line-3);
  font:300 11px var(--body);
  letter-spacing:.1em;
  color:var(--faint);
  display:flex;
  flex-wrap:wrap;
  gap:14px 20px;
  align-items:center;
  justify-content:space-between;
}
/*
 * The payment mark. Height only, width auto: the file is 1378x365 and the
 * attributes on it hold the row steady while it loads.
 */
.zap-footer__paynow{height:22px;width:auto;opacity:.75;}
.zap-footer__paynow:hover{opacity:1;}

/* ==========================================================================
   13. WooCommerce resets + notices
   ========================================================================== */

.woocommerce-notices-wrapper{display:none;}
.zap-toast__action{
  display:inline-block;
  margin-left:14px;
  color:var(--olive);
  border-bottom:1px solid var(--rule-2);
  white-space:nowrap;
}
.zap-toasts{
  position:fixed;
  z-index:9999;
  top:calc(var(--nav-h) + 20px);
  right:clamp(16px,3vw,48px);
  width:min(420px,calc(100vw - 32px));
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  list-style:none;
  margin:0 0 30px;
  padding:18px 24px;
  border-left:2px solid var(--olive);
  background:var(--cream);
  font:300 13px/1.9 var(--body);
  color:var(--ink-2);
}
.woocommerce-error{border-left-color:#a8443a;}
.woocommerce-error li{list-style:none;}
.woocommerce-message .button,
.woocommerce-info .button{float:right;font:300 12px var(--body);letter-spacing:.14em;color:var(--olive);background:none;border:0;cursor:pointer;}
.zap-toast{
  position:relative;
  margin:0;
  padding:18px 50px 18px 24px;
  box-shadow:0 14px 36px rgba(46,43,38,.16);
  pointer-events:auto;
  animation:zap-toast-in .22s ease-out both;
}
.zap-toast.is-leaving{animation:zap-toast-out .22s ease-in both;}
.zap-toast .button{float:none;margin:0 0 0 12px;}
.zap-toast__close{
  position:absolute;
  top:9px;
  right:11px;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  background:none;
  color:var(--muted);
  font:300 25px/1 var(--body);
  cursor:pointer;
}
.zap-toast__close:hover{color:var(--ink);}
@keyframes zap-toast-in{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
@keyframes zap-toast-out{to{opacity:0;transform:translateY(-10px);}}

.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.zap-blocking-notice{
  max-width:760px;
  margin:120px auto;
  padding:0 var(--pad);
  text-align:center;
}

:focus-visible{outline:2px solid var(--olive);outline-offset:3px;}

/* ==========================================================================
   14. Carrier plugin output at checkout
   ========================================================================== */

/*
 * The theme drops every WooCommerce stylesheet (woocommerce_enqueue_styles ->
 * __return_empty_array), which is right - Woo's three sheets are ~90KB and the
 * design overrides all of it. The cost is that any plugin rendering Woo's own
 * classes arrives with no styling at all.
 *
 * Polkurier's point picker is exactly that: a
 * <button class="button alt polkurier-shippment-parcel-machine-button">, and
 * its own public stylesheet is an empty stub. Everything below is appearance
 * Woo used to supply. The generic .button rules are scoped to the shipping
 * block so a future carrier plugin gets the same treatment for free.
 */

.zap-step__error{
  margin:14px 0 0;
  padding:12px 16px;
  border-left:2px solid var(--olive-deep);
  background:var(--cream);
  font:300 13px/1.7 var(--body);
  color:var(--ink-2);
}

.polkurier-shippment-container{margin:14px 0 2px;}

[data-zap-shipping-source] .button,
.polkurier-shippment-parcel-machine-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:1px solid var(--olive-dark);
  color:var(--olive-dark);
  padding:12px 26px;
  font:300 12px var(--body);
  letter-spacing:.16em;
  text-align:center;
  cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
[data-zap-shipping-source] .button:hover,
.polkurier-shippment-parcel-machine-button:hover{
  background:var(--olive-dark);
  color:var(--bg);
}

/*
 * The plugin ships this container with class="hidden" and drops the class once
 * a point is chosen. Woo's stylesheet defined .hidden; without it the empty box
 * sits open under the button from the moment checkout loads.
 */
[data-zap-shipping-source] .hidden,
.polkurier-shippment-container .hidden{display:none !important;}

#polkurier-shipping-label-container{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid var(--rule);
  background:var(--cream-2);
  font:300 13px/1.7 var(--body);
  color:var(--ink-2);
}
#polkurier-shipping-label-point-id{
  font:300 11px var(--body);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--olive);
  margin-bottom:6px;
}

/* The map opens in a dialog from the carrier's CDN; the sticky header must not
   sit on top of it. */
.polkurier-points-map,
.polkurier-map-dialog,
dialog[open]{z-index:400;}

/* ==========================================================================
   15. Motion
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .zap-card__hover{transition:none;}
}

/* ==========================================================================
   16. Dziennik - blog index, archives and the article
   ========================================================================== */

.zap-journal__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));
  gap:var(--gap);
  padding-bottom:70px;
}
.zap-post-card__link{display:flex;flex-direction:column;gap:14px;}
.zap-post-card__media{
  width:100%;
  aspect-ratio:3/2;
  background:var(--sand);
  overflow:hidden;
  margin-bottom:6px;
}
.zap-post-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.zap-post-card__link:hover .zap-post-card__media img{transform:scale(1.03);}
.zap-post-card__media img{transition:transform .6s ease;}
.zap-post-card__meta{
  font:300 11px var(--body);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.zap-post-card__title{
  font-family:var(--display);
  font-size:20px;
  font-weight:400;
  letter-spacing:.1em;
  line-height:1.45;
  text-transform:uppercase;
  color:var(--ink);
  margin:0;
}
.zap-post-card__excerpt{
  font:300 16px/1.95 var(--body);
  color:var(--ink-2);
  margin:0;
  max-width:52ch;
}
.zap-post-card__more{
  font:300 11px var(--body);
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--olive);
  border-bottom:1px solid var(--rule-2);
  padding-bottom:3px;
  align-self:start;
}
.zap-post-card__link:hover .zap-post-card__more{border-bottom-color:var(--olive);}

/* Article */
.zap-article__head{text-align:center;padding:72px 0 44px;}
.zap-article__meta{
  font:300 11px var(--body);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--olive);
  margin-bottom:24px;
}
.zap-article__title{
  font-family:var(--display);
  font-size:clamp(32px,4vw,56px);
  font-weight:400;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.2;
  color:var(--ink);
  margin:0;
}
.zap-article__lede{
  max-width:58ch;
  margin:28px auto 0;
  font:300 16px/2 var(--body);
  color:var(--muted-2);
}
.zap-article__cover{margin:0 0 60px;}
.zap-article__cover img{width:100%;height:auto;display:block;}
.zap-article__cover figcaption{
  margin-top:12px;
  font:300 11px/1.9 var(--body);
  letter-spacing:.06em;
  color:var(--muted-2);
  text-align:center;
}
/* The reading column comes from .zap-page__body; only the spacing differs. */
.zap-article__body{padding-bottom:50px;}
.zap-article__body img{max-width:100%;height:auto;}
.zap-article__body figure{margin:34px 0;}
.zap-article__body figcaption{
  margin-top:10px;
  font:300 11px/1.9 var(--body);
  color:var(--muted-2);
}
.zap-article__pages{font:300 12px var(--body);letter-spacing:.1em;color:var(--muted-2);}
.zap-article__tags{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-bottom:40px;
}
.zap-article__tags a{
  font:300 11px var(--body);
  letter-spacing:.14em;
  text-transform:lowercase;
  color:var(--muted-2);
  border:1px solid var(--rule);
  padding:7px 14px;
}
.zap-article__tags a:hover{border-color:var(--olive);color:var(--olive);}
.zap-article__nav{
  max-width:760px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:30px;
  border-top:1px solid var(--rule);
  padding:36px 0 0;
}
.zap-article__nav-side{display:flex;flex-direction:column;gap:8px;}
.zap-article__nav-side--next{text-align:right;}
.zap-article__nav-label{
  font:300 10px var(--body);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.zap-article__nav-side a{
  font-family:var(--display);
  font-size:16px;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.6;
  color:var(--ink);
}
.zap-article__nav-side a:hover{color:var(--olive);}
.zap-article__back{max-width:760px;margin:44px auto 0;text-align:center;}
.zap-article .zap-reviews{max-width:760px;margin:0 auto;padding:70px 0 120px;}

@media (max-width:900px){
  .zap-article__head{padding:48px 0 34px;}
  .zap-article__cover{margin-bottom:40px;}
  .zap-article__nav-side--next{text-align:left;}
}

/* polkurier */
.pk-bg-pk{
  background-color: #4b5320;
  color: #FFF;
}
.pk-bg-pk:hover{
  background-color: #24290b;
}

.pk-border-active-pk{
  border-color: #4b5320;
}

/* Woo offeride */
.woocommerce-privacy-policy-text{
  font-size: 12px;
}

.woocommerce-terms-and-conditions-checkbox-text{
  font-size: 16px !important;
}