.noofno-visual-cart-menu .menu-link {
  display:inline-flex!important;
  align-items:center;
  gap:6px;
}

.noofno-visual-cart-menu .noofno-vcart-icon {
  display:grid;
  width:22px;
  height:22px;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  padding:4px;
  border:1px solid currentColor;
  border-radius:50%;
}

.noofno-visual-cart-menu .noofno-vcart-icon::before,
.noofno-visual-cart-menu .noofno-vcart-icon::after,
.noofno-visual-cart-menu .noofno-vcart-icon span {
  content:"";
  display:block;
  border-radius:1px;
  background:currentColor;
}

.noofno-visual-cart-menu .screen-reader-text,
.noofno-visual-cart-drawer .screen-reader-text {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}

.noofno-visual-cart-drawer[hidden] {
  display:none!important;
}

/* Phase 3: the visual cart drawer replaces Astra's own mini-cart drawer (header
   icon, mini-cart "View cart" all route here). Keep Astra's drawer + overlay
   from popping on every AJAX add — hide them whenever our drawer is present. */
body:has(.noofno-visual-cart-drawer) #astra-mobile-cart-drawer,
body:has(.noofno-visual-cart-drawer) .astra-cart-drawer,
body:has(.noofno-visual-cart-drawer) .astra-mobile-cart-overlay,
body:has(.noofno-visual-cart-drawer) .astra-cart-drawer-overlay {
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.noofno-visual-cart-drawer {
  position:fixed;
  z-index:100000;
  inset:0;
}

.noofno-visual-cart-drawer__backdrop {
  position:absolute;
  inset:0;
  border:0;
  background:rgba(24,18,15,.38);
  backdrop-filter:blur(2px);
}

.noofno-visual-cart-drawer__panel {
  position:absolute;
  inset:0;
  display:flex;
  height:auto;
  flex-direction:column;
  background:#fffdfb;
  box-shadow:0 22px 70px rgba(28,18,12,.24);
  animation:noofno-vcart-drawer-in .22s ease;
}

.noofno-visual-cart-drawer__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:58px;
  padding:12px clamp(14px,2vw,28px);
  border-bottom:1px solid #eadfd8;
  background:rgba(255,255,255,.96);
}

.noofno-visual-cart-drawer__title {
  display:grid;
  gap:2px;
  min-width:0;
}

.noofno-visual-cart-drawer__title strong {
  color:#2a211d;
  font-size:15px;
  line-height:1.1;
}

.noofno-visual-cart-drawer__title span {
  color:#7e7068;
  font-size:11px;
  line-height:1.2;
}

.noofno-visual-cart-drawer__actions {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
}

.noofno-visual-cart-drawer__link,
.noofno-visual-cart-drawer__close {
  display:inline-grid;
  min-height:34px;
  place-items:center;
  border:1px solid #d8cec8;
  border-radius:8px;
  background:#fff;
  color:#2a211d;
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}

.noofno-visual-cart-drawer__link {
  padding:0 12px;
  /* The drawer IS the cart now — "Open cart page" only pointed back at the
     cart page inside the drawer, which is redundant. Hide it (0.9.50). */
  display:none!important;
}

.noofno-visual-cart-drawer__close {
  width:36px;
  padding:0;
  font-size:20px;
}

.noofno-visual-cart-drawer__body {
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  background:#fffdfb;
}
.noofno-vcart-loading {
  padding:30px 16px;
  color:#75685f;
  font-size:14px;
  text-align:center;
}
.noofno-vcart-error { color:#b3402a; }

body.noofno-vcart-drawer-open {
  overflow:hidden;
}

.noofno-mobile-header-search {
  display:none;
}

@keyframes noofno-vcart-drawer-in {
  from { transform:translateY(-100%); }
  to { transform:translateY(0); }
}

@media(max-width:760px) {
  .ast-mobile-header-wrap .noofno-mobile-header-search {
    display:block;
    padding:0 12px 10px;
    background:rgba(255,253,248,.94);
    border-bottom:1px solid rgba(33,31,36,.08);
    box-shadow:0 1px 0 rgba(33,31,36,.04);
  }

  .ast-mobile-header-wrap .noofno-mobile-header-search:empty {
    display:none;
  }

  .ast-mobile-header-wrap .noofno-mobile-header-search .wp-block-search,
  .ast-mobile-header-wrap .noofno-mobile-header-search .noofno-mobile-product-search,
  .ast-mobile-header-wrap .noofno-mobile-header-search form.search-form,
  .ast-mobile-header-wrap .noofno-mobile-header-search form.woocommerce-product-search {
    width:100%;
    max-width:none;
    margin:0;
  }

  .ast-mobile-header-wrap .noofno-mobile-header-search .wp-block-search__inside-wrapper,
  .ast-mobile-header-wrap .noofno-mobile-header-search form.search-form,
  .ast-mobile-header-wrap .noofno-mobile-header-search form.woocommerce-product-search {
    display:flex;
    align-items:stretch;
    min-height:38px;
  }

  .ast-mobile-header-wrap .noofno-mobile-header-search input[type="search"],
  .ast-mobile-header-wrap .noofno-mobile-header-search .wp-block-search__input {
    min-width:0;
    height:38px;
    min-height:38px;
    flex:1 1 auto;
    padding:0 13px;
    font-size:13px;
    line-height:38px;
  }

  .ast-mobile-header-wrap .noofno-mobile-header-search button,
  .ast-mobile-header-wrap .noofno-mobile-header-search input[type="submit"],
  .ast-mobile-header-wrap .noofno-mobile-header-search .wp-block-search__button {
    min-height:38px;
    padding:0 13px;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
  }

  .noofno-visual-cart-drawer__panel {
    height:auto;
    inset:0;
  }

  .noofno-visual-cart-drawer__head {
    min-height:48px;
    padding:8px 10px;
  }

  .noofno-visual-cart-drawer__title strong {
    font-size:14px;
  }

  .noofno-visual-cart-drawer__title span {
    display:none;
  }

  .noofno-visual-cart-drawer__close {
    width:32px;
    height:32px;
    min-height:32px;
    font-size:18px;
  }

  .noofno-visual-cart-drawer__link {
    display:none;
  }
}

/* 0.9.45: Woo product-loop cards (shop / category / related). The owner wants
   the ADD control ALWAYS VISIBLE (no hover reveal), as an orange circular "+"
   on the bottom-right corner of the product image. These buttons are already
   ajax_add_to_cart, so click adds directly. Grouped products (no
   add_to_cart_button, e.g. "Butterfly") keep Astra's plain product link and get
   no + overlay. */
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-on-card-button.add_to_cart_button,
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  position:relative!important;
}

