/* Design tokens referenced by the legacy mu-plugin CSS (var(--font) etc.). Copied verbatim from Additional CSS. */
#at-wc-header-shell { font-family: var(--font); }
:root { --bg-deep: #07111a; --bg-dark: #0d1a24; --bg-card: #0f1e28; --accent: #2eb8a6; --accent-glow: rgba(46,184,166,0.12); --accent-border: rgba(46,184,166,0.18); --text-light: #d4e8e1; --text-muted: #6b8a8a; --text-dim: #3d5560; --font: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif; }
/* Generic WooCommerce rules the Midnight pages rely on (equal-height product cards, variation selects, size helper, notice colour).
   Carried into the theme so the design does not depend on the Customizer "Additional CSS". Rules copied verbatim. */
ul.products.columns-4, .woocommerce ul.products, .woocommerce-page ul.products, .woocommerce ul.products.columns-4, .woocommerce-page ul.products.columns-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; grid-auto-flow: row !important; gap: 20px !important; justify-content: start !important; place-items: stretch !important; float: none !important; clear: both !important; width: 100% !important; margin-left: 0px !important; padding-left: 0px !important; }
ul.products.columns-4 li.product, .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { height: 100% !important; }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link, .woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; }
.woocommerce ul.products li.product a.button, .woocommerce ul.products li.product button.button { margin-top: auto !important; align-self: stretch !important; }
.woocommerce ul.products li.product a.button, .woocommerce ul.products li.product button.button { display: block !important; width: 100% !important; box-sizing: border-box !important; background: rgb(46, 184, 166) !important; color: rgb(255, 255, 255) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; border-radius: 2px !important; padding: 12px 16px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transition: background 0.2s, opacity 0.2s !important; margin-top: 8px !important; outline: none !important; box-shadow: none !important; }
.variations_form .variations select, .variations_form select, .woocommerce div.product form.cart .variations select, select[name*="attribute_"] { background: rgb(15, 30, 40) !important; color: rgb(212, 232, 225) !important; border: 1px solid rgba(46, 184, 166, 0.35) !important; border-radius: 4px !important; padding: 10px 36px 10px 14px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; appearance: none !important; outline: none !important; cursor: pointer !important; min-width: 180px !important; width: 100% !important; max-width: 320px !important; }
.variations_form .variations select:focus, .woocommerce div.product form.cart .variations select:focus, select[name*="attribute_"]:focus { border-color: rgb(46, 184, 166) !important; box-shadow: rgba(46, 184, 166, 0.15) 0px 0px 0px 2px !important; }
.variations_form .variations select option, select[name*="attribute_"] option { background: rgb(15, 30, 40) !important; color: rgb(212, 232, 225) !important; }
.at-size-helper { display: block !important; font-size: 10.5px !important; color: rgb(107, 138, 138) !important; letter-spacing: 0.06em !important; font-style: italic !important; margin-top: 5px !important; }
.variations_form .variations select, .variations_form select, .woocommerce div.product form.cart .variations select, select[name*="attribute_"] { border-width: 2px !important; box-shadow: rgba(0, 200, 232, 0.18) 0px 0px 0px 1px !important; }
body.woocommerce .woocommerce-notices-wrapper, body.woocommerce-page .woocommerce-notices-wrapper { color: rgb(212, 232, 225); }

/* Shop sort control (copied verbatim from Additional CSS). */
.woocommerce-ordering select.orderby {
  background: #07111a !important; color: #ffffff !important;
  border: 1px solid rgba(46,184,166,0.28) !important;
  border-radius: 4px !important; padding: 8px 32px 8px 14px !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  -webkit-appearance: none !important; appearance: none !important;
  cursor: pointer !important; outline: none !important;
}
.woocommerce-ordering select.orderby option { background: #07111a !important; color: #ffffff !important; }
/* ── 3. SORT DROPDOWN — height +4px, brighter border ─────── */
body.woocommerce-shop .woocommerce-ordering {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.woocommerce-shop .woocommerce-ordering::before {
  content: "SORT";
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #6b8a8a !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
body.woocommerce-shop .woocommerce-ordering select.orderby {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-color: rgba(46, 184, 166, 0.55) !important;
  vertical-align: middle !important;
}
/* ── 4. SORT LABEL → "SORT PRODUCTS" ───────────────────── */
body.woocommerce-shop .woocommerce-ordering::before {
  content: "SORT PRODUCTS" !important;
}
/* ══════════════════════════════════════════════════════════
   SHOP CRO BATCH 6  (shop-cro-batch6)
   ══════════════════════════════════════════════════════════ */

/* ── 1. REMOVE SORT PRODUCTS LABEL (keep dropdown only) ─── */
body.woocommerce-shop .woocommerce-ordering {
  gap: 0 !important;
}
body.woocommerce-shop .woocommerce-ordering::before {
  display: none !important;
  content: "" !important;
}