/*
 * Paleta i typografia wzorowane na motywie "Goldish" (parkofideas.com/goldish/demo/home-3/) —
 * na wyraźną prośbę użytkownika sklep (www) ma wyglądać jak tamten luksusowy, minimalistyczny
 * motyw biżuteryjny: krój Jost, ciepły beżowo-różowozłoty akcent, kremowe tło. Wcześniej paleta
 * była wzorowana na arto-teka.pl (złoto/oliwka + Charmonman) — ta wersja ją zastępuje. Dotyczy
 * WYŁĄCZNIE aplikacji "www" — backoffice-app ma swój niezależny arkusz stylów.
 */
:root {
  --shop-accent: #b5947c;       /* ciepły beż/różowe złoto — przyciski, nagłówek, akcenty (rgb(181,148,124) z motywu Goldish) */
  --shop-accent-dark: #9c7c62;  /* ciemniejszy odcień akcentu — hover/focus */
  --shop-highlight: #d3de64;    /* oliwkowa zieleń — pozostałość z poprzedniej palety, obecnie nieużywana */
  --shop-ink: #181818;          /* niemal czarny tekst — jak w motywie Goldish (rgb(24,24,24)) */
  --shop-muted: #7a7368;        /* stonowany, ciepły szary na etykiety/tekst drugorzędny */
  --shop-bg: #fdf9f2;           /* kremowe/kością słoniową tło — jak w motywie Goldish (rgb(253,249,242)) */
  --shop-border: #ece2d4;       /* delikatna, ciepła szarość na obramowania kart/paneli */
  --shop-img-fallback: #f5efe4; /* tło pod brakujące zdjęcie produktu */
}

body {
  background: var(--shop-bg);
  color: var(--shop-ink);
  font-family: "Jost", sans-serif;
  font-weight: 200;
}

/* Duży odręczny nagłówek hero — na wyraźną prośbę użytkownika WRÓCIŁ do kroju Charmonman
   (reszta sklepu zostaje na wysmuklonym Jost z motywu Goldish) — stąd celowo wąski selektor
   (.shop-hero h1), a nie np. globalnie .display-6, które w tym projekcie odpowiada też za
   cenę na stronie produktu. */
.shop-hero h1 {
  font-family: "Charmonman", cursive;
  font-weight: 400;
  font-size: 2.75rem;
  color: var(--shop-ink);
}

/* Podpis pod nagłówkiem hero na stronie głównej leży na zdjęciu w tle (.shop-hero--photo) —
   a że hero celowo nie ma żadnej nakładki na całość (na wyraźne życzenie z wcześniejszej
   rozmowy), sam tekst potrzebuje własnego, lokalnego "podświetlenia": półprzezroczyste,
   kremowe tło TYLKO za akapitem (nie za całym hero), większy rozmiar czcionki niż reszta strony
   i waga 400 zamiast wysmuklonej wagi 200 z reszty sklepu — dla czytelności, ale bez pełnego
   pogrubienia (700), żeby nie kłóciło się ze szczupłym, eleganckim krojem Jost widocznym
   wszędzie indziej. display: inline-block, żeby podświetlenie ciasno otulało tekst, a nie
   rozciągało się na całą szerokość hero. */
.shop-hero-lead {
  display: inline-block;
  background: rgba(253, 249, 242, 0.4);
  padding: 0.75rem 1.25rem;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--shop-ink);
}

/* Pasek nawigacji w kolorze akcentu (nie białe tło) z białym tekstem — dokładnie jak górny
   pasek "GOLDISH" w motywie Goldish, gdzie header ma pełne, ciepłe tło zamiast białego/obramowanego. */
.shop-navbar {
  background: var(--shop-accent);
  border-bottom: none;
}

.shop-navbar .navbar-brand {
  color: #fff;
  font-family: "Jost", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: 0.12em;
}

/* Logo (okrągła pieczątka "ARTO TEKA", pobrana ze strony arto-teka.pl i przekolorowana na
   biało pod ciepły, kolorowy pasek nawigacji) po lewej stronie nazwy sklepu w navbarze. */
