/* Enjoy Spa · блок «Во что упаковать сертификат» (21.10.2026)
   Наборы с составом, коробки, конверты и карточки — живой список из CRM (gift_config). */
.esg{--g-bg:#0e1f18;--g-bg2:#12291f;--g-card:#132b22;--g-line:rgba(201,169,110,.22);--g-line2:rgba(201,169,110,.42);
  --g-gold:#c9a96e;--g-gold-hi:#e8cf95;--g-ink:#f5f0e8;--g-mut:#b9b2a3;--g-dim:#8f8a7c;--g-cta:#30dcdc;
  position:relative;overflow:hidden;padding:104px 20px 108px;color:var(--g-ink);font-family:Montserrat,sans-serif;
  background:radial-gradient(90% 60% at 85% 0%,rgba(201,169,110,.10),transparent 60%),radial-gradient(80% 70% at 0% 100%,rgba(48,220,220,.05),transparent 60%),var(--g-bg)}
.esg *{box-sizing:border-box}
.esg a,.esg a:hover,.esg a:focus{text-decoration:none!important}
.esg__in{position:relative;max-width:1180px;margin:0 auto}

/* шапка: текст + коробка, которая открывается */
.esg__head{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:48px;align-items:center;margin:0 0 44px}
.esg__eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--g-gold);margin:0 0 16px}
.esg__title{font-family:'Cormorant Garamond',Georgia,serif;font-size:50px;font-weight:500;line-height:1.08;color:var(--g-ink);margin:0 0 18px;max-width:16ch}
.esg__lead{font-size:15.5px;line-height:1.75;color:var(--g-mut);margin:0;max-width:62ch}
.esg__box{width:240px;height:220px;justify-self:end}
.esg__box svg{width:100%;height:100%;overflow:visible;display:block}
.esg__lid{transform-box:fill-box;transform-origin:15% 100%;transition:transform 1.1s cubic-bezier(.34,1.4,.5,1) .25s}
.esg__peek{transform:translateY(44px);opacity:0;transition:transform .9s cubic-bezier(.22,1,.36,1) .75s,opacity .4s ease .75s}
.esg__spark{opacity:0;transform-box:fill-box;transform-origin:center}
.esg.is-open .esg__lid{transform:translate(-22px,-40px) rotate(-22deg)}
.esg.is-open .esg__peek{transform:none;opacity:1}
.esg.is-open .esg__spark{animation:esgSpark 1.6s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.7s + var(--i,0) * 70ms)}
@keyframes esgSpark{0%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(90deg)}}
.esg__glow{opacity:0;transition:opacity 1.2s ease .8s}
.esg.is-open .esg__glow{opacity:1}

/* цены по видам упаковки */
.esg__tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--g-line);border:1px solid var(--g-line);border-radius:16px;overflow:hidden;margin:0 0 48px}
.esg__tier{background:var(--g-bg2);padding:20px 22px 18px}
.esg__tier b{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--g-mut);margin:0 0 6px}
.esg__tier span{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;font-weight:600;color:var(--g-gold-hi);line-height:1.1}
.esg__tier small{display:block;font-size:12.5px;line-height:1.5;color:var(--g-dim);margin:6px 0 0}

