/* ===== base palette (match your other file) ===== */
:root {
  --bio-accent: #1abc9c;
  --bio-accent-2: #16a085;
  --bio-text: #0f172a;
  --bio-muted: #6b7280;
  --bio-line: #e5e7eb;
  --bio-card: #ffffff;
  --bio-surface: #f8fafc;
  --bio-success: #16a34a;
  --bio-hold: #f59e0b;
  --bio-cancel: #ef4444;
}

/* shared page container */
.woocommerce-order,
.woocommerce-account .woocommerce {
  max-width: 1080px;
  margin: 2rem auto;
}

/* title spacing */
.woocommerce-order h2,
.woocommerce-account .woocommerce h2 {
  margin: 1.25rem 0 .75rem;
}

/* ===== top banner / status (works on thank-you + view-order) ===== */
.woocommerce-order > p.woocommerce-notice,
.woocommerce-order > .woocommerce-order-overview {
  background: linear-gradient(180deg, var(--bio-surface), #fff);
  border: 1px solid var(--bio-line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 20px rgba(2,8,23,.06);
}

.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
  margin-top: 12px;
}
.woocommerce-order-overview li {
  margin: 0;
  color: var(--bio-text);
}
.woocommerce-order-overview strong { color: var(--bio-muted); font-weight: 600; }

/* ===== order details table → card style ===== */
.woocommerce table.shop_table.order_details,
.woocommerce .woocommerce-table--order-details.shop_table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  background: var(--bio-card);
  border: 1px solid var(--bio-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(2,8,23,.08);
}

.woocommerce table.shop_table.order_details thead th,
.woocommerce .woocommerce-table--order-details.shop_table thead th {
  background: var(--bio-surface);
  color: var(--bio-muted);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bio-line);
}

.woocommerce table.shop_table.order_details tbody td,
.woocommerce .woocommerce-table--order-details.shop_table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--bio-line);
  color: var(--bio-text);
}

.woocommerce table.shop_table.order_details tfoot th,
.woocommerce table.shop_table.order_details tfoot td {
  padding: 12px 16px;
  border-top: 1px solid var(--bio-line);
  background: #fff;
}

/* product names inside table */
.woocommerce table.shop_table.order_details .product-name a {
  text-decoration: none;
  color: var(--bio-text);
}
.woocommerce table.shop_table.order_details .product-name a:hover {
  color: var(--bio-accent-2);
  text-decoration: underline;
}

/* ===== action buttons (pay, view invoice, etc.) ===== */
body:not(.single-product) .woocommerce .button,
body:not(.single-product) .woocommerce a.button,
body:not(.single-product) .woocommerce .button.alt {
  border-radius: 999px;
  border: 1px solid var(--bio-line);
  background: #fff;
  color: var(--bio-text);
  padding: .55rem .95rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(2,8,23,.06);
  transition: transform .08s ease, box-shadow .2s ease, background .2s;
}
body:not(.single-product) .woocommerce .button:hover,
body:not(.single-product) .woocommerce a.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2,8,23,.10);
}

/* primary call-to-action (e.g., Pay / View) */
body:not(.single-product) .woocommerce .button.alt,
body:not(.single-product) .woocommerce a.button.alt {
  color: #fff;
  background: linear-gradient(180deg, var(--bio-accent), var(--bio-accent-2));
  border: none;
}

/* ===== customer/collection details → cards ===== */
.woocommerce-customer-details,
.woocommerce-order .woocommerce-customer-details {
  margin-top: 24px;
}

.woocommerce-customer-details .woocommerce-columns--addresses,
.woocommerce-order .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.woocommerce-customer-details .woocommerce-column,
.woocommerce-order .woocommerce-column,
.woocommerce-account .woocommerce .collection-details,
.woocommerce-account .woocommerce .pickup-details {
  background: var(--bio-card);
  border: 1px solid var(--bio-line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(2,8,23,.08);
}

.woocommerce-customer-details .woocommerce-column__title,
.woocommerce-account .woocommerce .collection-details h2,
.woocommerce-account .woocommerce .pickup-details h2 {
  margin: 0 0 .5rem;
}

/* muted helper text like "Get directions" */
.woocommerce a[href*="maps"],
.woocommerce .muted,
.woocommerce-customer-details address a {
  color: var(--bio-accent-2);
  text-decoration: none;
}
.woocommerce a[href*="maps"]:hover { text-decoration: underline; }

/* status colouring if present in header line */
.woocommerce-order .woocommerce-order-overview:has(li:contains("On hold")) { border-color: rgba(245,158,11,.35); }
.woocommerce-order .woocommerce-order-overview:has(li:contains("Completed")) { border-color: rgba(22,163,74,.35); }

/* ===== mobile tweaks ===== */
@media (max-width: 780px) {
  .woocommerce-order-overview {
    grid-template-columns: 1fr;
  }
  .woocommerce table.shop_table.order_details thead { display: none; }
  .woocommerce table.shop_table.order_details tr,
  .woocommerce table.shop_table.order_details td {
    display: block;
    width: 100%;
  }
  .woocommerce table.shop_table.order_details tbody tr {
    border-bottom: 1px solid var(--bio-line);
  }
  .woocommerce table.shop_table.order_details td {
    border: none;
    padding: 12px 14px;
  }
}


:root{
  --bio-line:#e5e7eb;
  --bio-card: #ffffff;
  --bio-shadow:0 12px 28px rgba(2,8,23,.08);
  --bio-radius:16px;
}

/* Collection Details card (overrides inline styles) */
.pickup-order-details{
  background: var(--bio-card) !important;
  border: 1px solid var(--bio-line);
  border-radius: var(--bio-radius) !important;
  box-shadow: var(--bio-shadow);
  padding: 16px !important;          /* keep their spacing, but normalize */
  margin-top: 16px !important;
}


/* Clean up default Woo address box */
.woocommerce-customer-details address{
	display: none;
  
}

/* Headings inside the cards */
.woocommerce-customer-details .woocommerce-column__title,
.pickup-order-details h2{
	display: none;
}

/* Optional: unify spacing between these sections */
.woocommerce-order .woocommerce-customer-details{ margin-top: 24px; }

.woocommerce-result-count{
	display : none;
}