/* Start custom CSS for html, class: .elementor-element-5edc4b2 */"/* Hero intro text clamp + bold fix */

/* Ensure <strong> always renders bold in hero */
details.hero-clamp strong,
details.hero-clamp summary strong {
  font-weight: 700 !important;
  color: #111 !important;
}

details.hero-clamp { margin: 0.5rem 0 1rem 0; }
details.hero-clamp summary {
  cursor: pointer; list-style: none;
  font-size: 1rem; line-height: 1.55; color: #555;
  position: relative;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; padding-right: 1.5rem;
}
details.hero-clamp summary::-webkit-details-marker { display: none; }
details.hero-clamp summary::marker { display: none; content: """"; }
details.hero-clamp summary::after {
  content: ""▾""; position: absolute; right: 0; bottom: 0;
  font-size: 1.4rem; line-height: 1; color: #ff6a00; font-weight: 700;
  transition: transform 0.25s ease;
}
details.hero-clamp[open] summary {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
details.hero-clamp[open] summary::after {
  content: ""▴""; position: static; margin-left: 0.4em; display: inline-block;
}
details.hero-clamp summary a {
  color: #ff6a00 !important; text-decoration: none; font-weight: 600;
}
details.hero-clamp summary a:hover { text-decoration: underline; }"/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0a2f7a7 */"/* COLUMNS F + H — Body text styling
   Targets PrestaShop description containers AND optional .body-col wrapper.
   Works whether or not the body-2col wrapper is in place. */

/* Generic .elementor-9040301 .elementor-element.elementor-element-0a2f7a7s that catch all common PrestaShop description containers */
.category-description h2,
.category-additional-description h2,
#category-description h2,
.cms-block h2,
.body-col h2 {
  color: #111 !important;
  font-weight: 700 !important;
  margin-top: 2.25rem !important;
  margin-bottom: 1rem !important;
}

.category-description h3,
.category-additional-description h3,
#category-description h3,
.cms-block h3,
.body-col h3 {
  color: #111 !important;
  font-weight: 700 !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* First heading inside any description column has no top margin */
.category-description > h2:first-child,
.category-additional-description > h2:first-child,
.body-col > h2:first-child,
.body-col > h3:first-child,
section > h2:first-child {
  margin-top: 0 !important;
}

/* Paragraphs */
.category-description p,
.category-additional-description p,
#category-description p,
.cms-block p,
.body-col p {
  color: #555 !important;
  line-height: 1.7 !important;
  font-size: 1rem;
  margin: 0 0 1.25rem 0 !important;
}

/* Lists — orange bullets, spaced out */
.category-description ul,
.category-additional-description ul,
#category-description ul,
.cms-block ul,
.body-col ul,
.category-description ol,
.category-additional-description ol,
#category-description ol,
.cms-block ol,
.body-col ol {
  margin: 0.75rem 0 1.75rem 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.category-description ul li,
.category-additional-description ul li,
#category-description ul li,
.cms-block ul li,
.body-col ul li,
.category-description ol li,
.category-additional-description ol li,
#category-description ol li,
.cms-block ol li,
.body-col ol li {
  position: relative !important;
  padding-left: 1.5rem !important;
  margin-bottom: 0.75rem !important;
  color: #555 !important;
  line-height: 1.6 !important;
  list-style: none !important;
}

/* Orange round bullet for ul */
.category-description ul li::before,
.category-additional-description ul li::before,
#category-description ul li::before,
.cms-block ul li::before,
.body-col ul li::before {
  content: """" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.6em !important;
  width: 7px !important;
  height: 7px !important;
  background: #ff6a00 !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Orange numbers for ol */
.category-description ol,
.category-additional-description ol,
#category-description ol,
.cms-block ol,
.body-col ol {
  counter-reset: olcounter;
}

.category-description ol li,
.category-additional-description ol li,
#category-description ol li,
.cms-block ol li,
.body-col ol li {
  counter-increment: olcounter;
}

.category-description ol li::before,
.category-additional-description ol li::before,
#category-description ol li::before,
.cms-block ol li::before,
.body-col ol li::before {
  content: counter(olcounter) ""."" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #ff6a00 !important;
  font-weight: 700 !important;
}

/* Strong inside paragraphs */
.category-description p strong,
.category-additional-description p strong,
.category-description li strong,
.body-col p strong,
.body-col li strong {
  color: #222 !important;
  font-weight: 700 !important;
}

/* Tables */
.category-description table,
.category-additional-description table,
.body-col table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.25rem 0 1.75rem 0 !important;
  font-size: 0.95rem !important;
}

