.s-advertisement{
  display: none;
}
.grill-hero h2{
     
    font-size: clamp(2.1rem, 2.2vw + 1.2rem, 3.4rem) !important;
}
.grill-hero .advanced-slider__caption__inner--center{
    position: absolute;
      left: 50%; 
  transform: translateX(-50%);
    width: 85%;
  bottom: 10%;
}
.grill-hero-badges{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  margin-top:18px;
  flex-wrap:wrap;
  direction:rtl;
}

.grill-hero-badge{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.85);
  font-size:12px;
  line-height:1;
  font-weight:500;
  flex-direction:row-reverse;
}

.grill-hero-badge svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

@media (min-width: 768px){
  .grill-hero-badge{ font-size:15px; }
}
@media (min-width: 1024px){
  .grill-hero-badge{ font-size:16px; }
}







/* Hide original subtitle only when we transform it */
.product-card__subtitle.pc-subtitle--hidden {
  display: none !important;
}

/* The grey rounded box */
.pc-feature-box {
  margin: 10px auto 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.05);
}

/* List styling */
.pc-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  direction: rtl;
}

/* One feature row */
.pc-features li {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-direction: row; 
  font-size: 12px;
  line-height: 1.3;
  color: rgba(0,0,0,.65);
}

/* Check icon */
.pc-features .pc-check {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.piza-video .advanced-slider__caption__inner--center{
    position: absolute;
      left: 50%; 
  transform: translateX(-50%);
    width: 90%;
  bottom: 8%;
}

.s-slider-container{
  overflow-y: visible;
}

.product-card--fit-height .product-card__image {
    background-color: white;
}
.product-card.has-features .product-card__image {
  position: absolute;
    transform: translateY(-59px);
    background-color: transparent;
}

/* Smooth scale + fade on all slides */
.cutsom-sections .swiper-slide {
  transition: transform 0.4s ease, opacity 0.4s ease !important;
  transform: scale(0.78) !important;
  opacity: 0.45 !important;
}

/* Active (center) slide: full size, full opacity */
.cutsom-sections .swiper-slide.swiper-slide-active {
  transform: scale(1.05) !important;
  opacity: 1 !important;
}
/* Hide the original banner inside .our-numbers once our section is injected */
.our-numbers.coal-replaced .banner {
  display: none !important;
}

.our-numbers.coal-replaced .container {
  padding: 0 !important;
}

/* ===== Coal 360 Section ===== */
#coal-360 {
  background: #f5f5f5;
  padding: 60px 20px;
}

.coal-sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.coal-video {
  width: auto;
  max-width: 300px;
  object-fit: contain;
  margin-bottom: 10px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1.4s ease 0.2s, transform 1.4s ease 0.2s;
}
.coal-fallback {
  width: auto;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  margin-bottom: 10px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1.4s ease 0.2s, transform 1.4s ease 0.2s;
}

#coal-360.coal-visible .coal-fallback {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 768px) {
  .coal-fallback {
    height: 17vh;
    max-width: 200px;
  }
}

.coal-video {
  position: relative;
  z-index: 1;
}

#coal-360.coal-visible .coal-video {
  opacity: 1;
  transform: scale(1);
}

.coal-content {
  text-align: center;
  direction: rtl;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease 0.8s, transform 1.2s ease 0.8s;
}

#coal-360.coal-visible .coal-content {
  opacity: 1;
  transform: translateY(0);
}

.coal-subtitle {
  font-size: clamp(2rem, 6vw, 4rem);
  color: #1a1a1a;
  margin-bottom: 16px;
  font-weight: 400;
}

.coal-stats {
  display: flex;
  gap: 60px;
  justify-content: center;
  direction: rtl;
}

.coal-stat {
  text-align: center;
}

.coal-number {
  font-size: clamp(2.4rem, 9.7vw, 5rem);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
  margin-bottom: 8px;
}

.coal-counter {
  display: inline-block;
  min-width: 1ch;
}

.coal-label {
  font-size: clamp(1.1rem, 6vw, 2.2rem);
  color: #1a1a1a;
  font-weight: 500;
}

@media (max-width: 768px) {
  #coal-360 {
    padding: 40px 20px;
  }

  .coal-video {
    height: 17vh;
    max-width: 200px;
  }
}
@media (max-width:720px){
    .s-block--about h2{
        font-size: 1.9rem;
    }
    .s-block--about p{
        font-size: 1.2rem;
    }
}
.has-features .product-card__content{
    margin-top: 12rem; 
}
.s-block--custom-products .home-block-title{
    margin-bottom: 3rem;
}
.fit-slider-products .s-slider-swiper-wrapper .swiper-slide custom-salla-product-card{
    overflow: visible !important;
}

