.lantern-360-video{cursor:grab;user-select:none}
.lantern-360-video.is-dragging{cursor:grabbing}

/* Two-column product layout with custom ordering */
@media (min-width: 921px){
  .single-product .product{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:start;
  }
  .single-product .product .summary{
    max-width:none !important;
    width:100% !important;
  }
}

/* Gallery visuals */
.ml360-hero{
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  position:relative;
}
.ml360-hero img,
.ml360-hero video{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
}
.ml360-hero video{touch-action:none}

/* Thumbs */
.ml360-thumbs{
  margin-top:.75rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.ml360-thumb-btn{
  appearance:none;
  border:1px solid #e3e3e3;
  background:#fff;
  width:80px;
  height:80px;
  border-radius:8px;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}
.ml360-thumb-btn img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ml360-thumb-btn.is-active{outline:2px solid rgba(0,0,0,.25)}
.ml360-thumb-btn:focus{outline:none}
.ml360-thumb-btn:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.35)}

.ml360-thumb-badge{
  position:absolute; right:6px; bottom:4px;
  font-size:18px; line-height:1;
  background:rgba(0,0,0,.6); color:#fff;
  padding:2px 6px; border-radius:6px;
}

/* Centered play icon for video thumbs */
.ml360-icon-play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:1;
}
.ml360-icon-play svg{display:block}
.ml360-icon-play circle{fill:rgba(0,0,0,.55)}
.ml360-icon-play polygon{fill:#fff}

/* Tag label bottom-left */
.ml360-thumb-label{
  position:absolute;
  left:6px; bottom:4px;
  z-index:2;
  font-size:11px;
  line-height:1;
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:2px 6px;
  border-radius:6px;
  pointer-events:none;
}

/* Avoid Woo placeholder bleed-through */
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder{display:none}

/* Product grid images (classic + blocks) */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .wp-post-image,
.wc-block-grid__product-image img,
.wc-block-components-product-image img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

/* External buttons */
.ml-product-summary-description,
.ml-variable-summary-details{
  margin:1rem 0;
}
.ml-product-summary-description > :last-child,
.ml-variable-summary-details > :last-child{
  margin-bottom:0;
}
.ml-variable-summary-details:empty{
  display:none;
}
.ml-variable-summary-active .single_variation_wrap .woocommerce-variation-description{
  display:none;
}
a.external-btn{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  column-gap:14px;
  min-height:48px;
  padding:12px 18px;
  line-height:1;
}
a.external-btn::before{
  content:"";
  width:var(--ml-icon-size, 24px);
  height:var(--ml-icon-size, 24px);
  flex:0 0 var(--ml-icon-size, 24px);
  display:inline-block;
  background-color:currentColor;
  -webkit-mask:var(--ml-icon) no-repeat center / contain;
          mask:var(--ml-icon) no-repeat center / contain;
}

/* Per-site icons */
a.external-btn.site-mw{
  --ml-icon:url("../../../../uploads/sitelogos/site_mw_128.png");
  --ml-bg:#ffffff;
  --ml-fg:#1a1a1a;
}
a.external-btn.site-pat{
  --ml-icon:url("../../../../uploads/sitelogos/site_pat.svg");
  --ml-bg:#ffffff;
  --ml-fg:#1a1a1a;
}
a.external-btn.external-dl{
  --ml-icon:url("../../../../uploads/brand-icons/download.svg");
  --ml-bg:#eef7ff;
  --ml-fg:#0b5fff;
}

/* Bundle list */
.ml-bundle-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:12px 0 0;
}
.ml-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  background:#fff;
  text-decoration:none;
}
.ml-row:hover{box-shadow:0 2px 10px rgba(0,0,0,.06)}
.ml-row-thumb{flex:0 0 96px; display:block}
.ml-row-thumb img{
  width:96px;
  height:auto;
  display:block;
  border-radius:8px;
  background:#f5f5f7;
}
.ml-row-title{
  flex:1;
  font-size:1.05rem;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.02em;
}
/* Mobile: single column for bundles */
@media (max-width: 530px){
  .ml-bundle-list{
    grid-template-columns:1fr;
  }
}
/* Kill Astra’s on-card “Buy product” bag icon */
body.woocommerce ul.products li.product a.ast-on-card-button,
body .ast-woo-product-action a.ast-on-card-button,
body .ast-card-action a.ast-on-card-button{
  display:none !important;
}

