/**
 * Cart drawer content (WooCommerce's own cart/mini-cart.php markup,
 * restyled) + the shared shipping-progress/trust-badges partials, which
 * appear both in the drawer and on the full cart page - plus cart-page-
 * specific restyling (coupon form, cross-sells) layered onto Blocksy's
 * own cart.php table markup without overriding the template itself.
 */

/* ---------- Neutralize Blocksy's own dropdown cart preview ----------
   inc/hooks/cart-hooks.php sets has_cart_dropdown=no so the header cart
   icon stays a plain link for cart-drawer.js to intercept, but that
   setting only controls whether Blocksy's own hover/click JS *populates*
   its dropdown (.ct-cart-content) - the empty element and its hover-
   triggered positioning/animation CSS still ship regardless, since
   they're not gated behind the same theme_mod. Left alone, it shows an
   empty, backdrop-less panel on hover once the cart is non-empty
   (.ct-cart-content[data-count="0"] is the only "hidden" state Blocksy
   itself accounts for), and being position:absolute with its own
   z-index/stacking context, it can sit visually behind but still
   interactively above this theme's own drawer, swallowing clicks meant
   for the drawer's buttons underneath. Forcing it off entirely (both
   display and pointer-events) removes the conflict outright rather than
   trying to out-stack an element this theme doesn't control the timing
   of. */
.ct-header-cart .ct-cart-content {
  display: none !important;
  pointer-events: none !important;
}

/* ---------- Shipping progress (drawer + full page) ---------- */

.hs-shipping-progress {
  margin-block-end: var(--hs-space-20);
}

.hs-shipping-progress__message {
  display: flex;
  align-items: center;
  gap: var(--hs-space-8);
  margin: 0 0 var(--hs-space-8);
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-color-text);
}

.hs-shipping-progress__message strong,
.hs-shipping-progress__message .woocommerce-Price-amount {
  color: var(--hs-color-primary-600);
}

.hs-shipping-progress__message--achieved {
  color: var(--hs-color-success-600);
}
.hs-shipping-progress__message--achieved svg {
  color: var(--hs-color-success-500);
  flex-shrink: 0;
}

.hs-shipping-progress__bar {
  height: .5rem;
  border-radius: var(--hs-radius-full);
  background: var(--hs-color-surface-sunken);
  overflow: hidden;
}

.hs-shipping-progress__fill {
  height: 100%;
  background: var(--hs-color-primary-500);
  border-radius: var(--hs-radius-full);
  transition: width var(--hs-transition-normal) var(--hs-ease);
}

/* ---------- Trust badges (drawer + full page) ---------- */

.hs-trust-badges {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-12);
  list-style: none;
  margin: var(--hs-space-24) 0 0;
  padding: var(--hs-space-20) 0 0;
  border-block-start: 1px solid var(--hs-color-border);
}

.hs-trust-badges__item {
  display: flex;
  align-items: center;
  gap: var(--hs-space-12);
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-color-text-muted);
}

.hs-trust-badges__item svg {
  flex-shrink: 0;
  color: var(--hs-color-primary-500);
}

.hs-trust-badges__item a {
  color: inherit;
  text-decoration: underline;
}
.hs-trust-badges__item a:hover {
  color: var(--hs-color-primary-600);
}

/* ---------- Cart drawer content (WooCommerce's mini-cart markup) ---------- */

.hs-cart-drawer__body {
  display: flex;
  flex-direction: column;
  transition: opacity var(--hs-transition-fast) var(--hs-ease);
}

.hs-cart-drawer__body.is-loading {
  opacity: .5;
  pointer-events: none;
}

.woocommerce-mini-cart {
  list-style: none;
  margin: 0 0 var(--hs-space-20);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-16);
}

.woocommerce-mini-cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--hs-space-12);
  padding-block-end: var(--hs-space-16);
  border-block-end: 1px solid var(--hs-color-border);
}

.woocommerce-mini-cart-item img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--hs-radius-md);
}

.woocommerce-mini-cart-item .product-data {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  padding-inline-end: var(--hs-space-24);
}

.woocommerce-mini-cart-item .product-title {
  font-size: var(--hs-font-size-body-sm);
  font-weight: var(--hs-font-weight-medium);
  color: var(--hs-color-text);
}

.woocommerce-mini-cart-item .quantity {
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-text-muted);
}

.woocommerce-mini-cart-item .remove_from_cart_button {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--hs-radius-full);
  color: var(--hs-color-text-muted);
}
.woocommerce-mini-cart-item .remove_from_cart_button:hover {
  background: color-mix(in srgb, var(--hs-color-danger-500) 15%, var(--hs-color-surface));
  color: var(--hs-color-danger-500);
}
.woocommerce-mini-cart-item .remove_from_cart_button .ct-icon {
  width: .625rem;
  height: .625rem;
  fill: currentColor;
}

