/* ====================================================================
   GELATIN LABS — MY ACCOUNT PAGE OVERHAUL
   ====================================================================
   Drop into WordPress Additional CSS or a Custom CSS plugin.
   Targets the WooCommerce My Account page.
   Congruent with cart/checkout design language:
     Gold #FDCE31 | Dark #1b1b1b | Card #242424 | korolev headings | Lexend body
   ==================================================================== */

/* ------------------------------------------------------------------ */
/* 0. VARIABLES & PAGE SHELL                                           */
/* ------------------------------------------------------------------ */
.woocommerce-account {
  --gl-gold: #FDCE31;
  --gl-dark: #1b1b1b;
  --gl-card: #242424;
  --gl-card-hover: #2a2a2a;
  --gl-border: rgba(255,255,255,0.06);
  --gl-border-gold: rgba(253,206,49,0.15);
  --gl-text: #ffffff;
  --gl-text-muted: rgba(255,255,255,0.5);
  --gl-text-dim: rgba(255,255,255,0.35);
  --gl-ease: cubic-bezier(.16,1,.3,1);
  --gl-radius: 16px;
  --gl-radius-sm: 12px;
}


/* ------------------------------------------------------------------ */
/* 1. SIDEBAR NAVIGATION — CONTRAST FIX                                */
/* ------------------------------------------------------------------ */

/* Nav container — dark card background */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* All nav links — dark bg, readable white text */
.woocommerce-account .woocommerce-MyAccount-navigation-link a {
  background: var(--gl-card) !important;
  color: var(--gl-text-muted) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: background 0.15s var(--gl-ease), color 0.15s var(--gl-ease) !important;
  border-bottom: 1px solid var(--gl-border) !important;
  text-decoration: none !important;
}

/* Last nav item — no bottom border */
.woocommerce-account .woocommerce-MyAccount-navigation-link:last-child a {
  border-bottom: none !important;
}

/* Hover state */
.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
  background: var(--gl-card-hover) !important;
  color: var(--gl-text) !important;
}

/* Active state — gold accent text */
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
  background: rgba(253, 206, 49, 0.08) !important;
  color: var(--gl-gold) !important;
  font-weight: 600 !important;
}

/* Nav icons — FA 6 Solid SVGs injected by JS, hide old ::before image icons */
.woocommerce-account .woocommerce-MyAccount-navigation-link a::before {
  display: none !important;
  content: none !important;
}

/* Show inline SVGs (overrides YellowPencil display:none on nav SVGs) */
.woocommerce-account .woocommerce-MyAccount-navigation-link a svg {
  display: inline-block !important;
  fill: currentColor !important;
  color: inherit !important;
  opacity: 0.7 !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a svg {
  opacity: 1 !important;
}

/* Hide Communication tab */
.woocommerce-account .woocommerce-MyAccount-navigation-link--communication-preferences {
  display: none !important;
}

/* Hide Dashboard tab */
.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard {
  display: none !important;
}


/* ------------------------------------------------------------------ */
/* 2. CONTENT AREA — TYPOGRAPHY & CARD TREATMENT                       */
/* ------------------------------------------------------------------ */

/* Content wrapper */
.woocommerce-account .woocommerce-MyAccount-content {
  color: var(--gl-text) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Dashboard greeting text */
.woocommerce-account .woocommerce-MyAccount-content p {
  color: var(--gl-text-muted) !important;
  font-family: Lexend, system-ui, sans-serif !important;
}

/* Links in content area — gold (exclude buttons and injected CTAs) */
.woocommerce-account .woocommerce-MyAccount-content a:not(.view):not(.button):not(.woocommerce-button):not(.wc-forward):not(.gl-track-btn):not(.gl-status-check-btn) {
  color: var(--gl-gold) !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease !important;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.view):not(.button):not(.woocommerce-button):not(.wc-forward):not(.gl-track-btn):not(.gl-status-check-btn):hover {
  opacity: 0.8 !important;
}

/* VIEW buttons on order cards — pill CTA matching "Start Your Order" */
.woocommerce-account .woocommerce-MyAccount-content a.view,
.woocommerce-account .ast-orders-table__row .woocommerce-button,
.woocommerce-account .ast-orders-table__row .button,
.woocommerce-account .ast-orders-table__row a.view {
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  font-family: korolev, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: background 0.15s var(--gl-ease) !important;
}
.woocommerce-account .woocommerce-MyAccount-content a.view:hover,
.woocommerce-account .ast-orders-table__row .woocommerce-button:hover,
.woocommerce-account .ast-orders-table__row .button:hover,
.woocommerce-account .ast-orders-table__row a.view:hover {
  background: #e5ba2c !important;
  opacity: 1 !important;
}


/* ------------------------------------------------------------------ */
/* 3. ORDERS LIST — COMPACT HORIZONTAL CARD LAYOUT                     */
/* ------------------------------------------------------------------ */

/* Grid container — tight gaps */
.woocommerce-account .ast-woo-grid-orders-container {
  gap: 10px !important;
}

/* Order grid cards — visual base (layout handled by JS inline styles) */
.woocommerce-account .ast-woo-grid-orders-container .ast-orders-table__row {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  color: var(--gl-text) !important;
  overflow: hidden !important;
}

/* Hide product thumbnails — unified card design */
.woocommerce-account .ast-orders-table__cell-order-number img {
  display: none !important;
}

/* Hide number cell entirely (thumbnails removed, pills moved to date cell) */
.woocommerce-account .ast-orders-table__cell-order-number {
  display: none !important;
}

/* Hide Invoice links from order cards */
.woocommerce-account .ast-orders-table__cell-order-actions a.invoice {
  display: none !important;
}

/* Hide total cell entirely (mostly $0.00 for service orders, not useful) */
.woocommerce-account .ast-orders-table__cell-order-total {
  display: none !important;
}

/* Force actions cell to static — Astra sets position:absolute which breaks flex layout */
.woocommerce-account .ast-orders-table__cell-order-actions {
  position: static !important;
}

/* Order card text */
.woocommerce-account .ast-orders-table__row .ast-orders-table__cell {
  color: var(--gl-text) !important;
  font-family: Lexend, system-ui, sans-serif !important;
}

/* Date cell — flex wrap for ID + pills + date */
.woocommerce-account .ast-orders-table__cell-order-date time,
.woocommerce-account .ast-orders-table__cell-order-date .ast-orders-order-date,
.woocommerce-account .ast-orders-table__cell-order-date .ast-woo-order-date {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--gl-text) !important;
  white-space: nowrap !important;
}

/* Status cell — pill style matching location/category pills */
.woocommerce-account .ast-orders-table__cell-order-status {
  font-family: korolev, sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.6) !important;
  white-space: nowrap !important;
}
.woocommerce-account .ast-orders-table__row .ast-orders-table__cell .ast-order-status-badge {
  color: rgba(255,255,255,0.6) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- RESPONSIVE: Tablet (<=768px) ---- */
@media (max-width: 768px) {
  .woocommerce-account .ast-orders-table__cell-order-status {
    display: none !important;
  }
}

/* ---- RESPONSIVE: Mobile (<=600px) ---- */
@media (max-width: 600px) {
  .gl-order-row-pills {
    gap: 4px !important;
  }
  .gl-order-loc, .gl-order-cat {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}

/* ---- RESPONSIVE: Small mobile (<=480px) ---- */
@media (max-width: 480px) {
  .woocommerce-account .woocommerce-MyAccount-content a.view,
  .woocommerce-account .ast-orders-table__row a.view {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }
}

/* "No order has been made yet" empty state */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  color: var(--gl-text-muted) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  padding: 20px !important;
}

/* "Browse products" / "Go shop" button in empty state */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button {
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}


/* ------------------------------------------------------------------ */
/* 4. FORMS — ACCOUNT DETAILS, ADDRESSES, PASSWORD                     */
/* ------------------------------------------------------------------ */

/* Form labels */
.woocommerce-account .woocommerce-MyAccount-content label {
  color: var(--gl-text-muted) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 6px !important;
}

/* Text inputs */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: 8px !important;
  color: var(--gl-text) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
  transition: border-color 0.15s ease !important;
}
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
  border-color: var(--gl-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(253,206,49,0.15) !important;
}