/* =====================================================
   Catalogue / Product Archive Header Layout
   ===================================================== */

.woocommerce .woocommerce-products-header{
  display:grid;
  grid-template-columns:1fr 340px;
  column-gap:24px;
  align-items:end;
}
.woocommerce .woocommerce-products-header__title{
  grid-column:1;
  margin:0;
}
.woocommerce .woocommerce-products-header .ml-archive-search{
  grid-column:2;
}

/* Search form styling (input + button + × aligned) */
.woocommerce .woocommerce-products-header .woocommerce-product-search{
  display:flex;
  align-items:center;
  gap:.3em;
  margin:0;
}
.woocommerce .woocommerce-products-header .search-field{
  height:44px;
  padding:0 14px;
  margin:0;
}
.woocommerce .woocommerce-products-header button[type="submit"]{
  height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  min-height:0 !important;
  margin:0;
}
.woocommerce .woocommerce-products-header .clear-search-js{
  display:inline-flex;
  align-items:center;
  height:44px;
  line-height:1;
  margin-left:.5rem;
  font-size:1.4em;
  text-decoration:none;
  color:inherit;
  opacity:.65;
}
.woocommerce .woocommerce-products-header .clear-search-js:hover{opacity:1}

/* Mobile: stack */
@media (max-width: 768px){
  .woocommerce .woocommerce-products-header{
    grid-template-columns:1fr;
    row-gap:12px;
  }
  .woocommerce .woocommerce-products-header .ml-archive-search{
    grid-column:1;
  }
}

/*
 * Barn2 starts catalogue requests before the visitor reaches the end of the
 * grid. Keep its blocking loader hidden during that prefetch; if the visitor
 * catches up to the pagination point, JavaScript removes this class and Barn2's
 * normal loader becomes visible.
 */
body.wcf-is-loading.ml-catalogue-prefetching {
  overflow: auto;
  touch-action: auto;
}

body.wcf-is-loading.ml-catalogue-prefetching #wcf-loading-state {
  display: none;
}

/*
 * Back-navigation restoration replays Barn2's real infinite-scroll requests so
 * its internal page state remains correct. Avoid showing the intermediate grid
 * positions before returning the visitor to the saved location.
 */
body.ml-catalogue-restoring,
body.wcf-is-loading.ml-catalogue-restoring {
  overflow-y: scroll;
  touch-action: none;
}

html.ml-catalogue-restoring {
  scroll-behavior: auto !important;
}

body.ml-catalogue-restoring .wcf-products-loop {
  visibility: hidden;
}

body.ml-catalogue-restoring::after {
  position: fixed;
  z-index: 99999;
  top: 50%;
  left: 50%;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
  color: #222;
  content: "Loading…";
  transform: translate(-50%, -50%);
}

/*
 * When a saved catalogue snapshot is available, show it immediately while the
 * canonical Barn2 loop catches up off-screen. The snapshot contains ordinary
 * product links and URL-based images only; Barn2's live loop remains the source
 * of truth and replaces it as soon as pagination state is restored.
 */
body.ml-catalogue-restoring.ml-catalogue-snapshot-ready,
body.wcf-is-loading.ml-catalogue-restoring.ml-catalogue-snapshot-ready {
  overflow-y: scroll;
  touch-action: auto;
}

body.ml-catalogue-restoring.ml-catalogue-snapshot-ready::after {
  display: none;
}

body.wcf-is-loading.ml-catalogue-restoring.ml-catalogue-snapshot-ready
  #wcf-loading-state {
  display: none;
}

body.ml-catalogue-restoring.ml-catalogue-snapshot-ready .wcf-products-loop {
  display: none;
}

