:root{

--green:#4f6f52;
--green-dark:#3f5941;
--beige:#f5f0e6;
--brown:#4b352a;

}


*{

box-sizing:border-box;
margin:0;
padding:0;

}


body{

font-family:Arial, Helvetica, sans-serif;
background:#fafafa;
color:#333;
line-height:1.6;

}



.nav{

max-width:1200px;
margin:auto;
padding:15px 20px;

display:flex;
align-items:center;
justify-content:space-between;

}


.site-header{

background:white;
position:sticky;
top:0;
z-index:100;

box-shadow:0 2px 10px rgba(0,0,0,.08);

}


.logo a{

font-size:30px;
font-weight:bold;
color:var(--green);

text-decoration:none;

}



.main-navigation a{

text-decoration:none;
color:#333;
margin-left:25px;
font-weight:600;

}



.cart-link a{

text-decoration:none;
font-size:20px;

}



.site-footer{

background:#222;
color:white;

text-align:center;

padding:40px 20px;

margin-top:60px;

}

.hero{

background:
linear-gradient(
rgba(0,0,0,.35),
rgba(0,0,0,.35)
),
url("https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1600&q=80");

background-size:cover;
background-position:center;

min-height:600px;

display:flex;
align-items:center;

color:white;

}



.hero-content{

max-width:1200px;
margin:auto;
padding:40px;

}



.hero h1{

font-size:58px;
margin-bottom:20px;

}



.hero p{

font-size:20px;
max-width:750px;

margin-bottom:20px;

}



.btn{

display:inline-block;

background:var(--green);

color:white;

padding:14px 28px;

border-radius:6px;

text-decoration:none;

font-weight:bold;

}



.features{

max-width:1200px;

margin:auto;

padding:80px 20px;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}



.feature{

background:white;

padding:30px;

text-align:center;

border-radius:10px;

box-shadow:
0 5px 15px rgba(0,0,0,.08);

}



.section-title{

text-align:center;

margin:30px 0;

font-size:40px;

color:var(--brown);

}



.about{

background:var(--beige);

padding:80px 20px;

}



.about-inner{

max-width:1000px;

margin:auto;

text-align:center;

}

.products-section{
    max-width:1200px;
    margin:80px auto;
    padding:0 20px;
}

.products-section ul.products{
    margin-top:40px;
}

.products-section .woocommerce ul.products li.product{
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    background:#fff;
    padding-bottom:20px;
    transition:.25s;
}

.products-section .woocommerce ul.products li.product:hover{
    transform:translateY(-5px);
}

.products-section .woocommerce ul.products li.product img{
    margin:0;
}

/* HerbalBee WooCommerce products */

.products-section {
    max-width:1200px;
    margin:auto;
}


/*
.products {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    padding:20px;

}
*/


.home .products {

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

    padding:20px;

}

.products .card {

    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}


.products .card img {

    width:100%;

    height:260px;

    object-fit:cover;

}


.products .card-content {

    padding:25px;

}


.products .price {

    color:#4f6f52;

    font-size:26px;

    font-weight:bold;

    margin:15px 0;

}


.products .btn {

    display:inline-block;

    background:#4f6f52;

    color:white;

    padding:12px 25px;

    border-radius:6px;

    text-decoration:none;

}


.products .btn:hover {

    background:#3f5941;

}


/*
.single-product .quantity input.qty {
    width: 60px;
    height: 42px;
    padding: 8px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
}
*/

.single-product .quantity input.qty {

    width:60px !important;
    height:42px !important;

    padding:4px !important;

    text-align:center;

    font-size:16px;

}



/* ==============================
   HerbalBee Single Product Layout
   ============================== */


.product-page {

    max-width:1200px;
    margin:60px auto;
    padding:0 20px;

}




/* zdjęcie */

.product-image {

    width:500px;

    max-width:100%;

    background:transparent;

    padding:0;

    margin:0;

}



