/**
 * WooCommerce – Anpassad CSS för Sävedalens Trafikskola
 */

/* ============================================================
   PRODUKTLISTA
   ============================================================ */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
  margin: 0 !important;
}
.woocommerce ul.products li.product {
  float: none !important; width: 100% !important; margin: 0 !important;
  border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md);
  overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; background: #fff;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-xl);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important; font-size: 1.05rem !important;
  font-weight: 700 !important; color: var(--color-primary) !important; padding: 1rem 1rem 0 !important;
}
.woocommerce ul.products li.product .price {
  color: var(--color-accent) !important; font-family: var(--font-heading) !important;
  font-size: 1.2rem !important; font-weight: 700 !important; padding: 0 1rem !important;
}
.woocommerce ul.products li.product .button {
  margin: 0.75rem 1rem 1.25rem !important; border-radius: var(--border-radius-md) !important;
  background: var(--color-primary) !important; color: #fff !important;
  font-family: var(--font-heading) !important; font-weight: 600 !important;
  font-size: 0.9rem !important; padding: 0.65rem 1.25rem !important;
  transition: all 0.3s ease !important; display: inline-block !important;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--color-accent) !important; transform: translateY(-2px) !important;
}
.woocommerce ul.products li.product .onsale {
  background: var(--color-danger) !important; border-radius: var(--border-radius-md) !important;
  font-family: var(--font-heading) !important; font-weight: 700 !important;
  top: 12px !important; left: 12px !important; right: auto !important;
  min-height: auto !important; line-height: 1 !important; padding: 0.3rem 0.7rem !important;
}

/* ============================================================
   ENSKILD PRODUKT
   ============================================================ */
.woocommerce div.product .product_title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.6rem,3vw,2.2rem) !important; color: var(--color-primary) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--color-accent) !important; font-family: var(--font-heading) !important;
  font-size: 2rem !important; font-weight: 700 !important;
}
.woocommerce div.product form.cart .button {
  background: var(--color-accent) !important; font-family: var(--font-heading) !important;
  font-weight: 700 !important; font-size: 1rem !important; padding: 1rem 2rem !important;
  border-radius: var(--border-radius-md) !important; transition: all 0.3s !important;
}
.woocommerce div.product form.cart .button:hover {
  background: var(--color-accent-dark) !important; transform: translateY(-2px) !important;
}

/* ============================================================
   KASSA
   ============================================================ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  border: 2px solid var(--color-border) !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 0.75rem 1rem !important; font-family: var(--font-body) !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(26,58,92,0.1) !important; outline: none !important;
}
.woocommerce form .form-row label {
  font-family: var(--font-heading) !important; font-weight: 600 !important;
  font-size: 0.85rem !important; color: var(--color-text) !important;
}
#place_order {
  background: var(--color-accent) !important; font-family: var(--font-heading) !important;
  font-weight: 700 !important; font-size: 1.1rem !important;
  padding: 1.1rem 2.5rem !important; border-radius: var(--border-radius-md) !important;
  border: none !important; width: 100% !important; transition: all 0.3s !important;
}
#place_order:hover {
  background: var(--color-accent-dark) !important;
  transform: translateY(-2px) !important; box-shadow: var(--shadow-lg) !important;
}

/* ============================================================
   NOTISER
   ============================================================ */
.woocommerce-message {
  border-top-color: var(--color-success) !important; background: #d4edda !important; color: #155724 !important;
}
.woocommerce-error {
  border-top-color: var(--color-danger) !important; background: #f8d7da !important; color: #721c24 !important;
}
.woocommerce-info {
  border-top-color: var(--color-primary) !important; background: rgba(26,58,92,0.06) !important; color: var(--color-primary) !important;
}

/* ============================================================
   MIN SIDA
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--color-primary); border-radius: var(--border-radius-lg); overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block; padding: 0.9rem 1.5rem; color: rgba(255,255,255,0.8) !important;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.1); transition: all 0.2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: rgba(232,160,32,0.2) !important; color: var(--color-accent-light) !important; padding-left: 2rem;
}

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}