.woocommerce-mini-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--hs-space-16);
  padding-block-start: var(--hs-space-16);
  border-block-start: 1px solid var(--hs-color-border);
  font-size: var(--hs-font-size-body);
  font-weight: var(--hs-font-weight-semibold);
}

.woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-8);
  margin: 0;
}

.woocommerce-mini-cart__buttons .button {
  display: block;
  text-align: center;
  padding: var(--hs-space-12) var(--hs-space-16);
  border-radius: var(--hs-radius-md);
  font-size: var(--hs-font-size-body-sm);
  font-weight: var(--hs-font-weight-medium);
}

.woocommerce-mini-cart__buttons .wc-forward:not(.checkout) {
  background: var(--hs-color-surface-sunken);
  color: var(--hs-color-text);
}
.woocommerce-mini-cart__buttons .wc-forward:not(.checkout):hover {
  background: color-mix(in srgb, var(--hs-color-text) 12%, var(--hs-color-surface-sunken));
}

.woocommerce-mini-cart__buttons .checkout {
  background: var(--hs-color-primary-fill);
  color: #fff;
}
.woocommerce-mini-cart__buttons .checkout:hover {
  background: var(--hs-color-primary-fill-hover);
}

.hs-cart-drawer__body .cart-empty {
  color: var(--hs-color-text-muted);
  font-size: var(--hs-font-size-body-sm);
}

/* ---------- Full cart page (WooCommerce Cart block) ----------
   This install's Cart page uses the block-based Cart
   (<!-- wp:woocommerce/cart -->, rendered client-side from the Store
   API), not the classic cart.php template - none of the classic hooks
   fire here, and its markup/class names are WooCommerce's own
   (wc-block-cart-*), not this theme's. Only restyled via CSS; the
   shipping-progress/trust-badges partials are added as real blocks in
   the page content itself (see hs_maybe_extend_cart_page_content() in
   inc/hooks/cart-hooks.php), and the shortcodes rendering them below
   reuse the exact same .hs-shipping-progress/.hs-trust-badges styles
   already defined above for the drawer. */

.wp-block-woocommerce-cart {
  margin-block: var(--hs-space-24) var(--hs-space-64);
}

.wc-block-cart-items {
  width: 100%;
}

.wc-block-cart-items__header th {
  padding-block-end: var(--hs-space-16);
  border-block-end: 1px solid var(--hs-color-border);
  font-size: var(--hs-font-size-body-sm);
  font-weight: var(--hs-font-weight-semibold);
  text-align: start;
  color: var(--hs-color-text-muted);
}

.wc-block-cart-items__row {
  border-block-end: 1px solid var(--hs-color-border);
}

.wc-block-cart-item__image img {
  border-radius: var(--hs-radius-md);
}

.wc-block-components-product-name {
  font-size: var(--hs-font-size-body-sm);
  font-weight: var(--hs-font-weight-medium);
  color: var(--hs-color-text);
}

.wc-block-components-product-metadata__description {
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-text-muted);
}

.wc-block-components-product-price ins {
  color: var(--hs-color-primary-600);
  font-weight: var(--hs-font-weight-semibold);
  text-decoration: none;
}

.wc-block-components-sale-badge {
  background: var(--hs-color-success-50);
  color: var(--hs-color-success-700);
  border-radius: var(--hs-radius-sm);
}

.wc-block-components-quantity-selector {
  border-color: var(--hs-color-border-strong);
  border-radius: var(--hs-radius-md);
  color: var(--hs-color-text);
}

.wc-block-components-quantity-selector__input {
  color: var(--hs-color-text);
  background: transparent;
}

.wc-block-components-quantity-selector__button {
  color: var(--hs-color-text-muted);
}
.wc-block-components-quantity-selector__button:hover {
  background: var(--hs-color-surface-sunken);
  color: var(--hs-color-text);
}

.wc-block-cart-item__remove-link {
  color: var(--hs-color-text-muted);
}
.wc-block-cart-item__remove-link:hover {
  color: var(--hs-color-danger-600);
}

.wc-block-cart__totals-title {
  font-size: var(--hs-font-size-h6);
  color: var(--hs-color-text);
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
  color: var(--hs-color-primary-600);
  font-size: var(--hs-font-size-body-sm);
}

/* Coupon input/button: only the collapsed toggle link above was styled
   here before - the expanded form (input + Apply button) was left to
   Blocksy/WC-Blocks defaults entirely, unlike checkout.css which already
   styles the identical wc-block-components-totals-coupon component in
   full (see checkout.css's own coupon rules) - mirrored here so Cart and
   Checkout look consistent instead of Cart's coupon field reading as an
   unstyled, "weaker" control next to everything else on the page. */
