/* ==========================================================================
   Liora Essence — WooCommerce surfaces
   Scoped to .woocommerce-* so nothing here leaks into editorial pages.
   ========================================================================== */

/* Woo prints its loop as ul.products; make it the theme grid. */
ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6) var(--sp-3);
  list-style: none;
  margin: 0; padding: 0;
}
@media (min-width: 640px)  { ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7) var(--sp-4); } }
@media (min-width: 1024px) { ul.products { grid-template-columns: repeat(4, 1fr); } }
ul.products::before, ul.products::after { content: none; }
ul.products li.product { width: auto; margin: 0; float: none; }

/* Card interior, driven by the .pcard classes the theme adds via post_class */
li.product { position: relative; display: flex; flex-direction: column; }
li.product > a.woocommerce-LoopProduct-link {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
li.product img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
  transition: transform var(--dur) var(--ease);
}
li.product:hover img { transform: scale(1.03); }

li.product.pcard--fragrance img { background: var(--surface-inverse); }
li.product.pcard--skincare  img { background: var(--surface-sunken); }

li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.25;
  padding: 0;
  margin: 0 0 var(--sp-2);
}
li.product .price {
  display: block;
  margin-top: auto;
  color: var(--text);
  font-size: var(--step-0);
  font-weight: 500;
}
li.product .price del { color: var(--text-muted); font-weight: 400; margin-inline-end: var(--sp-2); }
li.product .price ins { text-decoration: none; color: var(--error); }

/* The add-to-cart button on a card is secondary to the card link itself */
li.product .button {
  margin-top: var(--sp-3);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  position: relative; z-index: 2;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
li.product .button:hover { background: var(--accent-fill); color: var(--text-on-accent); border-color: var(--accent-fill); }

/* ---------------------------------------------------------- Single product */
.single-product div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 900px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
  .single-product div.product .woocommerce-product-gallery { position: sticky; top: 88px; }
}
.single-product div.product .woocommerce-product-gallery { margin: 0; }
.single-product div.product .summary { margin: 0; }
.single-product .product_title { font-size: var(--step-4); margin-bottom: var(--sp-4); }
.single-product .summary .price {
  font-size: var(--step-2);
  font-weight: 500;
  margin-bottom: var(--sp-5);
  display: block;
}
.single-product .woocommerce-product-details__short-description { max-width: var(--measure); margin-bottom: var(--sp-5); }

.single-product form.cart { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.single-product form.cart .quantity input[type=number] { width: 84px; min-height: 48px; text-align: center; }
.single-product form.cart .single_add_to_cart_button {
  flex: 1 1 220px;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  background: var(--accent-fill);
  color: var(--text-on-accent);
  border: 0; border-radius: var(--radius-input);
  font-size: var(--step-0); font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.single-product form.cart .single_add_to_cart_button:hover { background: var(--accent-press); }

.product_meta { font-size: var(--step--1); color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.product_meta > span { display: block; margin-bottom: var(--sp-2); }

/* Tabs */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--sp-7); }
.woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  list-style: none; margin: 0 0 var(--sp-5); padding: 0 0 var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.woocommerce-tabs ul.tabs li a {
  text-decoration: none; font-size: var(--step--1); font-weight: 500;
  color: var(--text-muted); padding-block: var(--sp-2);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--text); border-bottom: 2px solid var(--accent); }
.woocommerce-tabs .panel { max-width: var(--measure); }
.woocommerce-tabs .panel h2 { font-size: var(--step-2); margin-bottom: var(--sp-4); }

/* ------------------------------------------------------------ Cart & checkout */
.woocommerce table.shop_table {
  width: 100%; border-collapse: collapse;
  border: 0; border-top: 1px solid var(--border);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.woocommerce table.shop_table th { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; }

/* On a 360px screen a cart table cannot stay a table; restack it. */
@media (max-width: 599px) {
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table tr { display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
  .woocommerce table.shop_table td { border: 0; padding: 0; }
  .woocommerce table.shop_table td.product-thumbnail { grid-row: 1 / span 3; }
  .woocommerce table.shop_table td::before { content: attr(data-title) ": "; font-size: var(--step--1); color: var(--text-muted); }
  .woocommerce table.shop_table td.product-thumbnail::before { content: none; }
}

.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
  background: var(--surface-sunken);
  padding: var(--sp-5);
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td { font-size: var(--step-1); font-weight: 600; }

@media (min-width: 900px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
  .woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
  .woocommerce-checkout form.checkout #order_review,
  .woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; }
  .woocommerce-checkout form.checkout #order_review { position: sticky; top: 88px; }
}

.woocommerce form .form-row { margin-bottom: var(--sp-4); padding: 0; }
.woocommerce form .form-row label { display: block; margin-bottom: var(--sp-2); font-size: var(--step--1); font-weight: 500; }
.woocommerce form .form-row .required { color: var(--error); text-decoration: none; }
.woocommerce form .form-row.woocommerce-invalid input { border-color: var(--error); border-width: 2px; }
.woocommerce form .form-row .description { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--sp-2); }

.woocommerce #payment ul.payment_methods {
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
  border: 1px solid var(--border-input); border-radius: var(--radius-input);
}
.woocommerce #payment ul.payment_methods li { padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.woocommerce #payment ul.payment_methods li:last-child { border-bottom: 0; }
.woocommerce #payment ul.payment_methods li label { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 44px; font-weight: 500; }
.woocommerce #payment div.payment_box { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--surface-sunken); font-size: var(--step--1); }
.woocommerce #payment .button#place_order {
  width: 100%; min-height: 52px;
  background: var(--accent-fill); color: var(--text-on-accent);
  border: 0; border-radius: var(--radius-input);
  font-size: var(--step-0); font-weight: 500; cursor: pointer;
}
.woocommerce #payment .button#place_order:hover { background: var(--accent-press); }

/* ---------------------------------------------------------------- Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  background: var(--surface-sunken);
  border-left: 3px solid var(--notice);
  font-size: var(--step--1);
}
.woocommerce-message { border-left-color: var(--success); }
.woocommerce-error   { border-left-color: var(--error); color: var(--text); }
.woocommerce-error li { margin-bottom: var(--sp-2); }

/* ------------------------------------------------------------ Breadcrumbs */
.woocommerce-breadcrumb {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}
.woocommerce-breadcrumb a { color: var(--text-muted); }

/* ------------------------------------------------- Shop header & ordering */
.woocommerce-products-header { margin-bottom: var(--sp-6); }
.woocommerce-products-header__title { font-size: var(--step-4); }
.woocommerce-result-count { font-size: var(--step--1); color: var(--text-muted); }
.woocommerce-ordering select { max-width: 260px; }

/* -------------------------------------------------------------- My account */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border); }
.woocommerce-MyAccount-navigation li a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-size: var(--step--1); }
.woocommerce-MyAccount-navigation li.is-active a { font-weight: 600; color: var(--accent-fill); }

@media (min-width: 900px) {
  .woocommerce-account .woocommerce {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-7);
  }
}