/* Placeholder text */
.woocommerce-account .woocommerce-MyAccount-content input::placeholder {
  color: var(--gl-text-dim) !important;
}

/* Submit / Save buttons */
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .button:not(.wc-forward) {
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background 0.15s var(--gl-ease) !important;
}
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:not(.wc-forward):hover {
  background: #e5ba2c !important;
}

/* Fieldset legends (e.g., "Password change") */
.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
  color: var(--gl-text) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  border-bottom-color: var(--gl-border) !important;
  padding-bottom: 8px !important;
}

/* Helper/description text */
.woocommerce-account .woocommerce-MyAccount-content em,
.woocommerce-account .woocommerce-MyAccount-content .description {
  color: var(--gl-text-dim) !important;
  font-size: 13px !important;
}


/* ------------------------------------------------------------------ */
/* 5. ADDRESSES PAGE                                                   */
/* ------------------------------------------------------------------ */

/* Address card containers */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 20px !important;
}

/* Address titles */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-column__title {
  color: var(--gl-text) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
}

/* Address text */
.woocommerce-account .woocommerce-Addresses address {
  color: var(--gl-text-muted) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-style: normal !important;
}


/* ------------------------------------------------------------------ */
/* 6. STORE CREDIT & GIFT CARDS                                        */
/* ------------------------------------------------------------------ */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-store-credit {
  color: var(--gl-text) !important;
}
.woocommerce-account .woocommerce-MyAccount-store-credit .button {
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  border-radius: 8px !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
}

/* Store Credit / Gift Cards — "no coupons found" empty state */
.woocommerce-store-credit .woocommerce-MyAccount-content > p.woocommerce-info,
.woocommerce-store-credit .woocommerce-MyAccount-content > p.woocommerce-Message {
  display: block !important;
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  color: var(--gl-text-muted) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 14px !important;
  padding: 24px !important;
  text-align: center !important;
}

/* Hide WooCommerce info icon in store credit empty state */
.woocommerce-store-credit .woocommerce-info::before,
.woocommerce-store-credit .woocommerce-Message--info::before {
  display: none !important;
  content: none !important;
}


/* ------------------------------------------------------------------ */
/* 7. WOO NOTICES (cart added, errors, etc.)                           */
/* ------------------------------------------------------------------ */
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  color: var(--gl-text) !important;
  font-family: Lexend, system-ui, sans-serif !important;
}
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info a {
  color: var(--gl-gold) !important;
}

/* "View Cart" button in notice bar */
.woocommerce-account .woocommerce-notices-wrapper .button.wc-forward {
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
}


/* ------------------------------------------------------------------ */
/* 8. PAGE TITLE                                                       */
/* ------------------------------------------------------------------ */
.woocommerce-account .entry-title,
.woocommerce-account h1.entry-title {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 3.5vw, 32px) !important;
  letter-spacing: 0.06em !important;
  color: var(--gl-text) !important;
  text-transform: uppercase !important;
  text-align: center !important;
}


/* ------------------------------------------------------------------ */
/* 9. TABLES (order details, payment methods, etc.)                    */
/* ------------------------------------------------------------------ */
.woocommerce-account table {
  border-collapse: collapse !important;
}
.woocommerce-account table th {
  background: rgba(255,255,255,0.04) !important;
  color: var(--gl-text-muted) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--gl-border) !important;
}
.woocommerce-account table td {
  color: var(--gl-text) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--gl-border) !important;
}
.woocommerce-account table tbody tr:hover {
  background: rgba(255,255,255,0.02) !important;
}


/* ------------------------------------------------------------------ */
/* 10. ORDER DETAILS PAGE (view-order)                                 */
/* ------------------------------------------------------------------ */

/* ---- 10a. Hide barcode ---- */
.woocommerce-account .woocommerce-order-barcodes-container {
  display: none !important;
}

/* ---- 10b. Order status banner (original <p> hidden, replaced with pills) ---- */
/* Scoped to view-order pages only so store-credit/other pages' <p> aren't hidden */
.woocommerce-view-order .woocommerce-MyAccount-content > p:first-of-type {
  display: none !important;
}

/* ---- 10b-2. Order header pills container (injected by JS) ---- */
.gl-order-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

/* Order number — large prominent pill */
.gl-order-header .gl-pill--order {
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  padding: 10px 22px !important;
  border-radius: 50px !important;
  line-height: 1.2 !important;
}

/* Status pill — smaller */
.gl-order-header .gl-pill--status {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  line-height: 1.2 !important;
}

/* Date pill — smaller, muted */
.gl-order-header .gl-pill--date {
  background: rgba(255,255,255,0.12) !important;
  color: var(--gl-text-muted) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  line-height: 1.2 !important;
}

/* ---- 10b-2b. Check Order Status button ---- */
.gl-status-check-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,0.12) !important;
  color: var(--gl-text-muted) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.gl-status-check-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: var(--gl-text) !important;
}

/* ---- 10b-3. Drop-off card when moved outside order-details (by JS) ---- */
.gl-dropoff-card {
  background: rgba(253, 206, 49, 0.04) !important;
  border: 1px solid var(--gl-border-gold) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 14px 20px !important;
  margin-bottom: 20px !important;
}
.gl-dropoff-card dt {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--gl-text-muted) !important;
  margin-bottom: 4px !important;
}
.gl-dropoff-card dd {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 15px !important;
  color: var(--gl-text) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* ---- 10b-4. Shipping / Track order card (injected by JS) ---- */
.gl-shipping-card {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.gl-shipping-card .gl-shipping-info {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 14px !important;
  color: var(--gl-text-muted) !important;
}
.gl-shipping-card .gl-shipping-info strong {
  color: var(--gl-text) !important;
  font-weight: 600 !important;
}
.gl-shipping-card .gl-track-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  transition: background 0.15s var(--gl-ease) !important;
}
.gl-shipping-card .gl-track-btn:hover {
  background: #e5ba2c !important;
  opacity: 1 !important;
}

/* ---- Download Label link (secondary action in shipping card) ---- */
.gl-shipping-card .gl-label-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  color: var(--gl-text-muted) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 8px 14px !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: 8px !important;
  transition: border-color 0.15s var(--gl-ease), color 0.15s var(--gl-ease) !important;
}
.gl-shipping-card .gl-label-btn:hover {
  color: var(--gl-text) !important;
  border-color: rgba(255,255,255,0.15) !important;
  opacity: 1 !important;
}

