/* ADILOS SELF CARE - New page styles only. Existing style.css is untouched. */
.selfcare-hero{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background:#111;isolation:isolate}
.selfcare-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 45%,rgba(212,167,76,.18),transparent 32%),linear-gradient(115deg,#111 0%,#171411 55%,#0e0d0c 100%);z-index:-2}
.selfcare-hero:after{content:"";position:absolute;width:620px;height:620px;border:1px solid rgba(212,167,76,.18);border-radius:50%;right:-170px;top:-50px;box-shadow:0 0 80px rgba(212,167,76,.08);animation:selfcareFloat 8s ease-in-out infinite;z-index:-1}
.selfcare-hero-content{margin-left:9%;position:relative;z-index:2}
.selfcare-hero.has-custom-media:before{background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.32));z-index:1}
.selfcare-hero.has-custom-media:after,.selfcare-hero.has-custom-media .selfcare-orb{z-index:1;pointer-events:none}
.selfcare-hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.selfcare-hero-content p{letter-spacing:5px;color:#d4a74c;font-size:13px;margin-bottom:18px}
.selfcare-hero-content h1{font-size:clamp(58px,8vw,108px);line-height:.88;margin:0;color:#fff;letter-spacing:-3px}
.selfcare-hero-content h1 span{color:#d4a74c}
.selfcare-hero-content>span{display:block;margin-top:28px;color:#c7c0b8;font-size:15px;letter-spacing:.5px}
.selfcare-orb{position:absolute;width:280px;height:280px;border-radius:50%;right:16%;top:25%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.12),rgba(212,167,76,.16) 35%,rgba(212,167,76,.02) 70%,transparent 72%);filter:blur(.2px);animation:selfcarePulse 5s ease-in-out infinite}
.selfcare-section{background:#171411;color:#fff;padding:80px 7% 100px}
.selfcare-header{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:42px}
.selfcare-header h2{font-size:clamp(30px,4vw,48px);margin:8px 0 0;color:#fff}
.selfcare-filters{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.selfcare-filter{background:transparent;border:1px solid rgba(212,167,76,.35);color:#cfc8bf;padding:11px 15px;font-size:11px;letter-spacing:1.2px;cursor:pointer;transition:.3s}
.selfcare-filter:hover,.selfcare-filter.active{background:#d4a74c;color:#111;border-color:#d4a74c}
.selfcare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.selfcare-card{background:#1f1b18;border:1px solid rgba(255,255,255,.07);padding:0;overflow:hidden;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.selfcare-card:hover{transform:translateY(-8px);border-color:rgba(212,167,76,.35);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.selfcare-image{height:310px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(212,167,76,.18),transparent 28%),linear-gradient(145deg,#29231e,#11100f)}
.selfcare-image:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;border:1px solid rgba(212,167,76,.22);animation:selfcareRing 7s linear infinite}
.selfcare-image:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;border:1px solid rgba(255,255,255,.08);animation:selfcareRing 5s linear infinite reverse}
.selfcare-image span{position:relative;z-index:2;color:#e9d4a3;font-size:24px;line-height:1.05;letter-spacing:3px;font-weight:700}
.selfcare-image small{position:absolute;z-index:2;bottom:18px;left:20px;color:#aaa096;font-size:9px;letter-spacing:2px}
.selfcare-info{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 18px 15px}
.selfcare-info p{font-size:9px;letter-spacing:1.8px;color:#9f968d;margin:0 0 7px}
.selfcare-info h3{font-size:17px;margin:0;color:#fff;font-weight:500}
.selfcare-info strong{color:#d4a74c;font-size:15px;white-space:nowrap}
.selfcare-add-cart{position:relative;overflow:hidden;width:calc(100% - 36px);margin:0 18px 18px;padding:12px;background:transparent;border:1px solid #d4a74c;color:#d4a74c;letter-spacing:1.5px;font-size:10px;cursor:pointer;transition:.3s}
.selfcare-add-cart:hover{background:#d4a74c;color:#111}
.selfcare-banner{background:#111;color:#fff;text-align:center;padding:85px 20px;border-top:1px solid rgba(212,167,76,.15);position:relative;overflow:hidden}
.selfcare-banner:before{content:"";position:absolute;width:500px;height:120px;border:1px solid rgba(212,167,76,.14);border-radius:50%;left:50%;top:20px;transform:translateX(-50%);animation:selfcareWave 6s ease-in-out infinite}
.selfcare-banner p{position:relative;color:#d4a74c;letter-spacing:4px;font-size:11px}
.selfcare-banner h2{position:relative;font-size:clamp(30px,5vw,56px);margin:14px 0 0}.selfcare-banner h2 span{color:#d4a74c}
@keyframes selfcareFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(18px) rotate(5deg)}}
@keyframes selfcarePulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.08);opacity:1}}
@keyframes selfcareRing{from{transform:rotate(0deg) scale(1)}to{transform:rotate(360deg) scale(1.05)}}
@keyframes selfcareWave{0%,100%{transform:translateX(-50%) scaleX(.85)}50%{transform:translateX(-50%) scaleX(1.1)}}
@media(max-width:1000px){.selfcare-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.selfcare-header{align-items:flex-start;flex-direction:column}.selfcare-filters{justify-content:flex-start}}
@media(max-width:700px){.selfcare-hero{min-height:450px}.selfcare-hero-content{margin-left:7%}.selfcare-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.selfcare-image{height:250px}.selfcare-info{padding:15px 12px 12px}.selfcare-add-cart{width:calc(100% - 24px);margin:0 12px 12px}.selfcare-info h3{font-size:14px}.selfcare-info strong{font-size:13px}}
@media(max-width:480px){.selfcare-grid{grid-template-columns:1fr}.selfcare-image{height:280px}.selfcare-hero-content h1{letter-spacing:-1px}.selfcare-filters{gap:6px}.selfcare-filter{padding:9px 10px;font-size:9px}}

.selfcare-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.96;transition:transform .45s ease,filter .45s ease}.selfcare-card:hover .selfcare-image img{transform:scale(1.04);filter:brightness(1.08)}.selfcare-image span{display:none}.selfcare-image small{z-index:3;background:rgba(17,16,15,.72);padding:5px 8px}.selfcare-image:before,.selfcare-image:after{z-index:2;pointer-events:none}

/* Compact self-care cards on phones, without cropping their product photos. */
@media (max-width: 480px) {
  .selfcare-hero { min-height: 320px; padding: 36px 5%; }
  .selfcare-hero-content { margin-left: 0; max-width: 100%; }
  .selfcare-hero-content h1 { font-size: clamp(36px, 10vw, 48px); line-height: 1; overflow-wrap: anywhere; }
  .selfcare-hero-content > span { font-size: 13px; }
  .selfcare-section { padding: 52px 5%; }
  .selfcare-header { margin-bottom: 26px; gap: 20px; }
  .selfcare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .selfcare-image { height: auto; aspect-ratio: 4 / 5; }
  .selfcare-image img { object-fit: contain; }
  .selfcare-info { flex-wrap: wrap; gap: 5px; padding: 10px 8px; }
  .selfcare-info h3 { font-size: 13px; overflow-wrap: anywhere; }
  .selfcare-info strong { font-size: 12px; }
  .selfcare-add-cart { width: calc(100% - 16px); margin: 0 8px 9px; padding: 10px 5px; letter-spacing: .2px; }
}