/* ROZNE START */

/* Odstep marginesu z sekcji summary (prawa kolumna z kup teraz) od promo widget */
.woocommerce div.product div.summary {
    margin-bottom: 1em !important;
}

/* Grubość Nagłówków - nagłówki "czyste" (bez klas) w opisie produktu WooCommerce.
   :not([class]) pomija FAQ i wszystko, co ma własną klasę. */
#tab-description h2:not([class]),
#tab-description h3:not([class]),
#tab-description h4:not([class]) {
    font-weight: 400; 
}

/* Czcionka tytul produktu */
h1.product_title.entry-title {
    font-size: clamp(26px, 2.4vw, 34px);
}

/* ROZNE END */

/* ===========================================================
   Meta produktu — Deweloper / Wersja / Data aktualizacji
   Strona pojedynczego produktu (allkeystore.pl)
   =========================================================== */

.aks-product-meta {
    list-style: none;
    margin: 16px 0;
    /* !important bo Neve / WooCommerce wymuszają padding-left na <ul> w .entry-summary */
    padding-left: 0 !important;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 16.5px;
    line-height: 1.4;
}

.aks-product-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.aks-product-meta-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    /* Jasny motyw — domyślny */
    background: rgba(0, 148, 52, 0.08);
    color: #009434;
}

.aks-product-meta-icon svg {
    width: 17px;
    height: 17px;
    display: block;
}

.aks-product-meta-label {
    color: #8e8e8e;
    min-width: 160px;
}

.aks-product-meta-value {
    color: var(--nv-text-color);
    font-weight: 600;
}

/* Ciemny motyw (Neve Pro) — tylko ikona zmienia kolor.
   Wartość używa --nv-text-color, label jest tym samym wyciszonym #8e8e8e w obu motywach. */
html[data-neve-theme="dark"] .aks-product-meta-icon {
    background: rgba(0, 177, 64, 0.10);
    color: #00B140;
}

/* Mobile — pozwól wartości przeskoczyć pod label gdy się nie mieści */
@media (max-width: 480px) {
    .aks-product-meta-row {
        flex-wrap: wrap;
    }
    .aks-product-meta-label {
        min-width: auto;
    }
}

/* ===========================================================
   Cena produktu — strona pojedynczego produktu (allkeystore.pl)
   Underline accent: zielony pasek pod ceną
   =========================================================== */

.entry-summary .price {
    position: relative;
    display: inline-block;
    font-size: 40px !important;          /* === ROZMIAR CENY (desktop) === */
    font-weight: 700;
    color: var(--nv-text-color);
    letter-spacing: -0.02em;
    line-height: 1.1;

    /* Odstępy */
    margin-top: 16px;                    /* odstęp NAD ceną */
    margin-bottom: 40px;                    /* === ODSTĘP POD PASKIEM (zwiększ żeby odsunąć meta listę) === */
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 10px;                /* === ODSTĘP MIĘDZY TEKSTEM CENY A PASKIEM === */
}

/* Zielony pasek akcentu pod ceną — kolor marki */
.entry-summary .price::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;          /* szerokość paska */
    height: 3px;          /* grubość paska */
    background: #009434;  /* jasny motyw */
    border-radius: 2px;
}

html[data-neve-theme="dark"] .entry-summary .price::after {
    background: #00B140;  /* ciemny motyw */
}

/* Symbol waluty (zł, $, € itd.) — mniejszy i wyciszony kolorystycznie */
.entry-summary .price .woocommerce-Price-currencySymbol {
    font-size: 22px !important;          /* === ROZMIAR WALUTY (desktop) === */
    font-weight: 500;
    color: #8e8e8e;
    margin-left: 2px;
}

/* Mobile — proporcjonalne zmniejszenie żeby cena nie wybijała się z layoutu */
@media (max-width: 480px) {
    .entry-summary .price {
        font-size: 32px !important;          /* === ROZMIAR CENY (mobile) === */
    }
    .entry-summary .price .woocommerce-Price-currencySymbol {
        font-size: 18px !important;          /* === ROZMIAR WALUTY (mobile) === */
    }
}

/* ============================================================================
   AKS Product FAQ Styles
   Style dedykowane accordionowi FAQ na stronach opisów produktów na
   allkeystore.pl. Plik niezależny od stylów strony głównej i od stylów
   blogowych — używa własnego prefiksu klas (.aks-prod-faq*) i własnych
   custom properties (--aks-prod-*).
   ============================================================================
   Zawartość:
     1. Custom properties (zmienne kolorów / odstępów)
     2. Accordion FAQ — .aks-prod-faq
     3. Wsparcie dla trybu ciemnego Neve (data-neve-theme="dark")
     4. Responsywność
   ============================================================================ */