/* ---- 10b-2. Scan Delivery Card ---- */
.gl-scan-card {
  background: #265b3b !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 18px 20px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Top row: info left, CTA right */
.gl-scan-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.gl-scan-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.gl-scan-badge-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.gl-scan-badge {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.03em !important;
  color: #ffffff !important;
}
.gl-scan-tag {
  display: inline-block !important;
  background: rgba(253,206,49,0.9) !important;
  color: #1b1b1b !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  line-height: 1.3 !important;
}
.gl-scan-date {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.6) !important;
}
.gl-scan-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  transition: background 0.15s var(--gl-ease) !important;
  flex-shrink: 0 !important;
}
.gl-scan-btn:hover {
  background: #e5ba2c !important;
  opacity: 1 !important;
}

/* Additional scans notice */
.gl-scan-notice {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.55) !important;
}

/* Multi-roll arrival note */
.gl-scan-rollnote {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.4) !important;
  line-height: 1.5 !important;
}

/* 30-day storage row */
.gl-scan-storage {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.gl-scan-storage-text {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.55) !important;
}

/* Expand/collapse trigger */
.gl-scan-expand-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.4) !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.15s ease !important;
}
.gl-scan-expand-btn:hover {
  color: rgba(255,255,255,0.65) !important;
}
.gl-scan-expand-btn::after {
  content: " \25BE" !important;
  font-size: 11px !important;
}
.gl-scan-expand-btn.gl-scan-expand-open::after {
  content: " \25B4" !important;
}

/* Expanded content */
.gl-scan-expand-content {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.5) !important;
  line-height: 1.6 !important;
  padding: 8px 0 2px !important;
}

/* ---- 10b-3. Pipeline Progress Row ---- */
.gl-pipeline-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  padding: 0 2px !important;
}
.gl-pipeline-step {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--gl-text-dim) !important;
}
.gl-pipeline-step.gl-pipeline-done {
  color: #2ecc71 !important;
}
.gl-pipeline-arrow {
  font-size: 12px !important;
  color: var(--gl-text-dim) !important;
}

/* ---- 10b-4. Film Arrival Card ---- */
.gl-arrival-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: var(--gl-card) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 18px 20px !important;
  margin-bottom: 20px !important;
}
.gl-arrival-card.gl-arrival-received {
  background: rgba(46,204,113,0.04) !important;
  border-color: rgba(46,204,113,0.15) !important;
}
.gl-arrival-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.gl-arrival-body {
  flex: 1 !important;
  min-width: 0 !important;
}
.gl-arrival-title {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--gl-text) !important;
  margin-bottom: 4px !important;
}
.gl-arrival-received .gl-arrival-title {
  color: #2ecc71 !important;
}
.gl-arrival-desc {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  color: var(--gl-text-muted) !important;
  line-height: 1.6 !important;
}

/* ---- 10b-5. Lab Notes Card (gold-tinted card) ---- */
.gl-labnotes-card {
  background: rgba(253,206,49,0.04) !important;
  border: 1px solid rgba(253,206,49,0.15) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
}
.gl-labnotes-header {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gl-gold) !important;
  margin-bottom: 12px !important;
}

/* Notes body text */
.gl-labnotes-text,
.woocommerce-account .gl-labnotes-text {
  margin: 0 !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 14px !important;
  color: var(--gl-text-muted) !important;
  line-height: 1.7 !important;
}

/* Sign-off — prominent attribution */
.gl-labnotes-signoff {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(253,206,49,0.10) !important;
}
.gl-labnotes-sig-line,
.woocommerce-account .gl-labnotes-sig-line {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: var(--gl-text-dim) !important;
}
.gl-labnotes-sig-name,
.woocommerce-account .gl-labnotes-sig-name {
  font-family: korolev, system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--gl-gold) !important;
  letter-spacing: 0.02em !important;
}
.gl-labnotes-sig-label,
.woocommerce-account .gl-labnotes-sig-label {
  display: inline-block !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 10px !important;
  color: var(--gl-text-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 2px !important;
}

/* Blank Roll Notice — appended inside lab notes card */
.gl-blank-notice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding: 14px 16px !important;
  background: rgba(231,76,60,0.08) !important;
  border-radius: 8px !important;
}
.gl-blank-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
  line-height: 1.3 !important;
}
.gl-blank-body {
  flex: 1 !important;
}
.gl-blank-title {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #e74c3c !important;
  margin-bottom: 4px !important;
}
.gl-blank-ids,
.woocommerce-account .gl-blank-ids {
  font-family: 'Space Mono', 'Courier New', monospace !important;
  font-size: 12px !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}
.gl-blank-credit {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  color: var(--gl-text-muted) !important;
  line-height: 1.5 !important;
}

/* ---- 10b-5. Order Summary ---- */
.gl-order-summary {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
}
.gl-order-summary-heading {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--gl-text) !important;
  margin-bottom: 4px !important;
}
.gl-order-summary-count {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--gl-gold) !important;
  margin-bottom: 12px !important;
}
.gl-order-summary-text {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 14px !important;
  color: var(--gl-text-muted) !important;
  line-height: 1.7 !important;
  margin: 0 0 4px 0 !important;
}
.gl-order-summary-text:last-child {
  margin-bottom: 0 !important;
}
.gl-order-summary-dellabel {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--gl-text-dim) !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}
.gl-order-summary-dellist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.gl-order-summary-dellist li {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  color: var(--gl-text-muted) !important;
  line-height: 1.5 !important;
  padding: 3px 0 !important;
  padding-left: 16px !important;
  position: relative !important;
}
.gl-order-summary-dellist li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  color: #2ecc71 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ---- 10b-6. Fast Pass Badge (compact, under pills) ---- */
.gl-fastpass {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(253,206,49,0.06) !important;
  border: 1px solid rgba(253,206,49,0.15) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  margin-bottom: 12px !important;
}
.gl-fastpass-icon {
  font-size: 16px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.gl-fastpass-desc {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: var(--gl-text-muted) !important;
  line-height: 1.4 !important;
}

/* ---- 10c. Order updates — card treatment ---- */
.woocommerce-account .woocommerce-MyAccount-content > h2 {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--gl-text) !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

.woocommerce-account .woocommerce-OrderUpdates {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 20px 22px !important;
  margin: 0 0 28px 0 !important;
  list-style: none !important;
}
.woocommerce-account .woocommerce-OrderUpdates li {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--gl-border) !important;
  list-style: none !important;
}
.woocommerce-account .woocommerce-OrderUpdates li:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.woocommerce-account .woocommerce-OrderUpdates li:first-child {
  padding-top: 0 !important;
}
.woocommerce-account .woocommerce-OrderUpdates .meta,
.woocommerce-account .woocommerce-OrderUpdates .woocommerce-OrderUpdate-meta {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--gl-text-muted) !important;
  margin-bottom: 4px !important;
}
.woocommerce-account .woocommerce-OrderUpdates .description,
.woocommerce-account .woocommerce-OrderUpdates .woocommerce-OrderUpdate-description {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 14px !important;
  color: var(--gl-text) !important;
  line-height: 1.5 !important;
}

