/* noPanel LIVE (Darlene #136) — was ?noPanel=1 preview (#108-#131).
   Clear cream/white main content panels so spiderweb shows through.
   TOC translucent + max 22rem; green Q boxes; hamburger nav <=1480.
   Content wash fully transparent (#131); listing inset pad 0 (#126 item 3).
   Cards / tip boxes / tables keep solid cream. Layout unchanged. */

/* #114: keep green announcement + nav fixed on top (also fixed injectNoPanelHtml body >) */
body.no-panel-on.web-bg-on .announcement-bar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001 !important;
  background: linear-gradient(
    90deg,
    var(--moss-deep) 0%,
    var(--soft-green-dark) 55%,
    var(--moss-deep) 100%
  ) !important;
  color: #fff !important;
  text-shadow: none !important;
}

body.no-panel-on.web-bg-on .nav {
  position: fixed !important;
  top: var(--announcement-h);
  left: 0;
  right: 0;
  z-index: 1000 !important;
  background: var(--moss-deep) !important;
  text-shadow: none !important;
}

/* Web stays behind all content chrome (#153/#155: must be -1) */
body.no-panel-on.web-bg-on::before {
  z-index: -1 !important;
}

body.no-panel-on.web-bg-on #listing-root,
body.no-panel-on.web-bg-on #listing-root article,
body.no-panel-on.web-bg-on .listing-layout,
body.no-panel-on.web-bg-on .listing-left-stack,
body.no-panel-on.web-bg-on .listing-buy-col,
body.no-panel-on.web-bg-on .listing-gallery-col,
body.no-panel-on.web-bg-on .listing-media-col,
body.no-panel-on.web-bg-on .listing-desc,
body.no-panel-on.web-bg-on .listing-desc-col,
body.no-panel-on.web-bg-on .listing-desc-col--under-media,
body.no-panel-on.web-bg-on .listing-desc-col--after-buy,
body.no-panel-on.web-bg-on .listing-care-guide,
body.no-panel-on.web-bg-on .listing-care-guide-block,
body.no-panel-on.web-bg-on details.listing-care-collapse,
body.no-panel-on.web-bg-on .listing-care-collapse-body,
body.no-panel-on.web-bg-on .prose,
body.no-panel-on.web-bg-on .content-layout,
body.no-panel-on.web-bg-on .faq-list,
body.no-panel-on.web-bg-on .container > section,
body.no-panel-on.web-bg-on .shop-listings,
body.no-panel-on.web-bg-on #listings-grid,
body.no-panel-on.web-bg-on main > .container,
body.no-panel-on.web-bg-on .page-hero-inner,
body.no-panel-on.web-bg-on .section {
  background-color: transparent;
  background-image: none;
}

/* #139: kill leftover hero wash/border so web flows to the top (all pages) */
body.no-panel-on.web-bg-on .hero,
body.no-panel-on.web-bg-on .page-hero,
body.no-panel-on.web-bg-on .page-header {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  overflow: visible;
}

