/* ============================================================
   KARA — WooCommerce skin
   Maps WooCommerce's default markup onto the KARA design tokens
   and existing component styles (product cards, ghost buttons,
   page-intro titles, the .detail two-column product layout).

   Loaded only on WC screens (see inc/woocommerce.php).

   Two surface types:
   - "On mauve": shop archive, single product — white text on the
     site background, styled to match the KARA pages.
   - "On white": cart, checkout, account, notices, forms — WC needs
     dark text on a light card to stay legible. These use white
     panels echoing the KARA order modal.
   ============================================================ */

/* ----------  Shared button look (ghost, on mauve)  ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .85);
  color: #fff;
  background: transparent;
  padding: .7em 1.6em;
  font-family: var(--font-garamond);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 19px;
  line-height: 1;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.added_to_cart:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* Primary actions (place order, proceed to checkout, update cart) sit on white
   panels, so give them the accent fill instead of the white ghost outline. */
.woocommerce #payment #place_order,
.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.button,
.woocommerce button.button[name="update_cart"],
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  border-radius: var(--radius);
}
.woocommerce #payment #place_order:hover,
.woocommerce a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ============================================================
   SHOP ARCHIVE (on mauve)
   ============================================================ */

/* Products header title -> page-intro__title treatment. */
.woocommerce .woocommerce-products-header {
  text-align: center;
  padding-bottom: clamp(24px, 4vw, 52px);
}
.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 36px);
  letter-spacing: .1em;
}
.woocommerce .woocommerce-products-header .term-description {
  max-width: var(--container-narrow);
  margin: 1.4em auto 0;
  color: var(--ink-soft);
}

/* Result count + ordering (only visible if you re-enabled them). */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--ink-soft); }
.woocommerce .woocommerce-ordering select {
  border: 1px solid rgba(255, 255, 255, .7);
  background: transparent;
  color: #fff;
  padding: 8px 14px;
}
.woocommerce .woocommerce-ordering select option { color: #222; }

/* Product loop grid -> .product-grid. WC controls column count with the
   .columns-N class, but this grid layout overrides that so it always tracks
   the KARA breakpoints. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-bottom: 18px;
  transition: transform .4s;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 24px);
  padding: 0;
  margin: 0;
  color: var(--ink);
}
.woocommerce ul.products li.product .price {
  font-family: var(--font-garamond);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink-soft);
  margin: 6px 0 14px;
}
.woocommerce ul.products li.product .price del { opacity: .6; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { align-self: flex-start; margin-top: auto; }

/* Sale badge. */
.woocommerce span.onsale {
  background: var(--accent);
  color: #fff;
  border-radius: 0;
  min-height: auto;
  min-width: auto;
  padding: .35em .8em;
  font-family: var(--font-garamond);
  letter-spacing: .04em;
}

/* Pagination. */
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  color: var(--ink);
  background: transparent;
  padding: .4em .8em;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: rgba(255, 255, 255, .16);
}

/* ============================================================
   SINGLE PRODUCT (on mauve) -> echoes the .detail two-column layout
   ============================================================ */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery { margin: 0; float: none; width: 100%; }
.woocommerce div.product .woocommerce-product-gallery img { aspect-ratio: 1 / 1; object-fit: cover; }
.woocommerce div.product .summary { margin: 0; width: 100%; float: none; }

.woocommerce div.product .product_title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px);
  margin-bottom: 18px;
}
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .summary p { color: var(--ink-soft); }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 20px;
}

/* Variation / quantity controls -> .select-box + detail styling. */
.woocommerce div.product form.cart { margin-top: 22px; }
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce div.product select,
.woocommerce table.variations select {
  border: 1px solid rgba(255, 255, 255, .7);
  background: transparent;
  color: #fff;
  font-family: var(--font-garamond);
  font-size: 18px;
  padding: 12px 16px;
  -webkit-appearance: none;
  appearance: none;
}
.woocommerce div.product select option,
.woocommerce table.variations select option { color: #222; }
.woocommerce table.variations th { color: var(--ink); font-family: var(--font-serif); }

/* Product tabs (description / additional info / reviews). */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 64px); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: rgba(255, 255, 255, .3); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--ink-soft); font-family: var(--font-serif); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); }
.woocommerce div.product .woocommerce-Tabs-panel { color: var(--ink-soft); }
.woocommerce #reviews h2, .woocommerce div.product .woocommerce-tabs h2 {
  font-family: var(--font-serif);
  color: var(--ink);
}

/* Related / upsell products reuse the loop grid above automatically. */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 4.4vw, 36px);
  margin-bottom: clamp(24px, 3vw, 40px);
  grid-column: 1 / -1;
}
.woocommerce .related, .woocommerce .upsells { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 64px); }

/* ============================================================
   NOTICES (white panels with accent marker)
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-store-notice {
  background: #fff;
  color: #333;
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--accent); }
.woocommerce-message a.button,
.woocommerce-info a.button {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  border-radius: var(--radius);
}

/* ============================================================
   CART / CHECKOUT / ACCOUNT (on white — legibility first)
   These wrap WC's tables and forms in white cards echoing the
   KARA order modal. This is a solid, legible baseline; refine to
   taste once real content is in.
   ============================================================ */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
  background: #fff;
  color: #333;
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .12);
}
.woocommerce-cart .woocommerce a,
.woocommerce-checkout .woocommerce a,
.woocommerce-account .woocommerce a { color: var(--accent); }

.woocommerce table.shop_table {
  border-radius: var(--radius);
  border-color: #e6e1e1;
  color: #333;
}
.woocommerce table.shop_table th { font-family: var(--font-serif); }
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce form.checkout h3 {
  font-family: var(--font-serif);
  color: #333;
}

/* Form fields on white. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart .woocommerce input[type="text"],
.woocommerce-checkout .woocommerce input[type="text"] {
  border: 1px solid #cfc8c8;
  border-radius: var(--radius);
  padding: 12px 14px;
  color: #333;
  background: #fff;
}
.woocommerce form .form-row label { color: #333; }

/* Account navigation. */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border-color: #e6e1e1; }
.woocommerce-account .woocommerce-MyAccount-navigation a { color: #333; }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color: var(--accent); font-weight: 700; }

/* ============================================================
   HEADER CART LINK (if you add one in header.php — see the doc)
   ============================================================ */
.kara-cart-link { display: inline-flex; align-items: center; gap: .4em; color: inherit; }
.kara-cart-link .kara-cart-count {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  padding: .3em .55em;
  font-family: var(--font-garamond);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: 1fr 1fr; }
  .woocommerce div.product { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-inline: auto;
  }
}