.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
  color: var(--hs-color-text);
  background: var(--hs-color-surface-sunken);
  border-color: var(--hs-color-border-strong);
}
.wc-block-components-totals-coupon__form .wc-block-components-text-input label {
  color: var(--hs-color-text-muted);
}
.wc-block-components-totals-coupon__button {
  background: var(--hs-color-surface-sunken) !important;
  border: 1px solid var(--hs-color-border-strong) !important;
  color: var(--hs-color-text) !important;
}
.wc-block-components-totals-coupon__button:hover:not(:disabled) {
  background: var(--hs-color-primary-fill) !important;
  border-color: var(--hs-color-primary-fill) !important;
  color: #fff !important;
}

.wc-block-components-totals-item__label {
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-color-text-muted);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: var(--hs-font-size-body);
  font-weight: var(--hs-font-weight-semibold);
  color: var(--hs-color-text);
}

.wc-block-cart__submit-button {
  background: var(--hs-color-primary-fill) !important;
  border-radius: var(--hs-radius-md) !important;
  font-weight: var(--hs-font-weight-semibold) !important;
}
.wc-block-cart__submit-button:hover {
  background: var(--hs-color-primary-fill-hover) !important;
}

/* Cross-sells ("قد يعجبك أيضاً…") - a Product Collection block
   already included in the page's own content by WooCommerce itself. */
.wp-block-woocommerce-product-collection {
  margin-block-start: var(--hs-space-48);
  padding-block-start: var(--hs-space-32);
  border-block-start: 1px solid var(--hs-color-border);
}

.wp-block-woocommerce-product-collection .wp-block-heading {
  font-size: var(--hs-font-size-h5) !important;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-button .wp-block-button__link {
  background: var(--hs-color-primary-fill);
  border-radius: var(--hs-radius-md);
}
.wp-block-woocommerce-product-collection .wc-block-components-product-button .wp-block-button__link:hover {
  background: var(--hs-color-primary-fill-hover);
}

/* Shortcode-block wrapped shipping-progress/trust-badges, injected
   before/after the Cart block in the page content - constrained to the
   same max width as the cart itself instead of stretching full-bleed. */
.wp-block-shortcode:has(.hs-shipping-progress),
.wp-block-shortcode:has(.hs-trust-badges) {
  max-width: var(--hs-container-max-width);
  margin-inline: auto;
  padding-inline: var(--hs-container-padding-inline);
}
.wp-block-shortcode:has(.hs-shipping-progress) {
  margin-block-start: var(--hs-space-32);
}
.wp-block-shortcode:has(.hs-trust-badges) .hs-trust-badges {
  max-width: 28rem;
  border-block-start: 0;
  padding-block-start: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--hs-space-24);
  margin-block: var(--hs-space-32) var(--hs-space-48);
}

@media (max-width: 48rem) {
  .wc-block-cart-items__header-image,
  .wc-block-cart-items__header-product {
    display: none;
  }
}

/* ==================================================
   CART SHIPPING + PAYMENT INFO CARDS
   (inc/template-parts/cart/shipping-payment-info.php, rendered via the
   [hs_cart_shipping_payment_info] shortcode block right after the Cart
   block - see hs_maybe_extend_cart_page_content() in cart-hooks.php)
   ================================================== */

body.woocommerce-cart {
  /* Same warm dark surface family as checkout.css's --hs-checkout-*
     tokens, scoped here instead of shared, so a cart-specific value
     never has to worry about checkout.css's own cascade/load order -
     the two pages don't load each other's stylesheet. */
  --hs-cart-surface: #23201f;
  --hs-cart-border: rgba(255, 255, 255, .1);
  --hs-cart-text: #f5f5f5;
  --hs-cart-text-secondary: #c4c4c4;
  --hs-cart-accent: var(--hs-color-primary-500);
}

/* ---------- Frequently bought together (Cart block insertion) ---------- */

.woocommerce-cart .hs-fbt {
  margin-block: var(--hs-space-32) var(--hs-space-48);
}

.woocommerce-cart .hs-fbt .hs-container {
  max-width: var(--hs-container-max-width);
}

.hs-fbt--cart .hs-fbt__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--hs-space-24);
  padding: var(--hs-space-24);
  background: var(--hs-cart-surface);
  border: 1px solid var(--hs-cart-border);
  border-radius: .625rem;
}

.hs-fbt--cart .hs-fbt__title {
  margin: 0 0 var(--hs-space-16);
  font-size: var(--hs-font-size-h5);
  color: var(--hs-cart-text);
}

