/*
 * 898 Cart / Checkout scoped styles.
 *
 * Loaded only on Cart and Checkout pages. Keeps PayPal official buttons inside
 * normal WooCommerce containers and styles the B2B shipping quote notice.
 */


/* --------------------------------------------------------------------------
   Cart / Checkout page shell and WooCommerce Blocks baseline
   -------------------------------------------------------------------------- */
body.woocommerce-cart main,
body.woocommerce-checkout main {
  width: 100%;
}

body.woocommerce-cart .site-main > .ct-container,
body.woocommerce-checkout .site-main > .ct-container,
body.woocommerce-cart .site-main > .ct-container-full,
body.woocommerce-checkout .site-main > .ct-container-full,
body.woocommerce-cart .site-main > .ct-container-narrow,
body.woocommerce-checkout .site-main > .ct-container-narrow,
body.woocommerce-cart article > .entry-content,
body.woocommerce-checkout article > .entry-content {
  width: min(1320px, calc(100vw - 48px));
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.woocommerce-cart .entry-content > .wp-block-woocommerce-cart,
body.woocommerce-checkout .entry-content > .wp-block-woocommerce-checkout {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  body.woocommerce-cart .site-main > .ct-container,
  body.woocommerce-checkout .site-main > .ct-container,
  body.woocommerce-cart .site-main > .ct-container-full,
  body.woocommerce-checkout .site-main > .ct-container-full,
  body.woocommerce-cart .site-main > .ct-container-narrow,
  body.woocommerce-checkout .site-main > .ct-container-narrow,
  body.woocommerce-cart article > .entry-content,
  body.woocommerce-checkout article > .entry-content {
    width: min(100%, calc(100vw - 28px));
    max-width: none;
  }
}

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
  background:
    radial-gradient(circle at 8% 10%, rgba(176, 141, 87, 0.07), transparent 34%),
    linear-gradient(180deg, #fcfbf8 0%, var(--s898-color-bg) 100%) !important;
}

body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
  color: var(--s898-color-text);
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
  max-width: 1320px;
  margin: clamp(18px, 2.6vw, 34px) auto clamp(36px, 5vw, 68px);
  color: var(--s898-color-text);
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 560px);
  min-height: 0;
  margin: 0 auto clamp(14px, 1.5vw, 20px);
  padding: 0.95rem 1.3rem;
  border: 1px solid rgba(176, 141, 87, 0.2);
  border-radius: 20px;
  background: rgba(255, 253, 249, 0.76);
  box-shadow: 0 10px 24px rgba(97, 73, 42, 0.045);
  color: var(--s898-color-text);
  font-family: var(--s898-font-heading);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  font-weight: 760;
  line-height: 1.25;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::after {
  content: none !important;
  display: none !important;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
  width: auto;
  margin: 0.45rem auto clamp(1.25rem, 2.2vw, 2rem);
  border: 0 !important;
  color: rgba(176, 141, 87, 0.34);
  opacity: 1;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  color: var(--s898-color-text);
  font-family: var(--s898-font-heading);
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: 0;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid {
  margin: 0 auto;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(191, 151, 82, 0.2);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.92) 0%, rgba(251, 246, 238, 0.88) 100%);
  box-shadow: 0 12px 28px rgba(97, 73, 42, 0.055);
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.35vw, 20px);
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
  display: flex;
  flex-direction: column;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(10px, 1vw, 14px) !important;
  border: 1px solid rgba(191, 151, 82, 0.18);
  border-radius: 20px;
  background: rgba(255, 253, 249, 0.84);
  box-shadow: none;
  text-align: left;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
  aspect-ratio: 1 / 1;
  margin: 0 0 0.78rem;
  border: 1px solid rgba(191, 151, 82, 0.14);
  border-radius: 16px;
  background: #fffaf2;
  overflow: hidden;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  display: -webkit-box;
  min-height: 2.48em;
  margin: 0;
  overflow: hidden;
  color: var(--s898-color-text);
  font-family: var(--s898-font-heading);
  font-size: clamp(0.92rem, 0.95vw, 1rem);
  font-weight: 720;
  line-height: 1.24;
  text-align: left;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  margin: 0.62rem 0 0;
  color: rgba(31, 30, 28, 0.76);
  font-family: var(--s898-font-heading);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
  display: none !important;
}

@media (max-width: 768px) {
  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
    margin-top: 14px;
  }

  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid {
    padding: 12px;
    border-radius: 22px;
  }

  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
    padding: 9px !important;
    border-radius: 16px;
  }

  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
    margin-bottom: 0.58rem;
    border-radius: 13px;
  }
}

/* Cart / Checkout WooCommerce Blocks buttons. */
body.woocommerce-cart .wc-block-components-button,
body.woocommerce-checkout .wc-block-components-button,
body.woocommerce-cart button.wc-block-components-button,
body.woocommerce-checkout button.wc-block-components-button,
body.woocommerce-cart .wp-element-button,
body.woocommerce-checkout .wp-element-button {
  border-radius: 999px;
}

