/*
Theme Name: MelliFruits
Theme URI: https://mellifood.pl
Author: MelliFood
Description: Jasny, słoneczny motyw blokowy dla sklepu MelliFood z główną linią MelliFruits (suszone owoce). Zgodny z WooCommerce i wbudowanymi markami WooCommerce, gotowy na kolejne linie produktowe (np. MelliMeat) bez przebudowy strony.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mellifruits
Tags: block-theme, full-site-editing, e-commerce, one-column, custom-colors, custom-menu, block-patterns
*/

/* =========================================================
   1. Zmienne (te same kolory i czcionki co w projekcie)
   ========================================================= */
:root{
  --mf-bg:#FAF8F2;
  --mf-cream:#F1EBDD;
  --mf-sage:#EDF3EA;
  --mf-sand:#EEE5D2;
  --mf-white:#FFFFFF;
  --mf-green:#174B35;
  --mf-green-dk:#0F3A28;
  --mf-green-soft:#2E6048;
  --mf-text:#34443A;
  --mf-muted:#5B675E;
  --mf-faint:#6B756C;
  --mf-line:#E3DAC8;
  --mf-line-2:#D6CCB7;
  --mf-line-sage:#D2DDCE;
  --mf-orange:#E0852A;
  --mf-orange-text:#B45A0E;
  --mf-display:"Brygada 1918","Georgia","Times New Roman",serif;
  --mf-sans:"Jost","Futura","Century Gothic","Segoe UI",sans-serif;
  --mf-radius:14px;
  --mf-gutter:clamp(20px,4vw,40px);
}

/* =========================================================
   2. Podstawy
   ========================================================= */
body{
  background:var(--mf-bg);
  color:var(--mf-text);
  font-family:var(--mf-sans);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,
.wp-block-post-title,
.wc-block-components-title{
  font-family:var(--mf-display);
  font-weight:500;
  color:var(--mf-green);
  text-wrap:balance;
}
a{color:var(--mf-green)}
:focus-visible{outline:2px solid var(--mf-green);outline-offset:3px}
img{max-width:100%;height:auto}

/* cena za kilogram - zawsze w osobnej linii, drobnym drukiem */
.mf-unit-price{
  display:block;
  color:var(--mf-faint);
  font-size:12.5px;
  font-weight:400;
  font-variant-numeric:tabular-nums;
}

.mf-eyebrow{
  display:flex;align-items:center;gap:12px;
  margin:0 0 16px;
  font-size:12.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mf-green-soft);
}
.mf-eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--mf-orange)}

/* przyciski (motyw + WooCommerce) */
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button{
  background:var(--mf-green);
  color:var(--mf-white)!important;
  font-family:var(--mf-sans);
  font-size:15.5px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.2;
  padding:15px 28px;
  border:1px solid var(--mf-green);
  border-radius:999px;
  text-decoration:none;
  transition:background .2s,border-color .2s;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover{
  background:var(--mf-green-dk);
  border-color:var(--mf-green-dk);
}
.is-style-outline .wp-block-button__link,
.mf-btn-quiet .wp-block-button__link{
  background:transparent;
  color:var(--mf-green)!important;
  border:1px solid var(--mf-line-2);
}
.is-style-outline .wp-block-button__link:hover,
.mf-btn-quiet .wp-block-button__link:hover{
  background:rgba(23,75,53,.04);
  border-color:var(--mf-green);
}

/* skoki do sekcji (menu i stopka): plynnie i tak, zeby naglowek
   nie zaslanial tytulu sekcji */
html{scroll-behavior:smooth}
#sklep,
#zastosowania,
#o-nas,
#pytania,
:target{scroll-margin-top:96px}

/* =========================================================
   3. Pasek informacyjny, nagłówek
   ========================================================= */
.mf-announce{
  background:var(--mf-sage);
  border-bottom:1px solid var(--mf-line-sage);
  color:var(--mf-green);
  padding:8px var(--mf-gutter);
  margin:0;
}
.mf-announce p{margin:0;font-size:13.5px}
.mf-header{
  position:sticky;top:0;z-index:20;
  background:rgba(250,248,242,.95);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--mf-line);
  padding-block:8px;
}
.mf-header .wp-block-site-logo img{height:60px;width:auto}
.mf-header .wp-block-navigation{font-size:15.5px;font-weight:500}
.mf-header .wp-block-navigation a{text-decoration:none;color:var(--mf-green);padding-block:6px;border-bottom:2px solid transparent}
.mf-header .wp-block-navigation a:hover{border-color:var(--mf-orange)}
.mf-header .wc-block-mini-cart__button{
  background:var(--mf-green);
  color:var(--mf-white);
  border-radius:999px;
  padding:10px 16px;
  font-weight:500;
}
.mf-header .wc-block-mini-cart__button:hover{background:var(--mf-green-dk)}
.mf-header .wc-block-mini-cart__badge{background:var(--mf-white);color:var(--mf-green)}

