/* =========================================================
   bowrex — Cart / Checkout FIX PACK (FINAL)
   File: pb-panels.css
   Purpose:
   - Stop page-level horizontal overflow
   - Fix “half screen / shifted” mobile cart/checkout
   - Make cart table scroll INSIDE (not whole page)
   - Dark-themed checkout inputs (not pure white)
   ========================================================= */

/* -----------------------------------------
   0) Global safety for Woo pages only
   (Do NOT set overflow-x: visible)
   ----------------------------------------- */
body.woocommerce-cart,
body.woocommerce-checkout{
  overflow-x: hidden !important;
}

body.woocommerce-cart #page,
body.woocommerce-cart .site,
body.woocommerce-cart .site-content,
body.woocommerce-cart .site-main,
body.woocommerce-cart .content-area,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .woocommerce-page,

body.woocommerce-checkout #page,
body.woocommerce-checkout .site,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout .woocommerce-page{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  /* ✅ 핵심: 페이지는 가로로 밀리지 않게 */
  overflow-x: hidden !important;
}

/* -----------------------------------------
   1) Container width + padding
   ----------------------------------------- */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce{
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 10px 14px 40px !important;
}

@media (max-width: 860px){
  body.woocommerce-cart .woocommerce,
  body.woocommerce-checkout .woocommerce{
    max-width: 100% !important;
    padding: 10px 12px 36px !important;
  }
}