body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-on-card-button.add_to_cart_button,
body.woocommerce ul.products li.product .ast-on-card-button.add_to_cart_button {
  position:absolute!important;
  top:auto!important;
  right:8px!important;
  bottom:8px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  visibility:visible!important;
  opacity:1!important;
  width:36px!important;
  height:36px!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  z-index:6;
}

/* Swap Astra's cart svg round icon for a solid orange "+" chip. */
body.woocommerce ul.products li.product .ast-on-card-button.add_to_cart_button .ahfb-svg-iconset {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:36px!important;
  height:36px!important;
  margin:0!important;
  border-radius:50%!important;
  background:#f2520c!important;
  color:#fff!important;
  box-shadow:0 4px 12px rgba(242,82,12,.35);
}

body.woocommerce ul.products li.product .ast-on-card-button.add_to_cart_button .ahfb-svg-iconset svg {
  display:none!important;
}

/* "+" add glyph. */
body.woocommerce ul.products li.product .ast-on-card-button.add_to_cart_button .ahfb-svg-iconset::after {
  content:"+";
  font-size:24px;
  font-weight:800;
  line-height:1;
}

/* Hide the "Add to cart" tooltip that Astra pops on hover — the control is now
   always visible, so no tooltip needed. */
body.woocommerce ul.products li.product .ast-on-card-button.add_to_cart_button .ast-card-action-tooltip {
  display:none!important;
}

/* Grouped / non-add products: never show a "+" chip on the image. */
body.woocommerce ul.products li.product.product-type-grouped .ast-on-card-button,
body.woocommerce ul.products li.product:not(:has(.add_to_cart_button)) .ast-on-card-button.add_to_cart_button {
  display:none!important;
  visibility:hidden!important;
}

/* 0.9.53: native /cart/ fallback notice (Phase 2). Only shown on the plain
   WooCommerce cart page to route visitors into the visual cart drawer. */
.noofno-native-cart-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  max-width:1000px;
  margin:14px auto;
  padding:12px 16px;
  border:1px solid #eadfd8;
  border-radius:10px;
  background:linear-gradient(135deg,#fff9f3,#fff);
  box-shadow:0 8px 24px rgba(44,27,19,.06);
}

.noofno-native-cart-banner__text {
  color:#6a4030;
  font-size:13px;
  line-height:1.4;
}

.noofno-native-cart-banner__btn {
  flex:0 0 auto;
  min-height:38px;
  padding:0 16px;
  border:0;
  border-radius:8px;
  background:#2a211d;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
}

@media(max-width:760px) {
  .noofno-native-cart-banner {
    flex-direction:column;
    align-items:stretch;
    margin:10px 8px;
  }
  .noofno-native-cart-banner__btn {
    width:100%;
  }
}


/* ============================================================
   0.9.59: top drawer = full-width sheet with a CAPPED height
   (no longer a fullscreen popup). The page context stays visible
   below the panel so adding/editing feels continuous.
   ============================================================ */
.noofno-visual-cart-drawer__panel {
  top:0;
  bottom:auto;
  left:0;
  right:0;
  width:100%;
  height:auto;
  max-height:calc(100vh - 20px);
}
@media(max-width:760px) {
  .noofno-visual-cart-drawer__panel {
    height:auto;
    max-height:calc(100vh - 16px);
  }
}