/* Chai AlJalsa — WooCommerce overrides */

/* ─── Product grid (archive) ─── */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-5) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.products.columns-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

ul.products li.product {
  background: var(--surface-card) !important;
  border: var(--bw-hair) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out) !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.products li.product:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none !important;
  color: inherit !important;
}

/* Product image */
ul.products li.product .attachment-woocommerce_thumbnail,
ul.products li.product img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Product info */
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--text-strong) !important;
  padding: var(--space-4) var(--space-4) var(--space-2) !important;
  margin: 0 !important;
}

ul.products li.product .price {
  padding: 0 var(--space-4) !important;
  color: var(--text-strong) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-lg) !important;
}
ul.products li.product .price del {
  color: var(--text-muted) !important;
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-sm) !important;
  opacity: 1 !important;
}

ul.products li.product .star-rating {
  padding: var(--space-2) var(--space-4) 0 !important;
  margin: 0 !important;
  color: var(--warning) !important;
}

ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  margin: var(--space-4) !important;
  margin-top: auto !important;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
  height: var(--control-h-sm) !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--dur-fast) !important;
  text-decoration: none !important;
}
ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
  background: var(--accent-hover) !important;
  color: var(--on-accent) !important;
}
ul.products li.product .button.added { background: var(--success) !important; }

/* "View cart" link that appears after AJAX add-to-cart */
ul.products li.product a.added_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--control-h-sm) !important;
  padding: 0 12px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--text-muted) !important;
  border: var(--bw-hair) solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  margin: 0 var(--space-3) var(--space-3) !important;
  transition: background var(--dur-fast), color var(--dur-fast) !important;
}
ul.products li.product a.added_to_cart:hover {
  background: var(--surface-sunken) !important;
  color: var(--text-brand) !important;
}

/* Sale badge */
ul.products li.product .onsale {
  background: var(--accent) !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  padding: 4px 12px !important;
  top: 12px !important;
  inset-inline-start: 12px !important;
  inset-inline-end: auto !important;
  left: auto !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.5 !important;
}

/* ─── Product sorting & results count ─── */
.woocommerce-ordering select {
  height: var(--control-h-sm) !important;
  padding: 0 36px 0 14px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  color: var(--text-strong) !important;
  background: var(--surface-card) !important;
  border: var(--bw-hair) solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  appearance: none !important;
  cursor: pointer;
}
.woocommerce-ordering select:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--focus-shadow) !important;
  outline: none !important;
}

.woocommerce-result-count {
  font-size: var(--fs-sm) !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  line-height: var(--control-h-sm) !important;
}

/* ─── Category sidebar ─── */
.widget_product_categories ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.widget_product_categories ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: var(--bw-hair) solid var(--border);
  background: var(--surface-card);
  color: var(--text-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium);
  transition: background var(--dur-fast), border-color var(--dur-fast);
  text-decoration: none !important;
}
.widget_product_categories ul li a:hover,
.widget_product_categories ul li.current-cat > a {
  background: var(--red-50) !important;
  border-color: var(--accent) !important;
  color: var(--text-brand) !important;
}
.widget_product_categories .count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--sand-100);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
}

/* Price filter widget */
.widget_price_filter .ui-slider {
  background: var(--sand-200) !important;
}
.widget_price_filter .ui-slider .ui-slider-range {
  background: var(--accent) !important;
}
.widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.widget_price_filter .price_slider_amount .button {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  height: var(--control-h-sm) !important;
  padding: 0 14px !important;
}

/* ─── Single product ─── */
.single-product div.product {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-8) !important;
  align-items: start !important;
  padding-bottom: var(--space-8) !important;
}

.single-product div.product .woocommerce-product-gallery {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--bw-hair) solid var(--border);
  box-shadow: var(--shadow-sm);
}

.single-product div.product .entry-summary {
  padding: 0 !important;
}

.single-product div.product .product_title {
  font-family: var(--font-display) !important;
  font-size: var(--fs-h1) !important;
  color: var(--text-strong) !important;
  margin-bottom: var(--space-4) !important;
}

.single-product div.product .woocommerce-product-rating {
  margin-bottom: var(--space-5) !important;
}