.product-image .woocommerce-product-gallery {

    width:100% !important;

    margin:0 !important;

}



.product-image .woocommerce-product-gallery__wrapper {

    margin:0 !important;

}



.product-image img {

    display:block;

    width:100% !important;

    max-width:500px;

    max-height:500px;

    height:auto;

    object-fit:contain;

    border-radius:12px;

}



/* prawa strona */

.product-details {

    width:450px;

    max-width:100%;

    background:white;

    padding:35px;

    border-radius:12px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



.product-details h1 {

    font-size:36px;

    line-height:1.2;

    color:var(--brown);

    margin-bottom:20px;

}



.product-price {

    font-size:28px;

    color:var(--green);

    font-weight:bold;

    margin-bottom:20px;

}



.product-description {

    margin-bottom:25px;

}



/* warianty */

.variations_form select {

    width:100%;

    padding:10px;

    border-radius:6px;

    border:1px solid #ccc;

}


/* ilość + koszyk */

.product-cart {

    margin-top:25px;

}



.product-cart .quantity {

    display:inline-block;

    margin-right:15px;

}



.product-cart input.qty {

    width:60px !important;

    height:42px !important;

    padding:4px !important;

    text-align:center;

    font-size:16px;

}



.product-cart button {

    background:var(--green);

    color:white;

    border:none;

    padding:14px 30px;

    border-radius:6px;

    font-weight:bold;

    cursor:pointer;

}



/* meta */

.product_meta {

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #ddd;

    font-size:15px;

    line-height:1.8;

}


.product_meta span {

    display:block;

    margin-bottom:8px;

}



/* zakładki */

.product-tabs {

    margin-top:50px;

}



@media(max-width:900px){

    .product-main {

        grid-template-columns:1fr;

    }


    .product-image {

        width:100%;

    }


    .product-details {

        width:100%;

    }

}



/* HerbalBee variations */

.variations {

    margin-bottom:20px;

}


.variations td.label {

    padding-right:15px;

}


.variations label {

    font-weight:bold;

    color:var(--brown);

}


.variations select {

    min-width:180px;

    padding:10px 12px;

    border:1px solid #ccc;

    border-radius:6px;

    background:white;

    font-size:16px;

}


.reset_variations {

    color:var(--green);

    margin-left:10px;

}




/* ==============================
   HerbalBee add to cart section
   ============================== */


.product-cart form.cart {

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}


.product-cart .quantity {

    margin:0;

}


.product-cart .quantity input.qty {

    width:70px !important;

    height:46px !important;

    padding:5px !important;

    border:1px solid #ccc;

    border-radius:6px;

    font-size:18px;

}


.product-cart button.single_add_to_cart_button {

    height:46px;

    padding:0 35px;

    background:var(--green);

    color:white;

    border:none;

    border-radius:6px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}


.product-cart button.single_add_to_cart_button:hover {

    background:var(--green-dark);

}

/* HerbalBee WooCommerce add to cart button */

.single_add_to_cart_button {

    background: var(--green) !important;

    color: white !important;

    height: 46px;

    padding: 0 35px;

    border: none !important;

    border-radius: 6px;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

}


.single_add_to_cart_button:hover {

    background: var(--green-dark) !important;

}


/* przycisk nieaktywny przed wyborem wariantu */

.single_add_to_cart_button.disabled {

    opacity: 0.6;

}


/* ==========================
   WooCommerce Cart
   ========================== */


.woocommerce-cart .site-main,
.woocommerce-cart main {

    max-width:1200px;
    margin:60px auto;
    padding:0 20px;

}


.woocommerce-cart-form,
.cart-collaterals {

    background:white;

    border-radius:12px;

    padding:30px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}


/* tabela koszyka */

.woocommerce table.shop_table {

    border-collapse:separate;

    border-spacing:0;

    width:100%;

    border:none;

}


.woocommerce table.shop_table th {

    background:#f5f0e6;

    color:var(--brown);

    padding:15px;

}


.woocommerce table.shop_table td {

    padding:15px;

    border-bottom:1px solid #eee;

}



/* zdjęcie produktu */

.woocommerce-cart table.cart img {

    width:80px;

    border-radius:8px;

}



/* ilość */

.woocommerce-cart .quantity input.qty {

    width:70px !important;

    height:42px !important;

}



/* przycisk aktualizacji */

.woocommerce button[name="update_cart"] {

    background:#ddd;

    border-radius:6px;

    padding:12px 20px;

}



/* podsumowanie */

.cart_totals h2 {

    color:var(--brown);

}


.cart_totals {

    margin-top:30px;

}



/* przejście do płatności */

.woocommerce a.checkout-button {

    background:var(--green) !important;

    color:white !important;

    border-radius:8px;

    padding:15px 30px;

    font-weight:bold;

}


.woocommerce a.checkout-button:hover {

    background:var(--green-dark) !important;

}


/* ==========================
   HerbalBee WooCommerce Cart
   Cart Blocks
   ========================== */


/* cały koszyk */

.wp-block-woocommerce-cart {

    max-width:1200px;

    margin:60px auto;

    padding:0 20px;

}



/* główny układ */

.wc-block-cart {

    gap:40px;

}



/* lewa część produkty */

.wc-block-components-main {

    background:white;

    border-radius:12px;

    padding:30px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



/* prawa część podsumowanie */

.wc-block-components-sidebar {

    background:white;

    border-radius:12px;

    padding:30px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



/* nazwy produktów */

.wc-block-components-product-name {

    color:var(--brown);

    font-weight:bold;

    text-decoration:none;

}



/* cena */

.wc-block-components-product-price {

    color:var(--green);

}



/* ilość */

.wc-block-components-quantity-selector__input {

    width:60px !important;

    height:40px !important;

    text-align:center;

}



/* przyciski + - */

.wc-block-components-quantity-selector__button {

    background:var(--beige);

}



/* usuń produkt */

.wc-block-cart-item__remove-link {

    color:#777;

}



/* przycisk płatności */

.wc-block-cart__submit-button {

    background:var(--green) !important;

    color:white !important;

    border-radius:8px !important;

    font-weight:bold;

}



.wc-block-cart__submit-button:hover {

    background:var(--green-dark) !important;

}



/* ==========================
   HerbalBee WooCommerce Checkout
   Blocks
   ========================== */


.wp-block-woocommerce-checkout {

    max-width:1200px;

    margin:60px auto;

    padding:0 20px;

}


/* główny układ */

.wc-block-checkout {

    gap:40px;

}



/* lewa strona formularza */

.wc-block-checkout__main {

    background:white;

    padding:35px;

    border-radius:12px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



/* prawa strona podsumowania */

.wc-block-checkout__sidebar {

    background:white;

    padding:30px;

    border-radius:12px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



/* nagłówki */

.wc-block-components-checkout-step__title {

    color:var(--brown);

}



/* pola formularza */

.wc-block-components-text-input input,
.wc-block-components-combobox-control input,
.wc-block-components-select select {

    border-radius:6px;

}



/* przycisk zamówienia */

.wc-block-components-checkout-place-order-button {

    background:var(--green) !important;

    color:white !important;

    border-radius:8px !important;

    font-weight:bold;

}


.wc-block-components-checkout-place-order-button:hover {

    background:var(--green-dark) !important;

}



/* HerbalBee checkout width */

.wp-block-woocommerce-checkout {

    max-width:1200px;

    margin:60px auto;

    padding:0 20px;

}

/* ==========================
   HerbalBee Checkout Layout
   ========================== */


.wp-block-woocommerce-checkout 
.wc-block-components-sidebar-layout {

    display:grid;

    grid-template-columns:
    minmax(0, 1fr)
    380px;

    gap:40px;

    align-items:start;

}


/* formularz */

.wp-block-woocommerce-checkout 
.wc-block-checkout__main {

    width:auto;

}



/* podsumowanie */

.wp-block-woocommerce-checkout 
.wc-block-components-sidebar {

    width:auto;

}



/* ekran mobilny */

@media(max-width:900px){

    .wp-block-woocommerce-checkout 
    .wc-block-components-sidebar-layout {

        grid-template-columns:1fr;

    }

}


.main-navigation ul{

    list-style:none;

    display:flex;

    align-items:center;

    gap:25px;

    margin:0;

    padding:0;

}


.main-navigation li{

    margin:0;

    padding:0;

}


.main-navigation a{

    text-decoration:none;

    color:#333;

    font-weight:600;

    transition:.2s;

}


.main-navigation a:hover{

    color:var(--green);

}

/* Logo wystające poza nagłówek */

.site-header {

    height:80px;

}


.nav {

    height:80px;

}




/*
.logo img.custom-logo {

    position:absolute;

    top:-40px;

    left:0;

    max-height:110px;

    width:auto;

    z-index:200;

}
*/

.brand-name {

    font-size:32px;

    font-weight:bold;

    margin-left:12px;

    white-space:nowrap;

}


.brand-herbal {

    color: rgb(79, 111, 82);

}


.brand-bee {

    color:rgb(216, 161, 43);

}


/* ==========================
   Standard pages
   ========================== */


.page-content {

    max-width:1000px;

    margin:60px auto;

    padding:0 20px;

}


.page-title {

    text-align:center;

    font-size:42px;

    color:var(--brown);

    margin-bottom:40px;

}


.page-body {

    background:white;

    padding:40px;

    border-radius:12px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

    font-size:18px;

    line-height:1.8;

}


.page-body p {

    margin-bottom:20px;

}


.site-header {

    position:relative;

    z-index:1000;

}



.logo {

    position:relative;

    z-index:2000;

}


/* HerbalBee logo - poprawiony układ */

.site-header {

    background:white;

    position:sticky;

    top:0;

    z-index:1000;

    overflow:visible;

}

.nav {

    min-height:80px;

    overflow:visible;

}





.logo img.custom-logo {

    display:block;

    max-height:120px;

    width:auto;

    margin-top:30px;

}


/* ==========================
   HerbalBee Shop Archive
   ========================== */


.shop-container {

    max-width:1200px;

    margin:60px auto;

    padding:0 20px;

}



/* nagłówek sklepu */

.woocommerce .woocommerce-breadcrumb {

    margin-bottom:30px;

    font-size:15px;

}



.woocommerce-result-count {

    margin:20px 0;

    float:none;

}



/* sortowanie */

.woocommerce-ordering {

    float:none;

    margin-bottom:40px;

}


.woocommerce-ordering select {

    padding:10px;

    border-radius:6px;

    border:1px solid #ccc;

}



/* produkty */

/*
.woocommerce ul.products {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin:40px 0;

    padding:0;

}
*/

.woocommerce ul.products li.product {

    float:none;

    width:auto;

    margin:0;

    background:white;

    padding:25px;

    border-radius:12px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

    text-align:center;

}



.product-card img {

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:10px;

}



.product-title {

    font-size:22px;

    color:var(--brown);

    margin:15px 0;

}



.product-card .price {

    color:var(--green);

    font-size:24px;

    font-weight:bold;

    display:block;

    margin-bottom:20px;

}



/* przycisk */

.product-card .button {

    background:var(--green);

    color:white;

    padding:12px 25px;

    border-radius:6px;

    text-decoration:none;

    display:inline-block;

    font-weight:bold;

}


.product-card .button:hover {

    background:var(--green-dark);

}


.woocommerce ul.products li.product {
    width:100% !important;
    float:none !important;
    clear:none !important;
}


.woocommerce ul.products {

    display:grid !important;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/* Ostateczna poprawka WooCommerce grid */

/* WooCommerce grid - remove clearfix pseudo elements */

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content:none !important;
    display:none !important;
}


