/* ============================================
   M.O.B.S Cart — Dark Theme
   Built from actual page HTML source
   ============================================ */

:root {
  --bg: #0a0a0a;
  --panel: rgba(30,30,30,1);
  --panel2: rgba(38,38,38,1);
  --text: #ffffff;
  --muted: rgba(255,255,255,.65);
  --border: rgba(255,255,255,.12);
  --accent: #f5c400;
  --max: 1180px;
}

/* ── Base page ── */
body.mobs-cart-page {
  background: var(--bg) !important;
  color: var(--text) !important;
}
body.mobs-cart-page #page,
body.mobs-cart-page #main,
body.mobs-cart-page .site-content,
body.mobs-cart-page .page-wrapper {
  background: var(--bg) !important;
}

/* ── All text/links default to white ── */
body.mobs-cart-page a { color: var(--text) !important; }
body.mobs-cart-page a:hover { color: var(--accent) !important; }
body.mobs-cart-page p, body.mobs-cart-page span,
body.mobs-cart-page td, body.mobs-cart-page th,
body.mobs-cart-page label { color: var(--text) !important; }

/* ── Breadcrumb steps ── */
body.mobs-cart-page .checkout-breadcrumbs a { color: rgba(255,255,255,.35) !important; text-decoration: none !important; }
body.mobs-cart-page .checkout-breadcrumbs a.current,
body.mobs-cart-page .checkout-breadcrumbs a[aria-current="page"] { color: var(--accent) !important; }
body.mobs-cart-page .checkout-breadcrumbs .divider { color: rgba(255,255,255,.20) !important; }

/* ── Outer cart container ── */
body.mobs-cart-page .cart-container { padding: 0 20px !important; }

/* ============================================
   MAIN GRID LAYOUT
   .wc-block-components-sidebar-layout is the
   direct parent of main + sidebar
   ============================================ */
body.mobs-cart-page .wc-block-components-sidebar-layout.wc-block-cart {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "main sidebar"
    "crosssells crosssells" !important;
  gap: 20px !important;
  align-items: start !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.5) !important;
}

/* Main column (table + cross-sells) — use display:contents
   so children participate directly in the grid */
body.mobs-cart-page .wc-block-components-main.wc-block-cart__main {
  display: contents !important;
}

/* Cart items table → main area */
body.mobs-cart-page table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block {
  grid-area: main !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  align-self: start !important;
}