body.ml-catalogue-restoring .ml-catalogue-restore-snapshot {
  visibility: visible;
}

body.ml-catalogue-restoring.ml-catalogue-snapshot-ready
  .ml-catalogue-restore-pagination {
  position: fixed;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  min-height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.5rem;
}

.woocommerce ul.products li.product .ml-access-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-self: end;
  max-width: 100%;
  padding: 0.18rem 0.42rem;
  border: 1px solid currentColor;
  border-radius: 0.2rem;
  background: transparent;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.035em;
  text-align: center;
  text-transform: uppercase;
}

.woocommerce ul.products li.product .ast-woo-product-category {
  align-self: center;
  margin-bottom: 0 !important;
  line-height: 1.1;
}

.woocommerce ul.products li.product .ast-loop-product__link,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
}

.woocommerce ul.products li.product .ml-designer-attribution {
  align-self: center;
  justify-self: end;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
  overflow-wrap: anywhere;
  color: inherit;
  letter-spacing: normal;
  text-decoration: none;
}

.woocommerce ul.products li.product .ml-designer-attribution:hover,
.woocommerce ul.products li.product .ml-designer-attribution:focus-visible {
  text-decoration: underline;
}

.ml-designer-notice {
  margin: 1rem 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
  font-size: 0.85em;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ml-designer-notice .ml-designer-credit {
  font-size: 1em;
  margin-bottom: 0.5rem;
}

.ml-designer-notice p:last-child {
  margin-bottom: 0;
}

.woocommerce ul.products li.product .ml-access-badge--member {
  color: #50627a;
}

.woocommerce ul.products li.product .ml-access-badge--supporter {
  color: #487a21;
}

.woocommerce ul.products li.product .ml-access-badge--seller {
  color: #a86600;
}

.single-product .wpcme-urls,
.single-product .ml-protected-download {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.single-product .ml-access-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.24rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 0.2rem;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.single-product .ml-access-badge--member {
  color: #50627a;
}

.single-product .ml-access-badge--supporter {
  color: #487a21;
}

.single-product .ml-access-badge--seller {
  color: #a86600;
}

.single-product .ml-access-message {
  clear: both;
  margin: 0.65rem 0 1rem;
  max-width: 42rem;
  color: var(--ast-global-color-3);
  font-size: 0.95rem;
  line-height: 1.5;
}

.single-product .ml-seller-early-access-notice {
  border-left: 3px solid #a86600;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
}

.single-product .ml-seller-early-access-notice p {
  margin: 0;
}

.single-product .ml-access-message a {
  color: var(--ast-global-color-0);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.single-product .ml-access-message--no-download {
  font-style: italic;
}

.single-product .ml-protected-download-prompt {
  clear: both;
  margin: 0.75rem 0 1rem;
}

.single-product .ml-protected-download-prompt > p {
  margin: 0 0 0.55rem;
}

@media (max-width: 544px) {
  .woocommerce ul.products li.product .ml-access-badge {
    font-size: 0.6rem;
  }
}

/* Product search results: FORCE stack title then search */
body.search.post-type-archive-product header.woocommerce-products-header{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-areas:
    "title"
    "search";
  row-gap:16px !important;
}
body.search.post-type-archive-product header.woocommerce-products-header .woocommerce-products-header__title{
  grid-area:title;
}
body.search.post-type-archive-product header.woocommerce-products-header .ml-archive-search{
  grid-area:search;
  grid-column:1 / -1 !important;
  justify-self:start !important;
  width:100% !important;
}

/* Remove Astra's large top margin on all Woo product listing pages */

body.post-type-archive-product #primary,
body.woocommerce-shop #primary,
body.search.post-type-archive-product #primary,
body.tax-product_cat #primary {
  margin-top: 1.8em !important;
  margin-bottom: 0 !important;
}


/* Single product pages: control Astra's big #primary margin */
body.single-product #primary{
  margin-top:2rem !important;
  margin-bottom:0 !important;
}

/* Insert Editor: inherit the active Astra global palette rather than carrying
   a parallel site colour scheme in its compiled bundle. */
.ml-insert-editor {
  /* These locally hosted faces are enqueued by ml-self-hosted-fonts.php.
     Keep the editor's font ownership semantic, like its Astra palette. */
  --ml-font-body: "Work Sans", sans-serif;
  --ml-font-display: "Belleza", sans-serif;
  --ml-text: var(--ast-global-color-3);
  --ml-text-heading: var(--ast-global-color-2);
  --ml-text-muted: var(--ast-global-color-3);
  --ml-accent: var(--ast-global-color-0);
  --ml-accent-hover: var(--ast-global-color-1);
  --ml-surface: var(--ast-global-color-5);
  --ml-surface-soft: var(--ast-global-color-4);
  --ml-page: var(--ast-global-color-5);
  --ml-border: var(--ast-global-color-6);
  --ml-border-strong: var(--ast-global-color-6);
  --ml-focus-ring: var(--ast-global-color-0);
  /* Match the site's Astra/WooCommerce control contracts. The compiled editor
     consumes these semantic dimensions in LocalWP and standalone fallback. */
  --ml-select-height: 40px;
  --ml-select-radius: 3px;
  --ml-select-padding-block: 8px;
  --ml-select-padding-inline: 12.8px;
  --ml-button-radius: 8px;
  --ml-button-padding-block: 0;
  --ml-button-padding-inline: 18px;
  --ml-button-border-width: 2px;
  --ml-action-font-size: 0.933333rem;
  --ml-action-line-height: 1;
  --ml-action-font-weight: 600;
  --ml-preview-uploaded: #7c8794;
  --ml-preview-final: var(--ast-global-color-0);
  --ml-preview-frame: var(--ast-global-color-8);
}

/* Insert Editor: the editor is a focused tool beneath the normal Astra
   header. Its page-specific layout owns the remaining viewport without
   changing the header or footer on other routes. */
body.ml-insert-editor-page {
  overflow: hidden;
}

body.ml-insert-editor-page #page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
  min-height: 0;
}

