/**
 * WooCommerce-only polish on top of pages.css (forms, notices, cart/checkout tables).
 * Theme disables WooCommerce's default stylesheets.
 *
 * Tokens are the site's (--font-body, --rule, --ivory). The old names (--font-sans,
 * --line, --cream) are not defined, so rules that used them never applied.
 */

.woocommerce-notices-wrapper {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 var(--space-l);
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--rule);
  background: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--step-0);
  list-style: none;
}

.woocommerce-message,
.woocommerce-info { border-color: var(--clay); }
.woocommerce-error { border-color: #a33; }

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { color: var(--clay-deep); text-decoration: underline; }

/* pages.css positions `.cart` as the slide-out drawer. WooCommerce's
   add-to-cart form uses the same class; these rules put it back in the column.
   #cart in pages.css is the drawer, so this is a second lock. */
.product-detail__buy form.cart,
form.cart {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-s);
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: none;
  overflow: visible;
}

form.cart .variations,
form.cart .single_variation_wrap {
  flex: 1 0 100%;
  width: 100%;
  margin: 0;
}

form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-s);
}

.product-detail__buy .quantity,
form.cart .quantity { margin: 0; }

.quantity .qty,
.product-detail__buy .qty {
  width: 4.5rem;
  min-height: 48px;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--charcoal);
}

/* Variation selects */
.variations,
.product-detail__buy .variations {
  width: 100%;
  margin: 0 0 var(--space-s);
  border: 0;
}
.variations td,
.variations th {
  display: block;
  padding: 0 0 0.35rem;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.variations td { padding-bottom: var(--space-m); }
.variations select,
.variations .reset_variations {
  font-family: var(--font-body);
}
.variations select {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--step-0);
  color: var(--charcoal);
}

.reset_variations {
  font-size: var(--step--1);
  margin-left: 0.5rem;
  color: var(--clay-deep);
}

.single_variation {
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-2);
}

/* Buttons that WooCommerce prints (the product card uses .btn itself). */
.single_add_to_cart_button.button,
.checkout-button.button,
.woocommerce-button.button,
button.button.alt,
a.button.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 14px 28px;
  border: 1px solid var(--clay);
  border-radius: var(--radius);
  background: var(--clay);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-button);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.single_add_to_cart_button.button:hover,
.checkout-button.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
  background: var(--clay-deep);
  border-color: var(--clay-deep);
  color: var(--ivory);
}
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.product-card__frame img,
.fcard__frame img,
.product-detail__frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Fase 4: brand rows hide with filters; tax archives use .shop-compact */
html.shop-query .brand-row { display: none; }
body.bilu-tax-archive .phero--shop,
body.bilu-tax-archive .brand-row { display: none; }
body.bilu-tax-archive .shop-compact { display: block; }

/* Cart table */
.woocommerce-cart-form,
.wc-cart {
  margin-bottom: var(--space-2xl);
  overflow-x: auto;
}
.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--step-0);
}
.shop_table th,
.shop_table td {
  padding: var(--space-m) var(--space-s) var(--space-m) 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}
.shop_table .product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: #efe8dc;
}
.shop_table .product-name a {
  font-family: var(--font-display);
  font-size: var(--product-name-size);
  font-weight: 300;
  overflow-wrap: anywhere;
}
.shop_table .product-remove a {
  color: var(--ink-soft);
  font-size: 1.25rem;
  text-decoration: none;
}
.cart-collaterals,
.woocommerce-checkout-payment {
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  border: 1px solid var(--rule);
  background: var(--ivory);
}
.cart_totals h2,
.woocommerce-checkout-review-order-table,
#order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.wc-page__title {
  font-family: var(--font-display);
  font-weight: 400;
}
.cart_totals h2,
#order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  margin: 0 0 var(--space-m);
  font-size: var(--step-3);
}
.cart_totals .checkout-button { width: 100%; margin-top: var(--space-m); }

.coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin: var(--space-m) 0 var(--space-l);
}
/* Specific enough to beat the full-width field rule below (desktop). */
.woocommerce-cart-form .coupon .input-text { width: min(100%, 16rem); }

/* Checkout / account fields. .field (from the form-field filter) already
   matches the contact form; these cover the login form and selects, which
   that filter does not print. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
  display: grid;
  gap: var(--space-m);
}
.woocommerce-checkout .form-row,
.woocommerce-form .form-row,
.woocommerce-MyAccount-content .form-row {
  margin: 0 0 var(--space-m);
}
.woocommerce-checkout label,
.woocommerce-form label,
.woocommerce-MyAccount-content form label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-form .input-text,
.woocommerce-form select,
.woocommerce-MyAccount-content .input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea,
.coupon .input-text {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--step-0);
}
.woocommerce-checkout textarea,
.woocommerce-MyAccount-content textarea { min-height: 140px; }
.required { color: var(--clay-deep); }

/* selectWoo hides the native select and draws its own widget. Without
   WooCommerce's select2 sheet that widget is unstyled, so keep the native
   control (the script still fills the state options). */