.category-description table th,
.category-description table td,
.category-additional-description table th,
.category-additional-description table td,
.body-col table th,
.body-col table td {
  padding: 0.7rem 0.85rem !important;
  border-bottom: 1px solid #eaeaea !important;
  text-align: left !important;
}

.category-description table th,
.category-additional-description table th,
.body-col table th {
  background: #f8f8f8 !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* Figures with content images — proper spacing */
figure.content-img {
  margin: 1.5rem 0 1.75rem 0 !important;
  padding: 0;
}

figure.content-img picture {
  display: block;
}

figure.content-img img {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

figure.content-img figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #888;
  font-style: italic;
  text-align: center;
}"/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9d1fa5b */"/* COLUMNS F + H — Body text styling
   Targets PrestaShop description containers AND optional .body-col wrapper.
   Works whether or not the body-2col wrapper is in place. */

/* Generic .elementor-9040301 .elementor-element.elementor-element-9d1fa5bs that catch all common PrestaShop description containers */
.category-description h2,
.category-additional-description h2,
#category-description h2,
.cms-block h2,
.body-col h2 {
  color: #111 !important;
  font-weight: 700 !important;
  margin-top: 2.25rem !important;
  margin-bottom: 1rem !important;
}

.category-description h3,
.category-additional-description h3,
#category-description h3,
.cms-block h3,
.body-col h3 {
  color: #111 !important;
  font-weight: 700 !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* First heading inside any description column has no top margin */
.category-description > h2:first-child,
.category-additional-description > h2:first-child,
.body-col > h2:first-child,
.body-col > h3:first-child,
section > h2:first-child {
  margin-top: 0 !important;
}

/* Paragraphs */
.category-description p,
.category-additional-description p,
#category-description p,
.cms-block p,
.body-col p {
  color: #555 !important;
  line-height: 1.7 !important;
  font-size: 1rem;
  margin: 0 0 1.25rem 0 !important;
}

/* Lists — orange bullets, spaced out */
.category-description ul,
.category-additional-description ul,
#category-description ul,
.cms-block ul,
.body-col ul,
.category-description ol,
.category-additional-description ol,
#category-description ol,
.cms-block ol,
.body-col ol {
  margin: 0.75rem 0 1.75rem 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.category-description ul li,
.category-additional-description ul li,
#category-description ul li,
.cms-block ul li,
.body-col ul li,
.category-description ol li,
.category-additional-description ol li,
#category-description ol li,
.cms-block ol li,
.body-col ol li {
  position: relative !important;
  padding-left: 1.5rem !important;
  margin-bottom: 0.75rem !important;
  color: #555 !important;
  line-height: 1.6 !important;
  list-style: none !important;
}

/* Orange round bullet for ul */
.category-description ul li::before,
.category-additional-description ul li::before,
#category-description ul li::before,
.cms-block ul li::before,
.body-col ul li::before {
  content: """" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.6em !important;
  width: 7px !important;
  height: 7px !important;
  background: #ff6a00 !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Orange numbers for ol */
.category-description ol,
.category-additional-description ol,
#category-description ol,
.cms-block ol,
.body-col ol {
  counter-reset: olcounter;
}

.category-description ol li,
.category-additional-description ol li,
#category-description ol li,
.cms-block ol li,
.body-col ol li {
  counter-increment: olcounter;
}

.category-description ol li::before,
.category-additional-description ol li::before,
#category-description ol li::before,
.cms-block ol li::before,
.body-col ol li::before {
  content: counter(olcounter) ""."" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #ff6a00 !important;
  font-weight: 700 !important;
}

/* Strong inside paragraphs */
.category-description p strong,
.category-additional-description p strong,
.category-description li strong,
.body-col p strong,
.body-col li strong {
  color: #222 !important;
  font-weight: 700 !important;
}

/* Tables */
.category-description table,
.category-additional-description table,
.body-col table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.25rem 0 1.75rem 0 !important;
  font-size: 0.95rem !important;
}

.category-description table th,
.category-description table td,
.category-additional-description table th,
.category-additional-description table td,
.body-col table th,
.body-col table td {
  padding: 0.7rem 0.85rem !important;
  border-bottom: 1px solid #eaeaea !important;
  text-align: left !important;
}

.category-description table th,
.category-additional-description table th,
.body-col table th {
  background: #f8f8f8 !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* Figures with content images — proper spacing */
figure.content-img {
  margin: 1.5rem 0 1.75rem 0 !important;
  padding: 0;
}

figure.content-img picture {
  display: block;
}

figure.content-img img {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

figure.content-img figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #888;
  font-style: italic;
  text-align: center;
}"/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-982cbf8 */"/* === UNIVERSAL: <strong> must always render bold === */
strong,
b,
.body-col strong,
.body-col b,
.category-description strong,
.category-description b,
.category-additional-description strong,
.category-additional-description b,
#category-description strong,
#category-description b,
.cms-block strong,
.cms-block b,
details.hero-clamp strong,
details.hero-clamp summary strong,
details.faq-item strong,
details.faq-item summary strong,
details.faq-item p strong,
details.faq-item li strong,
.related-faq strong,
.related-blog strong,
.blog-card strong,
.blog-card-content strong {
  font-weight: 700 !important;
  font-family: inherit !important;
  font-style: inherit !important;
}

/* COLUMN J — FAQ accordion (Shisha Heaven style, with proper spacing) */

.faq-intro {
  color: #888 !important;
  margin: 0 0 1.5rem 0 !important;
  font-size: 1rem;
}

/* Section H2 — matches .related-blog h2 exactly */
.related-faq h2,
.faq-list-section h2,
section.related-faq > h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin: 0 0 1.5rem 0 !important;
}

.faq-list {
  margin: 1rem 0 2rem 0 !important;
  border-top: 1px solid #eaeaea !important;
}

details.faq-item {
  border-bottom: 1px solid #eaeaea !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Question text — matches blog card title style */
details.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 3rem 1.25rem 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #111 !important;
  line-height: 1.35 !important;
  position: relative;
  user-select: none;
  transition: color 0.15s ease;
}

details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::marker { display: none; content: """"; }

/* Chevron arrow on the right */
details.faq-item summary::after {
  content: """";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.25s ease, border-color 0.15s ease;
}

details.faq-item[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
  border-color: #ff6a00;
}

details.faq-item summary:hover { color: #ff6a00 !important; }
details.faq-item summary:hover::after { border-color: #ff6a00; }

/* Answer */
details.faq-item > p,
details.faq-item > div,
details.faq-item > ul,
details.faq-item > ol {
  margin: 0 0 1.25rem 0 !important;
  padding: 0;
  color: #444 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  animation: faq-fade 0.25s ease-out;
}

details.faq-item ul,
details.faq-item ol {
  padding-left: 1.5rem !important;
}

@keyframes faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  details.faq-item summary {
    font-size: 1.05rem !important;
    padding: 1rem 2.5rem 1rem 0 !important;
  }
}"/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-522b655 */"/* === UNIVERSAL: <strong> must always render bold === */
strong, b,
.body-col strong, .body-col b,
.category-description strong, .category-description b,
.category-additional-description strong, .category-additional-description b,
#category-description strong, #category-description b,
.cms-block strong, .cms-block b,
details.hero-clamp strong, details.hero-clamp summary strong,
details.faq-item strong, details.faq-item summary strong,
details.faq-item p strong, details.faq-item li strong,
.related-faq strong, .related-blog strong,
.blog-card strong, .blog-card-content strong {
  font-weight: 700 !important;
  font-family: inherit !important;
  font-style: inherit !important;
}

/* Related Blog Posts — sits in right column next to FAQ. COMPACT layout. */

.related-blog {
  margin: 0 0 2rem 0;
}

.related-blog h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin: 0 0 1.5rem 0 !important;
}

.related-blog-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;  /* was 1.5rem — tightened */
}

.blog-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.25rem;
  align-items: center;  /* was start — centers content vertically with image */
  padding-bottom: 1rem;  /* was 1.5rem — tightened */
  border-bottom: 1px solid #eaeaea;
}

.blog-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blog-card-img {
  width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;  /* tight */
}

.blog-card-category {
  color: #ff6a00 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;  /* kill all paragraph margins */
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* CRITICAL: kill the theme's H3 margins that bleed into blog title */
.blog-card-title,
h3.blog-card-title,
.related-blog .blog-card-title,
.blog-card-content .blog-card-title,
.related-blog h3.blog-card-title,
.body-col-right .blog-card-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #111 !important;
  line-height: 1.35 !important;
  margin: 0 0 0.4rem 0 !important;
  padding: 0 !important;
  word-wrap: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* High-specificity ""Read now"" button — beats theme override */
a.blog-card-link,
.related-blog a.blog-card-link,
.body-col-right a.blog-card-link,
.category-description a.blog-card-link,
.category-additional-description a.blog-card-link,
#category-description a.blog-card-link {
  display: inline-block;
  margin-top: 0.1rem !important;
  padding: 0.5rem 1rem !important;
  background: #ff6a00 !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none !important;
  border: none;
  border-radius: 6px;
  transition: background 0.15s ease;
  align-self: flex-start;
}

a.blog-card-link:hover,
.related-blog a.blog-card-link:hover {
  background: #d95a00 !important;
  color: #ffffff !important;
}

a.blog-card-link:visited {
  color: #ffffff !important;
}

/* Mobile (≤ 480px): image goes on TOP, full-width cards */
@media (max-width: 480px) {
  .blog-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .blog-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
  }
}

/* === BLOG CARD — kill all inherited margins on title h3 === */
/* Multiple ancestor .elementor-9040301 .elementor-element.elementor-element-522b655s to beat any theme's h3 styling */
body .blog-card .blog-card-content h3,
body .blog-card .blog-card-content h3.blog-card-title,
body .related-blog .blog-card h3,
body .related-blog .blog-card .blog-card-content > h3,
body .category-description .blog-card h3,
body .category-additional-description .blog-card h3,
body #category-description .blog-card h3,
body .body-col .blog-card h3,
body .body-col-right .blog-card h3,
body .cms-block .blog-card h3,
html body .blog-card h3 {
  margin: 0 0 0.4rem 0 !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #111 !important;
  line-height: 1.35 !important;
}

/* Also kill any margin on category label */
body .blog-card .blog-card-content p,
body .blog-card .blog-card-content p.blog-card-category,
body .related-blog .blog-card p,
body .category-description .blog-card p,
body .body-col .blog-card p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Container itself: small gap between elements */
body .blog-card .blog-card-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  margin: 0 !important;
}

/* Kill any TinyMCE-injected empty paragraphs that could create gaps */
.blog-card-content p:empty,
.blog-card-content br + br,
.blog-card-content p:has(br:only-child) {
  display: none !important;
}"/* End custom CSS */