/*
Theme Name: Sweet from Nature (Divi Child)
Theme URI: https://sweetfromnature.example
Description: Child motywu Divi 5 dla sklepu e-commerce "Sweet from Nature" (naturalne słodycze bez dodatku cukru). Zawiera tokeny designu (kolory, typografia, odstępy, promienie, cienie) z dokumentu handoffowego oraz style dla komponentów, których nie pokrywają natywne moduły Divi (paski USP, kafle kategorii, warianty hero, badge "Bestseller", toast, stepper ilości, panel filtrów sklepu).
Author: Wygenerowano na podstawie handoffu projektowego
Template: Divi
Version: 1.0.0
Text Domain: sfn-divi-child
*/

/* ==========================================================================
   1) DESIGN TOKENS — sekcja 4 dokumentu handoff
   ========================================================================== */
:root{
  /* Kolory */
  --sfn-green:        #2E5A3C; /* primary, nagłówki, akcenty */
  --sfn-green-dark:   #24482F; /* stopka, hover primary */
  --sfn-green-light:  #4E8A5E; /* liść / ikony dekoracyjne */
  --sfn-orange:        #C4702B; /* CTA */
  --sfn-orange-hover:  #A85C1F; /* CTA hover */
  --sfn-bg:            #F6F1E7; /* tło strony */
  --sfn-card-bg:       #FFFDF7; /* tło kart / inputów */
  --sfn-ink:            #2B2620; /* tekst główny */
  --sfn-text-secondary: #6B6257; /* akapity */
  --sfn-text-muted:     #8A7F6E; /* labelki / meta */
  --sfn-border:         #E5DCC9;
  --sfn-chip-bg:        #E9F0E7;
  --sfn-footer-text-1:  #EDE6D6;
  --sfn-footer-text-2:  #C9D8CC;
  --sfn-footer-text-3:  #9BB5A1;
  --sfn-error:          #B0483A;

  /* Typografia */
  --sfn-font-serif: 'Lora', serif;
  --sfn-font-sans:  'Nunito Sans', sans-serif;

  /* Odstępy / wymiary */
  --sfn-container-max: 1180px;
  --sfn-gap-cards: 18px;
  --sfn-gap-2col: 32px;

  /* Promienie */
  --sfn-radius-card: 12px;
  --sfn-radius-block: 14px;
  --sfn-radius-btn: 8px;
  --sfn-radius-pill: 20px;
  --sfn-radius-badge: 6px;
  --sfn-radius-icon-btn: 9px;

  /* Cienie */
  --sfn-shadow-hover:  0 6px 18px rgba(60,40,10,.12);
  --sfn-shadow-panel:  0 12px 34px rgba(60,40,10,.12);
  --sfn-shadow-toast:  0 8px 24px rgba(0,0,0,.25);
}

/* ==========================================================================
   2) PODSTAWY
   ========================================================================== */
body{
  background: var(--sfn-bg);
  color: var(--sfn-ink);
  font-family: var(--sfn-font-sans);
  font-weight: 400;
}
h1, h2, .sfn-price, .et_pb_module .et-l--header .logo_container .et-fixed-header{
  font-family: var(--sfn-font-serif);
}
h1{ line-height: 1.15; font-weight: 700; color: var(--sfn-ink); }
h2{ line-height: 1.2;  font-weight: 700; color: var(--sfn-ink); }
p{ color: var(--sfn-text-secondary); line-height: 1.5; }
a{ transition: color .18s ease, background-color .18s ease, box-shadow .18s ease; }
a:hover{ color: var(--sfn-orange); }

.et_pb_section{ padding-left: 24px; padding-right: 24px; }
.et_pb_row{ max-width: var(--sfn-container-max); }

/* Focus-visible dostępny wszędzie — sekcja 12 */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--sfn-green);
  outline-offset: 2px;
}

/* ==========================================================================
   3) NAGŁÓWEK / MENU
   ========================================================================== */
