/* ideaverde storefront fixes (inline so they apply without recompiling Journal's CSS bundle) */
/* 1) Journal's admin-only grid dimension label ("WIDTHxHEIGHT (Admin Only)") is leaking to all
      visitors via the shared JS bundle. Suppress the label everywhere. */
.desktop #top .grid-col::before, .desktop #content-top .grid-col::before, .desktop #bottom .grid-col::before,
.desktop #top .grid-col:hover::before, .desktop #content-top .grid-col:hover::before, .desktop #bottom .grid-col:hover::before { content: none !important; display: none !important; }

/* 2) Category description: show only the first 2 lines, with a solid site-gray
      toggle BELOW the text (normal flow, so it never overlaps). Scoped to .block-description. */
.block-description.expand-content { max-height: none !important; overflow: visible !important; padding-bottom: 0 !important; }
/* same font override the product description uses (product_tabs.twig) — one consistent font */
.block-description, .block-description * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; }
.block-description.expand-content > p { margin: 0 0 .6em !important; font-size: 14px !important; line-height: 1.5 !important; opacity: .9 !important; }
/* collapsed: ~2 lines of the FIRST CHILD (whatever tag it is) with a soft fade-out; hide every
   later sibling — element-agnostic so descriptions may contain h2/h3 (FAQ blocks) without leaking */
.block-description.expand-content:not(.block-expanded) > :first-child { max-height: 3em !important; overflow: hidden !important; margin: 0 !important; -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0)) !important; mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0)) !important; }
.block-description.expand-content:not(.block-expanded) > *:not(:first-child):not(.block-expand-overlay) { display: none !important; }
/* readable heading scale inside expanded descriptions (FAQ blocks) */
.block-description.expand-content > h2 { font-size: 17px !important; margin: 1em 0 .5em !important; }
.block-description.expand-content > h3 { font-size: 15px !important; margin: .9em 0 .35em !important; }
/* toggle in normal flow, below the text (no absolute overlay = no overlap) */
.block-description .block-expand-overlay { position: static !important; height: auto !important; background: none !important; display: block !important; text-align: left !important; margin-top: 12px !important; pointer-events: auto !important; }
.block-description .block-expand { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 2px 0 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #000 !important; background: none !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; pointer-events: auto !important; text-decoration: none !important; transition: color .15s ease !important; }
.block-description .block-expand:hover, #content .block-description a.block-expand:hover { color: #000 !important; text-decoration: underline !important; background: none !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; }
#content .block-description a.block-expand:hover::before, #content .block-description a.block-expand:hover::after { color: #000 !important; }
/* flip the chevron when expanded */
.block-description .expand-content.block-expanded .block-expand::after { display: inline-block !important; transform: rotate(180deg) !important; }

/* 3) "Свързани категории" module (category page bottom + landing/info pages):
      horizontal chip list, left to right, wraps on small screens */
.iv-related-cats { margin: 25px 0 10px; }
.iv-related-cats h2 { font-size: 17px; margin: 0 0 12px; }
.iv-related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-related-list a, p.iv-related-list a { display: inline-block; padding: 6px 14px; border: 1px solid #ddd; border-radius: 18px; font-size: 13px; line-height: 1.4; color: #333; background: #fafafa; text-decoration: none; margin: 0 8px 8px 0; }
.iv-related-list a:hover { border-color: #999; color: #000; background: #f0f0f0; }