/* =========================================================
   4. Pierwszy ekran
   ========================================================= */
.mf-hero{
  display:grid;
  grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  align-items:center;
  background:linear-gradient(90deg,var(--mf-bg) 0%,#F4EEE2 40%,#ECE3D1 100%);
  border-bottom:1px solid var(--mf-line);
  overflow:hidden;
}
.mf-hero__text{
  grid-column:1;grid-row:1;
  position:relative;z-index:1;
  padding:44px 20px 44px clamp(24px,5vw,88px);
}
.mf-hero__inner{max-width:500px}
.mf-hero h1{font-size:clamp(46px,4.6vw,70px);line-height:1;letter-spacing:-.015em;margin:0 0 22px}
.mf-hero h1 em{font-style:italic;font-weight:500;color:var(--mf-orange-text)}
.mf-hero__lede{font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.65;color:var(--mf-text);max-width:40ch;margin:0 0 32px}
.mf-hero .wp-block-buttons{gap:12px}
.mf-hero__media{
  grid-column:2;grid-row:1;
  align-self:stretch;
  position:relative;
  aspect-ratio:16/9;
  margin:0 0 0 -20%;
}
.mf-hero__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24%);
}
.mf-hero__media--mobile{display:none}

/* =========================================================
   5. Pasek zalet
   ========================================================= */
.mf-benefits{border-bottom:1px solid var(--mf-line);padding-block:28px}
.mf-benefits .wp-block-columns{gap:22px 32px;margin-block:0}
.mf-benefit{display:flex;gap:14px;align-items:flex-start}
.mf-benefit .wp-block-group{gap:2px}
.mf-icon{
  flex:none;width:30px;height:30px;margin-top:2px;
  color:var(--mf-green);fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
}
.mf-benefit__title{margin:0;font-weight:500;font-size:15.5px;color:var(--mf-green)}
.mf-benefit__text{margin:0;color:var(--mf-muted);font-size:14.5px;line-height:1.5}

/* =========================================================
   6. Sekcje ogólnie
   ========================================================= */
.mf-section{padding-block:clamp(64px,8vw,104px)}
.mf-section--sage{background:var(--mf-sage)}
.mf-section--cream{background:var(--mf-cream)}
.mf-head,
.mf-section > .wp-block-columns.mf-head,
.mf-section > .wp-block-group.mf-head{margin-block:0 clamp(32px,4.5vw,48px)}
.mf-head h2{font-size:clamp(32px,3.9vw,50px);line-height:1.08;letter-spacing:-.01em;margin:0}
.mf-head .mf-head__note{margin:0;color:var(--mf-muted);max-width:46ch}
.mf-section > .wp-block-columns,
.mf-section > .wp-block-group{margin-block:0}
.mf-hero__inner .wp-block-buttons{margin-top:0}

/* =========================================================
   7. Produkty z WooCommerce (siatka na stronie głównej i w sklepie)
   ========================================================= */
ul.products{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
  margin:0;padding:0;list-style:none;
}
ul.products::before,
ul.products::after{content:none!important}
ul.products li.product{
  position:relative;
  width:auto!important;
  margin:0!important;
  float:none!important;
  display:flex;flex-direction:column;
  background:var(--mf-white);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-radius);
  overflow:hidden;
  text-align:left;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