/* ---- 10d. Order details section — card ---- */
.woocommerce-account .woocommerce-order-details {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius) !important;
  padding: 24px !important;
  margin-bottom: 28px !important;
}
.woocommerce-account .woocommerce-order-details .woocommerce-order-details__title {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--gl-text) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Order details table inside the card — no double border */
.woocommerce-account .woocommerce-order-details table {
  border: none !important;
}
.woocommerce-account .woocommerce-order-details table th,
.woocommerce-account .woocommerce-order-details table td {
  background: transparent !important;
}

/* THWEPO item meta styling */
.woocommerce-account .woocommerce-order-details .wc-item-meta {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 0 !important;
}
.woocommerce-account .woocommerce-order-details .wc-item-meta li {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  color: var(--gl-text-muted) !important;
  padding: 3px 0 !important;
  line-height: 1.5 !important;
}
.woocommerce-account .woocommerce-order-details .wc-item-meta li strong,
.woocommerce-account .woocommerce-order-details .wc-item-meta .wc-item-meta-label {
  color: var(--gl-text-dim) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Product name link in order details */
.woocommerce-account .woocommerce-order-details .product-name a {
  color: var(--gl-gold) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* Price column */
.woocommerce-account .woocommerce-order-details .product-total {
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--gl-text) !important;
}

/* Totals rows styling */
.woocommerce-account .woocommerce-order-details tfoot th {
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gl-text-muted) !important;
}
.woocommerce-account .woocommerce-order-details tfoot td {
  font-weight: 600 !important;
}

/* Tfoot amounts — default to white */
.woocommerce-account .woocommerce-order-details tfoot td .amount {
  color: var(--gl-text) !important;
}

/* Refund row only — red (JS adds .gl-row-refund) */
.woocommerce-account .woocommerce-order-details tfoot tr.gl-row-refund td,
.woocommerce-account .woocommerce-order-details tfoot tr.gl-row-refund td .amount {
  color: #e74c3c !important;
}

/* Strikethrough original total on refunded orders */
.woocommerce-account .woocommerce-order-details tfoot td del .amount {
  color: var(--gl-text-dim) !important;
}
.woocommerce-account .woocommerce-order-details tfoot td ins .amount {
  color: #e74c3c !important;
}

/* ---- 10e. Additional Order Details — hide header ---- */
.woocommerce-account .woocommerce-order-details > header {
  display: none !important;
}

/* Download Scans custom fields table — hidden (Airtable scan card replaces it) */
.woocommerce-account .woocommerce-order-details table.order-custom-fields {
  display: none !important;
}
.woocommerce-account .woocommerce-order-details table.order-custom-fields th {
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--gl-text-muted) !important;
}
.woocommerce-account .woocommerce-order-details table.order-custom-fields td {
  color: var(--gl-text-dim) !important;
  font-style: italic !important;
  font-size: 13px !important;
}

/* ---- 10f. Drop-off location DL — card treatment ---- */
.woocommerce-account .woocommerce-order-details > dl {
  background: rgba(253, 206, 49, 0.04) !important;
  border: 1px solid var(--gl-border-gold) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 16px 20px !important;
  margin-top: 16px !important;
}
.woocommerce-account .woocommerce-order-details > dl dt {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--gl-text-muted) !important;
  margin-bottom: 6px !important;
}
.woocommerce-account .woocommerce-order-details > dl dd {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 15px !important;
  color: var(--gl-text) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* ---- 10g. Customer details / addresses section ---- */
.woocommerce-account .woocommerce-customer-details {
  margin-top: 20px !important;
}
.woocommerce-account .woocommerce-customer-details .woocommerce-columns {
  display: flex !important;
  gap: 14px !important;
}
.woocommerce-account .woocommerce-customer-details .woocommerce-column {
  flex: 1 !important;
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 16px 18px !important;
}
.woocommerce-account .woocommerce-customer-details .woocommerce-column__title {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--gl-text-muted) !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
}
.woocommerce-account .woocommerce-customer-details address {
  color: var(--gl-text-muted) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email {
  color: var(--gl-text-dim) !important;
  font-size: 12px !important;
  margin-top: 6px !important;
}


/* ------------------------------------------------------------------ */
/* 10c. DROPBOX SCAN BROWSER                                           */
/* ------------------------------------------------------------------ */

/* ---- Browser wrapper ---- */
.gl-dbx-browser {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}

/* ---- Header: title + download all ---- */
.gl-dbx-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}
.gl-dbx-title {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gl-gold) !important;
}
.gl-dbx-dl-all {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background 0.15s var(--gl-ease), transform 0.15s var(--gl-ease) !important;
}
.gl-dbx-dl-all:hover {
  background: #ffe566 !important;
  transform: translateY(-1px) !important;
}

/* "Scanned by" attribution line below header */
.gl-dbx-scanned-by {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  color: var(--gl-text-dim) !important;
  margin-bottom: 16px !important;
  margin-top: -8px !important;
}
.gl-dbx-scanned-by strong {
  color: rgba(255,255,255,0.7) !important;
  font-weight: 600 !important;
}

/* ---- Roll list ---- */
.gl-dbx-rolls {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* ---- Roll section (collapsible) ---- */
.gl-dbx-roll {
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  overflow: hidden !important;
  transition: border-color 0.15s var(--gl-ease) !important;
}
.gl-dbx-roll.gl-dbx-roll-open {
  border-color: var(--gl-border-gold) !important;
}

/* ---- Roll header ---- */
.gl-dbx-roll-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  background: var(--gl-card-hover) !important;
  cursor: pointer !important;
  transition: background 0.12s var(--gl-ease) !important;
  user-select: none !important;
}
.gl-dbx-roll-header:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* Chevron */
.gl-dbx-chevron {
  font-size: 14px !important;
  color: var(--gl-text-dim) !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  text-align: center !important;
  transition: color 0.12s var(--gl-ease) !important;
}
.gl-dbx-roll-open .gl-dbx-chevron {
  color: var(--gl-gold) !important;
}

/* Roll name + meta */
.gl-dbx-roll-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
}
.gl-dbx-roll-name {
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--gl-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.gl-dbx-roll-meta {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--gl-gold) !important;
  background: rgba(253,206,49,0.10) !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Frame count badge */
.gl-dbx-roll-count {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 11px !important;
  color: var(--gl-text-dim) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* "Open in Dropbox" pill — inside expanded roll body */
.gl-dbx-open-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--gl-gold) !important;
  background: rgba(253,206,49,0.10) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
  transition: background 0.15s var(--gl-ease), color 0.15s var(--gl-ease) !important;
}
.gl-dbx-open-pill:hover {
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
}
.gl-dbx-open-pill svg {
  flex-shrink: 0 !important;
}

