/*
Theme Name: wild-concept
Theme URI: https://sklep.wild-concept.com
Author: wild-concept
Description: Dedykowany, minimalistyczny motyw WooCommerce dla wild-concept — panele elastyczne. Instrument Sans, papierowe tło, pasek 2,5 mm w skali 1:1, kropka słońca.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
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: wild-concept
WC requires at least: 8.0
*/

:root{
  --paper:#FCFBF8;
  --ink:#161613;
  --grey:#8C8A82;
  --hair:#DEDCD3;
  --sun:#E8A020;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--sun);color:var(--ink)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{
  font-family:'Instrument Sans',sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  font-feature-settings:'tnum';
}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:opacity .2s}
a:hover{opacity:.55}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:3px;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background:none}
img{max-width:100%;height:auto}
.col{width:min(680px,88vw);margin-inline:auto}
.col-wide{width:min(980px,88vw);margin-inline:auto}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* --- słońce: jedyny kolor, jedyny ruch --- */
#sun{
  position:fixed;
  right:calc(6vw - 5px);
  top:12vh;
  width:11px;height:11px;border-radius:50%;
  background:var(--sun);
  z-index:5;
  will-change:transform;
}

/* --- header --- */
.site-header{
  display:flex;justify-content:space-between;align-items:baseline;
  width:min(980px,88vw);margin-inline:auto;
  padding:34px 0;
}
.site-header .mark{font-weight:500;text-decoration:none}
.site-header nav{display:flex;gap:28px;font-size:14px;flex-wrap:wrap}
.site-header nav a.current{opacity:.55}
.site-header .cart-ct{font-feature-settings:'tnum'}

/* --- hero --- */
.hero{
  min-height:88svh;
  display:flex;flex-direction:column;justify-content:center;
}
h1{
  font-weight:400;
  font-size:clamp(2.4rem,6.2vw,4.6rem);
  line-height:1.12;
  letter-spacing:-.015em;
  max-width:16ch;
}
.hero .nums{
  margin-top:6vh;
  font-size:15px;
  color:var(--grey);
  display:flex;gap:2.4em;flex-wrap:wrap;
}
.hero .nums b{color:var(--ink);font-weight:500}

/* --- sekcje --- */
section{padding:22vh 0}
section.tight{padding:14vh 0}
h2{
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.3;
  letter-spacing:-.01em;
  max-width:26ch;
  margin-bottom:1.4em;
}
p{max-width:56ch;margin-bottom:1.2em}
p.grey{color:var(--grey)}

/* --- 2,5 mm w skali 1:1 --- */
.scale-note{margin-bottom:28px}
.mm-bar{
  width:100%;
  height:2.5mm;             /* rzeczywista grubość panelu */
  background:var(--ink);
}
.scale-caption{
  margin-top:28px;
  font-size:15px;color:var(--grey);
  display:flex;justify-content:space-between;gap:2em;flex-wrap:wrap;
}

/* --- krzywa 30° --- */
.flex-fig{margin:8vh 0 0}
.flex-fig svg{width:100%;height:auto;display:block}
.flex-fig .cap{margin-top:22px;font-size:15px;color:var(--grey)}