.navbar-brand-logo {
  height: 52px;
  width: auto;
}

/* To samo logo w stopce — wersja w kolorze akcentu (patrz komentarz przy pobraniu pliku),
   bo stopka ma jasne, kremowe tło (--shop-bg), a nie ciepły pasek jak navbar. */
.footer-logo {
  height: 64px;
  width: auto;
}

/* Odznaka koszyka na ciepłym tle paska musi kontrastować z nim, a nie z nim zlewać — stąd
   ciemne (niemal czarne) tło zamiast koloru akcentu, podobnie jak czarne znaczniki "NEW" na
   zdjęciach produktów w motywie Goldish. */
.shop-navbar .badge.bg-warning {
  background-color: var(--shop-ink) !important;
  color: #fff !important;
}

.shop-navbar .nav-link {
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.shop-navbar .nav-link:hover,
.shop-navbar .nav-link.active {
  color: #fff;
}

/* .btn-outline-dark w reszcie sklepu ma ciemną obwódkę na jasnym tle — na ciepłym pasku
   nawigacji potrzebuje odwróconych, jasnych kolorów, żeby przycisk "Koszyk" był czytelny. */
.shop-navbar .btn-outline-dark {
  border-color: #fff;
  color: #fff;
}

.shop-navbar .btn-outline-dark:hover,
.shop-navbar .btn-outline-dark:focus {
  background-color: #fff;
  border-color: #fff;
  color: var(--shop-accent);
}

footer h2 {
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

/* Cena wyróżniona kolorem akcentu — dokładnie jak na arto-teka.pl (tam też kolor ceny to
   ten sam odcień beżu/złota co przyciski, patrz .btn-primary). */
.product-price {
  color: var(--shop-accent-dark);
}

/* Opis produktu renderujemy jako HTML (patrz komentarz w Views/Product/Details.cshtml) —
   pre-line dodatkowo zachowuje ręczne podziały linii, gdy ktoś w panelu backoffice wpisze
   zwykły tekst bez żadnych znaczników HTML. */
.product-description {
  white-space: pre-line;
  color: var(--bs-body-color, #212529);
  line-height: 1.6;
}

.product-description p {
  margin-bottom: 0.85rem;
}

.product-description p:last-child {
  margin-bottom: 0;
}

.product-description h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.1rem 0 0.5rem;
  color: var(--shop-accent-dark);
}

.product-description h3:first-child {
  margin-top: 0;
}

.product-description ul,
.product-description ol {
  padding-left: 1.25rem;
  margin-bottom: 0.85rem;
}

.product-description li {
  margin-bottom: 0.35rem;
}

.product-description a {
  color: var(--shop-accent-dark);
  text-decoration: underline;
}

.product-description strong {
  font-weight: 600;
}

/* Hashtagi na stronie produktu — klikalne, prowadzą do galerii z tym samym wyszukiwaniem
   (patrz Views/Product/Details.cshtml i wyszukiwarka "q" w HomeController). */
.product-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.hashtag-pill {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--shop-img-fallback);
  border: 1px solid var(--shop-border);
  color: var(--shop-accent-dark);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.hashtag-pill:hover {
  background: var(--shop-accent-dark);
  border-color: var(--shop-accent-dark);
  color: #fff;
}

.shop-hero {
  background: linear-gradient(135deg, #f8f4ea, #f1e9d5);
  border: 1px solid var(--shop-border);
  border-radius: 0;
}

/* Tło zdjęciowe dla hero na stronie głównej — zdjęcie dodane przez użytkownika (liście
   w kolorach teal/róż/złoto, wwwroot/images/IMG-20260916-WA0004.jpg), bez żadnej nakładki.
   Wcześniej "100% 100%" rozciągało zdjęcie dokładnie na wymiary elementu — wypełniało całość,
   ale zniekształcało liście za każdym razem, gdy zmieniała się proporcja elementu (np. przy
   zmianie szerokości okna). "cover" wypełnia tę samą przestrzeń bez żadnej dziury, zachowując
   proporcje zdjęcia (przycina nadmiar zamiast go rozciągać) — dzięki temu skaluje się ładnie
   przy każdej szerokości ekranu. Osobny modyfikator (a nie zmiana bazowego .shop-hero), bo ta
   sama klasa .shop-hero jest też używana w hero Galerii biżuterii i Galerii kartek — tam
   zostaje zwykły kremowy gradient. Deklaracja PO .shop-hero, żeby nadpisać jego "background"
   mimo tej samej specyficzności. */
.shop-hero--photo {
  background: url('/images/IMG-20260916-WA0004.jpg') center / cover no-repeat;
}

/* Arto-teka.pl nie zaokrągla NICZEGO — przyciski, karty, zdjęcia mają ostre kąty; przyciski
   są duże litery z szerokimi odstępami (letter-spacing), cienkim krojem (font-weight 300)
   i beżowym tłem — dokładnie jak "DODAJ DO KOSZYKA" na ich stronie produktu. */
.btn {
  border-radius: 0;
}

.btn-primary {
  background-color: var(--shop-accent);
  border-color: var(--shop-accent);
  color: #fff;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  padding: 0.9rem 1.85rem;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--shop-accent-dark);
  border-color: var(--shop-accent-dark);
  color: #fff;
}

.btn-outline-dark {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  border-color: var(--shop-ink);
  color: var(--shop-ink);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
  background-color: var(--shop-ink);
  border-color: var(--shop-ink);
  color: #fff;
}

.product-card {
  border: 1px solid var(--shop-border);
  border-radius: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(10, 10, 10, 0.1);
}

.product-img-wrap,
.product-detail-img {
  background: var(--shop-img-fallback);
}

.product-img-wrap img,
.product-detail-img img {
  object-fit: cover;
}

.product-img-fallback {
  background: var(--shop-img-fallback);
  color: var(--shop-muted);
}

.product-gallery-thumbs {
  padding: 0 0.25rem;
}

.gallery-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}

.gallery-thumb:hover {
  border-color: var(--shop-accent);
}

.filter-bar {
  background: #fff;
  border: 1px solid var(--shop-border);
  border-radius: 0;
  padding: 1rem;
}

.cart-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
}

.cart-thumb-fallback {
  background: var(--shop-img-fallback);
}

.cart-table th {
  color: var(--shop-muted);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.order-summary-card {
  border: 1px solid var(--shop-border);
  border-radius: 0;
  background: #fff;
}

.alert {
  border-radius: 0;
}

footer {
  border-top: 1px solid var(--shop-border);
  color: var(--shop-muted) !important;
}

a {
  color: var(--shop-accent-dark);
}

a:hover {
  color: var(--shop-accent);
}

/* Bootstrapowy .btn-link ma własny kolor (domyślnie niebieski), silniejszy niż zwykły
   selektor "a" powyżej — bez tej reguły "← Kontynuuj zakupy" na stronie koszyka
   zostałby jedynym niebieskim akcentem na całej stronie. */
.btn-link {
  color: var(--shop-accent-dark);
}

.btn-link:hover {
  color: var(--shop-accent);
}

/* Nagłówki-akcenty POZA hero (np. "Popularne kategorie", "Poznaj nas") — ten sam bardzo lekki
   krój Jost co .shop-hero h1, żeby całą stronę spajał jeden spójny akcent typograficzny w
   duchu motywu Goldish (tam duże tytuły sekcji, np. "Luxury Jewelry", są wagą 300, bez kursywy,
   z odrobiną liter-spacingu), ale NIE tytuły produktów, etykiety formularzy, przyciski
   akordeonu ani nagłówki wewnątrz .filter-bar (te celowo zostają zwykłą, grubszą wagą Jost).
   Nazwa klasy pozostała z poprzedniej (odręcznej) wersji tego akcentu, żeby nie zmieniać
   znaczników w widokach — zmienia się tylko definicja stylu.
   */
.script-heading {
  font-family: "Jost", sans-serif;
  font-weight: 200;
  color: var(--shop-ink);
  font-size: 2.1rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.script-heading--sm {
  font-size: 1.4rem;
}

/* Drobne, wersalikowe etykiety (np. typ produktu nad nazwą w karcie, "Dlaczego Arto Teka") —
   w motywie Goldish takie etykiety ("COLLECTION" nad tytułem kafelka) są kolorowane akcentem
   i mają wyraźny liter-spacing, zamiast być zwykłym szarym tekstem. */
.text-uppercase.text-muted,
.text-muted.text-uppercase {
  color: var(--shop-accent-dark) !important;
  letter-spacing: 0.06em;
}

/* Podkreślony link ze strzałką w stylu "SPRAWDŹ TERAZ →" (np. "Zobacz całą ofertę" pod
   Bestsellerami). Dawniej używany też przez kafelki "Popularne kategorie" — ta sekcja została
   zastąpiona Bestsellerami (zwykłe .product-card jak w galeriach), stąd zostaje tylko sam link. */
.link-arrow {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--shop-ink);
  border-bottom: 1px solid var(--shop-ink);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.link-arrow::after {
  content: " \2192";
}

.link-arrow:hover {
  color: var(--shop-accent-dark);
  border-color: var(--shop-accent-dark);
}

/* Delikatny, ciepły panel tła pod treścią "Poznaj nas" — rozbija monotonię długiej strony
   głównej tą samą, stonowaną kremową paletą co hero (ten sam duch co .shop-hero, tylko
   subtelniej), bez zaokrągleń — spójnie z resztą płaskiego designu sklepu. */
.artistic-panel {
  background: linear-gradient(135deg, #fbf8f2, #f6f0e4);
  border: 1px solid var(--shop-border);
}

/* Zdjęcie sióstr w sekcji "Poznaj nas" — ratio 4x3 dopasowane do proporcji dostarczonego
   zdjęcia (siostry.png, wwwroot/images), object-fit: cover przycina nadmiar zamiast go
   rozciągać, więc zdjęcie skaluje się ładnie przy każdej szerokości kolumny. Bez zaokrągleń
   i bez cienia — spójnie z resztą płaskiego designu sklepu (patrz komentarz przy .btn wyżej). */
.about-us-photo-wrap {
  border: 1px solid var(--shop-border);
  background: var(--shop-img-fallback);
}

.about-us-photo {
  object-fit: cover;
}

/* Akordeon FAQ ("Najczęściej zadawane pytania") domyślnie w Bootstrapie podświetla
   rozwinięte pytanie na niebiesko (tło + tekst + obwódka focusu + niebieska strzałka) —
   nadpisujemy zmienne CSS Bootstrapa naszą ciepłą paletą, żeby pasowało do reszty sklepu.
   #faqAccordion to jedyny akordeon w aplikacji, więc nadpisanie jest bezpiecznie zawężone. */
#faqAccordion {
  --bs-accordion-active-color: var(--shop-ink);
  --bs-accordion-active-bg: var(--shop-img-fallback);
  --bs-accordion-border-color: var(--shop-border);
  --bs-accordion-btn-focus-border-color: var(--shop-accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(181, 148, 124, 0.25);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23181818'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239c7c62'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Kafelki kategorii na stronie "Sklep": 2 w rzędzie na telefonie, 4 w rzędzie od "sm" wzwyż
   (row-cols-2 row-cols-sm-4 w Shop.cshtml). Nawet przy 2 kolumnach karty bywają wąskie na
   małych telefonach, więc zostaje mniejsza, "przycięta" (line-clamp) typografia tytułu, żeby
   długie nazwy kategorii ("Kartki okolicznościowe ręcznie malowane akwarelami") nie rozjeżdżały
   wysokości karty. */
.shop-category-tile .card-body {
  padding: 0.5rem 0.5rem 0.75rem;
}

.shop-category-tile h2 {
  font-size: 0.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 576px) {
  .shop-category-tile h2 {
    font-size: 0.95rem;
  }
}