.single-product div.product .price {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--text-strong) !important;
  display: block;
  margin-bottom: var(--space-5) !important;
}
.single-product div.product .price del {
  color: var(--text-muted) !important;
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-lg) !important;
}

.single-product div.product .woocommerce-product-details__short-description {
  font-size: var(--fs-lg) !important;
  line-height: var(--lh-relaxed) !important;
  color: var(--text-body) !important;
  margin-bottom: var(--space-6) !important;
}

/* Quantity input */
.single-product div.product .quantity input[type=number] {
  height: var(--control-h-lg) !important;
  width: 90px !important;
  border: var(--bw-hair) solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  text-align: center !important;
  color: var(--text-strong) !important;
  background: var(--surface-card) !important;
}

/* Add to cart button */
.single-product div.product .single_add_to_cart_button,
.single-product div.product button.single_add_to_cart_button {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  height: var(--control-h-lg) !important;
  padding: 0 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background var(--dur-fast) !important;
  cursor: pointer !important;
}
.single-product div.product .single_add_to_cart_button:hover {
  background: var(--accent-hover) !important;
}

.woocommerce-variation-add-to-cart {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Product meta */
.product_meta {
  font-size: var(--fs-sm) !important;
  color: var(--text-muted) !important;
  border-top: var(--bw-hair) solid var(--divider) !important;
  padding-top: var(--space-4) !important;
  margin-top: var(--space-5) !important;
}
.product_meta a { color: var(--text-brand) !important; }

/* Tabs */
.woocommerce-tabs ul.tabs {
  border-bottom: var(--bw-hair) solid var(--border) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  gap: 4px !important;
}
.woocommerce-tabs ul.tabs li {
  border: none !important;
  background: none !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}
.woocommerce-tabs ul.tabs li a {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--text-muted) !important;
  padding: 12px 20px !important;
  border: none !important;
  background: none !important;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--text-brand) !important;
  font-weight: var(--fw-semibold) !important;
  border-bottom: var(--bw-bold) solid var(--accent) !important;
}

.woocommerce-tabs .panel {
  border: none !important;
  padding: var(--space-6) 0 !important;
}

/* Related products */
.related.products h2,
.upsells.products h2 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-h3) !important;
  margin-bottom: var(--space-6) !important;
}

/* Star ratings */
.star-rating {
  color: var(--warning) !important;
}

/* ─── Cart page ─── */
.woocommerce-cart table.shop_table {
  border: var(--bw-hair) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}
.woocommerce-cart table.shop_table th {
  background: var(--surface-sunken) !important;
  color: var(--text-muted) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  font-family: var(--font-body) !important;
  border-bottom: var(--bw-hair) solid var(--border) !important;
  padding: 12px var(--space-4) !important;
}
.woocommerce-cart table.shop_table td {
  border-bottom: var(--bw-hair) solid var(--divider) !important;
  padding: var(--space-4) !important;
  vertical-align: middle !important;
}
.woocommerce-cart table.shop_table .product-name a {
  color: var(--text-strong) !important;
  font-weight: var(--fw-semibold) !important;
}
.woocommerce-cart table.shop_table .amount {
  color: var(--text-strong) !important;
  font-weight: var(--fw-bold) !important;
}
.woocommerce-cart table.shop_table .button {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
}
.woocommerce-cart table.shop_table .button:hover {
  background: var(--accent-hover) !important;
}

/* Cart totals */
.cart_totals {
  border: var(--bw-hair) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-6) !important;
  background: var(--surface-card) !important;
}
.cart_totals h2 {
  font-size: var(--fs-h4) !important;
  margin-bottom: var(--space-5) !important;
}
.cart_totals table {
  width: 100%;
  border-collapse: collapse;
}
.cart_totals table th,
.cart_totals table td {
  padding: 10px 0 !important;
  border-top: var(--bw-hair) solid var(--divider) !important;
  font-size: var(--fs-body) !important;
}
.cart_totals .order-total .amount {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--text-strong) !important;
}
.cart_totals .checkout-button {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  width: 100% !important;
  height: var(--control-h-lg) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: var(--space-5) !important;
  transition: background var(--dur-fast) !important;
}
.cart_totals .checkout-button:hover {
  background: var(--accent-hover) !important;
}