.has-features .product-card__promotion{
    display: none;
}
.grill-banner{
    margin-top: 3.5rem !important;
}
.moving-quote{
    margin-top: 2rem;
}
/* Hide original banner once injected */
.comparison-table.ct-replaced .banner {
  display: none !important;
}

.comparison-table.ct-replaced .container {
  padding: 0 !important;
}

/* ===== Comparison Table Section ===== */
#ct-section {
  background: #f5f5f5;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ct-wrap {
  position: relative;
  width: 620px;
  max-width: 95vw;
  padding-top: 80px;
}

.ct-card {
  position: relative;
  z-index: 5;
  border-radius: 20px;
  overflow: hidden;
  background-color: #ffffffab;
  backdrop-filter: blur(25px);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow:
    0 25px 60px rgba(0,0,0,0.08),
    0 0 60px rgba(255,100,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.9);
  animation: ct-cardEntry 0.9s ease-out 0.2s both;
}

.ct-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.5) 45%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0.5) 55%,
    transparent 60%
  );
  animation: ct-glossSweep 5s ease-in-out 1.5s infinite;
  z-index: 10;
  pointer-events: none;
  border-radius: 20px;
  will-change: transform;
}

@keyframes ct-glossSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes ct-cardEntry {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.ct-header {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
  overflow: visible;
}

.ct-header-title {
  font-size: 1.7rem;
  font-weight: 900;
  color: #1a1a1a;
}

.ct-logo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  overflow: visible;
}

.ct-fire-img {

      position: absolute;
    top: -35px;
    left: 20%;
    transform: translateX(-50%);
    width: 220px;
    z-index: 1;
    pointer-events: none;
    animation: ct-cardEntry 0.9s ease-out 0.2s both;
}

.ct-logo-img {
  position: relative;
  z-index: 2;
  height: 55px;
  width: auto;
  animation: ct-logoPop 0.6s ease-out 0.6s both;
}

@keyframes ct-logoPop {
  from { opacity: 0; transform: scale(0.5); }
  60%  { transform: scale(1.1); }
  to   { opacity: 1; transform: scale(1); }
}

.ct-header-others {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: #626262;
}

.ct-glow-orb {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 180px;
  background: radial-gradient(ellipse, rgba(255,100,0,0.1) 0%, transparent 70%);
  z-index: 0;
  animation: ct-glowPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ct-glowPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* Rows */
.ct-row {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  align-items: center;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.ct-row:last-child { border-bottom: none; }
.ct-row:nth-child(even) { background: rgba(0,0,0,0.018); }
.ct-row:hover { background: rgba(255,120,0,0.06); }

.ct-row:nth-child(1) { animation: ct-rowSlide 0.5s ease-out 0.5s  both; }
.ct-row:nth-child(2) { animation: ct-rowSlide 0.5s ease-out 0.65s both; }
.ct-row:nth-child(3) { animation: ct-rowSlide 0.5s ease-out 0.8s  both; }
.ct-row:nth-child(4) { animation: ct-rowSlide 0.5s ease-out 0.95s both; }

@keyframes ct-rowSlide {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.ct-feature-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2a2a2a;
  line-height: 1.6;
}

.ct-icon-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ct-check {
  display: inline-block;
  font-size: 28px;
  font-weight: 900;
  color: #22c55e;
  filter: drop-shadow(0 0 8px rgba(34,197,94,.5));
}

.ct-cross {
  display: inline-block;
  font-size: 26px;
  font-weight: 900;
  color: #ef4444;
  filter: drop-shadow(0 0 8px rgba(239,68,68,.4));
}

.ct-row:hover .ct-check,
.ct-row:hover .ct-cross {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

@media (max-width: 500px) {
  .ct-header, .ct-row {
    grid-template-columns: 1fr 80px 80px;
    padding: 14px 16px;
  }
  .ct-header-title { font-size: 1.25rem; }
  .ct-fire-img     { width: 120px; }
  .ct-logo-img     { height: 40px; }
  .ct-feature-text { font-size: 0.88rem; }
  .ct-check        { font-size: 22px; }
  .ct-cross        { font-size: 20px; }
  .ct-header-others{ font-size: 0.78rem; }
}
.s-block--custom-reviews{
    background:url('https://cdn.files.salla.network/homepage/1333909099/6c9196c9-2244-4769-a7ce-8123ccc2ff71.webp') no-repeat center / cover;
  padding: 3rem 0px;
}
.s-block--custom-reviews h2{
    color: white;
}
.s-block--custom-reviews  .border-primary{
    display: none;
}
.s-block--custom-reviews .sicon-quote{
  color: #D95E16;
    opacity: 1;
}
.s-block--custom-reviews .bg-store-bg-secondary{
  background-color: #E5E5E5;
}
@media(min-width:900px){
    #injected-video-wrap{
        height: 80vh !important;
    }    
}


#injected-video-wrap {
  margin-top: 5rem;
  height: 40vh;
  overflow: hidden;
}

#injected-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.s-block--map{
    background-color: white;
    width: 90%;
    margin: auto;
    border-radius: 20px;
    transform: translatey(-60px);
}
.s-block--map .border-primary{
    display: none;
}
#about-4{
  padding-bottom: 0 !important;
}
.dynamic-banner--7{
  margin-top: 3.5rem !important;
}
div.product-card__content-wrapper > div.pc-feature-box > ul > li > span{
    text-align: right;
}
.s-block--blog  .border-primary{
    display: none;
}
.s-block--blog h2{
    font-size: 1.7rem;
}
.s-block--blog h2:after{
    content: 'شروحات، وصفات، ارشادات ومكتبة شواء شاملة';
    display: block;
    font-size: 1.2rem;
    color: #282828;
    margin-top: 6px;
}
.s-block--blog  div > article > div > div{
    display: none;
}
.s-block--blog h3{
    font-size: 1.2rem;
}
.bk-products-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}

