/**
 * v101-additions.css
 *
 * Changes:
 *  1. Hide right-side menu dots button when any off-canvas panel is open
 *  2. Ensure menu dots button is always normal (non-pill) size
 *  3. Suppress WooCommerce "Shop" page title heading
 *  4. Keep cb-link-closing panels visible during reverse animation
 */

/* ── 1. HIDE RIGHT MENU BUTTON WHILE A PANEL IS OPEN ──────────────────
 *
 * menu.js adds body.cb-offcanvas-open whenever openPanel() fires.
 * This hides the dots button with a quick fade so it doesn't float
 * awkwardly over the open panel.
 * ─────────────────────────────────────────────────────────────────── */
body.cb-offcanvas-open .menu-button.cb-menu-dots {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

/* Restore smoothly after panel closes */
.menu-button.cb-menu-dots {
  transition: opacity 0.25s ease;
}

/* ── 2. MENU DOTS BUTTON — CORRECT SIZE ────────────────────────────── */
/* Prevent it from stretching to a large pill */
.menu-button.cb-menu-dots {
  min-width: 44px;
  max-width: 52px;
  min-height: 36px;
  max-height: 40px;
  padding: 8px 10px;
  width: auto;
  height: auto;
  border-radius: 4px;       /* square-ish, not pill */
}

/* ── 3. HIDE WOOCOMMERCE "SHOP" PAGE TITLE ─────────────────────────── */
/* Belt-and-suspenders: the PHP filter woocommerce_show_page_title is
   also added in inc/woocommerce-hooks.php, but this catches any
   residual rendering from third-party plugins or block themes. */
.woocommerce-products-header__title.page-title,
.woocommerce-page h1.woocommerce-products-header__title,
.woocommerce-products-header {
  display: none !important;
}

/* ── 4. KEEP PANEL VISIBLE DURING CLOSE ANIMATION ──────────────────── */
/* While cb-link-closing is active the panel must stay fully open
   (transform:translateX(0)) so links have space to slide out.
   The .open class is still present at this point, so this reinforces it. */
.cb-offcanvas.open.cb-link-closing {
  transform: translateX(0) !important;
  visibility: visible !important;
}

/* ── 5. WOOCOMMERCE MY ACCOUNT — MATCH THEME FONT ─────────────────── */
.woocommerce-account .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
}

/* WooCommerce notices */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  border-top-color: var(--cb-hamburger-pink);
}

/* WooCommerce buttons match theme style */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--cb-hamburger-pink);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  border-radius: 3px;
  border: none;
  padding: 8px 18px;
  transition: background 0.2s, opacity 0.2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--cb-menu-green);
  color: var(--cb-right-link-color, #333);
  opacity: 1;
}