/* --- produkty: lista, nie karty --- */
.plist{border-top:1px solid var(--ink);list-style:none}
.prow{
  display:grid;
  grid-template-columns:1.6fr .8fr .8fr .8fr auto;
  gap:1.5em;
  align-items:baseline;
  padding:26px 0;
  border-bottom:1px solid var(--hair);
  text-decoration:none;
}
.prow:hover{opacity:1}
.prow:hover .go{transform:translateX(6px)}
.prow .name{font-weight:500}
.prow .d{color:var(--grey);font-size:15px}
.prow .price{text-align:right;white-space:nowrap}
.prow .price .woocommerce-Price-amount{font-weight:400}
.prow .go{transition:transform .25s;font-weight:400;display:inline-block}
.phead{
  display:grid;
  grid-template-columns:1.6fr .8fr .8fr .8fr auto;
  gap:1.5em;
  padding:0 0 12px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
.pnote{margin-top:26px;font-size:15px;color:var(--grey);max-width:52ch}

/* --- specyfikacja --- */
.spec{border-top:1px solid var(--ink)}
.spec > div{
  display:grid;grid-template-columns:1fr 1fr;gap:2em;
  padding:15px 0;border-bottom:1px solid var(--hair);
  font-size:15.5px;
}
.spec dt{color:var(--grey)}
.spec dd b{font-weight:500}
.spec dd small{color:var(--grey);margin-left:.6em;font-size:13px}

/* --- footer --- */
.site-footer{padding:14vh 0 6vh}
.foot-top{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2em 3em;flex-wrap:wrap;
  padding-bottom:5vh;border-bottom:1px solid var(--hair);
}
.foot-name{font-size:15px;font-weight:500;color:var(--ink);margin:0 0 6px}
.foot-tag{font-size:14px;color:var(--grey);margin:0;max-width:none}
.foot-social{display:flex;gap:6px;align-items:center}
.foot-social a{
  color:var(--grey);display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;text-decoration:none;transition:color .2s,opacity .2s;
}
.foot-social a:hover{color:var(--ink);opacity:1}
.foot-social svg{width:18px;height:18px;display:block}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:.8em 2em;flex-wrap:wrap;
  padding-top:4vh;
}
.foot-bottom p{font-size:14px;color:var(--grey);margin:0;max-width:none}
.foot-legal a{text-decoration:underline}

/* =========================================================
   Strony / wpisy
   ========================================================= */
.page-plain{padding:10vh 0 16vh}
.page-plain .entry-title{margin-bottom:.8em}
.entry-content h2{margin-top:1.6em}
.entry-content ul,.entry-content ol{padding-left:1.2em;margin-bottom:1.2em;max-width:56ch}

.bloglist{border-top:1px solid var(--ink);list-style:none}
.bloglist li{padding:22px 0;border-bottom:1px solid var(--hair)}
.bloglist a{text-decoration:none;font-weight:500}
.bloglist .meta{font-size:13px;color:var(--grey);margin-top:2px}

/* =========================================================
   Produkt pojedynczy — styl wild-flex
   ========================================================= */
.crumb{padding:6vh 0 0}
.crumb a{text-decoration:none;color:var(--grey)}
.crumb a:hover{color:var(--ink);opacity:1}
.crumb span{color:var(--grey)}