.bk-section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.4;
  color: var(--color-store-text-primary, #1a1a1a);
}

.bk-title-en {
  display: block;
  font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800;
}

.bk-title-ar { display: block; }

.bk-slider-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bk-swiper-material {
  height: 420px;
  width: calc(100% - 32px);
  max-width: 1100px;
}

.bk-product-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--swiper-material-slide-border-radius);
}

.bk-product-overlay {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 60%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.65) 60%);
  border-radius: 0 0 var(--swiper-material-slide-border-radius) var(--swiper-material-slide-border-radius);
  z-index: 10;
}

.bk-product-name {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  text-align: center;
}

.bk-product-cta {
  padding: 9px 28px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: 2px solid #fff;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.bk-product-cta:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.15);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
  .bk-swiper-material { height: 420px; }
  .bk-section-title { font-size: 28px; margin-bottom: 24px; }
  .bk-product-name { font-size: 18px; }
  .bk-product-cta { padding: 8px 22px; font-size: 14px; }
  .bk-product-overlay { opacity: 0; transition: opacity 0.4s ease; }
  .swiper-slide-active .bk-product-overlay { opacity: 1; }
}

@media (max-width: 480px) {
  .bk-swiper-material { height: 400px; }
  .bk-product-overlay { gap: 12px; padding: 18px; height: 50%; }
  .bk-product-cta { padding: 8px 20px; font-size: 13px; }
}
.s-block--custom-products .s-slider-container{
      overflow: visible !important;
}
.footer-bottom{
    background-color: black !important;
    
}
.footer-bottom:after{
    content: '';
    background: url('https://cdn.files.salla.network/homepage/1333909099/0cd581ac-261c-45a0-aa40-1101878c0652.webp') center / contain no-repeat;
    display: block;
    width: 99vw;
    height: 4rem;
}
.bk-viewer-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 8px 14px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 8px;
  direction: rtl;
}

.bk-viewer-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: bk-pulse 1.5s ease-in-out infinite;
}

.bk-viewer-icon {
  flex-shrink: 0;
  color: #ef4444;
}

.bk-viewer-text {
  font-size: 13px;
  color: #1a1a1a;
}

.bk-viewer-text strong {
  color: #ef4444;
  font-weight: 700;
}

@keyframes bk-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}
#bk-desc-safety {
  margin-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

#bk-desc-safety .bk-desc-safety__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: start;
  background-color: #d95e16;
    padding: 1rem;
  color: white;
}

#bk-desc-safety .bk-desc-safety__trigger span:first-child {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}

#bk-desc-safety .bk-desc-safety__icon {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
}

#bk-desc-safety .bk-desc-safety__panel {
  padding-top: 14px;
}

#bk-desc-safety .bk-desc-safety__inner > *:first-child {
  margin-top: 0;
}