#main-header{
  background: var(--sfn-card-bg);
  border-bottom: 1px solid var(--sfn-border);
}
#main-header .et-menu > li > a{
  font-family: var(--sfn-font-sans);
  font-weight: 700;
  color: var(--sfn-ink);
}
#main-header .et-menu > li > a:hover{ color: var(--sfn-orange); }
.sfn-logo{
  font-family: var(--sfn-font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--sfn-green);
}

/* Pasek promocyjny */
.sfn-promo-bar{
  background: var(--sfn-green-dark);
  color: var(--sfn-footer-text-1);
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
}

/* Pigułka języka PL/EN */
.sfn-lang-switch{
  display:inline-flex; align-items:center; gap:2px;
  background: var(--sfn-chip-bg);
  border-radius: var(--sfn-radius-pill);
  padding: 3px;
}
.sfn-lang-switch button{
  border:0; background:transparent; cursor:pointer;
  font-family: var(--sfn-font-sans); font-weight:700; font-size:12.5px;
  padding:6px 12px; border-radius: var(--sfn-radius-pill); color:var(--sfn-text-muted);
}
.sfn-lang-switch button.is-active{ background: var(--sfn-green); color:#fff; }

/* Hamburger mobilny — 40x40, radius 9px */
.sfn-hamburger{
  width:40px; height:40px; border-radius: var(--sfn-radius-icon-btn);
  display:none; align-items:center; justify-content:center;
  background: var(--sfn-chip-bg); border:1px solid var(--sfn-border);
}
@media (max-width: 767px){
  .sfn-hamburger{ display:inline-flex; }
  #main-header .et-menu{ display:none; }
  #main-header.sfn-drawer-open .et-menu{
    display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%;
    background:var(--sfn-card-bg); border-top:1px solid var(--sfn-border); padding:8px 16px;
  }
}

/* ==========================================================================
   4) HERO — 3 warianty (sekcja 6.1)
   ========================================================================== */
