/* ==========================================================================
   Omniverce Core — Feature 5 (layout half): cart-sidebar REDESIGN panel
   layout. Ships INSIDE the plugin since v1.2.1 and is enqueued on the
   front end only, after the theme / Elementor styles. It must NEVER be
   pasted into the Customizer: two earlier Customizer pastes damaged the
   Additional CSS document (unclosed braces, lost root rule), which is
   why the owner ordered this stylesheet into the plugin (2026-10-27).

   What this design is (evidence: redesign/REFERENCE_SPEC.md):
   - Narrow panel: min(200px, 90vw) — ONE small sidebar width on desktop
     AND mobile (owner's amendment; v1.2.4 shrank it 300px → 200px —
     "200px is perfect"). It never goes full-screen; on a viewport
     narrower than ~222px the 90vw cap keeps a sliver of the
     page visible beside it.
   - Subtotal at the TOP: label dark/centred, amount RED/centred, then
     the "Go to Cart" button (light, outlined) and Checkout (solid, in
     the SITE dark blue #053677 — owner's amendment).
   - Items are a centred stack: image (130px, contain), price
     BELOW it in DARK text, then the quantity stepper pill (injected and
     styled by assets/cart-stepper.css; its outline is the SITE amber
     #FFB143 since v1.2.1).
   - Product name, vendor line and BOTH delivery lines are hidden in
     this panel (they live in the name block) — exactly as the owner's
     reference shows. Product/cart pages are untouched by this file.

   !important policy (owner's explicit instruction, 2026-10-27): the
   declarations that WoodMart / Elementor / plugin styles can override
   carry !important — panel width/display/flex, wrapper flex orders,
   subtotal centring + red amount, button display/width, product
   flex/centring, image sizing, the name-block hide, price colour/size,
   the quantity-prefix hide and the remove-cell rules. Everything else
   (colours of uncontested elements, spacing, transitions) is left
   plain — !important is scoped to the contested declarations, not
   sprayed on every line.

   Everything is scoped under .cart-widget-side.
   ========================================================================== */
.cart-widget-side {
  --cw-accent: #e0304f;        /* subtotal amount ONLY — item prices are dark */
  --cw-text: #0f1111;          /* item price / body text (sampled from reference) */
  --cw-primary: #053677;       /* checkout button — SITE dark blue */
  --cw-border: #eaeaea;        /* item dividers */
  --cw-btn-border: #888c8c;    /* "Go to Cart" outline */
  --cw-muted: #6b7280;

  width: min(200px, 90vw) !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff;
  color: var(--cw-text);
}

/* ---------- Header (WoodMart title + Close — kept, compact) ---------- */
.cart-widget-side .wd-heading {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cw-border);
}
.cart-widget-side .wd-heading .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Layout wrappers ----------
   Flex order puts the subtotal + buttons at the TOP (reference) and the
   product list in the scrolling middle:
     1 = subtotal, 2 = footer buttons, 3 = products (scrolls).          */
.cart-widget-side .widget_shopping_cart {
  flex: 1 1 auto !important;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.cart-widget-side .widget_shopping_cart_content {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  min-height: 0;
}
.cart-widget-side .elementor-menu-cart__subtotal {
  order: 1 !important;
}
.cart-widget-side .elementor-menu-cart__footer-buttons {
  order: 2 !important;
}
.cart-widget-side .elementor-menu-cart__products {
  order: 3 !important;
}

/* ---------- Subtotal (top, centred, amount red) ---------- */
.cart-widget-side .elementor-menu-cart__subtotal {
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px;
  margin: 0;
  padding: 10px 14px 6px;
  border: 0;
  font-size: 15px;
  text-align: center !important;
}
.cart-widget-side .elementor-menu-cart__subtotal strong {
  font-weight: 500;
  color: var(--cw-text);
}
.cart-widget-side .elementor-menu-cart__subtotal .woocommerce-Price-amount {
  color: var(--cw-accent) !important;
  font-weight: 700;
  font-size: 17px !important;
  line-height: 1.25;
}

/* ---------- Buttons (top, stacked, full width) ---------- */
.cart-widget-side .elementor-menu-cart__footer-buttons {
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 2px 14px 10px;
  margin: 0;
  border-bottom: 1px solid var(--cw-border);
}
.cart-widget-side .elementor-menu-cart__footer-buttons .elementor-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .1s;
}
.cart-widget-side .elementor-menu-cart__footer-buttons .elementor-button:active {
  transform: scale(.98);
}

/* "Go to Cart" (the view-cart anchor; its text is relabelled by the
   Omniverce Core stepper module) = light, outlined, dark text. */
.cart-widget-side .elementor-button--view-cart {
  background: #fff;
  color: var(--cw-text);
  border: 1px solid var(--cw-btn-border);
}
.cart-widget-side .elementor-button--view-cart:hover {
  background: #f7f7f7;
  color: var(--cw-text);
}