/* --------------------------------------------------------------------------
   1. Custom properties
   -------------------------------------------------------------------------- */

:root {
  --aks-prod-color-text:        #1a1a1a;
  --aks-prod-color-bg:          #ffffff;
  --aks-prod-color-bg-soft:     #f7f4ed;
  --aks-prod-color-border:      #e2dccd;
  --aks-prod-color-accent:      #3a6b3a;
  --aks-prod-color-terracotta:  #c46340;

  --aks-prod-radius:        6px;
  --aks-prod-radius-sm:     3px;
  --aks-prod-shadow:        0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(26, 24, 21, 0.10);
  --aks-prod-transition:    0.22s ease;

  --aks-prod-font:          'Plus Jakarta Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
}


/* ==========================================================================
   2. Accordion FAQ
   ========================================================================== */

.aks-prod-faq {
  margin: 1.5rem 0 2rem;
  font-family: var(--aks-prod-font);
  color: var(--aks-prod-color-text);
}

.aks-prod-faq__item {
  background: var(--aks-prod-color-bg);
  border: 1px solid var(--aks-prod-color-border);
  border-radius: var(--aks-prod-radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: border-color var(--aks-prod-transition), box-shadow var(--aks-prod-transition);
}

.aks-prod-faq__item:hover {
  border-color: var(--aks-prod-color-accent);
}

.aks-prod-faq__item[open] {
  border-color: var(--aks-prod-color-accent);
  box-shadow: var(--aks-prod-shadow);
}

/* --- Pytanie (summary) --- */
.aks-prod-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--aks-prod-transition);
}

/* Wyłącz domyślną strzałkę <summary> w różnych przeglądarkach */
.aks-prod-faq__question::-webkit-details-marker { display: none; }
.aks-prod-faq__question::marker { content: ""; }

.aks-prod-faq__question:hover,
.aks-prod-faq__question:focus-visible {
  background: var(--aks-prod-color-bg-soft);
  outline: none;
}

.aks-prod-faq__question:focus-visible {
  outline: 2px solid var(--aks-prod-color-accent);
  outline-offset: -2px;
}

.aks-prod-faq__question-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--aks-prod-color-text);
  flex: 1 1 auto;
}

/* --- Ikona chevron --- */
.aks-prod-faq__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  position: relative;
  transition: transform var(--aks-prod-transition);
}

.aks-prod-faq__icon::before,
.aks-prod-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--aks-prod-color-accent);
  border-radius: 1px;
  transition: transform var(--aks-prod-transition);
}

.aks-prod-faq__icon::before {
  left: 1px;
  transform: translateY(-50%) rotate(45deg);
}

.aks-prod-faq__icon::after {
  right: 1px;
  transform: translateY(-50%) rotate(-45deg);
}

.aks-prod-faq__item[open] .aks-prod-faq__icon::before {
  transform: translateY(-50%) rotate(-45deg);
}
.aks-prod-faq__item[open] .aks-prod-faq__icon::after {
  transform: translateY(-50%) rotate(45deg);
}

/* --- Odpowiedź --- */
.aks-prod-faq__answer {
  padding: 0 1.25rem 1.1rem;
  border-top: 1px solid var(--aks-prod-color-border);
  color: var(--aks-prod-color-text);
}

.aks-prod-faq__answer > *:first-child { margin-top: 0.9rem; }
.aks-prod-faq__answer > *:last-child  { margin-bottom: 0; }

.aks-prod-faq__answer p {
  margin: 0.6rem 0;
  line-height: 1.6;
}

.aks-prod-faq__answer code {
  background: var(--aks-prod-color-bg-soft);
  padding: 0.1em 0.35em;
  border-radius: var(--aks-prod-radius-sm);
  font-size: 0.9em;
  color: var(--aks-prod-color-terracotta);
}

.aks-prod-faq__answer ul,
.aks-prod-faq__answer ol {
  margin: 0.6rem 0;
  padding-left: 1.4rem;
}

.aks-prod-faq__answer li { margin: 0.3rem 0; }