body.ml-insert-editor-page #content,
body.ml-insert-editor-page #content > .ast-container,
body.ml-insert-editor-page #primary,
body.ml-insert-editor-page #main,
body.ml-insert-editor-page .ast-article-single,
body.ml-insert-editor-page .entry-content,
body.ml-insert-editor-page .ml-insert-editor,
body.ml-insert-editor-page [data-ml-insert-editor-mount] {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

body.ml-insert-editor-page #content > .ast-container {
  max-width: none;
  padding: 0;
}

body.ml-insert-editor-page .ml-insert-editor {
  /* The mount is the desktop workspace boundary. Keep it full width so an
     editing stage never depends on a parent-state selector to escape a
     reading column. Stage-level rules below constrain only the surfaces that
     are intentionally centred. */
  max-width: none;
  margin: 0;
}

body.ml-insert-editor-page [data-ml-insert-editor-mount] > .app {
  flex: 1 1 auto;
  min-height: 0;
}

@media (min-width: 922px) {
  /* The workflow follows Astra's wordmark column in every stage. */
  body.ml-insert-editor-page .app[data-host-chrome='external'] .desktop-mode-bar {
    width: min(100%, var(--wp--custom--ast-content-width-size, 1200px));
    margin-inline: auto;
  }

  /* Artwork and developer-only utility views are reading surfaces. Constrain
     the surface itself rather than its host, leaving Frame, SVG source,
     Repair, and Export free to use the full desktop workspace. */
  body.ml-insert-editor-page .app[data-mobile-mode='view'] .layout,
  body.ml-insert-editor-page .app[data-mobile-mode='debug'] .layout,
  body.ml-insert-editor-page .app[data-mobile-mode='settings'] .layout {
    width: min(100%, var(--wp--custom--ast-content-width-size, 1200px));
    margin-inline: auto;
  }
}

body.ml-insert-editor-page .site-header-primary-section-right {
  display: none;
}

body.ml-insert-editor-page .ast-primary-header {
  position: relative;
}