/* ---- Roll body (thumbnail grid container) ---- */
.gl-dbx-roll-body {
  padding: 16px !important;
  background: rgba(253,206,49,0.02) !important;
}

/* ---- Thumbnail grid ---- */
.gl-dbx-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 8px !important;
}

/* ---- Thumbnail cell ---- */
.gl-dbx-thumb {
  position: relative !important;
  aspect-ratio: 1 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid var(--gl-border) !important;
  transition: border-color 0.15s var(--gl-ease), transform 0.15s var(--gl-ease) !important;
}
.gl-dbx-thumb:hover {
  border-color: var(--gl-border-gold) !important;
  transform: scale(1.02) !important;
}

/* Thumbnail image */
.gl-dbx-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity 0.3s var(--gl-ease) !important;
}
.gl-dbx-thumb-img.gl-dbx-thumb-loaded {
  opacity: 1 !important;
}

/* Skeleton loading pulse */
.gl-dbx-thumb-skel {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,0.04) !important;
  animation: glDbxPulse 1.5s ease-in-out infinite !important;
}
@keyframes glDbxPulse {
  0%, 100% { background: rgba(255,255,255,0.04); }
  50% { background: rgba(255,255,255,0.08); }
}

/* Error state */
.gl-dbx-thumb.gl-dbx-thumb-err {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.gl-dbx-thumb.gl-dbx-thumb-err::after {
  content: "\26A0" !important;
  color: var(--gl-text-dim) !important;
  font-size: 18px !important;
}

/* Frame number overlay */
.gl-dbx-frame {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 20px 6px 4px !important;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.7) !important;
  pointer-events: none !important;
}

/* Per-thumbnail download button (hover reveal) */
.gl-dbx-thumb-dl {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(253,206,49,0.15) !important;
  color: var(--gl-gold) !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  opacity: 0 !important;
  transition: opacity 0.15s var(--gl-ease), background 0.15s var(--gl-ease), color 0.15s var(--gl-ease) !important;
}
.gl-dbx-thumb:hover .gl-dbx-thumb-dl {
  opacity: 1 !important;
}
.gl-dbx-thumb-dl:hover {
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
}

/* ---- Download toast (bottom-of-page notification) ---- */
.gl-dl-toast {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(80px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: var(--gl-card, #242424) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 14px 22px !important;
  z-index: 10000 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  opacity: 0 !important;
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), opacity 0.35s ease !important;
  min-width: 260px !important;
}
.gl-dl-toast-show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}
.gl-dl-toast-hide {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(20px) !important;
}

