/* zoharceramic port — additive only, loaded after the site bundle */
:root { --zohar-page-bg: #F2EFE9; }
body { background-color: var(--zohar-page-bg); color: var(--zohar-dark); }

/* Top spacing under the fixed header. The site's purged bundle has no pt-28. */
.zp-pad { padding-top: 116px; }
@media (min-width: 768px) { .zp-pad { padding-top: 148px; } }

/* The captured header carries its SCROLLED state inline (dark + blur). At the
   top of the page the original is transparent, so neutralise it. */
header[aria-label="כותרת"] {
  background-color: transparent !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
}

/* Dot-nav labels are revealed on hover on the original; without its runtime
   they would otherwise sit permanently across the page content. */
.dot-nav .dot-label {
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  white-space: nowrap;
}
.dot-nav .dot-nav-item:hover .dot-label,
.dot-nav .dot-wrapper:focus-visible .dot-label { opacity: 1; }

/* The site ships a WHITE signature logo, correct over the dark home hero. Every
   other page has a light background, where it is invisible — her React header
   swapped the asset per page. Tint it back to the brand dark. */
.zp-light header[aria-label="כותרת"] img { filter: invert(1) brightness(.28); }

/* Catalogue heading + filter row */
.zp-title { font-size: 2.25rem; font-weight: 300; letter-spacing: .02em; margin-bottom: 1rem; }
@media (min-width: 768px) { .zp-title { font-size: 3rem; } }
.zp-filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }
.zp-filter {
  border: 1px solid rgba(40,37,30,.15); border-radius: 999px;
  padding: .5rem 1rem; font-size: .875rem; letter-spacing: .04em;
  color: var(--zohar-dark); transition: background-color .2s, color .2s;
}
.zp-filter:hover { background-color: var(--zohar-dark); color: #fff; }
.zp-count { margin-top: 2.5rem; font-size: .875rem; color: rgba(40,37,30,.6); }

/* PDP + transactional pages */
.zp-stack > * + * { margin-top: 1.25rem; }
.zp-field { width: 100%; border: 1px solid rgba(40,37,30,.2); border-radius: .5rem; padding: .5rem .75rem; background: #fff; }
.zp-btn {
  border-radius: .5rem; background: var(--zohar-brown); color: #fff;
  padding: .75rem 2rem; font-size: .875rem; font-weight: 500; transition: opacity .2s;
}
.zp-btn:hover { opacity: .9; }
.zp-btn[disabled] { opacity: .4; cursor: not-allowed; }