.p-head{padding:5vh 0 0;display:flex;justify-content:space-between;align-items:flex-end;gap:2em;flex-wrap:wrap}
.p-head h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.1}
.p-price{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.p-price .woocommerce-Price-amount{font-weight:400}
.p-sub{margin-top:14px;color:var(--grey);max-width:52ch}

.p-img{margin:7vh 0 0}
.p-img img{display:block;width:100%;filter:grayscale(1) contrast(1.06)}
.p-img .cap{margin-top:18px;font-size:14px;color:var(--grey)}

.mm{margin:10vh 0 0}
.mm p{margin-top:18px;font-size:15px;color:var(--grey)}

.buy{margin:9vh 0 0;display:flex;gap:2em;align-items:center;flex-wrap:wrap}
.buy form.cart{display:flex;gap:1.2em;align-items:center;flex-wrap:wrap}
.buy .qty,.buy .quantity input{border:none;border-bottom:1px solid var(--hair);width:3.4em;text-align:center;padding:6px 2px}
.buy .quantity input:focus{border-color:var(--ink);outline:none}
.add,.single_add_to_cart_button,.checkout-button,.wc-block-cart__submit-button{
  background:var(--ink)!important;color:var(--paper)!important;
  padding:19px 42px!important;font-size:15.5px!important;
  border:none!important;border-radius:0!important;
  transition:opacity .2s!important;text-decoration:none!important;line-height:1.2!important;
  display:inline-block;cursor:pointer;
}
.add:hover,.single_add_to_cart_button:hover,.checkout-button:hover{opacity:.82!important}
.buy .note{font-size:14px;color:var(--grey);max-width:34ch}

.plain{list-style:none;border-top:1px solid var(--ink)}
.plain li{padding:15px 0;border-bottom:1px solid var(--hair);font-size:15.5px;display:flex;gap:2em;justify-content:space-between}
.plain li span:last-child{color:var(--grey)}

.steps{counter-reset:s;list-style:none;border-top:1px solid var(--ink)}
.steps li{
  counter-increment:s;
  padding:22px 0;border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:3em 1fr;gap:1em;font-size:15.5px;
}
.steps li::before{content:counter(s,decimal-leading-zero);color:var(--grey);font-size:13px;padding-top:3px}
.steps b{font-weight:500;display:block;margin-bottom:2px}
.steps span{color:var(--grey)}

.others{border-top:1px solid var(--ink)}
.others a{
  display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:1.5em;
  padding:22px 0;border-bottom:1px solid var(--hair);
  text-decoration:none;align-items:baseline;
}
.others a:hover .go{transform:translateX(6px)}
.others .n{font-weight:500}
.others .d{color:var(--grey);font-size:15px}
.others .go{transition:transform .25s;display:inline-block}

/* komunikaty Woo w duchu motywu */
.woocommerce-message,.woocommerce-info,.woocommerce-error,
.wc-block-components-notice-banner{
  border:1px solid var(--hair)!important;background:transparent!important;
  color:var(--ink)!important;padding:16px 20px!important;margin:0 0 3vh!important;
  border-radius:0!important;font-size:15px;list-style:none;
}
.woocommerce-error{border-color:var(--sun)!important}
.woocommerce-message a.button,.woocommerce-info a.button{
  background:none!important;color:inherit!important;padding:0!important;
  text-decoration:underline!important;float:right;
}
.onsale{display:none}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* koszyk / zamówienie — delikatne dopasowanie domyślnych bloków */
.wc-page{padding:6vh 0 16vh}
.wc-page table{border-collapse:collapse;width:100%}
.wc-page th,.wc-page td{border:none;border-bottom:1px solid var(--hair);padding:14px 8px;text-align:left;font-size:15.5px}
.wc-page thead th{font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* =========================================================
   Galeria — rytm editorial
   ========================================================= */
.intro{padding:14vh 0 10vh}
.intro h1{font-size:clamp(2.2rem,5.4vw,4rem);max-width:18ch}
.intro p{margin-top:24px;color:var(--grey);max-width:48ch}

.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,3vw,34px);padding-bottom:10vh}
.gal figure{position:relative;margin:0}
.gal figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.06);
}
.gal figure figcaption{
  margin-top:12px;font-size:13px;color:var(--grey);
  display:flex;justify-content:space-between;gap:1em;
}
.g1{grid-column:1/-1;aspect-ratio:16/9}
.g2{grid-column:1/7;aspect-ratio:4/5}
.g3{grid-column:8/-1;aspect-ratio:4/5;margin-top:16vh}
.g4{grid-column:2/-2;aspect-ratio:3/2;margin-top:10vh}
.g5{grid-column:1/6;aspect-ratio:1/1;margin-top:12vh}
.g6{grid-column:7/-1;aspect-ratio:16/10;margin-top:4vh}
.g7{grid-column:1/-1;aspect-ratio:21/9;margin-top:12vh}
.g8{grid-column:4/10;aspect-ratio:4/5;margin-top:12vh}
.g9{grid-column:1/7;aspect-ratio:3/2;margin-top:12vh}
.g10{grid-column:8/-1;aspect-ratio:4/5;margin-top:20vh}

.gal figure.empty img{display:none}
.gal figure.empty::before{
  content:attr(data-n);
  position:absolute;inset:0;
  border:1px solid var(--hair);
  display:grid;place-items:center;
  font-size:13px;letter-spacing:.14em;color:var(--grey);
}
.gal figure.empty::after{
  content:"Media \2192  " attr(data-f);
  position:absolute;left:0;right:0;bottom:14px;
  text-align:center;font-size:11px;color:var(--hair);letter-spacing:.06em;
}
.outro{padding:6vh 0 0;border-top:1px solid var(--ink)}
.outro p{color:var(--grey);max-width:52ch;padding-top:3vh}

/* =========================================================
   Kalkulator
   ========================================================= */
.calc h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin-bottom:.4em}
.hint{font-size:14px;color:var(--grey);max-width:56ch;margin-bottom:2.2em}
.calc section{padding:12vh 0 0}

