/* ==========================================================================
   קאזאלינגו · WooCommerce component styles
   Requires tokens.css loaded first.
   Uses logical properties (inline-start/end) — RTL-safe without an rtl.css.
   ========================================================================== */

/* ---------- Buttons ---------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button,
.cl-btn {
  display: inline-block;
  background: var(--color-primary);
  color: var(--cl-cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-medium);
  line-height: 1;
  padding: var(--sp-3) var(--sp-6);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.woocommerce .button:hover,
.wc-block-components-button:hover,
.cl-btn:hover {
  background: var(--color-primary-hover);
  color: var(--cl-cream);
}
.woocommerce .button:active,
.cl-btn:active { transform: translateY(1px); }

/* secondary (olive outline) */
.woocommerce .button.alt-secondary,
.cl-btn--secondary {
  background: transparent;
  color: var(--color-secondary);
  box-shadow: inset 0 0 0 2px var(--color-secondary);
}
.woocommerce .button.alt-secondary:hover,
.cl-btn--secondary:hover {
  background: var(--color-secondary);
  color: var(--cl-cream);
}

/* ghost (quiet actions: "המשך קנייה", filters) */
.cl-btn--ghost {
  background: transparent;
  color: var(--color-text);
  box-shadow: inset 0 0 0 1.5px var(--color-border);
}
.cl-btn--ghost:hover { background: var(--cl-cream-2); color: var(--color-text); }

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.cl-btn:disabled {
  background: var(--cl-cream-2);
  color: var(--cl-ink-faint);
  cursor: not-allowed;
}

/* checkout / primary flow buttons — full-width on mobile */
@media (max-width: 640px) {
  .woocommerce-cart .checkout-button,
  .woocommerce #payment #place_order { width: 100%; }
}

/* ---------- Product grid card ---------- */
.woocommerce ul.products li.product,
.cl-product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--ease), transform var(--ease);
}
.woocommerce ul.products li.product:hover,
.cl-product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product img,
.cl-product-card img { display: block; width: 100%; height: auto; }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.cl-product-card .cl-product-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading-sub);
  font-size: var(--fs-h4);
  color: var(--color-heading);
  padding: var(--sp-4) var(--sp-4) 0;
}

/* ---------- Price ---------- */
.woocommerce .price,
.cl-price {
  font-family: var(--font-body);
  font-weight: var(--fw-body-medium);
  color: var(--color-text);
}
.woocommerce .price ins,
.cl-price ins {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
}
.woocommerce .price del,
.cl-price del {
  color: var(--cl-ink-faint);
  font-weight: var(--fw-body);
  margin-inline-end: var(--sp-2);
}

/* ---------- Sale / status badges ---------- */
.woocommerce span.onsale,
.cl-badge--sale {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  background: var(--color-sale);
  color: var(--color-sale-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-body-medium);
  line-height: 1;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-pill);
  min-width: 0; min-height: 0;   /* reset Woo's circle sizing */
}
.cl-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-body-medium);
  line-height: 1;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--cl-saffron);
  color: var(--cl-ink);
}
.cl-badge--new    { background: var(--cl-olive);  color: var(--cl-cream); }
.cl-badge--soldout{ background: var(--cl-cream-2); color: var(--cl-ink-soft); }

/* ---------- Star ratings ---------- */
.woocommerce .star-rating span,
.cl-stars { color: var(--color-accent); }

/* ---------- Forms ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.cl-input {
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.cl-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(232, 178, 58, 0.25);
}
.cl-input::placeholder { color: var(--cl-ink-faint); }
.cl-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-body-medium);
  margin-block-end: var(--sp-2);
}

/* quantity stepper */
.woocommerce .quantity .qty,
.cl-qty {
  width: 4.5em;
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ---------- Notices ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.cl-notice {
  border: none;
  border-inline-start: 4px solid var(--color-secondary);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4) var(--sp-6);
}
.woocommerce-message,        .cl-notice--success { border-inline-start-color: var(--color-success); }
.woocommerce-info,           .cl-notice--info    { border-inline-start-color: var(--color-accent); }
.woocommerce-error,          .cl-notice--error   { border-inline-start-color: var(--color-error); }

/* WooCommerce 9 renders wc_print_notice() as "banner" markup
   (.wc-block-components-notice-banner + svg icon) instead of the legacy
   .woocommerce-message — and its stylesheet only ships with the blocks
   cart, which we don't use. Same card look as above, on tokens. */
.wc-block-components-notice-banner {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border: none; border-inline-start: 4px solid var(--color-accent);
  background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: var(--sp-4) var(--sp-6); margin-block: 0 var(--sp-3);
}
/* variant selectors also re-assert surface/text: WooCommerce core ships its
   own tinted banner backgrounds at .is-* specificity */
.wc-block-components-notice-banner.is-success {
  border-inline-start-color: var(--color-success);
  background: var(--color-surface); color: var(--color-text); border-block: none; border-inline-end: none;
}
.wc-block-components-notice-banner.is-error {
  border-inline-start-color: var(--color-error);
  background: var(--color-surface); color: var(--color-text); border-block: none; border-inline-end: none;
}
.wc-block-components-notice-banner.is-info {
  border-inline-start-color: var(--color-accent);
  background: var(--color-surface); color: var(--color-text); border-block: none; border-inline-end: none;
}
.wc-block-components-notice-banner > svg {
  flex: none; width: 22px; height: 22px; margin-top: 2px; fill: currentColor;
}
.wc-block-components-notice-banner.is-success > svg { color: var(--color-success); }
.wc-block-components-notice-banner.is-error   > svg { color: var(--color-error); }
.wc-block-components-notice-banner.is-info    > svg { color: var(--color-accent); }
.wc-block-components-notice-banner__content {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
/* the "מעבר לסל הקניות" action Woo appends to the success message.
   Selector strength + !important are deliberate: wc-blocks-rtl.css loads
   after this sheet and flattens the link with
   ".wc-block-components-notice-banner>...__content .wc-forward"
   (0,3,0) + !important on background/color/padding. */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wc-forward {
  background: none !important; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-4) !important;
  color: var(--color-secondary) !important; text-decoration: none;
  white-space: nowrap; float: none; opacity: 1;
  font-size: var(--fs-small); font-weight: var(--fw-body-medium);
  transition: background-color var(--ease);
}
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wc-forward:hover {
  background: var(--cl-cream-2) !important; text-decoration: none;
}

/* ---------- Breadcrumbs & pagination ---------- */
.woocommerce .woocommerce-breadcrumb,
.cl-breadcrumb { color: var(--cl-ink-faint); font-size: var(--fs-small); }
.woocommerce .woocommerce-breadcrumb a,
.cl-breadcrumb a { color: var(--color-secondary); }

.woocommerce nav.woocommerce-pagination ul { border: none; }
.woocommerce nav.woocommerce-pagination ul li {
  border: none; margin: 0 var(--sp-1);
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.cl-page-link {
  display: inline-block;
  min-width: 2.4em;
  text-align: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: transparent;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.cl-page-link.is-current {
  background: var(--cl-ink);
  color: var(--cl-cream);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.cl-page-link:hover { background: var(--cl-cream-2); }

/* ---------- Tables (cart, order summary) ---------- */
.woocommerce table.shop_table,
.cl-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_table th,
.cl-table th {
  background: var(--cl-cream-2);
  font-weight: var(--fw-body-medium);
  padding: var(--sp-3) var(--sp-4);
}
.woocommerce table.shop_table td,
.cl-table td {
  border-block-start: 1px solid var(--color-border);
  padding: var(--sp-3) var(--sp-4);
}