.sfn-hero-a{
  background: linear-gradient(120deg, rgba(20,30,20,.72), rgba(20,30,20,.35)), var(--sfn-hero-image, linear-gradient(135deg,#3a5a42,#1c2e20));
  background-size: cover; background-position:center;
  border-radius: var(--sfn-radius-block);
  padding: 56px 48px; color:#fff;
}
.sfn-hero-a h1{ color:#fff; font-size:46px; }
.sfn-hero-b{
  display:grid; grid-template-columns:1fr 1fr; gap: var(--sfn-gap-2col);
  align-items:center;
}
.sfn-hero-b .sfn-hero-b-card{
  background:var(--sfn-card-bg); border-radius:var(--sfn-radius-block);
  padding:40px; box-shadow:var(--sfn-shadow-panel);
}
.sfn-hero-b h1{ font-size:44px; }
.sfn-hero-c{ text-align:center; padding:64px 24px; }
.sfn-hero-c h1{ font-size:52px; line-height:1.12; }
.sfn-hero-c .sfn-btn-pill{ border-radius:24px; }

@media (max-width:767px){
  .sfn-hero-a, .sfn-hero-c{ padding:30px 16px; }
  .sfn-hero-a h1{ font-size:30px; }
  .sfn-hero-b{ grid-template-columns:1fr; }
  .sfn-hero-b h1{ font-size:28px; }
  .sfn-hero-c h1{ font-size:32px; }
}

/* ==========================================================================
   5) PRZYCISKI
   ========================================================================== */
.sfn-btn, .et_pb_button.sfn-btn-cta{
  display:inline-block; font-family:var(--sfn-font-sans); font-weight:700;
  border-radius: var(--sfn-radius-btn); padding:13px 26px; border:2px solid transparent;
  transition: background-color .18s ease, color .18s ease;
}
.sfn-btn-cta{ background:var(--sfn-orange); color:#fff !important; }
.sfn-btn-cta:hover{ background:var(--sfn-orange-hover); color:#fff !important; }
.sfn-btn-outline-green{ background:transparent; border-color:var(--sfn-green); color:var(--sfn-green) !important; }
.sfn-btn-outline-green:hover{ background:var(--sfn-green); color:#fff !important; }
.sfn-btn-primary-green{ background:var(--sfn-green); color:#fff !important; }
.sfn-btn-primary-green:hover{ background:var(--sfn-green-dark); }
.sfn-btn[disabled], .sfn-btn.is-disabled{ opacity:.5; cursor:not-allowed; }

/* ==========================================================================
   6) PASEK KORZYŚCI (USP) — sekcja 6.1
   ========================================================================== */
.sfn-usp-bar{
  display:grid; grid-template-columns:repeat(4,1fr); gap: var(--sfn-gap-cards);
}
.sfn-usp-item{ text-align:center; padding:8px; }
.sfn-usp-item .sfn-usp-icon{ color:var(--sfn-green); font-size:28px; margin-bottom:8px; }
.sfn-usp-item h3{ font-size:15px; margin:0 0 4px; font-family:var(--sfn-font-sans); }
.sfn-usp-item p{ font-size:13px; margin:0; }
@media (max-width:767px){ .sfn-usp-bar{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   7) KAFLE KATEGORII / SIATKI PRODUKTÓW
   ========================================================================== */
.sfn-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sfn-gap-cards); }
.sfn-product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sfn-gap-cards); }
.sfn-shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sfn-gap-cards); }
@media (max-width:1199px){
  .sfn-cat-grid{ grid-template-columns:repeat(2,1fr); }
  .sfn-product-grid{ grid-template-columns:repeat(3,1fr); }
  .sfn-shop-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .sfn-cat-grid, .sfn-product-grid, .sfn-shop-grid{ grid-template-columns:repeat(2,1fr); }
}

.sfn-card, .woocommerce ul.products li.product{
  background:var(--sfn-card-bg); border:1px solid var(--sfn-border);
  border-radius:var(--sfn-radius-card); padding:14px; transition:box-shadow .18s ease;
}
.sfn-card:hover, .woocommerce ul.products li.product:hover{ box-shadow:var(--sfn-shadow-hover); }
.sfn-badge-bestseller{
  display:inline-block; background:var(--sfn-green); color:#fff; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:var(--sfn-radius-badge); position:relative; top:0;
}
.sfn-price, .woocommerce .price{
  font-family:var(--sfn-font-serif); font-weight:700; color:var(--sfn-green) !important;
}
.sfn-chip{
  display:inline-block; background:var(--sfn-chip-bg); color:var(--sfn-green);
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:14px; margin:2px 4px 2px 0;
}

/* ==========================================================================
   8) SKLEP: FILTRY (sekcja 6.2)
   ========================================================================== */
.sfn-shop-layout{ display:grid; grid-template-columns:230px 1fr; gap:28px; }
@media (max-width:1199px){ .sfn-shop-layout{ grid-template-columns:190px 1fr; } }
@media (max-width:767px){ .sfn-shop-layout{ grid-template-columns:1fr; } }

.sfn-filters{ background:var(--sfn-card-bg); border:1px solid var(--sfn-border); border-radius:var(--sfn-radius-block); padding:20px; }
.sfn-filters .sfn-search input{
  width:100%; border-radius:20px; border:1px solid var(--sfn-border); padding:10px 14px 10px 36px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238A7F6E' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 12px center;
}
.sfn-filters .sfn-cat-list button{
  display:block; width:100%; text-align:left; background:transparent; border:0; padding:9px 10px;
  border-radius:8px; font-weight:600; color:var(--sfn-ink); cursor:pointer;
}
.sfn-filters .sfn-cat-list button.is-active{ background:var(--sfn-chip-bg); color:var(--sfn-green); }
.sfn-filters input[type="range"]{ accent-color:var(--sfn-green); width:100%; }
.sfn-filters input[type="checkbox"]{ accent-color:var(--sfn-green); }
.sfn-empty-state{ text-align:center; color:var(--sfn-text-muted); padding:48px 0; }

/* ==========================================================================
   9) STRONA PRODUKTU (sekcja 6.3)
   ========================================================================== */
.sfn-product-layout{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sfn-gap-2col); }
@media (max-width:767px){ .sfn-product-layout{ grid-template-columns:1fr; } }
.sfn-stepper{ display:inline-flex; align-items:center; border:1px solid var(--sfn-border); border-radius:8px; }
.sfn-stepper button{ width:44px; height:44px; background:transparent; border:0; font-size:18px; cursor:pointer; }
.sfn-stepper .sfn-qty{ width:40px; text-align:center; font-weight:700; }

.sfn-tabs .sfn-tab{ padding:12px 4px; margin-right:24px; font-weight:700; color:var(--sfn-text-muted); background:none; border:0; cursor:pointer; }
.sfn-tabs .sfn-tab.is-active{ color:var(--sfn-green); box-shadow: inset 0 -3px 0 var(--sfn-green); }
.sfn-nutri-table{ width:100%; border-collapse:collapse; }
.sfn-nutri-table th{ background:var(--sfn-chip-bg); text-align:left; padding:10px; }
.sfn-nutri-table td{ padding:10px; border-bottom:1px solid var(--sfn-border); }
.sfn-review .sfn-stars{ color:var(--sfn-orange); }

/* ==========================================================================
   10) KOSZYK / KASA (sekcja 6.4 – 6.6)
   ========================================================================== */
.sfn-cart-row{ display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--sfn-border); }
.sfn-cart-remove{ color:var(--sfn-error) !important; background:none; border:0; cursor:pointer; }
.sfn-summary-card{ background:var(--sfn-card-bg); border:1px solid var(--sfn-border); border-radius:var(--sfn-radius-block); padding:22px; }
.sfn-free-shipping{ color:var(--sfn-green); font-weight:700; }
.sfn-checkout-layout{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sfn-gap-2col); }
@media (max-width:1199px){ .sfn-checkout-layout{ grid-template-columns:1fr; } }
.sfn-checkout-layout .sfn-summary-card{ position:sticky; top:100px; }
.sfn-field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.sfn-field input, .sfn-field textarea, .sfn-field select{
  width:100%; border:1px solid var(--sfn-border); border-radius:8px; padding:10px 12px; background:var(--sfn-card-bg);
}
.sfn-field input:focus, .sfn-field textarea:focus{ outline-color:var(--sfn-green); }
.sfn-field.has-error input{ border-color:var(--sfn-error); }
.sfn-field .sfn-error-msg{ color:var(--sfn-error); font-size:12px; margin-top:4px; }