#bk-desc-safety .bk-desc-safety__inner > *:last-child {
  margin-bottom: 0;
}

#bk-desc-safety .bk-desc-safety__inner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

#bk-desc-safety .bk-desc-safety__inner a {
  text-decoration: underline;
}
#bk-desc-videos {
  margin-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 16px;
}

#bk-desc-videos .bk-desc-videos__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: start;
      background-color: #000000;
    padding: 1rem;
    color: white;
}

#bk-desc-videos .bk-desc-videos__trigger span:first-child {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}

#bk-desc-videos .bk-desc-videos__icon {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
}

#bk-desc-videos .bk-desc-videos__panel {
  padding-top: 14px;
}

#bk-desc-videos .bk-desc-videos__inner > *:first-child {
  margin-top: 0;
}

#bk-desc-videos .bk-desc-videos__inner > *:last-child {
  margin-bottom: 0;
}

#bk-desc-videos .bk-desc-videos__inner iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 8px;
}

#bk-desc-videos .bk-desc-videos__inner strong {
  display: inline-block;
  margin: 10px 0 8px;
}
.ge-section{
  --color-accent:#d95e16;
  --color-accent-dark:#b94d10;
  --color-accent-glow:rgba(217,94,22,.4);
  --radius-md:12px;
  --radius-lg:20px;
  --transition:.3s ease;
}

.ge-section,
.ge-section.theme-light{
  --color-bg:#f5f5f5;
  --color-bg-card:#ffffff;
  --color-text:#1a1a1a;
  --color-text-muted:#666666;
  --color-border:rgba(217,94,22,.2);
  --color-hotspot-bg:rgba(255,255,255,.9);
  --gradient-bg:#f5f5f5;
  --shadow-card:none;
  --shadow-image:none;
}

.ge-section.theme-dark{
  --color-bg:#0a0a0a;
  --color-bg-card:#1a1a1a;
  --color-text:#f5f5f5;
  --color-text-muted:#a0a0a0;
  --color-border:rgba(217,94,22,.2);
  --color-hotspot-bg:rgba(10,10,10,.7);
  --gradient-bg:linear-gradient(180deg,#0a0a0a 0%,#151515 50%,#0a0a0a 100%);
  --shadow-card:0 10px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-image:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(217,94,22,.1);
}

.ge-section,
.ge-section *{ box-sizing:border-box; }

.ge-section{
  direction:rtl;
  padding:40px 20px;
  background:var(--gradient-bg);
  color:var(--color-text);
  margin-bottom:24px;
}

@media(min-width:768px){
  .ge-section{ padding:60px 40px; }
}

.ge-header{
  text-align:center;
  margin:0 auto 40px;
  max-width:800px;
  opacity:0;
  transform:translateY(30px);
}

@media(min-width:768px){
  .ge-header{ margin-bottom:60px; }
}

.ge-header h2{
  font-size:clamp(1.5rem,5vw,2.5rem);
  font-weight:700;
  margin-bottom:16px;
  display:inline-block;
  position:relative;
  color:var(--color-text);
}

.ge-header h2::after{
  content:"";
  position:absolute;
  bottom:-8px;
  right:50%;
  transform:translateX(50%);
  width:80px;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--color-accent),transparent);
  border-radius:2px;
}

.ge-header p{
  font-size:clamp(.95rem,2.5vw,1.1rem);
  color:var(--color-text-muted);
  max-width:500px;
  margin:0 auto;
}

.ge-content{
  display:flex;
  flex-direction:column;
  gap:30px;
  max-width:1400px;
  margin:0 auto;
  align-items:center;
}

@media(min-width:768px){
  .ge-content{
    flex-direction:row;
    align-items:flex-start;
    gap:50px;
  }
}

@media(min-width:1200px){
  .ge-content{ gap:80px; }
}

.ge-image-wrap{
  position:relative;
  width:100%;
  max-width:800px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-image);
  opacity:0;
  transform:translateY(30px);
}

@media(min-width:768px){
  .ge-image-wrap{
    flex:1.2;
    max-width:none;
  }
}

.ge-image-wrap img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.ge-hotspot{
  position:absolute;
  top:var(--hs-top);
  right:var(--hs-right);
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--color-hotspot-bg);
  border:2px solid var(--color-accent);
  color:var(--color-accent);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--transition);
  transform:translate(-50%,-50%) scale(0);
  z-index:10;
  opacity:0;
}

@media(min-width:768px){
  .ge-hotspot{
    width:42px;
    height:42px;
    font-size:16px;
  }
}

