/*
Theme Name: Wypadkowa
Theme URI: https://wezlarium.pl
Author: Mihu
Author URI: https://wezlarium.pl
Description: Autorski motyw dla węzłarium — ręcznie plecione bransoletki z muliny. Surowy minimalizm: czerń na bieli, Anonymous Pro + Work Sans, pełne wsparcie WooCommerce.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wypadkowa
Tags: e-commerce, minimal, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
WC requires at least: 8.0
WC tested up to: 9.1
*/

/* ==========================================================================
   Tokeny — zmierzone 1:1 z referencji
   ========================================================================== */

:root{
  --background: #ffffff;
  --text:       #000000;
  --primary:    #000000;
  --accent:     #000000;
  --secondary:  #f2f2f2;

  --line-05: rgba(0,0,0,.05);
  --line-10: rgba(0,0,0,.10);
  --tint-30: rgba(242,242,242,.30);
  --tint-50: rgba(242,242,242,.50);

  --mono: 'Anonymous Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shell: 80rem;   /* max-w-7xl */
  --pad:   1.5rem;  /* px-6 */
  --sec:   6rem;    /* py-24 */
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--background);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.5;
  font-weight:400;
  text-transform:lowercase;
  padding-top:4.5rem;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--mono);
  font-weight:400;
  line-height:1.25;
  letter-spacing:normal;
  text-transform:lowercase;
  margin:0;
}

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

/* ==========================================================================
   Elementy wspólne
   ========================================================================== */

.shell{ max-width:var(--shell); margin-inline:auto; }