/* -----------------------------------------
   2) CART — layout normalize
   ----------------------------------------- */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart_totals{
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

/* ✅ Cart table: page는 안 밀리고, 테이블만 내부 스크롤 */
body.woocommerce-cart .woocommerce-cart-form{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.woocommerce-cart table.shop_table{
  width: 100% !important;
  border-collapse: collapse;
}

/* 모바일에서는 테이블이 좁아지면 깨지니 최소폭 주고 스크롤 */
@media (max-width: 860px){
  body.woocommerce-cart table.shop_table{
    min-width: 560px;
  }
}

/* 셀 텍스트가 폭을 밀지 않게 */
body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 쿠폰/버튼: 모바일에서 세로로 */
@media (max-width: 860px){
  body.woocommerce-cart .coupon{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body.woocommerce-cart .coupon input.input-text,
  body.woocommerce-cart .coupon button.button,
  body.woocommerce-cart button[name="update_cart"],
  body.woocommerce-cart .wc-proceed-to-checkout a{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }
}

/* -----------------------------------------
   3) CHECKOUT — container + spacing
   ----------------------------------------- */
body.woocommerce-checkout form.checkout{
  width: 100% !important;
  max-width: 100% !important;
}

/* -----------------------------------------
   4) INPUTS — dark theme (stop “white fields”)
   ----------------------------------------- */
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout textarea,
body.woocommerce-checkout select,
body.woocommerce-cart input.input-text,
body.woocommerce-cart select{
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 12px !important;
}

body.woocommerce-checkout input:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-cart input:focus,
body.woocommerce-cart select:focus{
  outline: none !important;
  border-color: rgba(61,189,245,.75) !important;
  box-shadow: 0 0 0 3px rgba(61,189,245,.22) !important;
}
/* -----------------------------------------
   5) EXTRA: kill 100vw + transforms that cause half-screen
   (Woo pages only)
   ----------------------------------------- */
body.woocommerce-cart .elementor-section,
body.woocommerce-cart .elementor-container,
body.woocommerce-cart .elementor-column,
body.woocommerce-cart .elementor-widget-wrap,
body.woocommerce-cart .content-area,
body.woocommerce-cart .site-main,

body.woocommerce-checkout .elementor-section,
body.woocommerce-checkout .elementor-container,
body.woocommerce-checkout .elementor-column,
body.woocommerce-checkout .elementor-widget-wrap,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .site-main{
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  transform: none !important;
}

/* 100vw inline styles on Woo pages */
body.woocommerce-cart *[style*="100vw"],
body.woocommerce-checkout *[style*="100vw"]{
  width: 100% !important;
  max-width: 100% !important;
}

body.woocommerce-checkout ::placeholder,
body.woocommerce-cart ::placeholder{
  color: rgba(255,255,255,.60) !important;
}
/* =========================================================
   bowrex — CART ONLY PATCH (append-only)
   Fix:
   - price/headers breaking into multiple lines
   - cart totals too narrow / table too squeezed
   - prevent overlap behavior from weird width rules
   ========================================================= */

@media (min-width: 981px){
  /* Woo 기본 2컬럼 폭을 다시 살림 (겹치지 않게) */
  body.woocommerce-cart .woocommerce-cart-form{
    float:left !important;
    width:62% !important;
    margin:0 !important;
  }
  body.woocommerce-cart .cart-collaterals{
    float:right !important;
    width:38% !important;
    margin:0 !important;
  }
  body.woocommerce-cart .woocommerce::after{
    content:"";
    display:block;
    clear:both;
  }

  /* 테이블/가격 줄바꿈 방지 */
  body.woocommerce-cart table.shop_table{
    width:100% !important;
    table-layout:auto !important;
  }
  body.woocommerce-cart table.shop_table th,
  body.woocommerce-cart table.shop_table td{
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
  body.woocommerce-cart th.product-price,
  body.woocommerce-cart td.product-price,
  body.woocommerce-cart th.product-subtotal,
  body.woocommerce-cart td.product-subtotal{
    white-space:nowrap !important;
  }
  body.woocommerce-cart table.shop_table th{
    white-space:nowrap !important;
  }
}
/* =========================================================
   bowrex — EMERGENCY MOBILE CART RECOVERY (FINAL)
   Fix: mobile shows labels only / values look blank
   Strategy: disable Woo "stack" mode + force real table + inner scroll
   Place: VERY END of pb-panels.css
   ========================================================= */
@media (max-width: 860px){

  /* 1) 모바일에서 Woo 컨테이너 중앙정렬(auto) 제거 */
  body.woocommerce-cart .woocommerce{
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2) Woo 모바일 '세로 스택' 모드(라벨만 보이는 td::before) 완전 차단 */
  body.woocommerce-cart table.shop_table_responsive td::before{
    content: none !important;
    display: none !important;
  }

  /* 3) 테이블을 진짜 테이블로 강제(값이 사라지는 현상 방지) */
  body.woocommerce-cart table.shop_table_responsive thead{
    display: table-header-group !important;
  }
  body.woocommerce-cart table.shop_table_responsive tr{
    display: table-row !important;
  }
  body.woocommerce-cart table.shop_table_responsive th,
  body.woocommerce-cart table.shop_table_responsive td{
    display: table-cell !important;
    position: static !important;
    padding: 12px 10px !important;
    text-align: left !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }

  /* 4) 스크롤은 페이지가 아니라 "카트 폼" 안에서만 */
  body.woocommerce-cart .woocommerce-cart-form{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.woocommerce-cart table.shop_table{
    width: 100% !important;
    min-width: 720px !important; /* 모바일에서 칼럼 유지 */
    table-layout: auto !important;
    border-collapse: collapse;
  }

  /* 5) 값이 '빈칸'처럼 안 보이는 문제 방지: 텍스트/링크 색 강제 */
  body.woocommerce-cart table.shop_table,
  body.woocommerce-cart table.shop_table th,
  body.woocommerce-cart table.shop_table td,
  body.woocommerce-cart table.shop_table a,
  body.woocommerce-cart .cart_totals,
  body.woocommerce-cart .cart_totals th,
  body.woocommerce-cart .cart_totals td,
  body.woocommerce-cart .cart_totals a{
    color: var(--text, #fff) !important;
  }
}
/* =========================================================
   FINAL FIX — kill 100vw mobile shift
   ========================================================= */
@media (max-width: 860px){

  html,
  body{
    width: 100% !important;     /* 100vw 제거 */
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.woocommerce-cart *,
  body.woocommerce-checkout *{
    max-width: 100% !important;
  }

}
/* =========================================================
   FINAL TARGET FIX — unshift the main content wrapper (mobile)
   ========================================================= */
@media (max-width: 860px){

  /* Woo 페이지의 "본문 wrapper"를 x=0에 강제 고정 */
  body.woocommerce-cart main,
  body.woocommerce-cart #content,
  body.woocommerce-cart .site-content,
  body.woocommerce-cart .site-main,
  body.woocommerce-cart .content-area,
  body.woocommerce-cart .entry-content,

  body.woocommerce-checkout main,
  body.woocommerce-checkout #content,
  body.woocommerce-checkout .site-content,
  body.woocommerce-checkout .site-main,
  body.woocommerce-checkout .content-area,
  body.woocommerce-checkout .entry-content{
    position: relative !important;
    left: 0 !important;
    transform: translateX(0) !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Elementor container가 밀어내는 케이스가 많아서 같이 한 번 더 */
  body.woocommerce-cart .elementor-container,
  body.woocommerce-checkout .elementor-container{
    margin-left: 0 !important;
    transform: translateX(0) !important;
    left: 0 !important;
  }
}