ul.products li.product:hover{
  transform:translateY(-3px);
  border-color:var(--mf-line-2);
  box-shadow:0 18px 34px -24px rgba(23,75,53,.45);
}
ul.products li.product a img{
  aspect-ratio:4/5;
  width:100%;
  object-fit:cover;
  margin:0;
  transition:transform .6s ease;
}
ul.products li.product:hover a img{transform:scale(1.03)}
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--mf-display);
  font-size:30px!important;
  font-weight:700!important;
  line-height:1.1;
  color:var(--mf-green);
  padding:14px 18px 0!important;
  margin:0;
}
ul.products li.product .woocommerce-loop-product__link{text-decoration:none}
ul.products li.product .mf-loop-desc{
  margin:0;
  padding:8px 18px 0;
  color:var(--mf-muted);
  font-size:14.5px;
  line-height:1.5;
}
ul.products li.product .price{
  display:block;
  padding:6px 18px 0;
  color:var(--mf-green);
  font-size:21px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
ul.products li.product .price del{color:var(--mf-faint);font-size:16px;margin-right:6px}
ul.products li.product .price ins{text-decoration:none}
ul.products li.product .wc-block-components-product-price__unit,
ul.products li.product .mf-unit-price{
  display:block;padding:2px 18px 0;color:var(--mf-faint);font-size:12.5px;
}
/* opis i gramatury rosna, dzieki czemu przyciski w rzedzie stoja w jednej linii */
ul.products li.product > a:not(.button){flex:1 1 auto}
ul.products li.product .button{
  margin:16px 18px 18px;
  text-align:center;
  font-size:15px;
  padding:12px 16px;
}
ul.products li.product .added_to_cart{
  margin:0 18px 16px;font-size:13.5px;color:var(--mf-green-soft);
}
ul.products li.product.outofstock::after{
  content:"Chwilowo niedostępne";
  position:absolute;top:14px;left:14px;
  background:rgba(250,248,242,.94);
  border:1px solid var(--mf-line-2);
  color:var(--mf-green);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;
}
ul.products li.product .onsale{
  position:absolute;top:14px;right:14px;
  background:var(--mf-orange);color:#fff;
  border-radius:999px;padding:6px 12px;
  font-size:12px;letter-spacing:.08em;
  min-height:0;line-height:1.2;margin:0;
}

/* =========================================================
   7b. Wybór gramatury na karcie produktu (trzy „pigułki”)
   ========================================================= */
.mf-sizes{
  display:flex;
  gap:6px;
  padding:12px 18px 0;
}
.mf-size{
  flex:1 1 0;
  min-width:0;
  background:var(--mf-white);
  border:1px solid var(--mf-line-2);
  color:var(--mf-green);
  font-family:var(--mf-sans);
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  padding:9px 2px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  transition:border-color .2s,background .2s,color .2s;
}
.mf-size:hover{border-color:var(--mf-green)}
.mf-size[aria-pressed="true"]{
  background:var(--mf-green);
  border-color:var(--mf-green);
  color:var(--mf-white);
}
.mf-size[disabled]{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.mf-priceline{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:12px 18px 0;
}
.mf-price{
  font-size:21px;
  font-weight:500;
  color:var(--mf-green);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.mf-priceline .mf-unit{
  color:var(--mf-faint);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* gdy karta ma pigułki, nie powtarzamy zakresu cen z WooCommerce */
ul.products li.product:has(.mf-sizes) .price,
li.product:has(.mf-sizes) .price,
li.wc-block-product:has(.mf-sizes) .wc-block-components-product-price,
li.wc-block-product:has(.mf-sizes) .wp-block-woocommerce-product-price{display:none!important}

/* =========================================================
   7c. Rodzina MelliFood - karty marek
   Sekcja pokazuje sie dopiero, gdy w sklepie sa co najmniej
   dwie marki z produktami (np. MelliFruits i MelliMeat).
   ========================================================= */
.mf-marki{
  background:var(--mf-sage);
  border-block:1px solid var(--mf-line-sage);
  padding:clamp(56px,7vw,96px) var(--mf-gutter);
}
.mf-marki__wew{max-width:1240px;margin-inline:auto}
.mf-marki__tytul{margin:0 0 clamp(28px,4vw,44px);font-size:clamp(30px,3.4vw,44px);line-height:1.1}
.mf-marki__lista{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(16px,2.4vw,28px);
}
.mf-marka__link{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:clamp(22px,2.6vw,32px);
  background:var(--mf-white);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-radius);
  color:var(--mf-text);
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.mf-marka__link:hover,
.mf-marka__link:focus-visible{
  transform:translateY(-3px);
  border-color:var(--mf-line-2);
  box-shadow:0 18px 34px -24px rgba(23,75,53,.45);
}
.mf-marka__logo{display:flex;align-items:flex-end;min-height:120px;margin:0 0 18px} /* to samo miejsce na logo w kazdej karcie */
.mf-marka__logo img{display:block;width:auto;max-width:220px;max-height:120px;height:auto;object-fit:contain}
.mf-marka__nazwa{font-family:var(--mf-display);font-size:26px;font-weight:600;line-height:1.15;color:var(--mf-green)}
.mf-marka__opis{margin-top:8px;color:var(--mf-muted);font-size:15.5px;line-height:1.6}
.mf-marka__dalej{margin-top:auto;padding-top:18px;color:var(--mf-green);font-weight:500}
.mf-marka__dalej::after{content:" →";color:var(--mf-orange)}

/* strona marki, np. /marka/mellifruits/ */
.tax-product_brand .wp-block-term-description{color:var(--mf-muted);font-size:17px;max-width:62ch}

/* ---------------------------------------------------------
   Linie produktowe MelliFood
   Kazda strona ma klase mf-linia-<marka>, np. mf-linia-mellifruits.
   MelliFruits korzysta z kolorow z poczatku pliku i nic tu nie zmienia.
   Gdy MelliMeat dostanie wlasne akcenty, wystarczy dopisac np.:
   .mf-linia-mellimeat{--mf-orange:#A4452C;--mf-orange-text:#8A3520}
   --------------------------------------------------------- */

/* =========================================================
   8. Mix cytrusowy (sekcja polecana)
   ========================================================= */
.mf-gift{
  background:var(--mf-cream);
  border-radius:20px;
  overflow:hidden;
  gap:0;
  align-items:stretch;
  margin-block:0;
}
.mf-gift .wp-block-column{min-width:0}
.mf-gift__media,
.mf-gift__media figure{margin:0;height:100%}
.mf-gift__media img{width:100%;height:100%;object-fit:cover;display:block}
.mf-gift__body{padding:clamp(28px,5vw,60px)}
.mf-gift__pill{
  display:inline-block;margin:0 0 16px;
  background:var(--mf-sage);color:var(--mf-green);
  font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
}
.mf-gift h2,.mf-gift h3{font-size:clamp(32px,3.5vw,44px);line-height:1.1;margin:0 0 14px}
.mf-ticks{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:9px;color:var(--mf-text);font-size:15.5px}
.mf-ticks li{display:flex;gap:12px;align-items:center}
.mf-ticks li::before{
  content:"";flex:none;width:12px;height:7px;
  border-left:2px solid var(--mf-green);border-bottom:2px solid var(--mf-green);
  transform:rotate(-45deg) translateY(-2px);
}

/* =========================================================
   9. Zastosowania
   ========================================================= */
.mf-use{
  background:var(--mf-white);
  border:1px solid var(--mf-line-sage);
  border-radius:var(--mf-radius);
  padding:26px 24px 28px;
  height:100%;
}
.mf-use svg{width:88px;height:88px;display:block}
.mf-use h3{font-size:23px;line-height:1.2;margin:16px 0 8px}
.mf-use p{margin:0;color:var(--mf-muted);font-size:15px}

/* =========================================================
   10. O nas
   ========================================================= */
.mf-story{
  display:grid;
  grid-template-columns:minmax(0,min(42vw,640px)) minmax(0,1fr);
  align-items:center;
  background:linear-gradient(90deg,#ECE3D1 0%,#F4EEE2 40%,var(--mf-bg) 72%);
}
.mf-story__photo{margin:0;align-self:start;position:sticky;top:96px;aspect-ratio:2/3;overflow:hidden}
.mf-story__photo img{
  width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 7%),linear-gradient(to bottom,transparent 0,#000 8%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,transparent 0,#000 7%),linear-gradient(to bottom,transparent 0,#000 8%,#000 91%,transparent 100%);
  mask-composite:intersect;
}
.mf-story__text{padding:clamp(48px,6vw,88px) clamp(24px,5vw,80px)}
.mf-story__text > *{max-width:58ch}
.mf-story__text h2{font-size:clamp(32px,3.9vw,50px);line-height:1.08;margin:0 0 24px}
.mf-story__text p{margin:0 0 18px;font-size:17px;line-height:1.75;color:var(--mf-text)}
.mf-story__text .wp-block-details{margin-top:14px;border-top:1px solid var(--mf-line);padding-top:18px}
.mf-story__text .wp-block-details summary{
  cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:10px;
  font-weight:500;color:var(--mf-green);
  border:1px solid var(--mf-line-2);border-radius:999px;
  padding:12px 24px;
}
.mf-story__text .wp-block-details summary::-webkit-details-marker{display:none}
.mf-story__text .wp-block-details summary::after{content:"⌄";font-size:18px;line-height:1}
.mf-story__text .wp-block-details[open] summary::after{content:"⌃"}
.mf-story__text .mf-turn{
  font-family:var(--mf-display);font-style:italic;
  font-size:clamp(24px,2.3vw,30px);line-height:1.25;color:var(--mf-orange-text);
  margin:26px 0 24px;
}
.mf-story__text .mf-sign{font-family:var(--mf-display);font-style:italic;font-size:22px;color:var(--mf-green)}

/* =========================================================
   11. Pytania i odpowiedzi
   ========================================================= */
.mf-faq .wp-block-details{
  border-bottom:1px solid var(--mf-line-2);
  padding:0;
}
.mf-faq .wp-block-details:first-of-type{border-top:1px solid var(--mf-line-2)}
.mf-faq .wp-block-details summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:20px 0;
  font-size:17.5px;font-weight:500;line-height:1.4;color:var(--mf-green);
}
.mf-faq .wp-block-details summary::-webkit-details-marker{display:none}
.mf-faq .wp-block-details summary::after{content:"+";font-size:26px;font-weight:300;line-height:1;color:var(--mf-orange-text)}
.mf-faq .wp-block-details[open] summary::after{content:"–"}
.mf-faq .wp-block-details p{margin:-4px 0 22px;color:var(--mf-text);max-width:60ch}

/* =========================================================
   12. Stopka
   ========================================================= */
.mf-footer{background:var(--mf-sand);border-top:1px solid var(--mf-line);padding-block:60px 26px}
.mf-footer img{max-width:200px;height:auto}
.mf-footer .wp-block-site-logo{margin:0 0 14px}
.mf-footer .wp-block-site-logo a{display:inline-block;line-height:0}
.mf-footer__logo{margin:0 0 18px}
.mf-footer__logo a{display:inline-block;line-height:0}
.mf-footer__logo img{width:230px;max-width:100%;height:auto}
.mf-footer h2,.mf-footer h3,.mf-footer h4{
  font-family:var(--mf-sans);
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mf-green);margin:0 0 16px;
}
.mf-footer .wp-block-list:not(.mf-pay){list-style:none;margin:0;padding:0}
.mf-footer .wp-block-list:not(.mf-pay) li{margin:0 0 10px;font-size:15px}
.mf-footer a{color:var(--mf-text);text-decoration:none}
.mf-footer a:hover{color:var(--mf-green);text-decoration:underline;text-underline-offset:3px}
.mf-footer .mf-motto{color:var(--mf-muted);font-size:14.5px;max-width:32ch}
.mf-pay{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.mf-pay li{
  background:var(--mf-white);border:1px solid var(--mf-line);border-radius:8px;
  padding:5px 11px;font-size:13px;font-weight:500;color:var(--mf-green);
}
.mf-legal{
  margin-top:24px;padding-top:24px;border-top:1px solid var(--mf-line-2);
  color:var(--mf-muted);font-size:13.5px;
}

/* =========================================================
   13. Strony WooCommerce: produkt, koszyk, zamówienie
   ========================================================= */
.woocommerce-page .woocommerce-breadcrumb{color:var(--mf-muted);font-size:14px}
.woocommerce-page .woocommerce-breadcrumb a{color:var(--mf-green-soft)}
.woocommerce div.product .product_title{font-size:clamp(30px,3.4vw,44px);line-height:1.1;margin-bottom:12px}
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--mf-green);font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--mf-text);font-size:17px;line-height:1.7}
.woocommerce div.product form.cart .variations{margin-bottom:18px}
.woocommerce div.product form.cart .variations label{font-weight:500;color:var(--mf-green)}
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  background:var(--mf-white);
  border:1px solid var(--mf-line-2);
  border-radius:10px;
  padding:12px 14px;
  color:var(--mf-text);
  font-family:var(--mf-sans);
  font-size:16px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--mf-line-2);padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:0;
  margin:0 24px 0 0;padding: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{
  color:var(--mf-muted);font-weight:500;padding:14px 0;display:inline-block;
  border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--mf-green);border-color:var(--mf-orange)}