.ge-hotspot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--color-accent);
  animation:ge-pulse 2s ease-out infinite;
  opacity:0;
}

.ge-hotspot:hover{
  background:var(--color-accent);
  color:#fff;
  transform:translate(-50%,-50%) scale(1.1);
}

.ge-hotspot:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--color-accent-glow);
}

.ge-hotspot.active{
  background:var(--color-accent);
  color:#fff;
  box-shadow:0 0 20px var(--color-accent-glow);
}

.ge-hotspot.active::before{
  animation:none;
}

@keyframes ge-pulse{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(2); opacity:0; }
}

.ge-details{
  width:100%;
  max-width:500px;
  background:var(--color-bg-card);
  border-radius:var(--radius-lg);
  padding:24px;
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-card);
  opacity:0;
  transform:translateY(30px);
}

@media(min-width:768px){
  .ge-details{
    flex:0.8;
    max-width:400px;
    position:sticky;
    top:40px;
    padding:35px;
  }
}

@media(min-width:1200px){
  .ge-details{
    max-width:450px;
    padding:40px;
  }
}

.ge-details-image{
  width:100%;
  max-width:280px;
  margin:0 auto 20px;
  border-radius:var(--radius-md);
  overflow:hidden;
}

.ge-details-img{
  width:100%;
  max-height:180px;
  display:block;
  object-fit:cover;
  transition:opacity .3s ease;
}

.ge-details-title{
  font-size:clamp(1.2rem,3vw,1.5rem);
  font-weight:700;
  color:var(--color-text);
  margin:0 0 16px;
  line-height:1.4;
}

.ge-details-desc{
  font-size:1rem;
  color:var(--color-text-muted);
  line-height:1.8;
  margin:0 0 24px;
}

.ge-nav-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.ge-nav-pill{
  width:40px;
  height:40px;
  border-radius:50%;
  background:transparent;
  border:2px solid rgba(217,94,22,.3);
  color:var(--color-text-muted);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ge-nav-pill:hover{
  border-color:var(--color-accent);
  color:var(--color-accent);
}

.ge-nav-pill:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--color-accent-glow);
}

.ge-nav-pill.active{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:#fff;
}

.ge-section.ge-visible .ge-header,
.ge-section.ge-visible .ge-image-wrap,
.ge-section.ge-visible .ge-details{
  animation:ge-fadeUp 0.7s ease forwards;
}

.ge-section.ge-visible .ge-image-wrap{ animation-delay:0.15s; }
.ge-section.ge-visible .ge-details{ animation-delay:0.3s; }
.ge-section.ge-visible .ge-hotspot{ animation:ge-hotspotPop 0.4s ease forwards; }

.ge-section.ge-visible .ge-hotspot[data-index="0"]{ animation-delay:0.5s; }
.ge-section.ge-visible .ge-hotspot[data-index="1"]{ animation-delay:0.6s; }
.ge-section.ge-visible .ge-hotspot[data-index="2"]{ animation-delay:0.7s; }
.ge-section.ge-visible .ge-hotspot[data-index="3"]{ animation-delay:0.8s; }
.ge-section.ge-visible .ge-hotspot[data-index="4"]{ animation-delay:0.9s; }
.ge-section.ge-visible .ge-hotspot[data-index="5"]{ animation-delay:1s; }
.ge-section.ge-visible .ge-hotspot[data-index="6"]{ animation-delay:1.1s; }