.select2-container { display: none !important; }
select.select2-hidden-accessible {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  margin: 0 !important;
}

.wc_payment_methods {
  list-style: none;
  margin: 0 0 var(--space-l);
  padding: 0;
}
.wc_payment_method {
  margin: 0 0 var(--space-m);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--rule);
}
.wc_payment_method label {
  display: inline;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.payment_box {
  margin-top: 0.5rem;
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
  margin: var(--space-m) 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  font-family: var(--font-body);
  font-size: var(--step-0);
}
.woocommerce-MyAccount-navigation a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover {
  color: var(--clay-deep);
  border-bottom-color: var(--clay);
}

.wc-page__title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 var(--space-xl);
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
  max-width: 32rem;
}

@media (max-width: 720px) {
  .shop_table .product-thumbnail { display: none; }
  .cart-collaterals,
  .woocommerce-checkout-payment { padding: var(--space-m); }

  /* Cart items as stacked rows: name + remove on top, then price, quantity
     and subtotal as label/value lines (labels from WooCommerce's data-title). */
  .woocommerce-cart-form { overflow-x: visible; }
  .woocommerce-cart-form__contents,
  .woocommerce-cart-form__contents tbody,
  .woocommerce-cart-form__contents tr,
  .woocommerce-cart-form__contents td {
    display: block;
    width: 100%;
  }
  .woocommerce-cart-form__contents thead { display: none; }
  .woocommerce-cart-form__contents .cart_item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-s);
    padding: var(--space-m) 0;
    border-bottom: 1px solid var(--rule);
  }
  .woocommerce-cart-form__contents .cart_item td {
    padding: 0.35rem 0;
    border: 0;
  }
  .woocommerce-cart-form__contents .cart_item .product-thumbnail { display: none; }
  .woocommerce-cart-form__contents .cart_item .product-name {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: var(--space-s);
  }
  .woocommerce-cart-form__contents .cart_item .product-remove {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    text-align: right;
  }
  .woocommerce-cart-form__contents .cart_item .product-price,
  .woocommerce-cart-form__contents .cart_item .product-quantity,
  .woocommerce-cart-form__contents .cart_item .product-subtotal {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
  }
  .woocommerce-cart-form__contents .cart_item td[data-title]:not(.product-name)::before {
    content: attr(data-title);
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }
  .woocommerce-cart-form__contents td.actions {
    padding: var(--space-m) 0;
  }
  .woocommerce-cart-form__contents .coupon {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-cart-form__contents .coupon .input-text,
  .woocommerce-cart-form__contents .actions .button {
    width: 100%;
    white-space: normal;
  }
  .cart_totals .shop_table th,
  .cart_totals .shop_table td { overflow-wrap: anywhere; }
}

/* Shop hero image: short full-width band, cropped (no squash, no upscale). */
.phero--shop .phero__media {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: clamp(28px, 3.4vw, 48px);
}
.phero--shop .phero__media img {
  display: block;
  width: 100%;
  height: clamp(220px, 26vw, 360px);
  object-fit: cover;
  object-position: center;
}

/* Cart: two columns on desktop (items left, totals right). */
@media (min-width: 900px) {
  .woocommerce-cart .wc-page .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
  .woocommerce-cart .wc-page .woocommerce > * { grid-column: 1 / -1; }
  .woocommerce-cart .wc-page .woocommerce > .woocommerce-cart-form {
    grid-column: 1;
    margin-bottom: 0;
    min-width: 0;
  }
  .woocommerce-cart .wc-page .woocommerce > .cart-collaterals {
    grid-column: 2;
    margin-top: 0;
    padding: var(--space-l);
    position: sticky;
    top: calc(var(--header-h-compact, 72px) + 24px);
  }
  .woocommerce-cart .cart_totals h2 { font-size: var(--step-2); }
  .woocommerce-cart .cart_totals .shop_table th { width: 45%; }
}

/* Checkout: two columns on desktop (customer details left, order summary right).
   Notices and the coupon toggle/form stay full width above the form. */
@media (min-width: 900px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
  .woocommerce-checkout form.checkout > * { grid-column: 1 / -1; min-width: 0; }
  .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; }
  .woocommerce-checkout form.checkout > .bilu-checkout-summary {
    grid-column: 2;
    padding: var(--space-l);
    border: 1px solid var(--rule);
    background: var(--ivory);
    position: sticky;
    top: calc(var(--header-h-compact, 72px) + 24px);
  }
  .woocommerce-checkout .bilu-checkout-summary #order_review_heading { font-size: var(--step-2); }
  /* The summary box already has the frame; payment sits inside it flat. */
  .woocommerce-checkout .bilu-checkout-summary .woocommerce-checkout-payment {
    margin-top: var(--space-l);
    padding: 0;
    border: 0;
    background: transparent;
  }
  .woocommerce-checkout .bilu-checkout-summary .shop_table th,
  .woocommerce-checkout .bilu-checkout-summary .shop_table td { overflow-wrap: anywhere; }
  .woocommerce-checkout .bilu-checkout-summary #place_order { width: 100%; }
}