/* Pagina produsului, paginile de continut, blogul, butoanele fixe. */

/* ---------- Produs ---------- */
.pdp { padding: 18px 0 64px; }
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.pdp__media { position: sticky; top: 100px; background: #fff; border: 1.5px solid var(--border); border-radius: 22px; padding: 30px; border-top: 6px solid var(--pc, var(--accent)); }
.pdp--lozione { --pc: var(--c-lozione); }
.pdp--forte { --pc: var(--c-forte); }
.pdp--gel { --pc: var(--c-gel); }
.pdp__img { width: 78%; max-width: 380px; margin: 0 auto; }
.pdp__info h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .3em; }
.pdp__info .eyebrow { color: var(--pc); }
.pdp__size { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.pdp__lead { font-size: 1.08rem; color: var(--text-2); }
.pdp__key { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; font-weight: 600; }
.pdp__key li { display: flex; gap: 10px; align-items: center; }
.pdp__key .icon { color: var(--ok); stroke-width: 2.6; }
.pdp__ask { margin-top: 18px; font-size: .96rem; }
.pdp__ask a { font-weight: 700; color: var(--wa); text-decoration: none; }
@media (max-width: 900px) {
  .pdp__grid { grid-template-columns: 1fr; gap: 24px; }
  .pdp__media { position: relative; top: 0; padding: 18px; }
  .pdp__img { width: 40%; max-width: 200px; }
}
.pdp-tabs { position: sticky; top: 76px; z-index: 30; background: rgba(250, 246, 239, .96); border-block: 1px solid var(--border); }
.pdp-tabs .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pdp-tabs a { flex: none; padding: 13px 14px; color: var(--text-2); font-weight: 600; text-decoration: none; font-size: .95rem; border-bottom: 2px solid transparent; }
.pdp-tabs a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) { .pdp-tabs { top: 66px; } }

.howto { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.howto__step { position: relative; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 26px 24px 22px; }
.howto__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }
.howto__icon .icon { width: 28px; height: 28px; }
.howto__n { position: absolute; top: 18px; right: 20px; font-family: var(--font-display); font-size: 2rem; color: var(--border); }
.howto__step p { margin: 0; color: var(--text-2); font-size: .97rem; }
@media (max-width: 860px) { .howto { grid-template-columns: 1fr; } }
.schedule { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 24px 28px; }
.schedule dl { margin: 0 0 12px; display: grid; gap: 0; }
.schedule dl > div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.schedule dl > div:last-child { border-bottom: 0; }
.schedule dt { font-weight: 700; }
.schedule dd { margin: 0; color: var(--text-2); }
.schedule--inline { padding: 8px 20px; margin: 4px 0 18px; }
@media (max-width: 640px) { .schedule dl > div { grid-template-columns: 1fr; gap: 2px; } }
.warn { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.warn li { display: flex; gap: 14px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.warn .icon { color: var(--gold); width: 24px; height: 24px; margin-top: 2px; }
.warn p { margin: 4px 0 0; color: var(--text-2); font-size: .97rem; }
.ingredients { font-size: .98rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 16px 18px; }

/* ---------- Pagini de continut ---------- */
.rules { background: var(--surface); border: 1.5px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 24px 28px; }
.rules h2 { font-size: 1.4rem; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 26px; }
.value .icon { width: 32px; height: 32px; color: var(--accent); margin-bottom: 12px; }
.value h2 { font-size: 1.3rem; }
.value p { margin: 0; color: var(--text-2); }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.contact-card { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px; color: var(--text); text-decoration: none; }
.contact-card:hover { border-color: var(--accent); color: var(--text); box-shadow: var(--shadow); }
.contact-card .icon { width: 30px; height: 30px; color: var(--accent); }
.contact-card--wa .icon { color: var(--wa); }
.contact-card strong { display: block; }
.contact-card span { word-break: break-word; }
@media (max-width: 760px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-more h2 { font-size: 1.3rem; }
.company { margin-top: 24px; font-size: .9rem; color: var(--text-3); }
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.post-list a { display: block; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 18px 20px; color: var(--text); text-decoration: none; }
.post-list a:hover { border-color: var(--accent); }
.post-list h2 { font-size: 1.25rem; margin-bottom: 6px; }
.post-list p { margin: 0; color: var(--text-2); font-size: .95rem; }
.pager { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px; }
.pager .page-numbers { padding: 8px 13px; border: 1.5px solid var(--border); border-radius: 8px; text-decoration: none; background: var(--surface); }
.pager .current { background: var(--btn); color: var(--on-accent); border-color: var(--btn); }

/* ---------- Butoane fixe ---------- */
/* Butonul WhatsApp: inele care pulseaza, iconita care se misca la cateva secunde si un balon de mesaj
   care apare din cand in cand, ca sa invite la scris fara sa acopere pagina (Augustin, 2026-11-04). */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px; background: linear-gradient(135deg, #2bd06b, #1a7d44 70%); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 26px rgba(26, 125, 68, .45), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s, box-shadow .2s; animation: wa-hop 7s ease-in-out 2s infinite; }
.wa-float::before, .wa-float::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 2px solid rgba(43, 208, 107, .7); animation: wa-ring 2.6s ease-out infinite; pointer-events: none; }
.wa-float::after { animation-delay: 1.3s; }
.wa-float:hover { color: #fff; transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 32px rgba(26, 125, 68, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.wa-float__ico { position: relative; display: inline-flex; }
.wa-float .icon { width: 28px; height: 28px; animation: wa-wiggle 7s ease-in-out 2s infinite; }
.wa-float__dot { position: absolute; top: -3px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: #ff4b3e; border: 2px solid #fff; animation: wa-dot 1.8s ease-in-out infinite; }
.wa-float__bubble { position: absolute; right: calc(100% + 12px); bottom: 50%; transform: translateY(50%); width: max-content; max-width: 210px; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: #fffdf9; color: var(--text); font-size: .86rem; font-weight: 500; line-height: 1.3; text-align: left; box-shadow: 0 8px 24px rgba(48, 34, 18, .22); border: 1px solid var(--border); opacity: 0; pointer-events: none; animation: wa-bubble 24s ease-in-out 4s infinite; }
.wa-float__bubble b { display: block; color: var(--wa); font-weight: 700; }
@media (min-width: 761px) { .wa-float__bubble { display: none; } }
@media (max-width: 760px) { .wa-float__label { display: none; } .wa-float { padding: 15px; } }
@keyframes wa-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes wa-hop { 0%, 86%, 100% { transform: none; } 89% { transform: translateY(-7px); } 92% { transform: none; } 95% { transform: translateY(-3px); } }
@keyframes wa-wiggle { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(-16deg); } 91% { transform: rotate(14deg); } 94% { transform: rotate(-8deg); } }
@keyframes wa-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes wa-bubble { 0%, 100% { opacity: 0; transform: translate(8px, 50%) scale(.9); } 3%, 30% { opacity: 1; transform: translate(0, 50%) scale(1); } 34% { opacity: 0; transform: translate(8px, 50%) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-float .icon, .wa-float::before, .wa-float::after, .wa-float__dot, .wa-float__bubble { animation: none; } .wa-float::before, .wa-float::after { display: none; } }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(48, 34, 18, .12); }
.buybar[hidden] { display: none; }
.buybar__txt { display: flex; flex-direction: column; line-height: 1.25; font-size: .9rem; color: var(--text-2); }
.buybar__txt strong { color: var(--text); font-size: 1rem; }
.has-buybar .wa-float { bottom: 84px; }
@media (min-width: 901px) { .buybar { display: none !important; } .has-buybar .wa-float { bottom: 18px; } }