@keyframes ge-fadeUp{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes ge-hotspotPop{
  from{ opacity:0; transform:translate(-50%,-50%) scale(0); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}

.ge-details-img.changing,
.ge-details-title.changing,
.ge-details-desc.changing{
  opacity:0;
  transition:opacity 0.18s ease;
}
.bf-section{
  background:#f5f5f5;
  padding:80px 20px;
  direction:rtl;
}

.bf-section *{
  box-sizing:border-box;
}

.bf-header{
  text-align:center;
  margin:0 auto 50px;
  max-width:700px;
}

.bf-label{
  display:inline-block;
  font-size:.85rem;
  letter-spacing:2px;
  margin-bottom:16px;
  font-weight:600;
  color:var(--color-accent,#d95e16);
}

.bf-header h2{
  font-size:clamp(1.8rem,5vw,2.8rem);
  font-weight:700;
  color:#1a1a1a;
  margin:0 0 16px;
}

.bf-header p{
  font-size:1.1rem;
  color:#666;
  line-height:1.7;
  margin:0;
}


#bento-features {
  background: #f5f5f5;
  padding: 30px 20px;
  direction: rtl;
}
#bento-features{ background:#f5f5f5; direction:rtl; }
#bento-features *{ box-sizing:border-box; }

#bento-features .bento-header{ text-align:center; margin:0 auto 50px; max-width:700px; }
#bento-features .bento-label{ display:inline-block; font-size:.85rem; letter-spacing:2px; margin-bottom:16px; font-weight:600; color:var(--color-accent,#d95e16); }
#bento-features .bento-header h2{ font-size:clamp(1.8rem,5vw,2.8rem); font-weight:700; color:#1a1a1a; margin:0 0 16px; }
#bento-features .bento-header p{ font-size:1.1rem; color:#666; line-height:1.7; margin:0; }

#bento-features .bento-grid{ display:grid; grid-template-columns:1fr; gap:16px; max-width:1200px; margin:0 auto; }
#bento-features .bento-card{ background:#fff; border-radius:24px; padding:28px; position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease; opacity:0; transform:translateY(30px);
}
#bento-features .bento-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.08); }
#bento-features .bento-card h3{ font-size:1.5rem; font-weight:700; color:#1a1a1a; margin:0 0 10px; line-height:1.4; }
#bento-features .bento-card p{ font-size:.95rem; color:#666; line-height:1.6; margin:0; }

#bento-features.bento-visible .bento-card{ animation:bentoFadeIn .6s cubic-bezier(.16,1,.3,1) forwards; }
#bento-features.bento-visible .bento-card:nth-child(1){ animation-delay:.1s; }
#bento-features.bento-visible .bento-card:nth-child(2){ animation-delay:.15s; }
#bento-features.bento-visible .bento-card:nth-child(3){ animation-delay:.2s; }
#bento-features.bento-visible .bento-card:nth-child(4){ animation-delay:.25s; }
#bento-features.bento-visible .bento-card:nth-child(5){ animation-delay:.3s; }
@keyframes bentoFadeIn{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

@media (min-width:768px){
  #bento-features{ padding:100px 40px; }
  #bento-features .bento-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
}
@media (min-width:1024px){
  #bento-features .bento-grid{ grid-template-columns:1.2fr repeat(2,1fr); grid-template-rows:auto auto; gap:20px; }
  #bento-features .bento-card.card-large{ grid-column:1; grid-row:1 / 3; }
  #bento-features .bento-card:not(.card-large):nth-child(2){ grid-column:2; grid-row:1; }
  #bento-features .bento-card:not(.card-large):nth-child(3){ grid-column:3; grid-row:1; }
  #bento-features .bento-card:not(.card-large):nth-child(4){ grid-column:2; grid-row:2; }
  #bento-features .bento-card:not(.card-large):nth-child(5){ grid-column:3; grid-row:2; }
  #bento-features .bento-card{ padding:32px; }
}
/* ===== Bento Features (rest of CSS) ===== */
#bento-features {
  --color-accent: #d95e16;
}

/* Heat card layout */
#bento-features .bento-card.card-heat {
  display: flex;
  flex-direction: column;
}
#bento-features .heat-image-container {
  position: relative;
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
}
#bento-features .heat-grill-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Coal glow */
#bento-features .coal-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff4500 0%, #8b0000 50%, transparent 100%);
  box-shadow: 0 0 30px rgba(255, 69, 0, 0.4);
  transition: all 0.5s ease;
  pointer-events: none;
}
#bento-features .coal-glow::after {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 69, 0, 0.3) 0%, transparent 70%);
  animation: pulse-glow 2s ease-in-out infinite;
  opacity: 0.4;
  transition: opacity 0.5s ease;
}
#bento-features .coal-glow[data-level="1"] {
  background: radial-gradient(circle, #8b4513 0%, #4a2a1a 50%, transparent 100%);
  box-shadow: 0 0 15px rgba(139, 69, 19, 0.3);
}
#bento-features .coal-glow[data-level="1"]::after {
  opacity: 0.1;
}
#bento-features .coal-glow[data-level="2"] {
  background: radial-gradient(circle, #cd5c5c 0%, #8b2a2a 50%, transparent 100%);
  box-shadow: 0 0 20px rgba(205, 92, 92, 0.4);
}
#bento-features .coal-glow[data-level="2"]::after {
  opacity: 0.2;
}
#bento-features .coal-glow[data-level="3"] {
  background: radial-gradient(circle, #ff4500 0%, #8b0000 50%, transparent 100%);
  box-shadow: 0 0 30px rgba(255, 69, 0, 0.5);
}
#bento-features .coal-glow[data-level="3"]::after {
  opacity: 0.4;
}
#bento-features .coal-glow[data-level="4"] {
  background: radial-gradient(circle, #ff6a00 0%, #ff2a00 50%, transparent 100%);
  box-shadow: 0 0 40px rgba(255, 106, 0, 0.6);
}
#bento-features .coal-glow[data-level="4"]::after {
  opacity: 0.6;
}
#bento-features .coal-glow[data-level="5"] {
  background: radial-gradient(circle, #ffcc00 0%, #ff6a00 40%, transparent 100%);
  box-shadow: 0 0 60px rgba(255, 204, 0, 0.7);
}
#bento-features .coal-glow[data-level="5"]::after {
  opacity: 0.9;
}
@keyframes pulse-glow {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* Heat label */
#bento-features .heat-level-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  direction: rtl;
  backdrop-filter: blur(4px);
}