.woocommerce .related > h2,
.woocommerce .up-sells > h2,
.woocommerce .cross-sells > h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:24px}

.woocommerce table.shop_table{
  border:1px solid var(--mf-line);
  border-radius:var(--mf-radius);
  background:var(--mf-white);
  border-collapse:separate;
}
.woocommerce table.shop_table th{color:var(--mf-green);font-weight:500}
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3{font-size:24px}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review{
  background:var(--mf-cream);
  border-radius:var(--mf-radius);
  padding:24px;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner{
  border-top-color:var(--mf-green);
  background:var(--mf-sage);
  border-radius:12px;
  color:var(--mf-text);
}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--mf-green)}
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success{
  background:var(--mf-sage)!important;
  border-color:var(--mf-green)!important;
}
.wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-success > svg{
  fill:var(--mf-green)!important;
  background:transparent!important;
}

/* koszyk i zamówienie w wersji blokowej */
.wc-block-components-product-name,
.wc-block-cart-item__product-name{color:var(--mf-green);font-family:var(--mf-display);font-size:19px}
.wc-block-components-totals-item__value,
.wc-block-components-product-price{color:var(--mf-green);font-variant-numeric:tabular-nums}
.wc-block-components-text-input input,
.wc-block-components-select__container,
.wc-block-components-textarea{
  border-radius:10px;
  border-color:var(--mf-line-2);
  background:var(--mf-white);
}
.wc-block-cart,
.wc-block-checkout{color:var(--mf-text)}
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-block{
  background:var(--mf-cream);
  border-radius:var(--mf-radius);
  padding:20px 22px;
}