/* Checkout = solid primary (site dark blue via --cw-primary) */
.cart-widget-side .elementor-button--checkout {
  background: var(--cw-primary);
  color: #fff;
  border: 1px solid var(--cw-primary);
}
.cart-widget-side .elementor-button--checkout:hover {
  background: var(--cw-accent);
  border-color: var(--cw-accent);
  color: #fff;
}

/* ---------- Product list (scrolling middle) ---------- */
.cart-widget-side .elementor-menu-cart__products {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 14px;
  margin: 0;
}

/* One item = centred column: image / price / stepper.
   (The stepper is injected after the price by Omniverce Core.) */
.cart-widget-side .elementor-menu-cart__product {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--cw-border);
  position: relative;
}
.cart-widget-side .elementor-menu-cart__product:last-child {
  border-bottom: 0;
}

/* Image — centred, full product shot (contain, not cover-crop) */
.cart-widget-side .elementor-menu-cart__product-image {
  width: 130px !important;
  max-width: 70vw !important;
  margin: 0 auto;
}
.cart-widget-side .elementor-menu-cart__product-image a {
  display: block;
}
.cart-widget-side .elementor-menu-cart__product-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 130px !important;
  object-fit: contain !important;
  margin: 0 auto;
}

/* Name block — HIDDEN by design (reference shows no name).
   This one rule also hides, inside this panel only:
   - the "Vendor: ..." line (ul.variation lives in the name block),
   - the PI plugin's delivery line (.pi-edd-cart lives in the name
     block) and the bus-emoji item-data echo (same list).
   Everything stays in the DOM; product/cart pages are unaffected.
   Do NOT replace this with broader variation-hiding rules — genuine
   size/colour data elsewhere depends on them (see DIAGNOSIS.md). */
.cart-widget-side .elementor-menu-cart__product-name {
  display: none !important;
}

/* Price — centred, DARK (never red in this design), unit price only:
   the "N x" quantity prefix is hidden; the stepper carries quantity. */
.cart-widget-side .elementor-menu-cart__product-price {
  padding: 0;
  margin-top: 8px;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cw-text) !important;
}
.cart-widget-side .elementor-menu-cart__product-price .product-quantity {
  display: none !important;
}
.cart-widget-side .elementor-menu-cart__product-price .woocommerce-Price-amount {
  color: var(--cw-text) !important;
  font-weight: 500;
  font-size: 16px !important;
}

/* Legacy remove cell — NO-JS FALLBACK ONLY.
   When the Omniverce Core stepper JS is live it adds .oc-cart-ready
   to the panel root and the PLUGIN stylesheet (cart-stepper.css) hides
   this cell (the trash-in-stepper takes over). With JS off, this x
   stays visible so an item can always be removed. Styled as the
   familiar round x. */
.cart-widget-side .elementor-menu-cart__product-remove {
  position: static !important;
  padding: 0;
  margin: 10px 0 0;
  width: 28px !important;
  height: 28px !important;
}
.cart-widget-side .elementor-menu-cart__product-remove .elementor_remove_from_cart_button {
  display: none !important;
}
.cart-widget-side .elementor-menu-cart__product-remove .remove_from_cart_button {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--cw-muted);
  font-size: 0;           /* hide any stray text */
  transition: background .2s, color .2s;
}
.cart-widget-side .elementor-menu-cart__product-remove .remove_from_cart_button::before {
  content: "\00d7";       /* × */
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
  margin: 0;
  position: static;
}
.cart-widget-side .elementor-menu-cart__product-remove .remove_from_cart_button::after {
  display: none;
}
.cart-widget-side .elementor-menu-cart__product-remove .remove_from_cart_button:hover {
  background: var(--cw-accent);
  color: #fff;
}

/* ---------- Empty cart message ---------- */
.cart-widget-side .woocommerce-mini-cart__empty-message {
  padding: 40px 20px;
  text-align: center;
  color: var(--cw-muted);
}

/* ---------- Narrow screens ----------
   Deliberately NO full-width takeover (that was FINAL.css behaviour
   and part of what the owner rejected): the min(200px, 90vw) width
   already keeps the panel a small sidebar at phone widths. Only the
   paddings tighten slightly (sides 12px, harmonised with the v1.2.4
   size pass). */
@media (max-width: 360px) {
  .cart-widget-side .wd-heading {
    padding: 10px 12px;
  }
  .cart-widget-side .elementor-menu-cart__subtotal {
    padding: 8px 12px 6px;
  }
  .cart-widget-side .elementor-menu-cart__footer-buttons {
    padding: 2px 12px 8px;
  }
  .cart-widget-side .elementor-menu-cart__products {
    padding: 0 12px;
  }
}