/* ─── Checkout ─── */
.woocommerce-checkout .form-row label {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--text-body) !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.woocommerce-checkout .form-row input[type=text],
.woocommerce-checkout .form-row input[type=email],
.woocommerce-checkout .form-row input[type=tel],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100% !important;
  height: var(--control-h) !important;
  padding: 0 var(--space-4) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  color: var(--text-strong) !important;
  background: var(--surface-card) !important;
  border: var(--bw-hair) solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  outline: none !important;
  transition: border-color var(--dur-fast) !important;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--focus-shadow) !important;
}
.woocommerce-checkout .form-row textarea {
  height: 120px !important;
  padding: var(--space-3) var(--space-4) !important;
  resize: vertical;
}
.woocommerce-checkout #place_order {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  height: var(--control-h-lg) !important;
  padding: 0 28px !important;
  cursor: pointer !important;
  transition: background var(--dur-fast) !important;
}
.woocommerce-checkout #place_order:hover { background: var(--accent-hover) !important; }

/* ─── My Account ─── */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--surface-card) !important;
  border: var(--bw-hair) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  padding: var(--space-3) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 10px var(--space-4) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  transition: background var(--dur-fast) !important;
  text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--red-50) !important;
  color: var(--text-brand) !important;
}

/* ─── Returning / previous customer notice ─── */
.woocommerce-info {
  background: var(--surface-sunken) !important;
  border-top-color: var(--ink-700) !important;
  color: var(--text-body) !important;
}
.woocommerce-info a,
.woocommerce-info .showcoupon,
.woocommerce-info .showlogin {
  color: var(--ink-700) !important;
  font-weight: var(--fw-semibold) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.woocommerce-info a:hover,
.woocommerce-info .showcoupon:hover,
.woocommerce-info .showlogin:hover {
  color: var(--accent) !important;
}
/* Checkout login/coupon collapse panels */
.woocommerce-form-login,
.woocommerce-form-coupon {
  border: var(--bw-hair) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) !important;
  margin-bottom: var(--space-5) !important;
  background: var(--surface-card) !important;
}

/* ─── Custom mobile footer bar (.caj-mobile-bar) ─── */
/* Desktop: hidden. Mobile (≤767px): fixed sticky bar at bottom */

/* Always hide Storefront's own handheld bar — we replace it entirely */
.storefront-handheld-footer-bar { display: none !important; }

/* Hide our bar on desktop */
.caj-mobile-bar { display: none; }

@media (max-width: 767px) {
  .caj-mobile-bar {
    display: flex;
    direction: ltr; /* keep Menu-Search-Account-Cart left→right regardless of RTL */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 9999;
    background: var(--paper);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 16px rgba(21,17,15,.12);
  }

  .caj-mobile-bar__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 10px;
    text-decoration: none;
    position: relative;
    min-height: 56px;
    transition: color var(--dur-fast), background var(--dur-fast);
    padding: 0;
    gap: 3px;
  }
  .caj-mobile-bar__btn:active,
  .caj-mobile-bar__btn:hover { color: var(--text-brand); background: var(--surface-sunken); }
  .caj-mobile-bar__btn svg { width: 22px; height: 22px; }

  .caj-mobile-bar__count {
    position: absolute;
    top: 8px;
    left: calc(50% + 2px);
    min-width: 18px;
    height: 18px;
    background: var(--accent);
    color: var(--paper);
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
  }

  /* Push footer above the bar */
  .site-footer { margin-bottom: 56px !important; }

  /* Mobile nav panel — slides down from header when ☰ is tapped */
  html.caj-nav-open #site-navigation {
    display: block !important;
    position: fixed !important;
    top: 76px !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--paper) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
    z-index: 9998 !important;
    padding: var(--space-3) var(--space-5) var(--space-5) !important;
    max-height: calc(100vh - 76px - 56px);
    overflow-y: auto;
  }
  html.caj-nav-open #site-navigation ul {
    flex-direction: column !important;
    gap: 0 !important;
  }
  html.caj-nav-open #site-navigation ul li a {
    height: 50px !important;
    border-bottom: 1px solid var(--divider) !important;
    padding: 0 4px !important;
    font-size: 16px !important;
  }
  html.caj-nav-open #site-navigation ul li:last-child a { border-bottom: none !important; }
}