/* Spinner (rotating ring) */
.gl-dl-spinner {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border: 2.5px solid rgba(253,206,49,0.2) !important;
  border-top-color: var(--gl-gold, #FDCE31) !important;
  border-radius: 50% !important;
  animation: glDlSpin 0.7s linear infinite !important;
}
@keyframes glDlSpin {
  to { transform: rotate(360deg); }
}

/* Success / error icon replacing spinner */
.gl-dl-icon-done,
.gl-dl-icon-err {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Toast text */
.gl-dl-toast-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.gl-dl-toast-title {
  font-family: korolev, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #fff !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}
.gl-dl-toast-file {
  font-family: 'Lexend', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
}

/* ---- Skeleton loading for roll list ---- */
.gl-dbx-skeleton-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.gl-dbx-skeleton {
  height: 52px !important;
  border-radius: var(--gl-radius-sm) !important;
  background: rgba(255,255,255,0.04) !important;
  animation: glDbxPulse 1.5s ease-in-out infinite !important;
}

/* ---- Empty state ---- */
.gl-dbx-empty {
  text-align: center !important;
  padding: 24px 16px !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  color: var(--gl-text-dim) !important;
}


/* ------------------------------------------------------------------ */
/* 11. RESPONSIVE — TABLET & MOBILE                                    */
/* ------------------------------------------------------------------ */

/* ---- 11a. Tablet (≤ 900px) ---- */
@media (max-width: 940px) {

  /* Container overflow protection */
  .woocommerce-account .woocommerce {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Stack layout on tablet/mobile — kicks in before the sidebar gets too narrow */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: none !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* All direct children — constrain to container width */
  .woocommerce-account .woocommerce-MyAccount-content > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Cards and key elements — explicit containment */
  .woocommerce-account .woocommerce-order-details,
  .gl-shipping-card,
  .gl-scan-card,
  .gl-pipeline-row,
  .gl-order-header,
  .gl-dropoff-card,
  .gl-arrival-card,
  .gl-dbx-browser,
  .gl-labnotes-card,
  .gl-order-summary,
  .gl-fastpass,
  .woocommerce-account .woocommerce-OrderUpdates,
  .woocommerce-account .woocommerce-customer-details,
  .woocommerce-account .woocommerce-customer-details .woocommerce-columns {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tables must not exceed container */
  .woocommerce-account .woocommerce-order-details table {
    max-width: 100% !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
  }

  /* Smaller nav items */
  .woocommerce-account .woocommerce-MyAccount-navigation-link a {
    font-size: 14px !important;
    padding: 14px 16px !important;
    gap: 10px !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation-link a svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Nav 2-col grid — tighter gap */
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    gap: 0 !important;
    column-gap: 0 !important;
  }

  /* Pills — slightly smaller on tablet */
  .gl-order-header .gl-pill--order {
    font-size: 16px !important;
    padding: 8px 18px !important;
  }
  .gl-order-header .gl-pill--status,
  .gl-order-header .gl-pill--date,
  .gl-status-check-btn {
    font-size: 12px !important;
    padding: 7px 14px !important;
  }

  /* Shipping card — tighter padding */
  .gl-shipping-card {
    padding: 14px 16px !important;
  }

  /* Drop-off card — tighter */
  .gl-dropoff-card {
    padding: 12px 16px !important;
  }

  /* Order details card — less padding */
  .woocommerce-account .woocommerce-order-details {
    padding: 18px !important;
    border-radius: var(--gl-radius-sm) !important;
  }

  /* Table cells — tighter on tablet */
  .woocommerce-account table th,
  .woocommerce-account table td {
    padding: 10px 12px !important;
  }

  /* Address cards — reduce padding */
  .woocommerce-account .woocommerce-customer-details .woocommerce-column {
    padding: 14px 16px !important;
  }
}

/* ---- 11b. Small tablet / large phone (≤ 600px) ---- */
@media (max-width: 600px) {

  /* Pills row — wrap tighter */
  .gl-order-header {
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .gl-order-header .gl-pill--order {
    font-size: 15px !important;
    padding: 7px 16px !important;
  }
  .gl-order-header .gl-pill--status,
  .gl-order-header .gl-pill--date {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
  .gl-status-check-btn {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  /* Shipping card — stack text + button vertically */
  .gl-shipping-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 16px !important;
    gap: 10px !important;
  }
  .gl-shipping-card .gl-track-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }
  .gl-shipping-card .gl-label-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Scan card — tighter padding */
  .gl-scan-card {
    padding: 14px 16px !important;
    gap: 8px !important;
  }
  .gl-scan-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .gl-scan-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
  }
  .gl-scan-storage {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  /* Pipeline — tighter */
  .gl-pipeline-row {
    gap: 6px !important;
  }
  .gl-pipeline-step {
    font-size: 10px !important;
  }

  /* Film Arrival — tighter */
  .gl-arrival-card {
    padding: 14px 16px !important;
    gap: 10px !important;
  }
  .gl-arrival-title {
    font-size: 12px !important;
  }
  .gl-arrival-desc {
    font-size: 12px !important;
  }

  /* Lab Notes — tighter */
  .gl-labnotes-card {
    padding: 16px !important;
  }
  .gl-labnotes-text {
    font-size: 13px !important;
  }
  .gl-labnotes-sig-name {
    font-size: 14px !important;
  }
  .gl-blank-notice {
    padding: 12px 14px !important;
  }

  /* Order Summary — tighter */
  .gl-order-summary {
    padding: 16px !important;
  }
  .gl-order-summary-heading {
    font-size: 16px !important;
  }
  .gl-order-summary-text {
    font-size: 13px !important;
  }

  /* Fast Pass — tighter */
  .gl-fastpass {
    padding: 6px 12px !important;
    gap: 8px !important;
  }
  .gl-fastpass-desc {
    font-size: 11px !important;
  }

  /* Drop-off card — tighter */
  .gl-dropoff-card {
    padding: 12px 14px !important;
  }
  .gl-dropoff-card dt {
    font-size: 11px !important;
  }
  .gl-dropoff-card dd {
    font-size: 14px !important;
  }

  /* Order details card — minimal padding */
  .woocommerce-account .woocommerce-order-details {
    padding: 14px !important;
    margin-bottom: 20px !important;
  }
  .woocommerce-account .woocommerce-order-details .woocommerce-order-details__title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Order details table — make it a stacked block layout */
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details,
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details thead,
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tbody,
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot,
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tr,
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details th,
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details td {
    display: block !important;
    width: 100% !important;
  }

  /* Hide table header row on mobile */
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details thead {
    display: none !important;
  }

  /* Product rows — full width block, product name on top, price below */
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tbody tr {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--gl-border) !important;
  }
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tbody td {
    padding: 2px 0 !important;
    border-bottom: none !important;
  }
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tbody td.product-name {
    padding-bottom: 4px !important;
  }
  .woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tbody td.product-total {
    padding-top: 6px !important;
    font-size: 15px !important;
  }

  /* Product meta — tighter on mobile */
  .woocommerce-account .woocommerce-order-details .wc-item-meta li {
    font-size: 12px !important;
    padding: 2px 0 !important;
  }

  /* Totals rows — keep two-column with flexbox */
  .woocommerce-account .woocommerce-order-details tfoot tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--gl-border) !important;
  }
  .woocommerce-account .woocommerce-order-details tfoot tr:last-child {
    border-bottom: none !important;
  }
  .woocommerce-account .woocommerce-order-details tfoot th,
  .woocommerce-account .woocommerce-order-details tfoot td {
    padding: 0 !important;
    border-bottom: none !important;
    width: auto !important;
  }
  .woocommerce-account .woocommerce-order-details tfoot th {
    font-size: 11px !important;
  }
  .woocommerce-account .woocommerce-order-details tfoot td {
    text-align: right !important;
    font-size: 14px !important;
  }

  /* Address cards — STACK vertically */
  .woocommerce-account .woocommerce-customer-details .woocommerce-columns {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .woocommerce-account .woocommerce-customer-details .woocommerce-column {
    flex: none !important;
    width: 100% !important;
  }

  /* Section headings — smaller on mobile */
  .woocommerce-account .woocommerce-MyAccount-content > h2 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Order updates — tighter */
  .woocommerce-account .woocommerce-OrderUpdates {
    padding: 14px 16px !important;
  }

  /* Store Credit empty state */
  .woocommerce-store-credit .woocommerce-MyAccount-content > p.woocommerce-info,
  .woocommerce-store-credit .woocommerce-MyAccount-content > p.woocommerce-Message {
    padding: 18px !important;
    font-size: 13px !important;
  }

  /* Addresses page — stack edit-address cards */
  .woocommerce-account .woocommerce-Addresses {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    width: 100% !important;
    padding: 16px !important;
  }

  /* Forms — full width inputs */
  .woocommerce-account .woocommerce-MyAccount-content input[type="text"],
  .woocommerce-account .woocommerce-MyAccount-content input[type="email"],
  .woocommerce-account .woocommerce-MyAccount-content input[type="password"],
  .woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
  .woocommerce-account .woocommerce-MyAccount-content select {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  /* Submit buttons — full width on mobile */
  .woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
    width: 100% !important;
    padding: 14px 24px !important;
  }

  /* Dropbox browser — tighter */
  .gl-dbx-browser {
    padding: 16px !important;
    border-radius: var(--gl-radius-sm) !important;
  }
  .gl-dbx-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .gl-dbx-dl-all {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
  }
  .gl-dbx-roll-header {
    padding: 12px !important;
    gap: 8px !important;
  }
  .gl-dbx-roll-name {
    font-size: 13px !important;
  }
  .gl-dbx-roll-meta {
    display: none !important;
  }
  .gl-dbx-roll-count {
    font-size: 10px !important;
  }
  .gl-dbx-roll-body {
    padding: 10px !important;
  }
  .gl-dbx-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 6px !important;
  }
  .gl-dbx-thumb-dl {
    opacity: 1 !important; /* Always visible on touch */
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }
}

/* ---- 11c. Phone (≤ 480px) ---- */
@media (max-width: 480px) {

  /* Nav items — even tighter */
  .woocommerce-account .woocommerce-MyAccount-navigation-link a {
    font-size: 13px !important;
    padding: 12px 12px !important;
    gap: 8px !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation-link a svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Page title — smaller */
  .woocommerce-account .entry-title,
  .woocommerce-account h1.entry-title {
    font-size: 22px !important;
  }

  /* Pills — compact */
  .gl-order-header {
    gap: 6px !important;
  }
  .gl-order-header .gl-pill--order {
    font-size: 14px !important;
    padding: 6px 14px !important;
  }
  .gl-order-header .gl-pill--status,
  .gl-order-header .gl-pill--date {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
  .gl-status-check-btn {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }

  /* Order details card */
  .woocommerce-account .woocommerce-order-details {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  .woocommerce-account .woocommerce-order-details .woocommerce-order-details__title {
    font-size: 15px !important;
  }

  /* Product name link — smaller */
  .woocommerce-account .woocommerce-order-details .product-name a {
    font-size: 14px !important;
  }

  /* Address card titles — smaller */
  .woocommerce-account .woocommerce-customer-details .woocommerce-column__title {
    font-size: 11px !important;
  }
  .woocommerce-account .woocommerce-customer-details address {
    font-size: 12px !important;
  }
  .woocommerce-account .woocommerce-customer-details .woocommerce-column {
    padding: 12px 14px !important;
  }

  /* Drop-off + Shipping — minimal padding */
  .gl-shipping-card {
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }
  .gl-shipping-card .gl-shipping-info {
    font-size: 13px !important;
  }
  .gl-shipping-card .gl-track-btn {
    font-size: 12px !important;
    padding: 10px 14px !important;
  }
  .gl-dropoff-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
  .gl-scan-card {
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }
  .gl-scan-badge {
    font-size: 14px !important;
  }
  .gl-scan-tag {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
  .gl-scan-btn {
    font-size: 12px !important;
    padding: 10px 14px !important;
  }
  .gl-scan-rollnote,
  .gl-scan-storage-text,
  .gl-scan-expand-btn {
    font-size: 11px !important;
  }

  /* Film Arrival — compact */
  .gl-arrival-card {
    padding: 12px 14px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }
  .gl-arrival-icon {
    font-size: 18px !important;
  }
  .gl-arrival-title {
    font-size: 12px !important;
  }
  .gl-arrival-desc {
    font-size: 11px !important;
  }

  /* Lab Notes — compact */
  .gl-labnotes-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }
  .gl-labnotes-text {
    font-size: 12px !important;
  }
  .gl-labnotes-sig-name {
    font-size: 13px !important;
  }
  .gl-labnotes-sig-label {
    font-size: 9px !important;
  }
  .gl-blank-notice {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .gl-blank-title {
    font-size: 12px !important;
  }
  .gl-blank-ids,
  .gl-blank-credit {
    font-size: 11px !important;
  }

  /* Order Summary — compact */
  .gl-order-summary {
    padding: 14px !important;
    border-radius: 10px !important;
  }
  .gl-order-summary-heading {
    font-size: 15px !important;
  }
  .gl-order-summary-count {
    font-size: 11px !important;
  }
  .gl-order-summary-text {
    font-size: 12px !important;
  }

  /* Fast Pass — compact */
  .gl-fastpass {
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  .gl-fastpass-icon {
    font-size: 14px !important;
  }
  .gl-fastpass-desc {
    font-size: 10px !important;
  }

  /* Order Summary deliverables — compact */
  .gl-order-summary-dellist li {
    font-size: 11px !important;
  }

  /* Dropbox browser — compact */
  .gl-dbx-browser {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  .gl-dbx-title {
    font-size: 11px !important;
  }
  .gl-dbx-dl-all {
    font-size: 10px !important;
    padding: 8px 12px !important;
  }
  .gl-dbx-roll-header {
    padding: 10px 12px !important;
  }
  .gl-dbx-roll-name {
    font-size: 12px !important;
  }
  .gl-dbx-roll-body {
    padding: 8px !important;
  }
  .gl-dbx-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 4px !important;
  }
  .gl-dbx-frame {
    font-size: 9px !important;
    padding: 14px 4px 3px !important;
  }
}


/* ================================================================== */
/* 14. POS ORDERS — LOCATION PILLS & ORDERS LIST                     */
/* ================================================================== */

/* ---- Location pill (shared between orders list + detail view) ---- */
.gl-order-loc {
  display: inline-flex !important;
  align-items: center !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.gl-loc-online {
  background: rgba(253,206,49,0.12) !important;
  color: var(--gl-gold) !important;
}
.gl-loc-nj {
  background: rgba(46,204,113,0.12) !important;
  color: #2ecc71 !important;
}
.gl-loc-nyc {
  background: rgba(155,89,182,0.12) !important;
  color: #bb86fc !important;
}

/* ---- Order row ID (displayed above date in date cell) ---- */
.gl-order-row-id {
  display: block !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: var(--gl-text) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}

/* ---- Pill row under order link (location + category) ---- */
.gl-order-row-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

/* ---- Category pill (Services / Shop Order) ---- */
.gl-order-cat {
  display: inline-flex !important;
  align-items: center !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
.gl-cat-services {
  background: rgba(52,152,219,0.12) !important;
  color: #5dade2 !important;
}
.gl-cat-shop {
  background: rgba(255,255,255,0.08) !important;
  color: var(--gl-text-muted) !important;
}

/* ---- POS card in Astra grid ---- */
.gl-pos-row.ast-orders-table__row {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  color: var(--gl-text) !important;
  overflow: hidden !important;
}
.gl-pos-row .ast-orders-table__cell {
  color: var(--gl-text) !important;
  font-family: Lexend, system-ui, sans-serif !important;
}

/* POS number cell — hidden (same as all cards, unified design) */
.gl-pos-row .ast-orders-table__cell-order-number .gl-order-row-pills {
  margin-top: 0 !important;
}

/* Roll count badge next to order total */
.gl-pos-rollcount {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: var(--gl-text-dim) !important;
  font-weight: 400 !important;
}

/* POS View button — matches WooCommerce View button */
.gl-pos-view-btn {
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.15s var(--gl-ease) !important;
}
.gl-pos-view-btn:hover {
  background: #e5ba2c !important;
}


/* ================================================================== */
/* 15. POS ORDER DETAIL VIEW                                          */
/* ================================================================== */

/* ---- Back button ---- */
.gl-pos-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--gl-text-muted) !important;
  text-decoration: none !important;
  margin-bottom: 20px !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  transition: color 0.15s ease !important;
}
.gl-pos-back:hover {
  color: var(--gl-text) !important;
}

/* ---- Loading spinner ---- */
.gl-pos-loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 0 !important;
}
.gl-pos-loading::after {
  content: "" !important;
  width: 28px !important;
  height: 28px !important;
  border: 3px solid rgba(253,206,49,0.2) !important;
  border-top-color: var(--gl-gold) !important;
  border-radius: 50% !important;
  animation: gl-spin 0.6s linear infinite !important;
}
@keyframes gl-spin {
  to { transform: rotate(360deg); }
}

/* ---- Empty state ---- */
.gl-pos-empty {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 15px !important;
  color: var(--gl-text-muted) !important;
  text-align: center !important;
  padding: 40px 20px !important;
}


/* ================================================================== */
/* 16. POS ROLL BREAKDOWN CARD                                        */
/* ================================================================== */

.gl-pos-rolls-card {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 22px !important;
  margin-bottom: 20px !important;
}
.gl-pos-rolls-heading {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gl-text-muted) !important;
  margin-bottom: 16px !important;
}

/* Individual roll */
.gl-pos-roll {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  margin-bottom: 10px !important;
  transition: background 0.15s ease !important;
}
.gl-pos-roll:last-child {
  margin-bottom: 0 !important;
}
.gl-pos-roll:hover {
  background: rgba(255,255,255,0.05) !important;
}

/* Roll header row — ID badge + film description + service tag */
.gl-pos-roll-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

/* Roll ID badge */
.gl-pos-roll-id {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  line-height: 1.3 !important;
}

/* Film type description */
.gl-pos-roll-film {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--gl-text) !important;
}

/* Service tag (Develop & Scan, etc.) */
.gl-pos-roll-svc {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255,255,255,0.08) !important;
  color: var(--gl-text-muted) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  line-height: 1.3 !important;
}

/* Uploaded / Pending pill on YOUR ROLLS card */
.gl-pos-roll-uploaded {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(76, 175, 80, 0.18) !important;
  color: #66bb6a !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  line-height: 1.3 !important;
  margin-left: 8px !important;
}
.gl-pos-roll-uploaded.gl-pos-roll-pending {
  background: rgba(255, 193, 7, 0.15) !important;
  color: #ffca28 !important;
}
.gl-pos-roll-uploaded.gl-pos-roll-blank {
  background: rgba(239, 83, 80, 0.15) !important;
  color: #ef9a9a !important;
}

/* Roll details line (GelForm, scan size, handling, etc.) */
.gl-pos-roll-details {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: var(--gl-text-dim) !important;
  line-height: 1.6 !important;
  margin-top: 4px !important;
}

/* Roll notes */
.gl-pos-roll-notes {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: var(--gl-text-muted) !important;
  font-style: italic !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid var(--gl-border) !important;
  line-height: 1.5 !important;
}

/* Generic roll badge (fallback mode — "Roll 1", "Roll 2", etc.) */
.gl-pos-roll-generic {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--gl-text) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  line-height: 1.3 !important;
}

/* Process-type ROLL IDs card (inside YOUR ROLLS card, fallback mode) */
.gl-pos-process-ids-card {
  margin-top: 20px !important;
  padding: 16px 20px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
}
.gl-pos-process-ids-heading {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gl-text-muted) !important;
  margin-bottom: 12px !important;
}
.gl-pos-process-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.gl-pos-process-group:last-child {
  margin-bottom: 0 !important;
}
.gl-pos-process-label {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--gl-text-dim) !important;
  min-width: 48px !important;
}
.gl-pos-process-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.gl-pos-process-pill {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--gl-gold) !important;
  color: var(--gl-dark) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  line-height: 1.3 !important;
}


