/* ============================================================
   WooCommerce — Walnut brand styling.
   Uses the theme tokens (--wal-*) loaded via style.css.
   ============================================================ */

/* ---- Buttons ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
  background: var(--wal-walnut, #8B5E3C);
  color: #fff;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--wal-font-body, "Source Sans 3", sans-serif);
  font-weight: 500;
  padding: 0.7em 1.4em;
  transition: background 0.18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
  background: var(--wal-walnut-dark, #6E4A2F);
  color: #fff;
}
.woocommerce a.button.outline,
.woocommerce .button.wc-backward {
  background: transparent;
  color: var(--wal-walnut, #8B5E3C);
  border-color: var(--wal-border-strong, #D2C2A9);
}

/* ---- Headings / typography ---- */
.woocommerce .products h2,
.woocommerce div.product .product_title,
.woocommerce-page h1, .woocommerce-page h2 {
  font-family: var(--wal-font-display, "Fraunces", Georgia, serif);
  color: var(--wal-ink, #2A1F16);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ---- Shop loop (product cards) ---- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--wal-surface, #FCF8F1);
  border: 1px solid var(--wal-border, #E4D8C6);
  border-radius: 16px;
  padding: 1rem 1rem 1.25rem;
  box-shadow: var(--wal-shadow-sm, 0 1px 2px rgba(74,51,34,0.06));
}
.woocommerce ul.products li.product a img { border-radius: 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wal-font-display, Fraunces, serif);
  color: var(--wal-ink, #2A1F16);
  font-size: 1.1rem;
}

/* ---- Prices ---- */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--wal-walnut-deep, #4A3322);
  font-family: var(--wal-font-mono, ui-monospace, monospace);
  font-weight: 600;
}
.woocommerce .price del { color: var(--wal-muted, #6F6151); font-weight: 400; }
.woocommerce .price ins { text-decoration: none; }

/* ---- Sale badge ---- */
.woocommerce span.onsale {
  background: var(--wal-walnut, #8B5E3C);
  color: #fff;
  border-radius: 999px;
  font-family: var(--wal-font-body, "Source Sans 3", sans-serif);
  font-weight: 600;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: 0.4em 0.8em;
}

/* ---- Star rating ---- */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.star-rating::before { color: var(--wal-warning, #B5863C); }

/* ---- Forms / inputs ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input.qty,
.select2-container--default .select2-selection--single {
  border: 1px solid var(--wal-border-strong, #D2C2A9);
  border-radius: 10px;
  background: var(--wal-surface, #FCF8F1);
  color: var(--wal-ink, #2A1F16);
  padding: 0.55em 0.8em;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--wal-walnut, #8B5E3C);
  box-shadow: 0 0 0 3px rgba(139,94,60,0.15);
}

/* ---- Tables (cart, order) ---- */
.woocommerce table.shop_table {
  border: 1px solid var(--wal-border, #E4D8C6);
  border-radius: 14px;
  border-collapse: separate;
}
.woocommerce table.shop_table th { background: var(--wal-sand, #EFE5D6); color: var(--wal-ink, #2A1F16); }

/* ---- Notices ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--wal-walnut, #8B5E3C);
  background: var(--wal-surface, #FCF8F1);
  border-radius: 0 0 10px 10px;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--wal-walnut, #8B5E3C); }
.woocommerce-error { border-top-color: var(--wal-error, #A4543E); }
.woocommerce-error::before { color: var(--wal-error, #A4543E); }

/* ---- My account ---- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  border: 1px solid var(--wal-border, #E4D8C6);
  border-radius: 14px;
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--wal-border, #E4D8C6);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active {
  background: var(--wal-walnut-tint, #EADBC8);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  color: var(--wal-body, #4A3E33);
  display: block;
  padding: 0.7em 1em;
}

/* A RENDELÉS ADATAI NEM SZÖVEGKIEMELŐVEL.
   Bejelentés: „a rendelésnél furcsa sárga kiemelés van”. A WooCommerce a
   rendelésszámot, a dátumot és az állapotot <mark> elemekbe teszi — a böngésző
   pedig annak ALAPÉRTELMEZÉSBEN élénksárga hátteret ad. A jelölés maga helyes
   (ezek tényleg kiemelt adatok), csak a megjelenése idegen: úgy néz ki, mintha
   valaki szövegkiemelővel áthúzta volna a mondatot.

   Nem rejtjük el a kiemelést, csak a bolt formanyelvére váltjuk: háttér nélkül,
   sötét tintával és félkövéren. Így a három adat továbbra is kiugrik a mondatból,
   de nem sárgán. A <mark> elem megmarad, tehát a képernyőolvasó és a kereső
   számára a jelentés változatlan. */
.woocommerce mark,
.woocommerce-order-details mark,
.woocommerce-account mark {
  background: transparent;
  color: var(--wal-ink, #2A1F16);
  font-weight: 600;
}

/* ---- Checkout payment box ---- */
.woocommerce-checkout #payment {
  background: var(--wal-sand, #EFE5D6);
  border-radius: 14px;
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--wal-border, #E4D8C6); }
.woocommerce-checkout #payment div.payment_box {
  background: var(--wal-walnut-tint, #EADBC8);
  color: var(--wal-walnut-deep, #4A3322);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--wal-walnut-tint, #EADBC8); }