/* Heat slider */
#bento-features .heat-slider-container {
  margin-top: 20px;
  direction: ltr;
}
#bento-features .heat-slider-steps {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0 4px;
}
#bento-features .heat-slider-track {
  position: absolute;
  top: 50%;
  left: 18px;
  right: 18px;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  transform: translateY(-50%);
  z-index: 0;
}
#bento-features .heat-slider-fill {
  position: absolute;
  top: 50%;
  right: 18px;
  height: 4px;
  background: var(--color-accent, #d95e16);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: width 0.3s ease;
  z-index: 0;
}
#bento-features .heat-slider-steps[data-level="1"] .heat-slider-fill {
  width: 0%;
}
#bento-features .heat-slider-steps[data-level="2"] .heat-slider-fill {
  width: 25%;
}
#bento-features .heat-slider-steps[data-level="3"] .heat-slider-fill {
  width: 50%;
}
#bento-features .heat-slider-steps[data-level="4"] .heat-slider-fill {
  width: 75%;
}
#bento-features .heat-slider-steps[data-level="5"] .heat-slider-fill {
  width: 90%;
}
#bento-features .heat-step {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e0e0e0;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #888;
  transition: all 0.3s ease;
}
#bento-features .heat-step:hover {
  background: #d0d0d0;
  transform: scale(1.05);
}
#bento-features .heat-step.active {
  background: var(--color-accent, #d95e16);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(217, 94, 22, 0.4);
}
#bento-features .heat-step.passed {
  background: var(--color-accent, #d95e16);
  color: #fff;
}

/* Media cards */
#bento-features .card-media {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#bento-features .bento-card-media-top {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
#bento-features .card-media .bento-card-content {
  padding: 20px 24px;
}
#bento-features .card-media .bento-card-content h3 {
  margin: 0;
}

/* Media bottom card (ash drawer image) */
#bento-features .card-media-bottom {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden;
}
#bento-features .bento-card-media-bottom {
  width: calc(100% + 56px);
  margin-top: auto;
  height: 120px;
  display: block;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 1024px) {
  #bento-features .bento-card-media-bottom {
    width: calc(100% + 64px);
    height: 216px;
  }
}

/* Thermometer card */
#bento-features .card-thermometer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
#bento-features .thermometer-content {
  flex: 1;
  text-align: right;
}
#bento-features .thermometer-content h3 {
  margin: 0 0 12px;
}
#bento-features .temp-counter {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}
#bento-features .temp-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-accent, #d95e16);
  line-height: 1;
}
#bento-features .temp-unit {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent, #d95e16);
}
#bento-features .thermometer-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}
#bento-features .thermometer-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 768px) {
  #bento-features .temp-number {
    font-size: 3rem;
  }
  #bento-features .thermometer-image {
    width: 100px;
    height: 100px;
  }
}

/* Side-by-side */
#bento-features .card-side-by-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
#bento-features .card-side-text {
  flex: 1;
  text-align: right;
}
#bento-features .card-side-text h3 {
  margin: 0;
}
#bento-features .card-side-media {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
}
#bento-features .card-side-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  #bento-features .card-side-media {
    width: 120px;
    height: 120px;
  }
}
#bento-features .bento-card.card-media-bottom{
  padding: 0 !important;
  overflow: hidden !important;
}
#bento-features .bento-card.card-media-bottom > h3{
  padding: 24px 28px 12px !important;
  margin: 0 !important;
}
#bento-features .bento-card.card-media-bottom .bento-card-media-bottom{
  width: 100% !important;
  display: block !important;
  height: 180px;
  object-fit: cover !important;
}
@media (min-width: 1024px){
  #bento-features .bento-card.card-media-bottom .bento-card-media-bottom{
    height: 240px;
  }
}