/* Moje konto: logowanie obok rejestracji */
.woocommerce-account #customer_login{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
  align-items:stretch;
}
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after{content:none!important}
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2{
  width:auto!important;
  float:none!important;
  margin:0!important;
  background:var(--mf-white);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-radius);
  padding:clamp(22px,2.4vw,32px);
}
.woocommerce-account #customer_login h2{
  font-family:var(--mf-display);
  font-size:26px;
  font-weight:600;
  color:var(--mf-green);
  margin:0 0 16px;
}
.woocommerce-account #customer_login form.register > p:not(.form-row):not(.woocommerce-privacy-policy-text){
  color:var(--mf-muted);
  font-size:15px;
  line-height:1.6;
  margin:0 0 16px;
}
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register{
  border:0;
  margin:0;
  padding:0;
  border-radius:0;
}
.woocommerce-account .mf-konto-info{color:var(--mf-muted);font-size:15px;margin:-6px 0 18px;line-height:1.6}
.woocommerce-account form .form-row{margin:0 0 16px;padding:0}
.woocommerce-account form .form-row label{
  display:block;
  margin:0 0 6px;
  color:var(--mf-green);
  font-size:14.5px;
  font-weight:500;
}
.woocommerce-account form .form-row input.input-text{width:100%}
.woocommerce-account form .woocommerce-form-login__rememberme{
  display:block;
  margin:0 0 16px;
  color:var(--mf-muted);
  font-size:14.5px;
  font-weight:400;
}
.woocommerce-account form .button{width:100%;text-align:center}
.woocommerce-account .woocommerce-LostPassword{margin:16px 0 0;font-size:14.5px}
.woocommerce-account .woocommerce-privacy-policy-text p{color:var(--mf-faint);font-size:13.5px;line-height:1.6}