.ml-insert-editor-host-actions {
  position: absolute;
  top: 50%;
  /* Match the right edge of Astra's 1200px content column. This is the same
     column that carries the Studio mount and the wordmark's visible start. */
  right: max(1rem, calc((100% - var(--wp--custom--ast-content-width-size, 1200px)) / 2));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transform: translateY(-50%);
}

.ml-insert-editor-close,
.ml-insert-editor-mobile-close,
.ml-insert-editor-host-actions .app-toolbar-actions button,
.ml-insert-editor-mobile-actions .app-toolbar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--ast-global-color-0);
  border-radius: 0.25rem;
  background: var(--ast-global-color-5);
  color: var(--ast-global-color-0);
  font: inherit;
  line-height: 1;
  text-decoration: none;
}

.ml-insert-editor-close {
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
}

.ml-insert-editor-close svg,
.ml-insert-editor-mobile-close svg {
  width: 1.15rem;
  height: 1.15rem;
}

.ml-insert-editor-host-actions .app-toolbar-actions {
  display: flex;
  gap: 0.35rem;
}

.ml-insert-editor-host-actions .app-toolbar-actions button {
  width: 44px;
  min-width: 44px;
  padding: 0.5rem;
  gap: 0.35rem;
}

/* The compiled app action class is intentionally reusable. On the Astra host,
   however, these three header actions are one coherent outlined control set. */
body.ml-insert-editor-page .ml-insert-editor-host-actions .app-toolbar-actions .ml-action,
body.ml-insert-editor-page .ml-insert-editor-mobile-actions .app-toolbar-actions .ml-action {
  border: 1px solid var(--ast-global-color-0);
  background: var(--ast-global-color-5);
  color: var(--ast-global-color-0);
  box-shadow: none;
}

body.ml-insert-editor-page .ml-insert-editor-host-actions .app-toolbar-actions .ml-action:disabled,
body.ml-insert-editor-page .ml-insert-editor-mobile-actions .app-toolbar-actions .ml-action:disabled {
  opacity: 0.55;
}

.ml-insert-editor-host-actions .history-action-icon,
.ml-insert-editor-mobile-actions .history-action-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ml-insert-editor-host-actions .app-toolbar-actions--compact .history-action-label {
  display: none;
}

.ml-insert-editor-mobile-actions .app-toolbar-actions--compact .history-action-label {
  display: none;
}

.ml-insert-editor-host-actions .app-toolbar-actions button:focus-visible,
.ml-insert-editor-close:focus-visible,
.ml-insert-editor-mobile-close:focus-visible {
  outline: 3px solid var(--ast-global-color-0);
  outline-offset: 2px;
}

.ml-insert-editor-mobile-close {
  display: none;
}

.ml-insert-editor-mobile-actions {
  display: none;
}

