/*
Theme Name: Kreatywna Kawa
Description: Motyw potomny Storefront ostylowany na wygląd kreatywnakawa.pl (Open Sans, #a3875d, #252726).
Template: storefront
Version: 1.0
Text Domain: kreatywna-kawa
*/

/* ===== Fonty (self-hosted, jak na kreatywnakawa.pl) ===== */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(fonts/Open-Sans-300.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/Open-Sans-400.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/Open-Sans-700.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(fonts/Open-Sans-800.woff2) format('woff2'); }

:root {
  --kk-gold: #a3875d;
  --kk-gold-dark: #8a7049;
  --kk-dark: #252726;
  --kk-text: #666;
  --kk-heading: #2e2e2e;
}

/* ===== Typografia ===== */
body, button, input, select, textarea {
  font-family: 'Open Sans', sans-serif;
  color: var(--kk-text);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
  color: var(--kk-heading);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
a { color: var(--kk-gold); }
a:hover { color: var(--kk-gold-dark); }

/* ===== Nagłówek / menu — ciemny pasek jak na kreatywnakawa.pl ===== */
.site-header,
.storefront-primary-navigation,
.main-navigation ul.menu ul.sub-menu {
  background-color: var(--kk-dark);
}
.site-header { border-bottom: none; padding-top: .6em; }
.site-branding h1 a, .site-header .site-title a { color: #fff; }
.main-navigation ul li a,
.site-title a, .site-header-cart .cart-contents,
.site-header .widget_shopping_cart .total,
.site-search .widget_product_search input[type=search] { color: #fff; }
.main-navigation ul li a {
  text-transform: uppercase;
  font-size: .82em;
  letter-spacing: .12em;
  font-weight: 400;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a { color: var(--kk-gold); }
.site-header-cart .cart-contents:hover { color: var(--kk-gold); }
.storefront-handheld-footer-bar { background-color: var(--kk-dark); }

/* logo w nagłówku */
.custom-logo-link img, .site-logo-anchor img { max-height: 56px; width: auto; }

/* ===== Przyciski ===== */
button, input[type=button], input[type=reset], input[type=submit],
.button, .added_to_cart, .widget a.button, .site-header-cart .widget_shopping_cart a.button,
.wp-block-button__link {
  background-color: var(--kk-gold);
  color: #fff;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .82em;
}
button:hover, .button:hover, .wp-block-button__link:hover,
.added_to_cart:hover { background-color: var(--kk-gold-dark); color: #fff; }
.button.alt, button.alt, input[type=submit].alt,
.wc-block-components-checkout-place-order-button {
  background-color: var(--kk-dark); color: #fff;
}
.button.alt:hover { background-color: #000; }

/* przycisk konturowy (jak „WEJDŹ NA STRONĘ" w hero) */
.kk-btn-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.kk-btn-outline .wp-block-button__link:hover { background: rgba(255,255,255,.15); }

/* ===== Sekcje / ozdobniki ===== */
.kk-sub {
  color: var(--kk-gold) !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8em !important;
  font-weight: 400;
}
.kk-sep {
  border: 0;
  border-top: 1px solid var(--kk-heading);
  width: 220px;
  margin: 1.2em auto;
}
.kk-hero { min-height: 92vh; }
.kk-hero h1, .kk-hero p { color: #fff; }
.kk-hero h1 {
  font-weight: 300;
  letter-spacing: .35em;
  font-size: 1.6em;
}
.kk-hero img.kk-hero-logo { max-width: 300px; height: auto; }
.kk-band h2 {
  color: #fff;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 2.4em;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* ===== WooCommerce — karty produktów ===== */
ul.products li.product .woocommerce-loop-product__title {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .92em;
  color: var(--kk-heading);
}
ul.products li.product .price,
.single-product div.product p.price { color: var(--kk-gold); font-weight: 700; }
.single-product div.product .product_title { font-size: 1.5em; }
.onsale { background-color: var(--kk-gold); border-radius: 0; }
.woocommerce-breadcrumb { background: transparent; }
.star-rating span:before, p.stars a:hover:after, p.stars a:after { color: var(--kk-gold); }

/* ===== Stopka — ciemna jak na kreatywnakawa.pl ===== */
.site-footer {
  background-color: var(--kk-dark);
  color: #bbb;
}
.site-footer a:not(.button) { color: #ddd; }
.site-footer a:not(.button):hover { color: var(--kk-gold); }
.site-footer .widget-title { color: #fff; }
.site-info { text-align: center; font-size: .85em; }

/* drobiazgi */
.storefront-sorting { font-size: .85em; }
.woocommerce-store-notice, p.demo_store { background-color: var(--kk-gold); }

/* ===== Pełna szerokość sekcji na stronach Storefront ===== */
.kk-full {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw;
  width: 100vw;
}
.home .entry-header, .home .site-main > .type-page > .entry-header { display: none; }
.home .site-main { margin-bottom: 0; }
.home .content-area, .home .site-content .col-full { max-width: none; padding-left: 0; padding-right: 0; }
.home .kk-inner { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 1.5em; }

/* nagłówki na coverach muszą być białe (Storefront nadpisuje kolor) */
.kk-hero h1, .kk-hero .wp-block-heading, .kk-band h2, .kk-band .wp-block-heading { color: #fff !important; }

/* jednolite, kwadratowe miniatury produktów */
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }

/* ===== Animacje (klasy nadaje kk-anim.js — bez JS wszystko widoczne) ===== */
.kk-anim { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.kk-anim.kk-widoczne { opacity: 1; transform: none; }
.kk-hero .wp-block-cover__inner-container { animation: kk-hero-wjazd 1.3s ease both .2s; }
@keyframes kk-hero-wjazd { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
ul.products li.product { transition: transform .35s ease, box-shadow .35s ease; }
ul.products li.product:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(37, 39, 38, .15); }
@media (prefers-reduced-motion: reduce) {
  .kk-anim, .kk-hero .wp-block-cover__inner-container { opacity: 1; transform: none; transition: none; animation: none; }
}