/* Hand fixes on top of the CSS captured from the live site for the shop, cart and checkout (assets/css/woo-live/*.css).
   Kadence wraps these pages in its own hero + boxed content areas; the old theme used a plain 1170px container with the
   title in a 680px column. Reproduce that frame so the captured rules land on the same layout. */

/* Title band: the title sits at the left of a centred 680px column, 70px under the header. */
body.jth-woo-live .entry-hero-container-inner { padding: 60px 0 0 !important; min-height: 0 !important; background: none !important; }
body.jth-woo-live .entry-hero .hero-section-overlay { display: none; }
body.jth-woo-live .entry-hero .hero-container { width: 100%; max-width: 1170px; height: auto; min-height: 0; padding: 0 15px; margin: 0 auto; }
body.jth-woo-live .entry-hero .entry-header { display: block; width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; text-align: left; }
body.jth-woo-live .entry-hero h1.entry-title {
  box-sizing: border-box; width: 680px; max-width: 100%; margin: 10px auto; padding: 0; text-align: left;
  font-size: 48px; line-height: 60px; font-weight: 400; letter-spacing: 1px; text-transform: none; color: var(--jth-ink);
}

/* Content: a plain 1170px container (1140px of content), no card, no shadow. */
body.jth-woo-live #primary.content-area { margin: 0; padding: 0; }
body.jth-woo-live .content-container.site-container { width: 100%; max-width: 1170px; padding: 0 15px; margin: 0 auto; }
body.jth-woo-live #main.site-main, body.jth-woo-live .content-wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
body.jth-woo-live article.entry { margin-left: 0 !important; margin-right: 0 !important; }
body.jth-woo-live article.entry, body.jth-woo-live .entry-content-wrap { padding: 0 !important; box-shadow: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
body.jth-woo-live .entry-content { margin: 0; }

/* Kadence adds a "Cart Summary" heading and the product-vendors plugin a "Sold by" line; live has neither. */
body.jth-woo-live .cart-summary > h2, body.jth-woo-live .wcpv-sold-by-cart, body.jth-woo-live .wcpv-sold-by-checkout { display: none; }

/* Kadence pads the cart form; live's table runs the full width of the container. */
body.jth-woo-live .kadence-woo-cart-form-wrap, body.jth-woo-live form.woocommerce-cart-form { padding: 0 !important; margin: 0 !important; }

/* Space under the content before the footer (measured on live: cart panel ends 151px above the footer). */
body.jth-woo-live .content-container.site-container { padding-bottom: 96px; }

/* Checkout drop-downs. Live turns <select>s into "selectize" boxes with the old theme's JavaScript; WooCommerce's own select2 does the
   job here, so give it the same look (measured on live: 54px tall, #EDE6E0, 12px/15px padding, 16.5px type, small grey arrow). */
body.jth-woo-live .select2-container { width: 100% !important; }
body.jth-woo-live .select2-container--default .select2-selection--single {
  box-sizing: border-box; height: 54px; padding: 12px 15px; background: #EDE6E0; border: 0; border-radius: 0; box-shadow: none; display: flex; align-items: center;
}
body.jth-woo-live .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; font-size: 16.5px; line-height: 28px; font-weight: 400; letter-spacing: 1px; color: var(--jth-ink);
}
body.jth-woo-live .select2-container--default .select2-selection--single .select2-selection__arrow { height: 54px; right: 15px; top: 0; }
body.jth-woo-live .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #808080 transparent transparent; border-width: 5px 5px 0; margin-left: -5px; margin-top: -3px; }
body.jth-woo-live .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #808080; border-width: 0 5px 5px; }
body.jth-woo-live .select2-dropdown { margin-top: 2px; background: #fff; border: 1px solid #ccc; border-radius: 0; box-shadow: 0 6px 12px rgba(0, 0, 0, .176); font-size: 16.5px; line-height: 28px; letter-spacing: 1px; color: var(--jth-ink); }
body.jth-woo-live .select2-results__option { padding: 5px 15px; }
body.jth-woo-live .select2-container--default .select2-results__option--highlighted[aria-selected], body.jth-woo-live .select2-container--default .select2-results__option--highlighted[data-selected] { background: #f5fafd; color: #495c68; }
body.jth-woo-live .select2-search--dropdown { padding: 8px; }
body.jth-woo-live .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #ccc; border-radius: 0; padding: 6px 10px; }

/* Textareas carry the same 1px dark-brown outline as the text fields. */
body.jth-woo-live textarea { border: 1px solid rgba(32, 7, 7, .8); }

/* Container widths follow the old builder: 1170 / 970 / 750, full width with 15px gutters on phones. */
@media (min-width: 992px) and (max-width: 1199px) {
  body.jth-woo-live .entry-hero .hero-container, body.jth-woo-live .content-container.site-container { max-width: 970px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  body.jth-woo-live .entry-hero .hero-container, body.jth-woo-live .content-container.site-container { max-width: 750px; }
}
@media (max-width: 767px) {
  body.jth-woo-live .entry-hero .hero-container, body.jth-woo-live .content-container.site-container { max-width: none; width: 100%; padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box; }
  body.jth-woo-live .entry-hero-container-inner { padding-top: 30px !important; }
  body.jth-woo-live .entry-hero h1.entry-title { width: 100%; margin: 10px 0 43px; font-size: 29px; line-height: 36px; }
  body.jth-woo-live .content-container.site-container { padding-bottom: 60px; }
}

/* Buttons are flat on live (Kadence adds a soft drop shadow). */
body.jth-woo-live .button, body.jth-woo-live button.button, body.jth-woo-live a.button, body.jth-woo-live .wc-backward { box-shadow: none !important; }

/* Phone checkout. Live's own phone layout squeezes the billing form (195px) and the order summary (105px) side by side; stack them
   in one full-width column instead (billing details, then "Your order", then payment). */
@media (max-width: 767px) {
  body.jth-woo-live.woocommerce-checkout form.checkout #customer_details,
  body.jth-woo-live.woocommerce-checkout form.checkout #order_review,
  body.jth-woo-live.woocommerce-checkout form.checkout #order_review_heading {
    float: none !important; clear: both; width: 100% !important; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; box-sizing: border-box;
  }
  body.jth-woo-live.woocommerce-checkout form.checkout #customer_details .col-1,
  body.jth-woo-live.woocommerce-checkout form.checkout #customer_details .col-2 { float: none !important; width: 100% !important; max-width: none; padding: 0; }
  body.jth-woo-live.woocommerce-checkout form.checkout #order_review_heading { margin-top: 20px; }
  body.jth-woo-live.woocommerce-checkout form.checkout { padding-left: 0; padding-right: 0; }
}