/* ================================================================== */
/* 17. POS INVOICE / ORDER BREAKDOWN                                  */
/* ================================================================== */

.gl-pos-invoice {
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: 22px !important;
  margin-bottom: 20px !important;
}
.gl-pos-invoice-heading {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gl-text-muted) !important;
  margin-bottom: 16px !important;
}

/* Invoice row */
.gl-pos-invoice-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--gl-border) !important;
}
.gl-pos-invoice-row:last-of-type {
  border-bottom: none !important;
}

/* Description column */
.gl-pos-invoice-desc {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 14px !important;
  color: var(--gl-text) !important;
  font-weight: 500 !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 16px !important;
}

/* Price column */
.gl-pos-invoice-price {
  font-family: korolev, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gl-text) !important;
  white-space: nowrap !important;
}

/* Sub-detail line (handling, turnaround, etc.) */
.gl-pos-invoice-sub {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 11px !important;
  color: var(--gl-text-dim) !important;
  padding: 2px 0 8px 2px !important;
  letter-spacing: 0.01em !important;
}

/* Total row — gold emphasis */
.gl-pos-invoice-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 14px 0 0 !important;
  margin-top: 8px !important;
  border-top: 2px solid rgba(253,206,49,0.2) !important;
}
.gl-pos-invoice-total .gl-pos-invoice-desc {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--gl-text) !important;
}
.gl-pos-invoice-total .gl-pos-invoice-price {
  font-size: 18px !important;
  color: var(--gl-gold) !important;
}