body.woocommerce-cart .wc-block-components-button:not(.is-link),
body.woocommerce-checkout .wc-block-components-button:not(.is-link) {
  background: var(--s898-color-accent) !important;
  border-color: var(--s898-color-accent) !important;
  color: var(--s898-color-accent-contrast) !important;
}

body.woocommerce-cart .wc-block-components-button:not(.is-link):hover,
body.woocommerce-checkout .wc-block-components-button:not(.is-link):hover {
  filter: brightness(0.96);
}

/* --------------------------------------------------------------------------
   Official PayPal button containment for Cart / Checkout

   Keep the official WooCommerce PayPal Payments buttons visible for buyer trust,
   but constrain their outer wrappers so they stay inside the cart and checkout
   layouts. Do not restyle the PayPal iframe/button itself.
   -------------------------------------------------------------------------- */
body.woocommerce-cart :is(
  .wc-block-components-express-payment,
  .wc-block-components-express-payment__content,
  .wc-block-components-express-payment__event-buttons,
  #ppc-button-cart,
  .ppc-button-wrapper,
  .paypal-button-container,
  .paypal-buttons
),
body.woocommerce-checkout :is(
  .wc-block-components-express-payment,
  .wc-block-components-express-payment__content,
  .wc-block-components-express-payment__event-buttons,
  #ppc-button-ppcp-gateway,
  .ppc-button-wrapper,
  .paypal-button-container,
  .paypal-buttons
) {
  display: block !important;
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

body.woocommerce-cart :is(
  .wc-block-components-express-payment iframe,
  #ppc-button-cart iframe,
  .ppc-button-wrapper iframe,
  .paypal-button-container iframe,
  .paypal-buttons iframe
),
body.woocommerce-checkout :is(
  .wc-block-components-express-payment iframe,
  #ppc-button-ppcp-gateway iframe,
  .ppc-button-wrapper iframe,
  .paypal-button-container iframe,
  .paypal-buttons iframe
) {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}

body.woocommerce-cart :is(
  .wc-block-components-express-payment,
  #ppc-button-cart,
  .cart_totals .ppc-button-wrapper,
  .cart_totals .paypal-button-container,
  .cart-collaterals .ppc-button-wrapper,
  .cart-collaterals .paypal-button-container
) {
  margin: 18px 0 12px !important;
}

body.woocommerce-cart :is(
  .wc-block-components-express-payment__event-buttons,
  .wc-block-components-express-payment__content
) {
  gap: 10px !important;
}

body.woocommerce-checkout :is(
  .wc-block-components-express-payment,
  #ppc-button-ppcp-gateway,
  #payment .ppc-button-wrapper,
  #payment .paypal-button-container
) {
  margin: 16px 0 14px !important;
}

/* --------------------------------------------------------------------------
   Shipping quote required notice

   Replaces generic WooCommerce no-shipping-rate copy with a B2B quote path.
   The WhatsApp CTA is informational and must not bypass WooCommerce checkout
   validation when no shipping method is available.
   -------------------------------------------------------------------------- */
.s898-shipping-quote-required,
.wc-block-components-notice-banner.s898-shipping-quote-required--enhanced {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 20px !important;
  border: 1px solid rgba(194, 132, 24, 0.38) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 248, 237, 0.94) 100%) !important;
  box-shadow: 0 10px 24px rgba(128, 88, 38, 0.08) !important;
  color: #1f1a17 !important;
}

.s898-shipping-quote-required__body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.s898-shipping-quote-required__title {
  display: block;
  color: #1f1a17;
  font-size: clamp(1rem, 1vw, 1.08rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.s898-shipping-quote-required__text,
.s898-shipping-quote-required__helper {
  color: #625850;
  font-size: 0.94rem;
  line-height: 1.45;
}

.s898-shipping-quote-required__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid rgba(146, 98, 29, 0.32);
  border-radius: 999px;
  background: linear-gradient(180deg, #2c7b54 0%, #1f6a45 100%);
  color: #fff !important;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(31, 106, 69, 0.17);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.s898-shipping-quote-required__button:hover,
.s898-shipping-quote-required__button:focus-visible {
  color: #fff !important;
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 13px 24px rgba(31, 106, 69, 0.21);
}

.s898-shipping-quote-required__helper {
  grid-column: 1 / -1;
  display: block;
  padding-top: 2px;
  color: #876025;
  font-size: 0.88rem;
  font-weight: 650;
}

.wc-block-components-notice-banner.s898-shipping-quote-required--enhanced > svg,
.wc-block-components-notice-banner.s898-shipping-quote-required--enhanced .wc-block-components-notice-banner__content {
  display: none !important;
}

.wc-block-components-notice-banner.s898-shipping-quote-required--enhanced .s898-shipping-quote-required {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .s898-shipping-quote-required,
  .wc-block-components-notice-banner.s898-shipping-quote-required--enhanced {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .s898-shipping-quote-required__button {
    width: 100%;
    white-space: normal;
  }

  .s898-shipping-quote-required__helper {
    font-size: 0.84rem;
  }
}