@media (max-width: 921px) {
  /* Keep the editor exit/history actions in the mobile Astra header.  The
     action tray is positioned over the header, so the branding column must
     explicitly reserve its width instead of pushing it out of view. */
  body.ml-insert-editor-page #ast-mobile-header .ast-builder-grid-row,
  body.ml-insert-editor-page #ast-mobile-header .site-header-primary-section-left,
  body.ml-insert-editor-page #ast-mobile-header .site-branding,
  body.ml-insert-editor-page #ast-mobile-header .ast-site-title-wrap,
  body.ml-insert-editor-page #ast-desktop-header .ast-builder-grid-row,
  body.ml-insert-editor-page #ast-desktop-header .site-header-primary-section-left,
  body.ml-insert-editor-page #ast-desktop-header .site-branding,
  body.ml-insert-editor-page #ast-desktop-header .ast-site-title-wrap {
    min-width: 0;
  }

  body.ml-insert-editor-page #ast-mobile-header .site-header-primary-section-left,
  body.ml-insert-editor-page #ast-desktop-header .site-header-primary-section-left {
    padding-right: 10.25rem;
  }

  body.ml-insert-editor-page #ast-mobile-header .site-title a,
  body.ml-insert-editor-page #ast-desktop-header .site-title a {
    display: block;
    width: max-content;
    max-width: calc(100vw - 12rem);
    overflow: visible;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
    text-overflow: clip;
    /* Keep Astra's normal desktop title size in the single-line state. */
    line-height: inherit;
  }

  body.ml-insert-editor-page .site-header-primary-section-right {
    display: none;
  }

  .ml-insert-editor-host-actions {
    /* Astra retains the desktop header through part of its responsive range.
       Keep this tray there until its mobile header is actually visible. */
    right: 1rem;
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  body.ml-insert-editor-page .ast-mobile-header-content {
    display: none;
  }

  /* Astra duplicates the desktop hook inside its mobile header. The dedicated
     mobile action tray is the sole visible portal target at this breakpoint. */
  body.ml-insert-editor-page #ast-mobile-header .ml-insert-editor-host-actions {
    display: none;
  }

  .ml-insert-editor-mobile-actions {
    position: absolute;
    top: 50%;
    right: 1rem;
    /* Astra's mobile primary bar is a z-index:4 stacking context. The tray is
       a sibling of that bar, so it must sit above it rather than merely after
       it in the DOM. */
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transform: translateY(-50%);
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ml-insert-editor-mobile-actions [data-ml-insert-editor-history] .app-toolbar-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
  }

  .ml-insert-editor-mobile-actions .app-toolbar-actions button,
  .ml-insert-editor-mobile-close {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
  }

  .ml-insert-editor-mobile-close {
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  /* At phone width the title changes as a single stable state: two complete
     words, never a continuously shrinking column of individual characters. */
  body.ml-insert-editor-page #ast-mobile-header .site-title a,
  body.ml-insert-editor-page #ast-desktop-header .site-title a {
    width: 7.5rem;
    max-width: 7.5rem;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
    transition: none;
  }
}

@media (max-width: 360px) {
  /* Only a very narrow two-line header may reduce type size. Its width and
     type scale together, so the complete words use the available title slot
     rather than animating down to a smaller fixed mobile size. */
  body.ml-insert-editor-page #ast-mobile-header .site-title a,
  body.ml-insert-editor-page #ast-desktop-header .site-title a {
    width: calc(100vw - 15rem);
    max-width: calc(100vw - 15rem);
    font-size: clamp(0.92rem, calc((100vw - 15rem) / 5), 1.482rem);
    line-height: 1.05;
    transition: none;
  }
}

/* Override Astra/Woo default breadcrumb link colour */
.woocommerce-js .woocommerce-breadcrumb a {
    color: var(--ast-global-color-0);
    text-decoration: none;
}

.woocommerce-js .woocommerce-breadcrumb a:not(:hover) {
    color: var(--ast-global-color-0);
}


.woocommerce-js .woocommerce-breadcrumb a:hover {
    color: var(--ast-global-color-1);
    text-decoration: underline; /* optional */
}

/* Archive header layout: title/desc left, search right */
.woocommerce-products-header{
  --ml-header-baseline-fix: 12px; /* TUNE THIS (e.g. 4px–10px) */

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
}

/* Title */
.woocommerce-products-header__title{
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  line-height: 1;
}

/* Description (if present) */
.woocommerce-products-header .term-description{
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding-bottom: 6px; /* baseline match when desc exists */
}

.woocommerce-products-header .term-description p{
  margin: 0;
}

/* Search: bottom align + same baseline offset */
.woocommerce-products-header .ml-archive-search{
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
  align-self: end;

  /* NUDGE UP */
  transform: translateY(calc(-1 * var(--ml-header-baseline-fix)));
}


@media (max-width: 768px){
  .woocommerce-products-header{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .woocommerce-products-header__title{
    padding-bottom: 0;
  }

  .woocommerce-products-header .term-description{
    padding-bottom: 0;
  }

  .woocommerce-products-header .ml-archive-search{
    grid-column: 1;
    grid-row: 3;
    justify-self: stretch;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 0;
  }

  .woocommerce-products-header .ml-archive-search form,
  .woocommerce-products-header .ml-archive-search .search-field{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}