/*
 Theme Name: VVS Group – Hello Child
 Template: hello-elementor
 Text Domain: vvsgroup
*/

/* =========================================
   VVS GROUP – DESIGN SYSTEM V1
   Färger + typografi + UI-komponenter
   ========================================= */

/* ---------- FÄRGPALETT ---------- */
:root {
  --vvsg-blue:       #74A6E6;  /* brand-blå */
  --vvsg-blue-dark:  #356EB8;  /* hover-blå */
  --vvsg-blue-light: #E3F2FD;  /* badge-blå */

  --vvsg-gray-900:   #111827;
  --vvsg-gray-700:   #4A5568;
  --vvsg-gray-500:   #6B7280;
  --vvsg-gray-100:   #F3F4F6;

  --vvsg-white:      #FFFFFF;
  --vvsg-black:      #000000;
}

/* ---------- BAS / TYPOGRAFI ---------- */

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--vvsg-gray-700);
  background: #F8FAFC;
}

a {
  color: var(--vvsg-blue);
  text-decoration: none;
}
a:hover {
  color: var(--vvsg-blue-dark);
}

h1, h2, h3, h4 {
  color: var(--vvsg-gray-900);
  letter-spacing: 0.01em;
}

/* ---------- HEADER / TOPPBAR ---------- */

.vvsg-topbar {
  background: var(--vvsg-blue);
  color: var(--vvsg-white);
  font-size: 14px;
}

.vvsg-header {
  background: var(--vvsg-black);
  color: var(--vvsg-white);
}
.vvsg-header a {
  color: var(--vvsg-white);
  font-weight: 500;
}
.vvsg-header a:hover {
  color: var(--vvsg-blue-light);
}

/* =========================================
   PRODUKTKORT / BADGES / USP / PRIS
   ========================================= */

/* Kort – kategori + relaterade */
.vvsg-card,
.woocommerce ul.products li.product {
  padding: 16px;
  background: var(--vvsg-white);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.3s ease, transform 0.15s ease;
}

.vvsg-card:hover,
.woocommerce ul.products li.product:hover {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

/* Bild */
.vvsg-card-image img,
.woocommerce ul.products li.product img {
  max-height: 200px;
  object-fit: contain;
  margin-bottom: 12px;
}

/* Badge "Installerat & klart" */
.vvsg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  background: var(--vvsg-blue-light);
  color: var(--vvsg-blue-dark);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
  font-weight: 500;
}

/* Titel */
.vvsg-card-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 8px 0;
  color: var(--vvsg-gray-900);
}

/* USP / ROT */
.vvsg-usp,
.vvsg-rot-text {
  color: var(--vvsg-gray-700) !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  display: block;
  margin: 6px 0 4px 0;
}

.vvsg-usp::before {
  content: "✔";
  color: var(--vvsg-gray-900);
  margin-right: 6px;
}

/* Pris */
.vvsg-price,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce-Price-amount {
  color: var(--vvsg-gray-900) !important;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price del {
  color: inherit !important;
}

/* Card-länk om du använder det */
.vvsg-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Relaterade wrapper */
.vvsg-related {
  padding-top: 40px;
  text-align: center;
}
.vvsg-related h2 {
  font-size: 24px;
  margin-bottom: 24px;
}
.vvsg-related-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.vvsg-related .vvsg-card {
  max-width: 320px;
  width: 100%;
}

/* =========================================
   KNAPPAR – GLOBALT (vvsg-btn + add_to_cart)
   ========================================= */

/* Basstil för knappar – OBS: ej FAQ-knappar */
button:not(.faq-question),
input[type="submit"],
.elementor-button,
.woocommerce button.button,
.woocommerce a.button.add_to_cart_button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product a.vvsg-btn,
.vvsg-btn {
  background: var(--vvsg-blue);
  color: var(--vvsg-white) !important;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.30);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* Knappar i produktkort – full bredd */
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product a.vvsg-btn {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 10px auto 0;
}

/* Hover / active */
button:not(.faq-question):hover,
input[type="submit"]:hover,
.elementor-button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product a.vvsg-btn:hover,
.vvsg-btn:hover {
  background: var(--vvsg-blue-dark);
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

button:not(.faq-question):active,
input[type="submit"]:active,
.elementor-button:active,
.woocommerce button.button:active,
.woocommerce a.button.add_to_cart_button:active,
.woocommerce ul.products li.product a.add_to_cart_button:active,
.woocommerce ul.products li.product .button.add_to_cart_button:active,
.woocommerce ul.products li.product a.vvsg-btn:active,
.vvsg-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* ----- Döda emoji + lägg ren text på alla vvsg/Woo-knappar ----- */

.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product a.vvsg-btn,
.vvsg-btn {
  position: relative;
  overflow: hidden;
  text-indent: -9999px; /* göm originaltext + emoji */
}

.woocommerce ul.products li.product a.add_to_cart_button::before,
.woocommerce ul.products li.product .button.add_to_cart_button::before,
.woocommerce ul.products li.product a.vvsg-btn::before,
.vvsg-btn::before {
  content: '' !important;
}

.woocommerce ul.products li.product a.add_to_cart_button::after,
.woocommerce ul.products li.product .button.add_to_cart_button::after,
.woocommerce ul.products li.product a.vvsg-btn::after,
.vvsg-btn::after {
  content: 'Lägg i varukorg';
  position: absolute;
  inset: 0;
  text-indent: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--vvsg-white);
}

/* =========================================
   RESPONSIVT
   ========================================= */

@media (max-width: 768px) {
  .vvsg-card,
  .woocommerce ul.products li.product {
    margin-bottom: 24px;
  }

  .vvsg-card-title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.05rem;
  }

  .elementor-button,
  .woocommerce ul.products li.product a.add_to_cart_button,
  .woocommerce ul.products li.product .button.add_to_cart_button,
  .woocommerce ul.products li.product a.vvsg-btn,
  .vvsg-btn {
    padding: 12px 18px;
  }
}