.section{ padding:var(--sec) var(--pad); }
.section--tint{
  background:var(--tint-30);
  border-top:1px solid var(--line-05);
  border-bottom:1px solid var(--line-05);
}
.section--tint-strong{ background:var(--tint-50); }
.section--dark{ background:var(--primary); color:#fff; }
.section--center{ padding:8rem var(--pad); text-align:center; }
.section--edge{ border-top:1px solid var(--line-10); }

.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.875rem;
  line-height:1.25rem;
  text-transform:lowercase;
  letter-spacing:normal;
  padding:.75rem 2rem;
  border:1px solid var(--primary);
  border-radius:0;
  background:transparent;
  color:var(--primary);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.btn:hover{ background:var(--primary); color:#fff; }

.btn--invert{ background:#fff; color:var(--primary); border-color:#fff; }
.btn--invert:hover{ background:var(--secondary); color:var(--primary); }

/* ==========================================================================
   Nagłówek
   ========================================================================== */

.site-header{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:50;
  background:var(--background);
  border-bottom:1px solid var(--line-05);
}
.site-header .shell{
  padding:1rem var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.brand{ display:flex; align-items:center; gap:.75rem; }
.brand img{ height:40px; width:auto; object-fit:contain; }
.brand span{ font-family:var(--mono); font-size:1.5rem; }

.nav{ display:flex; align-items:center; gap:2rem; font-size:1rem; }
.nav a{ padding-bottom:2px; border-bottom:1px solid transparent; transition:border-color .2s ease; }
.nav a:hover, .nav a[aria-current="page"]{ border-bottom-color:var(--primary); }
.nav .cart{
  border:1px solid var(--primary);
  padding:.75rem 1.5rem;
  font-size:.875rem;
}
.nav .cart:hover{ background:var(--primary); color:#fff; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  min-height:80vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-inline:var(--pad);
  max-width:var(--shell);
  margin:0 auto 5rem;
}
.hero h1{ font-size:2.50rem; line-height:1.25; margin-bottom:1.5rem; }
.hero .sub{ font-size:1.25rem; line-height:1.75rem; margin-bottom:2rem; }
.hero .btn{ align-self:flex-start; }

/* ==========================================================================
   Czarny panel z ogłoszeniem
   ========================================================================== */

.announce{ padding:4rem var(--pad); background:var(--background); }
@media (min-width:1024px){ .announce{ padding:var(--sec) var(--pad); } }

.announce__panel{
  background:var(--primary);
  color:#fff;
  width:100%;
  border-radius:0;
  padding:3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
@media (min-width:768px){ .announce__panel{ padding:6rem; } }

.announce__panel h2{ font-size:1.875rem; line-height:1.25; margin-bottom:1.5rem; }
@media (min-width:768px){ .announce__panel h2{ font-size:3rem; } }
@media (min-width:1024px){ .announce__panel h2{ font-size:3.75rem; } }

.announce__panel p{ margin-bottom:2rem; }

/* ==========================================================================
   Sekcje treściowe
   ========================================================================== */

.section h2{ font-size:1.875rem; margin-bottom:2rem; }
.section .lead{ font-size:1.25rem; line-height:1.75rem; max-width:60ch; }

.section-head{ margin-bottom:2rem; }
.section-head h2{ margin-bottom:.5rem; }

.process .shell{ display:grid; gap:4rem; align-items:center; }
@media (min-width:768px){ .process .shell{ grid-template-columns:1fr 1fr; } }

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:3rem; }
.steps li{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:start; }
.steps .num{ font-family:var(--mono); font-size:1.25rem; opacity:.5; }
.steps h3{ font-size:1.25rem; margin-bottom:.25rem; }
.steps p{ opacity:.7; }

.process img{ width:100%; object-fit:cover; }

.values{ display:grid; gap:3rem; text-align:center; }
@media (min-width:768px){ .values{ grid-template-columns:repeat(3,1fr); } }
.values h3{ font-size:1.25rem; margin-bottom:1rem; }

.quotes{ display:grid; gap:2rem; }
@media (min-width:768px){ .quotes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .quotes{ grid-template-columns:repeat(3,1fr); } }
.quotes blockquote{ margin:0; }
.quotes p{ margin-bottom:1.5rem; }
.quotes cite{ font-style:normal; font-size:.875rem; opacity:.6; }

.quotes-head{ text-align:center; margin-bottom:4rem; }

.section--center h2{ font-size:2.25rem; margin-bottom:2rem; }
@media (min-width:768px){ .section--center h2{ font-size:3rem; } }
.section--center p{ max-width:48ch; margin:0 auto 2rem; }

.split{ display:grid; gap:4rem; }
@media (min-width:768px){ .split{ grid-template-columns:1fr 1fr; } }
.split h2{ font-size:1.5rem; margin-bottom:1.5rem; }

.form{ display:grid; gap:1.5rem; }
.form label{ display:grid; gap:.5rem; font-size:.875rem; }
.form input,
.form textarea{
  font-family:var(--sans);
  font-size:1rem;
  color:var(--text);
  background:transparent;
  border:1px solid var(--line-10);
  border-radius:0;
  padding:.75rem;
}
.form input:focus,
.form textarea:focus{ outline:none; border-color:var(--primary); }
.form textarea{ resize:vertical; min-height:7rem; }
.form .btn{ justify-self:start; }

.social ul{ list-style:none; display:flex; flex-wrap:wrap; gap:2rem; margin:1.5rem 0 0; padding:0; }
.social a{ border-bottom:1px solid var(--primary); padding-bottom:2px; }

/* ==========================================================================
   Stopka
   ========================================================================== */

.site-footer{ padding:3rem var(--pad); border-top:1px solid var(--line-05); }
.site-footer .shell{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  font-size:.875rem;
}
.site-footer .nav{ font-size:.875rem; gap:1.5rem; }

/* ==========================================================================
   WordPress
   ========================================================================== */

.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed; top:.75rem; left:.75rem;
  width:auto; height:auto; clip:auto; z-index:9999;
  background:var(--primary); color:#fff; padding:.75rem 1.25rem;
}

.admin-bar .site-header{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .site-header{ top:46px; } }

.alignleft{ float:left; margin:0 1.5rem 1rem 0; }
.alignright{ float:right; margin:0 0 1rem 1.5rem; }
.aligncenter{ display:block; margin-inline:auto; }
.wp-caption-text{ font-size:.875rem; opacity:.6; margin-top:.5rem; }

.entry-content{ text-transform:none; }
.entry-content h1,.entry-content h2,.entry-content h3{ text-transform:lowercase; }

.page-head{
  max-width:var(--shell);
  margin-inline:auto;
  padding:var(--sec) var(--pad) 2rem;
}
.page-head h1{ font-size:2.25rem; }
.page-head .sub{ font-size:1.25rem; margin-top:1rem; }

.entry{
  max-width:70ch;
  margin-inline:auto;
  padding:0 var(--pad) var(--sec);
}
.entry p{ margin-bottom:1.5rem; }
.entry h2{ font-size:1.875rem; margin:3rem 0 1rem; }
.entry h3{ font-size:1.25rem; margin:2rem 0 .75rem; }
.entry a{ border-bottom:1px solid var(--primary); }
.entry ul,.entry ol{ margin:0 0 1.5rem 1.25rem; padding:0; }

.pagination{
  max-width:var(--shell);
  margin-inline:auto;
  padding:0 var(--pad) var(--sec);
  display:flex; gap:.75rem; flex-wrap:wrap;
}
.pagination .page-numbers{ border:1px solid var(--line-10); padding:.6rem 1rem; font-size:.875rem; }
.pagination .current,
.pagination .page-numbers:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ==========================================================================
   WooCommerce
   ========================================================================== */

.woocommerce-breadcrumb{
  max-width:var(--shell);
  margin-inline:auto;
  padding:1rem var(--pad) 0;
  font-size:.875rem;
  opacity:.6;
}

.woo-wrap{
  max-width:var(--shell);
  margin-inline:auto;
  padding:0 var(--pad) var(--sec);
}

.woocommerce ul.products,
ul.products{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
}
@media (min-width:768px){
  .woocommerce ul.products, ul.products{ grid-template-columns:repeat(3,1fr); }
}

.woocommerce ul.products li.product{ margin:0; width:auto; float:none; text-align:left; }

.woocommerce ul.products li.product .product-thumb{ display:block; overflow:hidden; }
.woocommerce ul.products li.product a img{
  margin:0;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:0;
  box-shadow:none;
  background:var(--secondary);
  transition:opacity .3s ease;
}
.woocommerce ul.products li.product:hover a img{ opacity:.85; }

.woocommerce ul.products li.product .meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-top:1rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--mono);
  font-size:1.25rem;
  font-weight:400;
  line-height:1.25;
  padding:0;
  text-transform:lowercase;
}
.woocommerce ul.products li.product .price{
  font-family:var(--sans);
  font-size:1rem;
  color:var(--text);
  margin:0;
  white-space:nowrap;
}
.woocommerce ul.products li.product .price del{ opacity:.4; margin-right:.4rem; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  display:inline-block;
  margin-top:1rem;
  padding:.75rem 2rem;
  background:transparent;
  color:var(--primary);
  border:1px solid var(--primary);
  border-radius:0;
  font-family:var(--sans);
  font-size:.875rem;
  font-weight:400;
  letter-spacing:normal;
  text-transform:lowercase;
  line-height:1.25rem;
  transition:background .2s ease, color .2s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover{
  background:var(--primary);
  color:#fff;
}

.woocommerce span.onsale{
  background:var(--primary);
  color:#fff;
  border-radius:0;
  font-family:var(--sans);
  font-size:.75rem;
  letter-spacing:normal;
  text-transform:lowercase;
  min-width:0; min-height:0;
  padding:.3rem .75rem;
  line-height:1.2;
  top:.75rem; left:.75rem;
  margin:0;
}

.woocommerce div.product{ padding-top:2rem; }
.woocommerce div.product .product_title{ font-size:2.25rem; }
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--sans);
  font-size:1.25rem;
  color:var(--text);
}
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border-bottom-color:var(--line-10); }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent; border:0; border-radius:0; padding:0 1.5rem 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--sans); font-size:.875rem; font-weight:400; opacity:.6;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ opacity:1; }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
  background:var(--primary);
  color:#fff;
  border:1px solid var(--primary);
  border-radius:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:.875rem;
  letter-spacing:normal;
  text-transform:lowercase;
  padding:.75rem 2rem;
  transition:background .2s ease, color .2s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background:transparent;
  color:var(--primary);
}

.woocommerce .quantity .qty{
  border:1px solid var(--line-10);
  background:transparent;
  border-radius:0;
  padding:.7rem .4rem;
  font-family:var(--sans);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-top-color:var(--primary);
  background:var(--secondary);
  border-radius:0;
  font-size:.9375rem;
}
.woocommerce-message::before,
.woocommerce-info::before{ color:var(--primary); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
  border:1px solid var(--line-10);
  border-radius:0;
  background:transparent;
  padding:.75rem;
  font-family:var(--sans);
  font-size:1rem;
  height:auto;
}
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{ border-radius:0; border-color:var(--line-10); }
.woocommerce table.shop_table{ font-size:.9375rem; }

.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3{
  font-family:var(--mono);
  font-weight:400;
  font-size:1.5rem;
}

.widget-title{
  font-family:var(--mono);
  font-size:1.25rem;
  font-weight:400;
  margin:0 0 1rem;
}

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