.sfn-confirm-card{ max-width:560px; margin:0 auto; text-align:center; padding:40px; }
.sfn-confirm-check{ width:72px; height:72px; border-radius:50%; background:var(--sfn-green); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:32px; }

/* ==========================================================================
   11) TOAST (sekcja 7)
   ========================================================================== */
.sfn-toast{
  position:fixed; right:20px; bottom:20px; background:var(--sfn-ink); color:#fff;
  padding:12px 18px; border-radius:8px; box-shadow:var(--sfn-shadow-toast);
  font-weight:700; font-size:14px; z-index:99999; opacity:0; transform:translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.sfn-toast.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   12) STOPKA
   ========================================================================== */
#main-footer, .et_builder_inner_content .sfn-footer{
  background:var(--sfn-green-dark); color:var(--sfn-footer-text-2);
}
.sfn-footer h4{ color:var(--sfn-footer-text-1); }
.sfn-footer a{ color:var(--sfn-footer-text-2); }
.sfn-footer a:hover{ color:#fff; }
.sfn-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:24px; }
@media (max-width:1199px){ .sfn-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:767px){ .sfn-footer-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   13) O NAS / KONTAKT / REGULAMIN (sekcje 6.7–6.9)
   ========================================================================== */
.sfn-values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sfn-gap-cards); }
@media (max-width:767px){ .sfn-values-grid{ grid-template-columns:1fr; } }
.sfn-contact-layout{ display:grid; grid-template-columns:1fr 1.2fr; gap:var(--sfn-gap-2col); }
@media (max-width:767px){ .sfn-contact-layout{ grid-template-columns:1fr; } }
.sfn-text-col{ max-width:760px; }
.sfn-text-col.sfn-narrow{ max-width:720px; }