/* Cross-sells block → full-width bottom row */
body.mobs-cart-page div.wp-block-woocommerce-product-collection.is-layout-flow {
  grid-area: crosssells !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Sidebar → right column, shrink to content */
body.mobs-cart-page .wc-block-components-sidebar.wc-block-cart__sidebar {
  grid-area: sidebar !important;
  align-self: start !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  height: auto !important;
  min-height: unset !important;
}

/* ── Cart table cells ── */
body.mobs-cart-page .wc-block-cart-items thead tr {
  background: rgba(255,255,255,.05) !important;
}
body.mobs-cart-page .wc-block-cart-items th {
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  background: transparent !important;
}
body.mobs-cart-page .wc-block-cart-items td {
  padding: 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  vertical-align: middle !important;
  background: transparent !important;
  color: var(--text) !important;
}
body.mobs-cart-page .wc-block-cart-items tbody tr:last-child td {
  border-bottom: none !important;
}

/* ── Product name ── */
body.mobs-cart-page a.wc-block-components-product-name {
  color: var(--text) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* ── Prices gold ── */
body.mobs-cart-page .wc-block-formatted-money-amount,
body.mobs-cart-page .wc-block-components-product-price__value,
body.mobs-cart-page .woocommerce-Price-amount {
  color: var(--accent) !important;
}

/* ── Quantity selector ── */
body.mobs-cart-page .wc-block-components-quantity-selector {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
}
body.mobs-cart-page .wc-block-components-quantity-selector__input {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  text-align: center !important;
  width: 48px !important;
  height: 38px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
body.mobs-cart-page .wc-block-components-quantity-selector__button--minus,
body.mobs-cart-page .wc-block-components-quantity-selector__button--plus {
  background: rgba(245,196,0,.12) !important;
  border: 1px solid rgba(245,196,0,.35) !important;
  border-radius: 999px !important;
  color: var(--accent) !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}
body.mobs-cart-page .wc-block-components-quantity-selector__button--minus:hover,
body.mobs-cart-page .wc-block-components-quantity-selector__button--plus:hover {
  background: rgba(245,196,0,.25) !important;
}

/* ── Remove item button ── */
body.mobs-cart-page button.wc-block-cart-item__remove-link {
  background: transparent !important;
  border: 1px solid rgba(255,80,80,.40) !important;
  border-radius: 999px !important;
  color: rgba(255,100,100,.80) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
}
body.mobs-cart-page button.wc-block-cart-item__remove-link:hover {
  background: rgba(255,60,60,.12) !important;
  color: #ff7070 !important;
}

/* ── Cart totals ── */
body.mobs-cart-page h2.wc-block-cart__totals-title {
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}
body.mobs-cart-page .wc-block-components-totals-item {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 10px 0 !important;
}
body.mobs-cart-page .wc-block-components-totals-footer-item {
  border-bottom: none !important;
}
body.mobs-cart-page .wc-block-components-totals-item__label {
  color: var(--text) !important;
  font-weight: 700 !important;
}
body.mobs-cart-page .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  color: var(--accent) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

/* Add coupons panel */
body.mobs-cart-page .wc-block-components-panel__button {
  color: var(--muted) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 13px !important;
  padding: 8px 0 !important;
}
body.mobs-cart-page .wc-block-components-panel__button svg path {
  fill: var(--muted) !important;
}

/* ── PROCEED TO CHECKOUT ── */
/* Exact class string from HTML:
   class="wc-block-components-button wp-element-button wc-block-cart__submit-button contained" */
body.mobs-cart-page .wc-block-cart__submit-button.wc-block-components-button.wp-element-button,
body.mobs-cart-page a.wc-block-cart__submit-button,
body.mobs-cart-page .wc-block-cart__submit-container a,
body.mobs-cart-page .wc-block-cart__submit-container .wc-block-components-button {
  background: #f5c400 !important;
  background-color: #f5c400 !important;
  color: #0b0b0b !important;
  border: 2px solid rgba(0,0,0,.25) !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 0 24px !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin-top: 16px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  outline: none !important;
}
body.mobs-cart-page .wc-block-cart__submit-button.wc-block-components-button.wp-element-button:hover,
body.mobs-cart-page a.wc-block-cart__submit-button:hover,
body.mobs-cart-page .wc-block-cart__submit-container a:hover {
  opacity: .88 !important;
  background: #f5c400 !important;
  background-color: #f5c400 !important;
  color: #0b0b0b !important;
}
/* Text div inside button */
body.mobs-cart-page .wc-block-cart__submit-button .wc-block-components-button__text,
body.mobs-cart-page .wc-block-cart__submit-container a .wc-block-components-button__text {
  color: #0b0b0b !important;
  font-weight: 1000 !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* ── Cross-sells section ── */
body.mobs-cart-page .wp-block-woocommerce-product-collection h2.wp-block-heading {
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
}

/* Cross-sell product list items */
body.mobs-cart-page ul.wc-block-product-template li.wc-block-product {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding-bottom: 16px !important;
}

/* Product title links */
body.mobs-cart-page .wp-block-post-title a {
  color: var(--text) !important;
  text-decoration: none !important;
}
body.mobs-cart-page .wp-block-post-title a:hover {
  color: var(--accent) !important;
}

/* ── Select Options (variable products) + ADD TO BAG buttons ── */
body.mobs-cart-page a.button.product_type_variable,
body.mobs-cart-page a.button.product_type_variable:visited,
body.mobs-cart-page .wc-block-grid__product-add-to-cart a.button,
body.mobs-cart-page .wp-block-woocommerce-product-collection a.wp-block-button__link[href*="product"],
body.mobs-cart-page a.wp-block-button__link.wp-element-button.wc-block-components-product-button__button,
body.mobs-cart-page a.wc-block-components-product-button__button.wp-block-button__link,
body.mobs-cart-page .wc-block-components-product-button__button {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: #0b0b0b !important;
  border: 2px solid rgba(0,0,0,.2) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: 100% !important;
}
body.mobs-cart-page a.button.product_type_variable:hover,
body.mobs-cart-page a.wp-block-button__link.wp-element-button.wc-block-components-product-button__button:hover,
body.mobs-cart-page .wc-block-components-product-button__button:hover {
  opacity: .88 !important;
  color: #0b0b0b !important;
  text-decoration: none !important;
}
body.mobs-cart-page a.button.product_type_variable span,
body.mobs-cart-page .wc-block-components-product-button__button span {
  color: #0b0b0b !important;
}

/* ── Notices ── */
body.mobs-cart-page .wc-block-components-notices,
body.mobs-cart-page .wc-block-components-notice-snackbar-list { background: transparent !important; }

/* ── Footer ── */
body.mobs-cart-page .mobs-home-footer {
  border-top: 1px solid var(--border) !important;
  padding: 32px 0 !important;
  margin-top: 32px !important;
  background: transparent !important;
}
body.mobs-cart-page .footer-grid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}
body.mobs-cart-page .foot-brand { font-weight: 900 !important; font-size: 16px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #f2f2f2 !important; margin: 0 0 4px !important; }
body.mobs-cart-page .foot-copy { font-size: 12px !important; color: var(--muted) !important; line-height: 1.5 !important; margin: 0 !important; }
body.mobs-cart-page .foot-links { display: flex !important; gap: 24px !important; }
body.mobs-cart-page .foot-links a { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .10em !important; text-transform: uppercase !important; color: var(--muted) !important; }
body.mobs-cart-page .foot-links a:hover { color: var(--accent) !important; }

/* ── Responsive ── */
@media (max-width: 780px) {
  body.mobs-cart-page .wc-block-components-sidebar-layout.wc-block-cart {
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "sidebar" "crosssells" !important;
  }
  body.mobs-cart-page .wc-block-components-sidebar.wc-block-cart__sidebar {
    position: static !important;
  }
}