.elementor-221 .elementor-element.elementor-element-723dcc9{--display:flex;}/* Start custom CSS */:root{
  --sea:#0A4A67; --aqua:#5DB8D0; --sun:#EFBF54; --graph:#4A4A4A; --muted:#6b7a84;
}
.azz-sp{--radius:18px; font-family:"Playfair Display",serif; color:var(--graph); max-width:1200px; margin:0 auto}
.azz-sp *{box-sizing:border-box}

/* HEAD */
.azz-sp .sp-head{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:10px 0 18px}
.azz-sp .sp-badge{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px;
  background:linear-gradient(135deg,var(--aqua),#8FD9EA); color:#fff; font:700 12px/1 "Lora",serif; border:1px solid rgba(255,255,255,.6)}
.azz-sp .sp-badge svg{width:30px;height:18px}
.azz-sp .sp-title{margin:0; font:700 clamp(26px,3.2vw,38px)/1.15 "Lora",serif; color:#0a3244}
.azz-sp .sp-price{margin-left:auto; font:700 clamp(18px,2.4vw,26px)/1 "Lora",serif; color:#0a3244;
  background:linear-gradient(180deg,rgba(239,191,84,.35),rgba(239,191,84,.12)); padding:6px 10px; border-radius:10px}

/* GRID */
.azz-sp .sp-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:start}
@media(max-width:980px){ .azz-sp .sp-grid{grid-template-columns:1fr} .azz-sp .sp-price{margin:0} }

/* GALLERY */
.azz-sp .gallery{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 40px rgba(10,74,103,.12);
  border:1px solid rgba(10,74,103,.10); background:#fff}
.azz-sp .gallery-main{position:relative; aspect-ratio:4/3; background:#f4f8fa}
.azz-sp .gallery-main img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none}
.azz-sp .gallery-main img.active{display:block}
.azz-sp .gallery-thumbs{display:flex; gap:10px; padding:10px; background:linear-gradient(180deg,#fff,#f7fbfd)}
.azz-sp .thumb{flex:1 1 auto; border-radius:12px; overflow:hidden; border:1px solid rgba(10,74,103,.12); cursor:pointer}
.azz-sp .thumb img{width:100%; height:76px; object-fit:cover; display:block; transition:transform .2s}
.azz-sp .thumb:hover img{transform:scale(1.03)}

/* BUY */
.azz-sp .buy{position:relative; border-radius:var(--radius); border:1px solid rgba(10,74,103,.10); background:#fff;
  box-shadow:0 18px 40px rgba(10,74,103,.10); padding:18px}
.azz-sp .notes{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px}

/* chips */
.azz-sp .chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:linear-gradient(135deg, rgba(93,184,208,.18), rgba(10,74,103,.14));
  border:1px solid rgba(10,74,103,.18); color:var(--sea); font:600 12px/1 "Playfair Display",serif; box-shadow:0 6px 14px rgba(10,74,103,.08)}
.azz-sp .chip svg{width:16px;height:16px}

/* chip színezések */
.azz-sp .chip--frangipani svg{stroke:#fff; filter:drop-shadow(0 0 4px rgba(255,255,255,.6))}
.azz-sp .chip--pistachio svg{stroke:#3F6F34; fill:#8AC37A}
.azz-sp .chip--amber svg{stroke:#9F7C15; fill:#EFBF54}

/* form */
.azz-sp .var-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0}
.azz-sp .field{display:flex; flex-direction:column; gap:6px}
.azz-sp .field label{font:600 13px/1.1 "Playfair Display",serif; color:#0a3244}
.azz-sp .select, .azz-sp .qty{appearance:none; width:100%; padding:12px 14px; border:1px solid rgba(10,74,103,.18); border-radius:12px; background:#fff}
.azz-sp .qty{max-width:130px}

/* CTA */
.azz-sp .cta{display:flex; gap:10px; align-items:center; margin-top:10px}
.azz-sp .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(135deg, var(--sun), #FFD772); color:#1b1b1b; font:800 14px/1 "Playfair Display",serif;
  box-shadow:0 10px 24px rgba(239,191,84,.45); cursor:pointer}
.azz-sp .btn.secondary{background:linear-gradient(135deg, var(--aqua), #8FD9EA); color:#fff}

/* trust */
.azz-sp .trust{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 4px}
.azz-sp .pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#0A4A67; color:#fff; font:700 12px/1 "Lora",serif}
.azz-sp .pill svg{width:14px;height:14px}

/* description */
.azz-sp .desc{position:relative; margin:18px 0 0; padding:18px; border-radius:16px; border:1px solid rgba(10,74,103,.1); background:#fff}
.azz-sp .desc::before{content:""; position:absolute; left:-8px; top:10px; bottom:10px; width:4px; border-radius:999px; background:linear-gradient(180deg,var(--aqua),var(--sun))}
.azz-sp .desc .dropcap{float:left; font:700 54px/0.9 "Lora",serif; color:var(--sea); margin:8px 10px 0 0; text-shadow:0 10px 20px rgba(10,74,103,.18)}
.azz-sp .desc p{margin:0 0 10px; font:500 16px/1.75 "Playfair Display",serif; color:#22323B}
.azz-sp .hl{background:linear-gradient(180deg, rgba(239,191,84,.32), rgba(239,191,84,.12)); padding:0 4px; border-radius:6px; box-decoration-break:clone}
.azz-sp .sea{background:linear-gradient(180deg, rgba(93,184,208,.28), rgba(93,184,208,.10)); padding:0 4px; border-radius:6px; box-decoration-break:clone}

/* accordion */
.azz-sp .acc{margin-top:16px; border-top:1px solid rgba(10,74,103,.12)}
.azz-sp .acc-item{border-bottom:1px solid rgba(10,74,103,.12)}
.azz-sp .acc-sum{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; cursor:pointer}
.azz-sp .acc-sum h4{margin:0; font:700 15px/1.1 "Lora",serif; color:#0a3244}
.azz-sp .acc-sum svg{width:18px;height:18px; transition:transform .2s}
.azz-sp .acc-body{display:none; padding:0 14px 14px 14px; color:#334b57; font-size:14px}
.azz-sp .acc-item.open .acc-body{display:block}
.azz-sp .acc-item.open .acc-sum svg{transform:rotate(180deg)}

/* related */
.azz-sp .rel{margin:28px 0 0}
.azz-sp .rel h3{margin:0 0 12px; font:700 20px/1.2 "Lora",serif; color:#0a3244}
.azz-sp .rel-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media(max-width:980px){ .azz-sp .rel-row{grid-template-columns:repeat(2,1fr)} }
.azz-sp .rel-card{border:1px solid rgba(10,74,103,.12); border-radius:14px; overflow:hidden; background:#fff}
.azz-sp .rel-card img{width:100%; height:140px; object-fit:cover}
.azz-sp .rel-card .t{padding:10px; font:600 13px/1.25 "Playfair Display",serif; color:#163b4c}

/* nav ikonok (wave + sun) – animált */
.azz-sp .sp-nav{display:flex; gap:10px; margin-top:10px}
.azz-sp .nav-btn{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--sea);
  border:1px solid rgba(255,255,255,.2); box-shadow:0 8px 18px rgba(0,0,0,.18); cursor:pointer}
.azz-sp .nav-btn svg{width:26px;height:26px}
.azz-sp .nav-left .wave{stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:26 18; animation:azzWave 2.2s linear infinite}
@keyframes azzWave{to{stroke-dashoffset:-44}}
.azz-sp .nav-right .sun-core{fill:#fff}
.azz-sp .nav-right .sun-rays{stroke:#fff; stroke-width:2.1; stroke-linecap:round; transform-origin:13px 13px; animation:azzSun 10s linear infinite}
@keyframes azzSun{to{transform:rotate(360deg)}}

/* Elementor „lila hover” kilövése ezen belül */
.azz-sp .btn, .azz-sp .btn:hover, .azz-sp .btn:focus,
.azz-sp .nav-btn, .azz-sp .nav-btn:hover, .azz-sp .nav-btn:focus {
  color:inherit; text-decoration:none; outline:none;
}/* End custom CSS */