/* ================================================================== */
/* 18. POS ORDER META (pickup/delivery, address, total)               */
/* ================================================================== */

.gl-pos-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
.gl-pos-meta-item {
  flex: 1 1 auto !important;
  min-width: 140px !important;
  background: var(--gl-card) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.gl-pos-meta-label {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gl-text-dim) !important;
}
.gl-pos-meta-value {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--gl-text) !important;
}

/* Total value — gold emphasis */
.gl-pos-total {
  color: var(--gl-gold) !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}


/* ================================================================== */
/* 19. POS RESPONSIVE — 940px                                         */
/* ================================================================== */

@media (max-width: 940px) {
  .gl-pos-rolls-card,
  .gl-pos-invoice,
  .gl-pos-meta {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ================================================================== */
/* 20. POS RESPONSIVE — 600px                                         */
/* ================================================================== */

@media (max-width: 600px) {
  /* Location + category pills — slightly smaller */
  .gl-order-loc,
  .gl-order-cat {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
  .gl-order-row-id {
    font-size: 13px !important;
  }

  /* Back button */
  .gl-pos-back {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }

  /* Roll breakdown */
  .gl-pos-rolls-card {
    padding: 16px !important;
    border-radius: 10px !important;
  }
  .gl-pos-roll {
    padding: 12px 14px !important;
    border-radius: 8px !important;
  }
  .gl-pos-roll-header {
    gap: 8px !important;
  }
  .gl-pos-roll-id {
    font-size: 12px !important;
    padding: 3px 10px !important;
  }
  .gl-pos-roll-film {
    font-size: 13px !important;
  }
  .gl-pos-roll-svc {
    font-size: 9px !important;
  }
  .gl-pos-roll-details {
    font-size: 11px !important;
  }
  .gl-pos-roll-notes {
    font-size: 11px !important;
  }
  .gl-pos-roll-generic {
    font-size: 12px !important;
    padding: 3px 10px !important;
  }
  .gl-pos-process-ids-card {
    padding: 12px 14px !important;
  }
  .gl-pos-process-pill {
    font-size: 11px !important;
    padding: 2px 8px !important;
  }

  /* Invoice */
  .gl-pos-invoice {
    padding: 16px !important;
    border-radius: 10px !important;
  }
  .gl-pos-invoice-desc {
    font-size: 13px !important;
  }
  .gl-pos-invoice-price {
    font-size: 13px !important;
  }
  .gl-pos-invoice-total .gl-pos-invoice-price {
    font-size: 16px !important;
  }

  /* Meta cards — stack */
  .gl-pos-meta {
    flex-direction: column !important;
  }
  .gl-pos-meta-item {
    min-width: 0 !important;
  }
}


/* ================================================================== */
/* 21. POS RESPONSIVE — 480px                                         */
/* ================================================================== */

@media (max-width: 480px) {
  .gl-order-row-id {
    font-size: 12px !important;
  }
  .gl-order-row-pills {
    gap: 4px !important;
  }
  .gl-pos-rolls-card {
    padding: 12px !important;
  }
  .gl-pos-roll {
    padding: 10px 12px !important;
  }
  .gl-pos-roll-id {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  .gl-pos-roll-film {
    font-size: 12px !important;
  }
  .gl-pos-roll-details {
    font-size: 10px !important;
  }
  .gl-pos-roll-generic {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  .gl-pos-process-ids-card {
    padding: 10px 12px !important;
  }
  .gl-pos-process-pill {
    font-size: 10px !important;
  }

  .gl-pos-invoice {
    padding: 12px !important;
  }
  .gl-pos-invoice-desc {
    font-size: 12px !important;
  }
  .gl-pos-invoice-price {
    font-size: 12px !important;
  }
  .gl-pos-invoice-total .gl-pos-invoice-desc {
    font-size: 13px !important;
  }
  .gl-pos-invoice-total .gl-pos-invoice-price {
    font-size: 15px !important;
  }

  .gl-pos-meta-item {
    padding: 12px 14px !important;
  }
  .gl-pos-meta-value {
    font-size: 14px !important;
  }
  .gl-pos-total {
    font-size: 16px !important;
  }
}