/* Moje konto po zalogowaniu */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 28px;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0 0 4px;padding:0;font-size:15.5px}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block;
  padding:10px 14px;
  border-radius:10px;
  color:var(--mf-text);
  text-decoration:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{background:var(--mf-cream);color:var(--mf-green)}

@media (max-width:780px){
  .woocommerce-account #customer_login{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================
   14. Wpisy, strony, podstrony informacyjne
   ========================================================= */
.mf-page-header{background:var(--mf-cream);border-bottom:1px solid var(--mf-line);padding-block:clamp(40px,6vw,72px)}
.mf-page-header .wp-block-post-title{font-size:clamp(32px,4vw,52px);margin:0}
.mf-prose p,
.mf-prose li{font-size:17px;line-height:1.8;color:var(--mf-text)}
.mf-prose h2{font-size:clamp(26px,2.8vw,36px);margin-top:2.2em}
.mf-prose h3{font-size:22px;margin-top:1.8em}
.mf-prose table{width:100%;border-collapse:collapse}
.mf-prose td,.mf-prose th{border:1px solid var(--mf-line);padding:10px 12px;text-align:left}

/* =========================================================
   15. Telefony i tablety
   ========================================================= */
@media (max-width:1100px){
  .mf-hero{grid-template-columns:1fr;background:var(--mf-cream)}
  .mf-hero__text{grid-column:1;grid-row:1;padding:40px var(--mf-gutter) 32px}
  .mf-hero__inner{max-width:640px}
  .mf-hero__media{grid-column:1;grid-row:2;margin:0;align-self:auto;aspect-ratio:auto}
  .mf-hero__media img{position:static;height:auto;-webkit-mask-image:none;mask-image:none}
  ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .mf-header .wp-block-site-logo img{height:50px}
  .mf-story{grid-template-columns:1fr}
  .mf-story__photo{position:static;aspect-ratio:4/5}
  .mf-story__photo img{
    -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent);
    mask-image:linear-gradient(to bottom,#000 86%,transparent);
  }
  .mf-story__text{padding:8px var(--mf-gutter) 56px}
  .mf-hero__media--desktop{display:none}
  .mf-hero__media--mobile{display:block}
}
@media (max-width:560px){
  .mf-sizes{gap:4px;padding-inline:12px}
  .mf-size{font-size:12.5px;padding:7px 1px}
  .mf-priceline{flex-direction:column;align-items:flex-start;gap:0;padding-inline:12px}
  ul.products{gap:12px}
  ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:21px!important;padding:12px 12px 0!important}
  ul.products li.product .mf-loop-desc{padding:6px 12px 0}
  ul.products li.product .price{padding:4px 12px 0;font-size:19px}
  ul.products li.product .button{margin:12px;font-size:14px;padding:11px 10px}
  .mf-gift__body{padding:24px 20px 28px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
  ul.products li.product:hover{transform:none}
}

/* =========================================================
   Siatka produktow w nowym, blokowym ukladzie WooCommerce
   (strona Sklep, kategorie, "podobne produkty").
   Klasyczna siatka [products] jest stylizowana wyzej.
   ========================================================= */
.wc-block-product-template{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(14px,1.8vw,24px)!important;
  margin:0;
  padding:0;
  list-style:none;
}
li.wc-block-product{
  position:relative;
  display:flex;
  flex-direction:column;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  background:var(--mf-white);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-radius);
  overflow:hidden;
  text-align:left;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
li.wc-block-product:hover{
  transform:translateY(-3px);
  border-color:var(--mf-line-2);
  box-shadow:0 18px 34px -24px rgba(23,75,53,.45);
}
li.wc-block-product .wc-block-components-product-image,
li.wc-block-product .wp-block-woocommerce-product-image{margin:0}
li.wc-block-product .wc-block-components-product-image img,
li.wc-block-product img{
  aspect-ratio:4/5!important;
  width:100%;
  height:auto;
  object-fit:cover!important;
  margin:0;
  border-radius:0;
  transition:transform .6s ease;
}
li.wc-block-product:hover img{transform:scale(1.03)}
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wc-block-components-product-title{
  font-family:var(--mf-display);
  font-size:30px!important;
  font-weight:700!important;
  line-height:1.1;
  color:var(--mf-green);
  text-align:left;
  padding:14px 18px 0;
  margin:0;
}
li.wc-block-product .wp-block-post-title a{text-decoration:none}
li.wc-block-product .mf-loop-desc{padding:8px 18px 0}
li.wc-block-product .wc-block-components-product-price,
li.wc-block-product .price{
  display:block;
  text-align:left;
  padding:6px 18px 0;
  color:var(--mf-green);
  font-size:21px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
li.wc-block-product .mf-unit-price{
  display:block;
  padding:2px 18px 0;
  color:var(--mf-faint);
  font-size:12.5px;
  font-weight:400;
}
li.wc-block-product .wp-block-button,
li.wc-block-product .wc-block-components-product-button{
  margin:auto 18px 18px!important; /* auto u gory: przyciski w rzedzie w jednej linii */
  padding-top:16px;
  text-align:left;
}
/* przycisk dopisywany przez WooCommerce bezposrednio w karcie */
li.wc-block-product > a.button{
  margin:auto 18px 18px!important;
  display:block;
  width:auto;
  text-align:center;
  font-size:15px;
  padding:12px 16px!important;
}
li.wc-block-product .mf-priceline{padding-bottom:16px}
li.wc-block-product .wp-block-button__link,
li.wc-block-product .wc-block-components-product-button__button{
  display:block;
  width:100%;
  text-align:center;
  font-size:15px;
  padding:12px 16px;
}
li.wc-block-product.outofstock::after{
  content:"Chwilowo niedostępne";
  position:absolute;top:14px;left:14px;
  background:rgba(250,248,242,.94);
  border:1px solid var(--mf-line-2);
  color:var(--mf-green);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;
}
@media (max-width:1100px){
  .wc-block-product-template{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:560px){
  li.wc-block-product .wp-block-post-title,
  li.wc-block-product .wc-block-components-product-title{font-size:21px!important;padding:12px 12px 0!important}
  li.wc-block-product .mf-loop-desc,
  li.wc-block-product .wc-block-components-product-price,
  li.wc-block-product .mf-unit-price{padding-inline:12px}
  li.wc-block-product .wp-block-button,
  li.wc-block-product .wc-block-components-product-button{margin:auto 12px 12px!important}
  li.wc-block-product > a.button{margin:auto 12px 12px!important;font-size:14px;padding:11px 10px!important}
}

/* sortowanie i licznik wynikow na stronie sklepu */
.woocommerce-result-count{color:var(--mf-muted);font-size:14.5px;margin:0 0 18px}
.woocommerce-ordering select,
.wc-block-product-sort-select select{
  background:var(--mf-white);
  border:1px solid var(--mf-line-2);
  border-radius:999px;
  padding:10px 16px;
  color:var(--mf-green);
  font-family:var(--mf-sans);
  font-size:15px;
}
.woocommerce-products-header__title,
.wp-block-query-title{font-size:clamp(32px,3.9vw,50px);margin-bottom:8px}