/*
 * WooCommerce pages, wearing the Gydien design.
 *
 * WooCommerce renders the shop, product, cart and checkout pages itself - that
 * is the whole reason for staying on WooCommerce, because those pages read live
 * products, stock and prices from the database and she can edit them herself.
 * This file only makes them look like the rest of the site. It deliberately
 * does not touch layout that WooCommerce needs to function.
 */

.wc-page { padding: 40px 0 80px; }
.wc-page .woocommerce-breadcrumb { margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.wc-page .woocommerce-breadcrumb a { color: var(--brand-dark); }
.wc-page h1, .wc-page h2.woocommerce-loop-product__title { color: var(--ink); }
.wc-page .page-title { font-size: clamp(30px, 4vw, 44px); margin: 0 0 8px; }

/* Product grid */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 28px 0 0; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  width: auto; margin: 0; float: none; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: white; text-align: left;
  box-shadow: 0 18px 50px rgba(18, 88, 103, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-small); }
.woocommerce ul.products li.product a img { margin: 0; border-radius: 0; aspect-ratio: 1 / 1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 18px 20px 0; margin: 0; font-size: 20px; font-weight: 800; }
.woocommerce ul.products li.product .price { display: block; padding: 6px 20px 0; color: var(--brand-dark); font-size: 19px; font-weight: 800; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 600; margin-right: 6px; }
.woocommerce ul.products li.product .button { margin: 16px 20px 20px; align-self: flex-start; }
.woocommerce span.onsale {
  min-height: 0; min-width: 0; padding: 6px 14px; top: 14px; left: 14px; right: auto; line-height: 1.2;
  border-radius: 999px; background: var(--coral); color: white; font-weight: 800;
}

/* Buttons - match the design's pill exactly */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 20px; border: 1px solid var(--brand); border-radius: 999px;
  background: var(--brand); color: white; text-decoration: none; font-weight: 800; cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover {
  background: var(--brand-dark); color: white; box-shadow: var(--shadow-small); transform: translateY(-1px);
}
.woocommerce a.button:active, .woocommerce button.button:active { transform: scale(.98); }
.woocommerce a.button.wc-forward.checkout { background: var(--brand-dark); border-color: var(--brand-dark); }

/* Single product */
.woocommerce div.product .product_title { font-size: clamp(28px, 4vw, 40px); margin: 0 0 10px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--brand-dark); font-size: 28px; font-weight: 800; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radius); }
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce .quantity input.qty {
  min-height: 48px; width: 78px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: var(--radius-small); background: white; color: var(--ink); font-weight: 700; text-align: center;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 22px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 1px solid var(--line); border-radius: 999px 999px 0 0; background: var(--surface-soft);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: white; border-bottom-color: white; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--ink); font-weight: 800; }

/* Cart, checkout, account, notices */
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th { background: var(--surface-soft); color: var(--ink); font-weight: 800; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-size: 22px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  min-height: 48px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-small); background: white; color: var(--ink); font-size: 16px;
}
.woocommerce form .form-row textarea { min-height: 120px; }
.woocommerce #payment { border-radius: var(--radius); background: var(--surface-soft); }
.woocommerce #payment div.payment_box { background: white; border: 1px solid var(--line); border-radius: var(--radius-small); }
.woocommerce #payment div.payment_box::before { display: none; }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  border-top: 0; border-left: 4px solid var(--brand); border-radius: var(--radius-small);
  background: var(--brand-soft); color: var(--ink);
}
.woocommerce-error { border-left-color: var(--coral); background: #fdf0ea; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--brand); }

/* Focus visibility - the design uses a high-contrast ring, keep it on shop pages */
.woocommerce a:focus-visible, .woocommerce button:focus-visible, .woocommerce input:focus-visible,
.woocommerce select:focus-visible, .woocommerce textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
                             .wc-page { padding: 24px 0 60px; } }
@media (max-width: 420px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }