/*
Theme Name: Volto Electronics (Storefront Child)
Theme URI: https://volto.pbdevs.com
Description: Motyw potomny Storefront z autorskim, nowoczesnym designem sklepu Volto Elektronika — ciemny nagłówek, karty produktów, hero i kafelki kategorii.
Author: Volto
Template: storefront
Version: 1.0.0
Text Domain: volto-child
*/

/* =========================================================
   Zmienne / podstawy
   ========================================================= */
:root{
  --v-bg:#f4f6fb;
  --v-surface:#ffffff;
  --v-ink:#0d1526;
  --v-muted:#64748b;
  --v-accent:#2563eb;
  --v-accent-d:#1d4ed8;
  --v-accent-2:#0ea5e9;
  --v-dark:#0b1220;
  --v-dark-2:#111c33;
  --v-border:#e6e9f2;
  --v-radius:16px;
  --v-radius-sm:12px;
  --v-shadow:0 10px 30px -12px rgba(13,21,38,.18);
  --v-shadow-lg:0 24px 60px -18px rgba(13,21,38,.28);
}

body,
button, input, select, textarea, .widget{
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body{ background:var(--v-bg); color:var(--v-ink); }
h1,h2,h3,h4,.site-title,.woocommerce-loop-product__title,.product_title,
.storefront-product-section .section-title{
  font-family:"Sora","Inter",sans-serif; letter-spacing:-.02em;
}
a{ color:var(--v-accent); }
a:hover{ color:var(--v-accent-d); }

.col-full{ max-width:1240px; }

/* =========================================================
   Nagłówek — ciemny, sticky
   ========================================================= */
.site-header{
  background:var(--v-dark) !important;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky; top:0; z-index:999;
  box-shadow:0 6px 24px -16px rgba(0,0,0,.7);
  padding-top:1.1em; padding-bottom:1.1em;
}
.site-header .site-title a{ color:#fff !important; font-weight:800; }
.site-header .site-description{ color:#9fb3d1 !important; }
.site-header a{ color:#dbe4f3; }
.storefront-primary-navigation{ background:transparent; }
.main-navigation ul.menu, .main-navigation ul.nav-menu{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; }
.main-navigation ul li a{ color:#cdd8ec !important; font-weight:500; padding:.55em .9em; border-radius:10px; }
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a{ color:#fff !important; background:rgba(255,255,255,.06); }
/* strzałka przy pozycji z podmenu */
.main-navigation ul.menu > li.menu-item-has-children > a::after{
  content:"▾"; margin-left:7px; font-size:.72em; opacity:.85; position:static; border:0; background:none;
}
/* rozwijane podmenu (Kategorie) — biały panel z cieniem */
.main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children{
  background:#fff; border:1px solid var(--v-border); border-radius:14px;
  box-shadow:var(--v-shadow-lg); padding:8px; min-width:250px; z-index:1000;
}
.main-navigation ul.menu ul.sub-menu li{ width:100%; }
.main-navigation ul.menu ul.sub-menu a{
  color:var(--v-ink) !important; border-radius:9px; padding:.6em .85em !important; font-weight:500;
}
.main-navigation ul.menu ul.sub-menu a:hover{ background:var(--v-bg); color:var(--v-accent) !important; }

/* pole wyszukiwania w headerze */
.site-search .widget_product_search input[type="search"],
.site-header .widget_product_search input[type="search"]{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#fff; border-radius:999px;
}
.site-header .widget_product_search input::placeholder{ color:#9fb3d1; }

/* koszyk w headerze */
.site-header-cart .cart-contents{ color:#fff !important; font-weight:600; }
.site-header-cart .cart-contents .count,
.site-header-cart .amount{ color:#fff; }
.site-header-cart .cart-contents:hover{ background:rgba(255,255,255,.06); border-radius:10px; }

/* =========================================================
   Przyciski
   ========================================================= */
.button, button, input[type="submit"], .added_to_cart,
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #payment #place_order,
.wc-block-components-button{
  background:var(--v-accent) !important; color:#fff !important;
  border-radius:999px !important; font-weight:600 !important;
  padding:.7em 1.4em !important; border:0 !important;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 20px -10px rgba(37,99,235,.6);
}
.button:hover, button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .added_to_cart:hover, .wc-block-components-button:hover{
  background:var(--v-accent-d) !important; transform:translateY(-1px);
  box-shadow:0 12px 26px -10px rgba(37,99,235,.7);
}
.woocommerce a.button.alt, .woocommerce button.button.alt{ background:var(--v-accent) !important; }
.button.loading::after{ color:#fff; }

/* =========================================================
   Karty produktów (archiwum / sklep)
   ========================================================= */
.woocommerce ul.products{ gap:26px 24px; display:grid !important;
  grid-template-columns:repeat(3,1fr); }
.woocommerce ul.products::before,.woocommerce ul.products::after{ display:none; }
.woocommerce ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important;
  background:var(--v-surface); border:1px solid var(--v-border);
  border-radius:var(--v-radius); padding:14px 14px 18px;
  box-shadow:var(--v-shadow); transition:transform .16s ease, box-shadow .16s ease, border-color .16s;
  display:flex; flex-direction:column;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px); box-shadow:var(--v-shadow-lg); border-color:#d3dbef;
}
.woocommerce ul.products li.product a img{
  border-radius:var(--v-radius-sm); margin-bottom:14px; aspect-ratio:1/1;
  object-fit:cover; width:100%; background:#eef1f8;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1rem; line-height:1.35; padding:0; color:var(--v-ink); font-weight:600;
  min-height:2.7em;
}
.woocommerce ul.products li.product .price{
  color:var(--v-ink); font-weight:700; font-size:1.15rem; margin:.35em 0 .7em;
}
.woocommerce ul.products li.product .price .amount{ color:var(--v-ink); }
.woocommerce ul.products li.product .button{ margin-top:auto; width:100%; text-align:center; }
.woocommerce ul.products li.product .star-rating{ display:none; }
.woocommerce ul.products li.product .onsale{
  background:var(--v-accent-2); color:#fff; border-radius:999px; min-height:auto;
  min-width:auto; padding:.25em .7em; font-weight:600; top:20px; right:20px; position:absolute;
}

/* pełna szerokość na sklepie / produkcie / koszyku (bez sidebara) */
.woocommerce-page.right-sidebar #primary,
.woocommerce-page #primary{ width:100% !important; float:none !important; margin:0; }
.woocommerce-page #secondary{ display:none !important; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ color:var(--v-muted); }
.storefront-sorting{ margin-bottom:1.5em; }

/* strona pojedynczego produktu */
.single-product div.product .product_title{ font-size:2rem; }
.single-product div.product p.price, .single-product div.product span.price{
  color:var(--v-accent); font-weight:800;
}
.single-product .woocommerce-product-gallery__image img{ border-radius:var(--v-radius); }
.single-product .woocommerce-tabs .panel{ background:var(--v-surface); border-radius:var(--v-radius);
  padding:22px; border:1px solid var(--v-border); }
.single-product div.product .woocommerce-product-details__short-description{ color:var(--v-muted); }

/* =========================================================
   Strona główna — sekcje autorskie
   ========================================================= */
.home .site-content{ padding-top:0; }
.home #primary, .home .content-area{ margin:0; width:100%; }
.home .content-area .entry-header{ display:none; }
.home .site-content .col-full{ max-width:none; padding:0; }
.volto-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }

/* full-bleed sekcje (wychodzą poza kontener na całą szerokość) */
.volto-hero, .volto-badges{ width:100vw; margin-left:calc(50% - 50vw); }

/* HERO */
.volto-hero{
  position:relative; color:#fff; border-radius:0; overflow:hidden;
  background:linear-gradient(115deg, rgba(11,18,32,.94) 0%, rgba(11,18,32,.74) 45%, rgba(11,18,32,.35) 100%),
    var(--volto-hero-img, #0b1220);
  background-size:cover; background-position:center;
}
.volto-hero__inner{ max-width:1240px; margin:0 auto; padding:92px 24px 104px; }
.volto-hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:#8ed0ff;
  background:rgba(14,165,233,.12); border:1px solid rgba(14,165,233,.3);
  padding:.4em .9em; border-radius:999px; margin-bottom:22px;
}
.volto-hero h1{
  font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.05; margin:0 0 18px; max-width:15ch; color:#fff;
}
.volto-hero p{ font-size:1.12rem; color:#c6d4ec; max-width:52ch; margin:0 0 30px; }
.volto-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.volto-btn{
  display:inline-block; background:var(--v-accent); color:#fff !important; text-decoration:none;
  padding:.9em 1.7em; border-radius:999px; font-weight:600; box-shadow:0 12px 30px -12px rgba(37,99,235,.8);
  transition:transform .12s, background .15s;
}
.volto-btn:hover{ transform:translateY(-2px); background:var(--v-accent-d); }
.volto-btn--ghost{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  box-shadow:none; }
.volto-btn--ghost:hover{ background:rgba(255,255,255,.16); }

/* pasek zaufania */
.volto-badges{
  background:var(--v-dark-2); color:#dbe4f3;
}
.volto-badges__grid{
  max-width:1240px; margin:0 auto; padding:22px 24px; display:grid;
  grid-template-columns:repeat(4,1fr); gap:18px;
}
.volto-badge{ display:flex; gap:12px; align-items:center; font-size:.94rem; }
.volto-badge svg{ flex:0 0 26px; width:26px; height:26px; color:#5cc6ff; }
.volto-badge strong{ display:block; color:#fff; font-weight:600; }
.volto-badge span{ color:#9fb3d1; font-size:.82rem; }

/* sekcje */
.volto-section{ padding:56px 0 8px; }
.volto-section__head{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:26px; }
.volto-section__head h2{ font-size:1.9rem; margin:0; }
.volto-section__head p{ margin:.3em 0 0; color:var(--v-muted); }
.volto-section__head a.volto-link{ font-weight:600; white-space:nowrap; }

/* kafelki kategorii */
.volto-cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.volto-cat{
  position:relative; display:block; border-radius:var(--v-radius); overflow:hidden;
  min-height:170px; text-decoration:none; box-shadow:var(--v-shadow); isolation:isolate;
}
.volto-cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .4s ease; }
.volto-cat::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,18,32,.05) 0%, rgba(11,18,32,.82) 100%); }
.volto-cat:hover img{ transform:scale(1.06); }
.volto-cat__label{ position:absolute; left:18px; bottom:16px; right:18px; color:#fff; }
.volto-cat__label strong{ display:block; font-family:"Sora",sans-serif; font-size:1.12rem; font-weight:700; }
.volto-cat__label span{ font-size:.85rem; color:#c6d4ec; }

/* CTA band */
.volto-cta-band{
  margin:60px 0 10px; border-radius:var(--v-radius); overflow:hidden; color:#fff;
  background:linear-gradient(120deg,var(--v-accent) 0%, var(--v-accent-2) 100%);
  padding:44px 34px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.volto-cta-band h2{ margin:0 0 6px; color:#fff; font-size:1.7rem; }
.volto-cta-band p{ margin:0; color:rgba(255,255,255,.85); }
.volto-cta-band .volto-btn{ background:#fff; color:var(--v-accent) !important; box-shadow:none; }
.volto-cta-band .volto-btn:hover{ background:#eef2ff; }

/* produkty w sekcji strony głównej (shortcode [products]) */
.volto-section .woocommerce{ margin:0; }

/* =========================================================
   Stopka
   ========================================================= */
.site-footer{
  background:var(--v-dark) !important; color:#9fb3d1; margin-top:60px;
  border-top:1px solid rgba(255,255,255,.06);
}
.site-footer a{ color:#c6d4ec; }
.site-footer a:hover{ color:#fff; }
.site-footer .site-info{ color:#7e93b5; }

/* =========================================================
   Responsywność
   ========================================================= */
@media (max-width:900px){
  .woocommerce ul.products, .volto-cats{ grid-template-columns:repeat(2,1fr); }
  .volto-badges__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .woocommerce ul.products{ grid-template-columns:1fr 1fr; gap:14px; }
  .volto-cats{ grid-template-columns:1fr; }
  .volto-badges__grid{ grid-template-columns:1fr 1fr; }
  .volto-hero__inner{ padding:64px 20px 72px; }
}