/*
Theme Name: Netlantino Conversion Child
Theme URI: https://netlantino.pl/
Description: Motyw potomny dla Netlantino. Dodaje nowe logo "paczka w ruchu", spojna palete marki oraz usprawnienia konwersji WooCommerce (przyciski w kolorze marki, lepki przycisk koszyka na mobile, pasek progu do gratisu, rzad zaufania pod przyciskiem zakupu). Zaprojektowany pod skalowanie sprzedazy. Nie nadpisuje plikow motywu rodzica.
Author: UX/UI
Author URI: https://netlantino.pl/
Template: netlantino-ux-theme-brand-ready-pro
Version: 1.2.0
Requires at least: 6.0
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: netlantino-child
*/

/* ============================================================
   1. Paleta marki (zmienne globalne)
   ============================================================ */
:root {
  --ntl-blue: #185FA5;
  --ntl-navy: #042C53;
  --ntl-coral: #D85A30;
  --ntl-coral-dark: #B4471F;
  --ntl-sand: #F1EFE8;
  --ntl-blue-light: #E6F1FB;
  --ntl-radius: 10px;
}

/* ============================================================
   2. Przyciski w kolorze marki (spojny CTA w calym sklepie)
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.single_add_to_cart_button,
a.add_to_cart_button,
.wc-block-components-button,
.wp-block-button__link {
  background-color: var(--ntl-coral) !important;
  border-color: var(--ntl-coral) !important;
  color: #ffffff !important;
  border-radius: var(--ntl-radius) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover,
a.add_to_cart_button:hover,
.wc-block-components-button:hover,
.wp-block-button__link:hover {
  background-color: var(--ntl-coral-dark) !important;
  border-color: var(--ntl-coral-dark) !important;
  color: #ffffff !important;
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.single_add_to_cart_button:active,
a.add_to_cart_button:active {
  transform: scale(0.98);
}

/* Ceny i akcenty linkow w granacie marki */
.woocommerce .price,
.woocommerce span.amount,
.woocommerce-Price-amount {
  color: var(--ntl-navy);
}

/* ============================================================
   3. Rzad zaufania pod przyciskiem "Dodaj do koszyka"
   ============================================================ */
.ntl-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 14px 0 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ntl-navy);
}
.ntl-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ntl-trust span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ntl-coral);
  display: inline-block;
}

/* ============================================================
   4. Pasek progu do gratisu / progu darmowej wysylki
   ============================================================ */
.ntl-free-bar {
  background: var(--ntl-blue-light);
  border: 1px solid #B5D4F4;
  border-radius: var(--ntl-radius);
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ntl-navy);
}
.ntl-free-bar strong { color: var(--ntl-coral-dark); }
.ntl-free-bar.is-complete { background: #E1F5EE; border-color: #9FE1CB; }
.ntl-free-track {
  margin-top: 8px;
  height: 8px;
  width: 100%;
  background: #ffffff;
  border-radius: 999px;
  overflow: hidden;
}
.ntl-free-fill {
  height: 100%;
  background: var(--ntl-coral);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ============================================================
   5. Lepki przycisk koszyka na telefonie (single product)
   ============================================================ */
.ntl-sticky-cart {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid #D3D1C7;
  box-shadow: 0 -4px 16px rgba(4, 44, 83, 0.08);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.ntl-sticky-cart.show { transform: translateY(0); }
.ntl-sc-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ntl-sc-title {
  font-size: 13px;
  color: var(--ntl-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ntl-sc-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--ntl-navy);
}
.ntl-sc-btn {
  flex: 0 0 auto;
  background: var(--ntl-coral);
  color: #ffffff;
  border: none;
  border-radius: var(--ntl-radius);
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.ntl-sc-btn:hover { background: var(--ntl-coral-dark); }

/* Pokazuj lepki pasek tylko na malych ekranach */
@media (min-width: 769px) {
  .ntl-sticky-cart { display: none !important; }
}

/* ============================================================
   6. v1.1 — Czystszy nagłówek i układ karty produktu
   ============================================================ */

/* 6a. Mniejsze logo w nagłówku (klasa nadawana przez conversion.js) */
.ntl-logo,
.site-header .ntl-logo,
header .ntl-logo {
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
}

/* 6b. Karta produktu: galeria po lewej, decyzja po prawej, opis pod spodem.
       Dotyczy standardowego znacznika WooCommerce. Jesli single product
       budujesz w Elementor Theme Builder, ten blok po prostu nie zadziala
       (bezpiecznie) — uklad ustaw wtedy w buatorze wg makiety. */
@media (min-width: 769px) {
  .woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .woocommerce div.product .woocommerce-product-gallery {
    grid-column: 1;
    float: none;
    width: auto !important;
    margin: 0;
  }
  .woocommerce div.product .summary {
    grid-column: 2;
    float: none;
    width: auto !important;
    margin: 0;
  }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .upsells,
  .woocommerce div.product .related {
    grid-column: 1 / -1;
  }
}

/* 6c. Blok USP/UVP nad cena (dodaj klase .ntl-usp w opisie krotkim produktu) */
.ntl-usp {
  background: #F8F6F0;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--ntl-navy);
}
.ntl-usp li { list-style: none; display: flex; gap: 8px; align-items: flex-start; }
.ntl-usp li::before { content: "✓"; color: #1D9E75; font-weight: 700; }

/* 6d. Czytelne miniatury galerii + aktywny wariant w kolorze marki */
.woocommerce div.product .flex-control-thumbs li img {
  border-radius: 8px;
  border: 0.5px solid #E5E3DC;
}
.woocommerce div.product .variations .button.selected,
.woocommerce div.product .variations [aria-pressed="true"] {
  border-color: var(--ntl-blue) !important;
  box-shadow: 0 0 0 1px var(--ntl-blue) inset;
}