.opts{display:flex;gap:1.8em 2.2em;flex-wrap:wrap;font-size:16px}
.opts button{
  padding:4px 0;color:var(--grey);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
  text-align:left;
}
.opts button:hover{color:var(--ink)}
.opts button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.opts button small{display:block;font-size:12px;color:var(--grey);letter-spacing:.02em}

.dev{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.dev th{
  text-align:left;font-weight:400;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);padding:14px 0 10px;
  border-bottom:1px solid var(--hair);
}
.dev td{padding:13px 0;border-bottom:1px solid var(--hair);font-size:15.5px}
.dev td:nth-child(n+2),.dev th:nth-child(n+2){text-align:right;padding-left:1em}
.dev input{
  border:none;border-bottom:1px solid var(--hair);
  width:4.2em;text-align:right;padding:2px 2px;
  transition:border-color .2s;
}
.dev input:hover,.dev input:focus{border-color:var(--ink);outline:none}
.dev .wh{color:var(--grey);min-width:5em;display:inline-block}
.dev tfoot td{font-weight:500;border-bottom:none;padding-top:18px}
.dev .zero{opacity:.45}

.bat{display:flex;gap:1em;align-items:baseline;flex-wrap:wrap}
.bat input{
  border:none;border-bottom:1px solid var(--hair);width:5.5em;text-align:right;padding:2px;
  font-size:inherit;
}
.bat input:hover,.bat input:focus{border-color:var(--ink);outline:none}

.chart{margin-top:4vh}
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:2.4em;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--grey)}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{display:inline-block}
.legend .l-soc{width:22px;height:1.5px;background:var(--ink)}
.legend .l-20{width:22px;height:0;border-top:1.5px dashed var(--sun)}
.legend .l-cl{width:12px;height:12px;background:var(--hair)}

.reco{border-top:1px solid var(--ink);padding-top:3.5vh}
.reco h3{font-weight:500;font-size:clamp(1.2rem,2.2vw,1.5rem);margin-bottom:.6em}
.reco p{max-width:56ch;color:var(--grey);margin-bottom:1.2em}
.reco .cta{display:flex;gap:2em;align-items:center;flex-wrap:wrap;margin-top:2em}
.reco .add{padding:17px 36px!important}
.reco .wa{font-size:15px}

/* =========================================================
   Responsywność
   ========================================================= */
@media (max-width:720px){
  #sun{right:16px}
  section{padding:16vh 0}
  .calc section{padding:9vh 0 0}

  .site-header{flex-wrap:wrap;row-gap:12px}
  .site-header .mark{flex-shrink:0}
  .site-header nav{width:100%}

  .phead{display:flex;justify-content:space-between}
  .phead span:not(:first-child):not(:last-child){display:none}

  .prow{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.4em;row-gap:3px}
  .prow .name{order:1;flex:1 1 auto;min-width:0}
  .prow .price{order:2;flex:0 0 auto;text-align:right;white-space:nowrap}
  .prow .d{order:3;flex:0 0 auto;font-size:13px}
  .prow .d:not(:last-of-type)::after{content:" · ";color:var(--grey)}

  .others a{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.4em;row-gap:3px}
  .others a>span:nth-child(1){order:1;flex:1 1 auto;min-width:0}
  .others a>span:nth-child(4){order:2;flex:0 0 auto;white-space:nowrap}
  .others a>span.d{order:3;flex:0 0 auto;font-size:13px}
  .others a>span.d:not(:last-of-type)::after{content:" · ";color:var(--grey)}

  .g2,.g3,.g5,.g6,.g8,.g9,.g10{grid-column:1/-1;margin-top:8vh}
  .g4{grid-column:1/-1}
  .intro{padding-top:8vh}
  .dev th:nth-child(2),.dev td:nth-child(2){display:none}
  .spec>div{grid-template-columns:1fr;gap:.3em}
  .foot-top{flex-direction:column;align-items:flex-start;gap:3vh}
  .foot-social{margin-left:-10px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:1em}
}

@media (max-width:480px){
  .site-header{padding:24px 0}
  .site-header nav{gap:16px 20px;font-size:13.5px}
  .hero .nums{gap:1.6em 2em;font-size:14px}
  .p-head{align-items:flex-start}
  .buy form.cart{width:100%}
  .add,.single_add_to_cart_button{width:100%;text-align:center}
}