.hs-fbt--cart .hs-fbt__items {
  display: flex;
  align-items: stretch;
  gap: var(--hs-space-12);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.hs-fbt--cart .hs-fbt__item {
  min-width: 0;
  flex: 1 1 0;
}

.hs-fbt--cart .hs-fbt__item label {
  display: grid;
  grid-template-columns: auto 4.25rem minmax(0, 1fr);
  align-items: center;
  gap: var(--hs-space-12);
  height: 100%;
  padding: var(--hs-space-12);
  border: 1px solid var(--hs-cart-border);
  border-radius: .5rem;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: border-color 200ms var(--hs-ease), background-color 200ms var(--hs-ease);
}

.hs-fbt--cart .hs-fbt__item label:has(input:checked) {
  border-color: var(--hs-cart-accent);
  background: color-mix(in srgb, var(--hs-cart-accent) 9%, var(--hs-cart-surface));
}

.hs-fbt--cart .hs-fbt__item input {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--hs-cart-accent);
}

.hs-fbt--cart .hs-fbt__item-media {
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  overflow: hidden;
  border-radius: .5rem;
  background: rgba(255, 255, 255, .06);
}

.hs-fbt--cart .hs-fbt__item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-fbt--cart .hs-fbt__item-info {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  min-width: 0;
}

.hs-fbt--cart .hs-fbt__item-title {
  color: var(--hs-cart-text);
  font-size: var(--hs-font-size-body-sm);
  font-weight: var(--hs-font-weight-medium);
  line-height: 1.45;
}

.hs-fbt--cart .hs-fbt__item-price {
  color: var(--hs-cart-accent);
  font-size: var(--hs-font-size-caption);
  font-weight: var(--hs-font-weight-semibold);
}

.hs-fbt--cart .hs-fbt__plus {
  align-self: center;
  color: var(--hs-cart-text-secondary);
  font-size: var(--hs-font-size-h5);
  line-height: 1;
}

.hs-fbt--cart .hs-fbt__summary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--hs-space-12);
  min-width: 13rem;
}

.hs-fbt--cart .hs-fbt__total {
  margin: 0;
  color: var(--hs-cart-text-secondary);
  font-size: var(--hs-font-size-body-sm);
}

.hs-fbt--cart .hs-fbt__total strong {
  display: block;
  margin-block-start: var(--hs-space-4);
  color: var(--hs-cart-text);
  font-size: var(--hs-font-size-body);
}

.hs-fbt--cart [data-hs-fbt-add-all] {
  justify-content: center;
  white-space: normal;
}

.wp-block-shortcode:has(.hs-cart-info-grid) {
  max-width: var(--hs-container-max-width);
  margin-inline: auto;
  margin-block: var(--hs-space-32) 0;
  padding-inline: var(--hs-container-padding-inline);
}

.hs-cart-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hs-space-16);
}

.hs-cart-info-card {
  padding: var(--hs-space-20);
  background: var(--hs-cart-surface);
  border: 1px solid var(--hs-cart-border);
  border-radius: .625rem;
}

.hs-cart-info-card__title {
  margin: 0 0 var(--hs-space-12);
  font-size: 1.0625rem;
  font-weight: var(--hs-font-weight-bold);
  color: var(--hs-cart-text);
}

.hs-cart-info-card__message {
  margin: 0;
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-cart-text-secondary);
}

.hs-cart-info-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-cart-info-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-12);
  padding: var(--hs-space-12);
  border: 1px solid var(--hs-cart-border);
  border-radius: .5rem;
  transition: border-color 200ms var(--hs-ease), background-color 200ms var(--hs-ease);
}

.hs-cart-info-card__row.is-selected {
  border-color: var(--hs-cart-accent);
  background: color-mix(in srgb, var(--hs-cart-accent) 8%, var(--hs-cart-surface));
}

.hs-cart-info-card__label {
  font-size: var(--hs-font-size-body-sm);
  font-weight: var(--hs-font-weight-medium);
  color: var(--hs-cart-text);
}

.hs-cart-info-card__value {
  font-size: var(--hs-font-size-body-sm);
  font-weight: var(--hs-font-weight-semibold);
  color: var(--hs-cart-text);
}
.hs-cart-info-card__value .woocommerce-Price-amount {
  color: inherit;
}

.hs-cart-info-card__check {
  flex-shrink: 0;
  color: var(--hs-cart-accent);
}

@media (max-width: 40rem) {
  .hs-fbt--cart .hs-fbt__row {
    grid-template-columns: 1fr;
    padding: var(--hs-space-16);
  }

  .hs-fbt--cart .hs-fbt__items {
    flex-direction: column;
  }

  .hs-fbt--cart .hs-fbt__plus {
    display: none;
  }

  .hs-fbt--cart .hs-fbt__summary {
    min-width: 0;
  }

  .hs-cart-info-grid {
    grid-template-columns: 1fr;
  }
}