body.no-panel-on.web-bg-on .hero::before,
body.no-panel-on.web-bg-on .hero::after,
body.no-panel-on.web-bg-on .page-hero::before,
body.no-panel-on.web-bg-on .page-hero::after,
body.no-panel-on.web-bg-on .page-header::before,
body.no-panel-on.web-bg-on .page-header::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.no-panel-on.web-bg-on .hero-content,
body.no-panel-on.web-bg-on .hero-grid .hero-content,
body.no-panel-on.web-bg-on .page-hero-inner {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* #113 + #126 item 3: keep soft wash, remove side inset (was ~14px) */
body.no-panel-on.web-bg-on .listing-desc-col--under-media,
body.no-panel-on.web-bg-on .listing-desc-col--after-buy,
body.no-panel-on.web-bg-on .listing-care-guide,
body.no-panel-on.web-bg-on section.border-t-card.pt-6 {
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

body.no-panel-on.web-bg-on .listing-care-collapse-body {
  padding-left: 0;
  padding-right: 0;
}

/*
  #131: content area fully transparent under noPanel — no tint, border,
  shadow, or rounded edge. Cards (policy/tip/listing) stay solid below.
*/
body.no-panel-on.web-bg-on .listing-desc-in-buy,
body.no-panel-on.web-bg-on .listing-description-block,
body.no-panel-on.web-bg-on .content-main,
body.no-panel-on.web-bg-on .content-block,
body.no-panel-on.web-bg-on .listing-care-guide,
body.no-panel-on.web-bg-on .listing-care-guide-block,
body.no-panel-on.web-bg-on .content-layout,
body.no-panel-on.web-bg-on .prose,
body.no-panel-on.web-bg-on main > .container,
body.no-panel-on.web-bg-on .container > section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none;
  box-shadow: none !important;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  z-index: 1;
}

body.no-panel-on.web-bg-on .listing-desc-in-buy::before,
body.no-panel-on.web-bg-on .listing-description-block::before,
body.no-panel-on.web-bg-on .content-main::before,
body.no-panel-on.web-bg-on .content-block::before,
body.no-panel-on.web-bg-on .listing-care-guide::before,
body.no-panel-on.web-bg-on .content-main::after,
body.no-panel-on.web-bg-on .content-block::after {
  content: none !important;
  display: none !important;
}

/* #126 item 3: no horizontal inset on desc block (stays noPanel-only) */
body.no-panel-on.web-bg-on .listing-desc-in-buy,
body.no-panel-on.web-bg-on .listing-description-block {
  padding: 0.75rem 0;
}

/* Soft halo for headings on tan — NOT on solid TOC/card headings (#117) */
body.no-panel-on.web-bg-on h1,
body.no-panel-on.web-bg-on h2,
body.no-panel-on.web-bg-on h3,
body.no-panel-on.web-bg-on .listing-care-guide-species,
body.no-panel-on.web-bg-on .listing-care-collapse-heading {
  text-shadow: 0 0 10px #D2C6B6, 0 0 4px #D2C6B6;
}

body.no-panel-on.web-bg-on .content-toc h3,
body.no-panel-on.web-bg-on .content-toc a,
body.no-panel-on.web-bg-on .policy-card h3,
body.no-panel-on.web-bg-on .tip-box h3 {
  text-shadow: none !important;
}

/*
  #114/#117: solid cards ABOVE the web (product cards, tip boxes).
  Do NOT set position on .content-sidebar — sticky must stay.
  Do NOT paint .info-highlight green boxes cream (#119).
*/
body.no-panel-on.web-bg-on .listing-card,
body.no-panel-on.web-bg-on .spider-card,
body.no-panel-on.web-bg-on .policy-card,
body.no-panel-on.web-bg-on .tip-box,
body.no-panel-on.web-bg-on .info-table-wrap,
body.no-panel-on.web-bg-on .site-panel,
body.no-panel-on.web-bg-on .listing-addons,
body.no-panel-on.web-bg-on .addons-box,
body.no-panel-on.web-bg-on .faq-item,
body.no-panel-on.web-bg-on .listing-care-collapse-summary,
body.no-panel-on.web-bg-on .bg-soft-blue-light.border-card {
  background-color: var(--surface, #FDFBF7) !important;
  text-shadow: none;
  position: relative;
  z-index: 2;
  isolation: isolate;
}

/* #155: cart drawer panel surface only — never force #cart-drawer position:relative */
body.no-panel-on.web-bg-on #cart-drawer.cart-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1100 !important;
  background-color: transparent !important;
  isolation: auto;
}
body.no-panel-on.web-bg-on #cart-drawer .cart-drawer-panel {
  background-color: var(--surface, #FDFBF7) !important;
}

/* Sidebar column stays clear */
body.no-panel-on.web-bg-on .content-sidebar {
  background-color: transparent !important;
  z-index: 2;
}

/*
  #119/#120: On This Page — translucent narrow card at ALL widths (incl 1280+).
  ship-toc stacks TOC full-bleed; cap width so it is not a huge white panel.
*/
body.no-panel-on.web-bg-on .content-toc {
  background-color: #f4efe9 !important; /* #153 solid */
  border: 1px solid rgba(196, 185, 168, 0.55);
  box-shadow: none;
  position: relative;
  z-index: 2;
  isolation: isolate;
  max-width: 22rem;
  width: 100%;
}

/*
  #120: nav overflows 1024-1280+ (Contact/My Account/Cart/Adopt clipped).
  Under noPanel, hamburger below ~1480px so wide desktop also fits.
*/
@media (max-width: 1480px) {
  body.no-panel-on .nav-toggle {
    display: block;
    flex-shrink: 0;
    z-index: 1002;
  }

  body.no-panel-on .nav-links {
    position: fixed;
    top: var(--header-offset);
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--moss-deep, #2d4a3e);
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 1.5rem 1.5rem;
    gap: 0.85rem;
    border-bottom: 3px solid var(--leaf, #6baf7a);
    transform: translateY(-120%);
    opacity: 0;
    transition: all var(--transition);
    pointer-events: none;
    flex-wrap: nowrap;
    max-height: calc(100vh - var(--header-offset));
    overflow-y: auto;
  }

  body.no-panel-on .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  body.no-panel-on .nav-links a,
  body.no-panel-on .nav-cta,
  body.no-panel-on .nav-cart-btn {
    flex-shrink: 1;
    white-space: normal;
  }

  body.no-panel-on .nav-inner {
    gap: 0.75rem;
  }
}

/*
  #119: restore green Questions? / info-highlight boxes; light cream headings.
  web-bg sets body.web-bg-on h3 to dark ink — override inside green boxes.
*/
body.no-panel-on.web-bg-on .info-highlight,
body.no-panel-on.web-bg-on .info-highlight-sidebar {
  background: linear-gradient(
    135deg,
    var(--moss-deep) 0%,
    var(--soft-green-dark) 50%,
    var(--soft-green-deeper, #3d6b52) 100%
  ) !important;
  color: #fff !important;
  text-shadow: none !important;
  position: relative;
  z-index: 2;
  isolation: isolate;
}

body.no-panel-on.web-bg-on .info-highlight h3,
body.no-panel-on.web-bg-on .info-highlight .info-highlight-title,
body.no-panel-on.web-bg-on .info-highlight-sidebar h3,
body.no-panel-on.web-bg-on .info-highlight-sidebar .info-highlight-title {
  color: #f7f3ea !important;
  text-shadow: none !important;
}

body.no-panel-on.web-bg-on .info-highlight p,
body.no-panel-on.web-bg-on .info-highlight-lead,
body.no-panel-on.web-bg-on .info-highlight a,
body.no-panel-on.web-bg-on .info-highlight .store-contact-link {
  color: #fff !important;
  text-shadow: none !important;
}

/* #114: darken thin grey intro text on shop + shipping for contrast */
body.no-panel-on.web-bg-on .shop-listings-blurb,
body.no-panel-on.web-bg-on .shop-listings-intro .text-ink-muted,
body.no-panel-on.web-bg-on .section-desc,
body.no-panel-on.web-bg-on .content-main > p,
body.no-panel-on.web-bg-on .content-block > p,
body.no-panel-on.web-bg-on .page-hero-inner .hero-text {
  color: #3A4540 !important;
  text-shadow: 0 0 6px rgba(210, 198, 182, 0.9);
}

/* Items 1/2/4/5 went LIVE in #129 — no longer noPanel-only overrides.
   Item 3 (listing inset) + #131 transparency stay preview-only above. */

/* Live — badge retired (Darlene #136) */
.no-panel-preview-badge {
  display: none !important;
}