/* ===== Heat (Large) ===== */
#bento-features .bento-card.card-heat{
  display:flex;
  flex-direction:column;
}

#bento-features .heat-image-container{
  position:relative;
  margin-top:16px;
  border-radius:12px;
  overflow:hidden;
}

#bento-features .heat-grill-image{
  width:100%;
  height:auto;
  display:block;
}

/* Dual glow */
#bento-features .coal-glow{
  position:absolute;
  top:50%;
  width:50px;
  height:50px;
  border-radius:50%;
  pointer-events:none;
  transition:all .4s cubic-bezier(.4,0,.2,1);
}

#bento-features .coal-glow-left{
  left:30%;
  transform:translate(-50%,-50%);
}

#bento-features .coal-glow-right{
  right:30%;
  transform:translate(50%,-50%);
}

#bento-features .coal-glow::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--glow-color, radial-gradient(circle, #8b4513 0%, #4a2a1a 50%, transparent 100%));
  transition:all .4s cubic-bezier(.4,0,.2,1);
}

#bento-features .coal-glow::after{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius:50%;
  background:var(--glow-outer, radial-gradient(circle, rgba(139, 69, 19, 0.2) 0%, transparent 70%));
  opacity:var(--glow-pulse-opacity, .2);
  animation:dualPulseGlow 2.5s ease-in-out infinite;
  transition:all .4s cubic-bezier(.4,0,.2,1);
}

@keyframes dualPulseGlow{
  0%,100%{ transform:scale(1); opacity:var(--glow-pulse-opacity,.2); }
  50%{ transform:scale(1.2); opacity:calc(var(--glow-pulse-opacity,.2) * 1.5); }
}

/* labels overlay */
#bento-features .heat-labels-overlay{
  position:absolute;
  bottom:12px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-around;
  padding:0 10%;
  pointer-events:none;
}

#bento-features .heat-label{
  background:rgba(0,0,0,.82);
  color:#fff;
  padding:6px 12px;
  border-radius:16px;
  font-size:.75rem;
  font-weight:700;
  white-space:nowrap;
  text-align:center;
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.12);
}

#bento-features .heat-label span{
  display:block;
  font-size:.65rem;
  opacity:.85;
  margin-top:2px;
}
/* controls */
#bento-features .dual-controls-container{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

#bento-features .handle-control{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  background:#f8f8f8;
  border-radius:16px;
  border:1px solid #eee;
}

#bento-features .handle-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

#bento-features .handle-title{
  font-size:.9rem;
  font-weight:800;
  color:#1a1a1a;
}

#bento-features .handle-value{
  font-size:.85rem;
  font-weight:700;
  color:var(--color-accent);
  padding:4px 10px;
  background:rgba(217,94,22,.10);
  border-radius:8px;
}

#bento-features .handle-slider-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
}

#bento-features .slider-label{
  font-size:.7rem;
  color:#888;
  font-weight:700;
  min-width:35px;
  text-align:center;
}

#bento-features .handle-slider{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:8px;
  border-radius:4px;
  outline:none;
  cursor:pointer;

  /* 0 on left = قريب (hot), 100 on right = بعيد (cool) */
  direction:ltr;
  background:linear-gradient(to right, #ffcc00 0%, #ff6a00 50%, #8b4513 100%);
}

#bento-features .handle-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:28px;
  height:28px;
  background:#fff;
  border:3px solid var(--color-accent);
  border-radius:50%;
  cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease;
}
#bento-features .handle-slider::-webkit-slider-thumb:hover{
  transform:scale(1.1);
  box-shadow:0 4px 12px rgba(217,94,22,.4);
}
#bento-features .handle-slider::-webkit-slider-thumb:active{
  cursor:grabbing;
  transform:scale(1.15);
}

#bento-features .handle-slider::-moz-range-thumb{
  width:28px;
  height:28px;
  background:#fff;
  border:3px solid var(--color-accent);
  border-radius:50%;
  cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease;
}
#ge-section-ydlpGEx header{
    margin-bottom: 0
}

#ge-section-ydlpGEx .ge-hotspot{
    width: 25px;
    height: 25px;
}
#ge-section-ydlpGEx .ge-content{
    gap:0px;
}