/*
Theme Name: Salient Velua Child
Description: Child theme motywu Salient dla velua.pl — trwała customizacja wyglądu (nie nadpisze się przy aktualizacji Salienta), zamiast pola Additional CSS. Kolejność sekcji i treść strony bez zmian — to wyłącznie warstwa wizualna.
Template: salient-2
Version: 1.0.0
Author: velua.pl
*/

:root{
  --velua-accent:      #c889e5; /* realny akcent motywu (Nectar Theme Options) */
  --velua-accent-mid:  #b158da;
  --velua-accent-dark: #9e2ed1; /* wersja czytelna na białym tle (AA) */
  --velua-accent-deep: #8427b0; /* hover/active, mocniejszy nacisk */
  --velua-accent-pale: #f5edfa; /* delikatne tło sekcji / linie */
  --velua-dark:        #25152d; /* głęboki, "premium" fiolet-czerń — stopka/pasek promo, jak ciemne sekcje na koji */
  --velua-text:        #2e2a39;
  --velua-radius:       14px;
  --velua-radius-sm:    8px;
  --velua-shadow:       0 8px 22px rgba(158,46,209,0.10);
  --velua-shadow-hover: 0 16px 36px rgba(158,46,209,0.20);
  --velua-ease: cubic-bezier(.2,.75,.5,1); /* ta sama krzywa co natywne animacje Salient */
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}

/* ---------- 1. ODDECH MIĘDZY SEKCJAMI (więcej "oddechu", jak na koji) ---------- */
.container-wrap > .row,
.vc_row.wpb_row{
  padding-top: 68px;
  padding-bottom: 68px;
}
h2.vc_custom_heading, .wpb_wrapper h2{
  letter-spacing: 0.2px;
  margin-bottom: 18px;
}
h3, .wpb_wrapper h3{
  letter-spacing: 0.2px;
}

/* ---------- 2. NAGŁÓWEK (HEADER) ---------- */
#header-outer{
  box-shadow: 0 2px 20px rgba(46,42,57,0.06);
}
#header-outer .cart-outer .cart-icon-wrap,
#top nav ul li a{
  transition: transform .25s var(--velua-ease), color .25s var(--velua-ease);
}
#header-outer .cart-outer .cart-icon-wrap:hover{
  transform: scale(1.08);
}
/* delikatne podkreślenie linku menu przy hover */
#top nav > ul > li:not([class*="button_"]) > a{
  position: relative;
}
#top nav > ul > li:not([class*="button_"]) > a:after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:2px; border-radius:2px;
  background: var(--velua-accent-dark);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--velua-ease);
}
#top nav > ul > li:not([class*="button_"]) > a:hover:after{
  transform: scaleX(1);
}

/* ---------- 3. PRZYCISKI — dopieszczenie (kształt pigułki już jest z motywu) ---------- */
.nectar-button,
a.button.product_type_simple,
.add_to_cart_button,
.wc-block-components-button{
  transition: transform .25s var(--velua-ease), box-shadow .25s var(--velua-ease), background-color .25s var(--velua-ease) !important;
}
.nectar-button:hover,
a.button.product_type_simple:hover,
.add_to_cart_button:hover,
.wc-block-components-button:hover{
  transform: translateY(-2px);
  box-shadow: var(--velua-shadow-hover);
}
.nectar-button:active,
a.button.product_type_simple:active,
.add_to_cart_button:active{
  transform: translateY(0);
}
html body .nectar-button[data-color*="accent-color"]{
  background-color: var(--velua-accent-dark) !important;
  border-color: var(--velua-accent-dark) !important;
}
html body .nectar-button[data-color*="accent-color"]:hover{
  background-color: var(--velua-accent-deep) !important;
  border-color: var(--velua-accent-deep) !important;
}

/* ---------- 4. SIATKA SKLEPU — karty produktów, styl "unoszącego się" produktu jak na koji ---------- */
html body ul.products li.product.minimal .product-wrap{
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .3s var(--velua-ease);
}
ul.products li.product.minimal .product-image-wrap img{
  transition: transform .5s var(--velua-ease), filter .3s var(--velua-ease);
  filter: drop-shadow(0 10px 18px rgba(46,42,57,0.14));
}
ul.products li.product.minimal:hover .product-image-wrap img{
  transform: scale(1.035);
  filter: drop-shadow(0 16px 26px rgba(46,42,57,0.20));
}
/* Więcej oddechu między kartami w siatce */
ul.products li.product{
  margin-bottom: 46px !important;
}
.woocommerce-loop-product__title{
  font-weight: 600;
  color: var(--velua-text);
}

/* Cena — ciemna, wyrazista waga (jak na koji: czarny tekst + wyszarzona stara cena),
   fiolet zarezerwowany dla odznaki promocji i CTA */