/* ================================
   GLOBALT: ta bort bakgrund på <ins>/<del> i pris
   ================================ */

.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price del,
.vvsg-related .price ins,
.vvsg-related .price del {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  text-decoration: none !important;
  display: inline !important;
}

/* =========================================
   RELATERADE PRODUKTER – NUKLEAR FIX
   ========================================= */

/* 1. Nollställ ALL bakgrund inne i relaterade kort */
.related.products ul.products li.product * {
  background: transparent !important;
}

/* 2. Lägg tillbaka brand-färger där vi VILL ha dem */

/* Badge ska vara ljusblå */
.related.products ul.products li.product .vvsg-badge {
  background: var(--vvsg-blue-light) !important;
  color: var(--vvsg-blue-dark) !important;
}

/* Knappen ska vara brand-blå */
.related.products ul.products li.product a.add_to_cart_button,
.related.products ul.products li.product .button.add_to_cart_button,
.related.products ul.products li.product a.vvsg-btn {
  background: var(--vvsg-blue) !important;
  color: var(--vvsg-white) !important;
}

/* Pris typografi, utan bar */
.related.products ul.products li.product .price,
.related.products ul.products li.product .price .amount,
.related.products ul.products li.product .price ins,
.related.products ul.products li.product .price del {
  color: var(--vvsg-gray-900) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  text-decoration: none !important;
  display: inline !important;
}

.related.products ul.products li.product .price {
  margin: 12px 0 10px 0 !important;
}

/* =========================================
   FIX FAQ-BUGG – AUTO-FAQ PÅ PRODUKTER
   ========================================= */

/* Wrapper */
.vvsg-faq {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  max-width: 720px;
}

/* Varje item */
.vvsg-faq .faq-item {
  margin: 6px 0;
}

/* Fråge-knappen – överstyr alla globala knapp-stilar */
.vvsg-faq .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb !important;
  font-size: 0.96rem;
  font-weight: 600;
  text-align: left;
  color: #111827 !important;
  text-indent: 0 !important;
  box-shadow: none !important;
}

/* döda ev. pseudo från globala knappregler */
.vvsg-faq .faq-question::before,
.vvsg-faq .faq-question::after {
  content: none !important;
}

/* Plus/minus-ikon */
.vvsg-faq .faq-toggle {
  margin-left: 8px;
  font-weight: 400;
  opacity: 0.7;
}

/* Svaret */
.vvsg-faq .faq-answer {
  padding: 8px 12px 12px;
  border-radius: 0 0 8px 8px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff;
  font-size: 0.95rem;
  color: #374151 !important;
}

/* Säkerställ att texten aldrig göms av andra regler */
.vvsg-faq .faq-answer p {
  margin: 4px 0;
  text-indent: 0 !important;
  opacity: 1 !important;
}
/* VVSOFFERT – dölj köp/varukorg UI (även om Elementor/blocks renderar) */
.woocommerce div.product form.cart,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product .quantity,
.woocommerce a.add_to_cart_button,
.woocommerce button.add_to_cart_button,
.woocommerce .added_to_cart,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info{
  display:none !important;
}

/* Dölj pris överallt */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce-Price-amount,
.woocommerce-price-suffix{
  display:none !important;
}