/* вкладки */
.esg__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.esg__tab{appearance:none;border:1px solid var(--g-line2);background:transparent;color:var(--g-mut);font:600 12.5px/1 Montserrat,sans-serif;letter-spacing:.06em;padding:13px 18px;border-radius:100px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.esg__tab i{font-style:normal;color:var(--g-dim);margin-left:6px;font-weight:500}
.esg__tab[aria-selected="true"]{background:var(--g-gold);border-color:var(--g-gold);color:#14110c}
.esg__tab[aria-selected="true"] i{color:#4a3d24}
.esg__tab:focus-visible,.esg a:focus-visible{outline:2px solid var(--g-cta);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.esg__tab:hover{border-color:var(--g-gold);color:var(--g-ink)}}
.esg__note{font-size:14px;line-height:1.65;color:var(--g-mut);margin:0 0 26px;max-width:72ch}
.esg__note b{color:var(--g-ink);font-weight:600}

/* наборы — крупные карточки с составом */
.esg__sets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.esg-set{position:relative;display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);background:var(--g-card);border:1px solid var(--g-line);border-radius:18px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .35s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.esg-set__ph{position:relative;min-height:340px;background:linear-gradient(135deg,#1b3529,#0f2219);overflow:hidden}
.esg-set__body{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px}
.esg-set__name{font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;font-weight:600;line-height:1.15;color:var(--g-ink);margin:0}
.esg-set__lbl{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g-gold)}
.esg-set__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.esg-set__list li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--g-mut)}
.esg-set__list li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;background:var(--g-gold);transform:rotate(45deg)}
.esg-set__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--g-line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.esg-set__price{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:600;color:var(--g-gold-hi);line-height:1}
.esg-set__price small{display:block;font-family:Montserrat,sans-serif;font-size:11px;font-weight:500;color:var(--g-dim);margin-top:4px;letter-spacing:.02em}
.esg__go{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:10px;background:var(--g-cta);color:#0c0b09;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background .25s}

/* коробки, конверты, карточки — сетка */
.esg__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.esg-tile{position:relative;display:flex;flex-direction:column;background:var(--g-card);border:1px solid var(--g-line);border-radius:14px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .35s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.esg-tile__ph{position:relative;aspect-ratio:1;background:linear-gradient(135deg,#1b3529,#0f2219);overflow:hidden}
.esg-tile__body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.esg-tile__name{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;font-weight:600;color:var(--g-ink);line-height:1.15}
.esg-tile__price{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;font-weight:600;color:var(--g-gold-hi);white-space:nowrap}

/* фото: плавная загрузка, мягкое приближение при наведении */
.esg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
.esg__img.on{opacity:1;transform:none}
.esg__badge{position:absolute;top:12px;left:12px;z-index:2;background:#14110c;color:var(--g-gold-hi);border:1px solid var(--g-line2);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:100px;padding:6px 11px;overflow:hidden}
.esg__badge::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(232,207,149,.55) 50%,transparent 70%);transform:translateX(-120%)}
.esg-set.is-in .esg__badge::after{animation:esgShine 1.4s ease .6s 1}
@keyframes esgShine{to{transform:translateX(120%)}}
@media (hover:hover) and (pointer:fine){
  .esg-set:hover,.esg-tile:hover{border-color:var(--g-line2);transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(0,0,0,.8)}
  .esg-set:hover .esg__img.on,.esg-tile:hover .esg__img.on{transform:scale(1.05)}
  .esg-set:hover .esg__go{background:#5ce6e6}
}

/* появление карточек каскадом */
.esg-set,.esg-tile{opacity:0;transform:translateY(18px)}
.esg-set.is-in,.esg-tile.is-in{opacity:1;transform:none;transition:opacity .6s ease var(--d,0ms),transform .7s cubic-bezier(.22,1,.36,1) var(--d,0ms),border-color .35s,box-shadow .35s}

.esg__cta{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:44px 0 0;text-align:center}
.esg__btn{display:inline-flex;align-items:center;justify-content:center;padding:17px 34px;border-radius:12px;background:var(--g-cta);color:#0c0b09;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .25s,transform .25s}
@media (hover:hover) and (pointer:fine){.esg__btn:hover{background:#5ce6e6;transform:translateY(-2px)}}
.esg__small{flex-basis:100%;font-size:12.5px;color:var(--g-dim);margin:0}
.esg__empty{font-size:14px;color:var(--g-mut)}

@media (max-width:980px){
  .esg__title{font-size:40px}
  .esg__tiers{grid-template-columns:repeat(2,1fr)}
  .esg__sets{grid-template-columns:1fr}
}
@media (max-width:640px){
  .esg{padding:68px 16px 72px}
  .esg__head{grid-template-columns:1fr;gap:8px;margin-bottom:30px}
  .esg__box{width:170px;height:156px;justify-self:start;order:-1;margin:0 0 4px -6px}
  .esg__title{font-size:32px}
  .esg__lead{font-size:14.5px}
  .esg__tier{padding:16px 14px}
  .esg__tier span{font-size:23px}
  .esg__tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 14px;padding:0 16px 4px;scrollbar-width:none}
  .esg__tabs::-webkit-scrollbar{display:none}
  .esg__tab{flex:0 0 auto}
  .esg-set{grid-template-columns:1fr}
  .esg-set__ph{aspect-ratio:4/3;min-height:0}
  .esg-set__name{font-size:23px}
  .esg__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .esg-tile__body{gap:2px;padding:10px 12px 12px}
  .esg-tile__name,.esg-tile__price{font-size:17px}
  .esg__btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .esg__lid,.esg__peek,.esg__glow,.esg__img,.esg-set,.esg-tile{transition:none!important}
  .esg.is-open .esg__spark{animation:none}
  .esg-set,.esg-tile{opacity:1;transform:none}
  .esg-set.is-in .esg__badge::after{animation:none}
}