html body .woocommerce ul.products li.product .price,
html body .woocommerce ul.products li.product .price ins,
html body .woocommerce ul.products li.product .price .amount{
  color: var(--velua-text) !important;
  font-weight: 700 !important;
}
html body .woocommerce ul.products li.product .price del .amount{
  color: #a3a0ab !important;
  font-weight: 400 !important;
  opacity: .8;
}

/* Badge "Promocja" — styl "wstążki" w rogu, jak odznaka Bestseller na koji,
   zamiast pigułki na środku krawędzi */
html body span.onsale{
  background: var(--velua-accent-dark) !important;
  color: #fff !important;
  border-radius: 0 0 6px 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 0.4px;
  padding: 6px 12px !important;
  top: 0 !important;
  left: 0 !important;
  box-shadow: 0 4px 10px rgba(158,46,209,0.25);
}

/* Gwiazdki ocen */
.woocommerce .star-rating span:before,
.star-rating span:before{
  color: var(--velua-accent-dark) !important;
}

/* ---------- 5. STRONA POJEDYNCZEGO PRODUKTU ---------- */
.single-product div.summary{
  padding-left: 32px;
}
.single-product .product_title{
  margin-bottom: 12px;
}
.woocommerce-product-gallery__image img,
.single-product img.wp-post-image{
  border-radius: var(--velua-radius);
  transition: transform .4s var(--velua-ease);
}
.woocommerce-product-gallery__image:hover img{
  transform: scale(1.02);
}
html body div.woocommerce-tabs.wc-tabs-wrapper,
html body .product .woocommerce-tabs.wc-tabs-wrapper{
  margin-top: 0 !important;
  padding-top: 40px !important;
  border-top: 1px solid var(--velua-accent-pale) !important;
}
.quantity input.qty{
  border-radius: var(--velua-radius-sm);
  text-align: center;
}
.related.products,
.upsells.products{
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--velua-accent-pale);
}

/* ---------- 6. KOSZYK / CHECKOUT (WooCommerce Blocks) ---------- */
.wc-block-cart{ padding-top: 24px; }
.wc-block-cart-item,
.wc-block-cart__row{ border-radius: var(--velua-radius-sm); }
.wc-block-components-totals-coupon__input-coupon{ border-radius: var(--velua-radius-sm) !important; }
.wc-block-cart__submit-container .wp-block-button__link,
.wc-block-components-checkout-return-to-cart-button{ border-radius: 999px !important; }

/* ---------- 7. STOPKA / SEKCJA KOŃCOWA STRONY ---------- */
/* Kolor tła (dawniej #c889e5) jest teraz NATYWNIE zapisany w globalnej
   sekcji "Footer" (post ID 1172) jako bg_color/background_color — nie
   trzeba go już nadpisywać CSS-em, to prawdziwe ustawienie WPBakery. */
.nectar-global-section.before-footer a{ transition: color .2s var(--velua-ease); }
.nectar-global-section.before-footer a:hover{ color: var(--velua-accent) !important; }
#footer-outer{
  padding-top: 40px;
  border-top: 1px solid var(--velua-accent-pale);
}
#footer-outer a{ transition: color .2s var(--velua-ease); }
#footer-outer a:hover{ color: var(--velua-accent-dark) !important; }
#footer-outer #social a i{ transition: transform .25s var(--velua-ease); }
#footer-outer #social a:hover i{ transform: translateY(-3px); }

/* ---------- 8. MENU BOCZNE / OFF-CANVAS (koszyk boczny) ---------- */
.slide-out-widget-area{
  box-shadow: -10px 0 30px rgba(46,42,57,0.15);
}

/* ---------- 9. DOSTĘPNOŚĆ — widoczny fokus zamiast domyślnego "obrysu znikąd" ---------- */
a:focus-visible,
button:focus-visible,
.nectar-button:focus-visible{
  outline: 2px solid var(--velua-accent-dark);
  outline-offset: 2px;
}

/* ---------- 9b. PASEK PROMOCYJNY (licznik "-30% kończy się za") ---------- */
/* Kolor tła jest teraz natywnie zapisany w treści globalnej sekcji
   (post ID 1985) jako background-color w inline style bloku — nie CSS. */

/* ---------- 10. HERO — typografia ---------- */
.nectar-title-container h1,
[data-inherit-heading-family="h1"]{
  letter-spacing: 0.2px;
}
.nectar-title-container .nectar-button,
.nectar-title-container a.nectar-button{
  box-shadow: var(--velua-shadow-hover);
}
/* Falisty divider pod hero jest teraz prawdziwym SVG w treści strony
   (nie CSS-owym pseudoelementem) — patrz Krok 3 przebudowy. */

/* ---------- 10b. TYPOGRAFIA SEKCJI — więcej rozmachu, jak nagłówki na koji ---------- */
h2.vc_custom_heading,
.wpb_wrapper h2{
  font-weight: 600;
}