.aks-prod-faq__answer a {
  color: var(--aks-prod-color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.aks-prod-faq__answer a:hover { color: var(--aks-prod-color-terracotta); }


/* ==========================================================================
   3. Tryb ciemny Neve (data-neve-theme="dark")
   ========================================================================== */

[data-neve-theme="dark"] {
  --aks-prod-color-text:        #e8e4dc;
  --aks-prod-color-bg:          #1f1d1a;
  --aks-prod-color-bg-soft:     #2a2723;
  --aks-prod-color-border:      #3a3631;
  --aks-prod-color-accent:      #7eb87e;
  --aks-prod-color-terracotta:  #e08868;
}


/* ==========================================================================
   4. Responsywność
   ========================================================================== */

@media (max-width: 768px) {
  .aks-prod-faq__question { padding: 0.85rem 1rem; }
  .aks-prod-faq__question-title { font-size: 0.95rem; }
  .aks-prod-faq__answer { padding: 0 1rem 1rem; }
  .aks-prod-faq__answer > *:first-child { margin-top: 0.75rem; }
}
/* =====================================================================
   Galeria zrzutow ekranu — opis produktu Allkeystore  (aks-prod-gallery)
   ---------------------------------------------------------------------
   Wstawiana przez product-finalizer NAD sekcja FAQ, gdy Konrad zazada
   galerii w niestandardowej instrukcji. Parzysta liczba kafelkow (2/4/6).
   Uklad: 2 kolumny na desktopie, 1 kolumna na waskich ekranach.
   AGNOSTYCZNA WOBEC MOTYWU: neutralne kolory (obramowanie, tlo, podpis)
   dziedziczy przez currentColor + color-mix; jedyny staly kolor to akcent
   (zielen), ktory dziala zarowno na bialym, jak i na czarnym tle.
   Zadnej reguly zaleznej od klasy motywu — dziala z recznym przelacznikiem
   „Zmiana tla" bez znajomosci jego mechanizmu.
   ===================================================================== */
.aks-prod-gallery {
  --aks-gallery-accent: #4ca93f;          /* dostroj do dokladnej zieleni sklepu */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 0 0 40px;
}
@media (max-width: 600px) {
  .aks-prod-gallery { grid-template-columns: 1fr; }
}
.aks-prod-gallery__item {
  margin: 0;
}
.aks-prod-gallery__link {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 4%, transparent);
  cursor: zoom-in;
  transition: border-color .2s ease;
}
.aks-prod-gallery__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .3s ease;
}
.aks-prod-gallery__zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: color-mix(in srgb, var(--aks-gallery-accent) 92%, transparent);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s ease, transform .2s ease;
}
.aks-prod-gallery__zoom svg {
  width: 16px;
  height: 16px;
}
.aks-prod-gallery__link:hover {
  border-color: var(--aks-gallery-accent);
}
.aks-prod-gallery__link:hover .aks-prod-gallery__img {
  transform: scale(1.04);
}
.aks-prod-gallery__link:hover .aks-prod-gallery__zoom,
.aks-prod-gallery__link:focus-visible .aks-prod-gallery__zoom {
  opacity: 1;
  transform: scale(1);
}
.aks-prod-gallery__link:focus-visible {
  outline: 2px solid var(--aks-gallery-accent);
  outline-offset: 2px;
}
.aks-prod-gallery__caption {
  margin: 12px 4px 0;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  color: color-mix(in srgb, currentColor 60%, transparent);
}

/* =====================================================================
   Pojedynczy obrazek produktu  (aks-prod-figure)
   ---------------------------------------------------------------------
   Wariant dla JEDNEJ grafiki, gdy galeria nie ma sensu (galeria to min.
   2 kafelki). Wstawiany przez product-finalizer w TO SAMO miejsce co
   galeria (nad sekcja techniczna). Wnetrze reuzywa te same klasy co
   kafelek galerii — .aks-prod-gallery__link / __img / __zoom / __caption
   — wiec crop 16:10, hover-zoom, lupa i lightbox dzialaja bez zmian
   (skrypt lightboxa nasluchuje .aks-prod-gallery__link). Rozni sie tylko
   wrapper: bez gridu, wycentrowany, szerokosci jednego kafelka galerii.
   Fallback @supports nizej obejmuje te klasy, wiec dziala tu tak samo.
   ===================================================================== */
.aks-prod-figure {
  margin: 0 auto 40px;            /* wycentrowany; ten sam dolny odstep co galeria */
  max-width: calc(50% - 11px);    /* szerokosc kafelka galerii: polowa minus polowa gap (22px) */
}
@media (max-width: 600px) {
  /* jak galeria w 1 kolumnie na waskich ekranach — pelna szerokosc tresci */
  .aks-prod-figure { max-width: 100%; }
}

/* Fallback dla przegladarek bez color-mix (≈ sprzed 2023):
   neutralna szarosc czytelna na jasnym i ciemnym tle. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .aks-prod-gallery__link {
    border-color: rgba(128, 128, 128, .28);
    background: rgba(128, 128, 128, .06);
  }
  .aks-prod-gallery__caption {
    color: rgba(128, 128, 128, 1);
  }
}