/* ---------- 11. MENU MOBILNE / OFF-CANVAS ---------- */
#slide-out-widget-area .menuwrapper > ul > li > a{
  transition: color .2s var(--velua-ease), padding-left .2s var(--velua-ease);
}
#slide-out-widget-area .menuwrapper > ul > li > a:hover{
  color: var(--velua-accent-dark);
  padding-left: 4px;
}
#top nav .slide-out-widget-area-toggle a:hover .lines,
#top nav .slide-out-widget-area-toggle a:hover .lines:before,
#top nav .slide-out-widget-area-toggle a:hover .lines:after{
  background-color: var(--velua-accent-dark) !important;
}

/* ---------- 12. AKORDEON FAQ (toggles) — czysty, zaokrąglony styl jak na koji ---------- */
html body .toggles.accordion .toggle{
  border-radius: var(--velua-radius-sm) !important;
  overflow: hidden;
  margin-bottom: 12px !important;
  transition: box-shadow .25s var(--velua-ease);
}
html body .toggles.accordion .toggle-title a{
  font-weight: 600;
  transition: color .2s var(--velua-ease);
}
html body .toggles.accordion .toggle-title a:hover{
  color: var(--velua-accent-dark) !important;
}
html body .toggles.accordion .toggle-title a i{
  color: var(--velua-accent-dark) !important;
  transition: transform .25s var(--velua-ease);
}
html body .toggles.accordion .toggle.open .toggle-title a i{
  transform: rotate(180deg);
}
html body .toggles.accordion .toggle.open{
  box-shadow: 0 6px 20px rgba(46,42,57,0.08);
}

/* ---------- 13. ZAKŁADKI PRODUKTU (opis / opinie) ---------- */
html body ul.tabs.wc-tabs > li{
  border: none !important;
  background: transparent !important;
  margin-right: 28px !important;
}
html body ul.tabs.wc-tabs > li > a{
  padding: 0 0 10px 0 !important;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--velua-ease), color .2s var(--velua-ease);
}
html body ul.tabs.wc-tabs > li.active > a,
html body ul.tabs.wc-tabs > li > a:hover{
  border-bottom-color: var(--velua-accent-dark) !important;
  color: var(--velua-accent-dark) !important;
}

/* ---------- 14. ILOŚĆ (quantity stepper) — spójny z pigułką przycisków ---------- */
html body .quantity{
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #e6e1ea;
}
html body .quantity input.qty{
  border: none !important;
  border-radius: 0;
}

/* ---------- 15. MENU — aktywna pozycja / hover mocniej zaznaczony ---------- */
#top nav ul li.current-menu-item > a .menu-title-text,
#top nav ul li.current_page_item > a .menu-title-text{
  color: var(--velua-accent-dark) !important;
}
#top nav ul li.current-menu-item > a:after,
#top nav ul li.current_page_item > a:after{
  transform: scaleX(1) !important;
}

/* ---------- 16b. SIATKA PRODUKTÓW W BLOKACH GUTENBERGA (np. rekomendacje w pustym koszyku) ---------- */
/* To inny silnik renderowania niż klasyczna pętla sklepu (ul.products),
   więc dopasowujemy do tego samego stylu "unoszącego się produktu". */
html body .wc-block-grid__product{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-bottom: 8px;
}
html body .wc-block-grid__product .wc-block-grid__product-image img{
  filter: drop-shadow(0 10px 18px rgba(46,42,57,0.14));
  transition: transform .5s var(--velua-ease), filter .3s var(--velua-ease);
}
html body .wc-block-grid__product:hover .wc-block-grid__product-image img{
  transform: scale(1.035);
  filter: drop-shadow(0 16px 26px rgba(46,42,57,0.20));
}
html body .wc-block-grid__product-onsale{
  background: var(--velua-accent-dark) !important;
  color: #fff !important;
  border-radius: 0 0 6px 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 11px !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  box-shadow: 0 4px 10px rgba(158,46,209,0.25);
}
html body .wc-block-grid__product-price{
  color: var(--velua-text) !important;
  font-weight: 700 !important;
}
html body .wc-block-grid__product-price del{
  color: #a3a0ab !important;
}
html body .wc-block-grid__product-add-to-cart .wp-block-button__link{
  border-radius: 999px !important;
}

/* ---------- 16. DROBNE SMACZKI ---------- */
.cart-outer .cart-contents .cart-wrap span,
#header-outer a.cart-contents .cart-wrap span{
  transition: transform .2s var(--velua-ease);
}
ul.products li.product .nectar-love,
ul.products li.product .icon-salient-m-eye{
  transition: transform .25s var(--velua-ease), color .25s var(--velua-ease);
}
ul.products li.product .nectar-love:hover,
ul.products li.product .icon-salient-m-eye:hover{
  transform: scale(1.15);
  color: var(--velua-accent-dark) !important;
}
ul.products li.product .product-image-wrap img{
  object-fit: cover;
}