/* page 2 tokens over global background */
.a-origins, .a-fold, .a-drawer{
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(155,215,199,.14), transparent 60%),
    var(--bg);
}

/* ===== SECTION 1: Origins Strip ===== */
.a-origins-wrap{ display:grid; gap:16px; }
.a-lanes{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.a-lane{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease; }
.a-lane:hover{ transform: translateY(-4px); box-shadow: 0 14px 36px rgba(20,42,35,.14); }
.a-pic img{ border-radius:12px; border:1px solid var(--line); }
.a-pic figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

.a-progress{ position:relative; height:6px; background:#e6f1ec; border-radius:6px; overflow:hidden; }
.a-progress-bar{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s ease; }

@media (max-width: 860px){
  .a-lanes{ grid-template-columns: 1fr; }
}

/* ===== SECTION 2: Fold-out Field Map ===== */
.a-fold-wrap{ display:grid; gap:14px; }
.a-fold-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.fold-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px;
  box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.fold-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,42,35,.12); }
.fold-toggle{
  position:absolute; top:10px; right:10px; border:0; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:6px 10px; font-weight:700; cursor:pointer;
}
.fold-face figure{ margin:0; }
.fold-face img{ border-radius:12px; border:1px solid var(--line); }
.fold-face figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
.fold-back{
  margin-top:10px; padding:10px; border:1px dashed var(--line); border-radius:12px; color: var(--muted);
  max-height: 0; overflow: hidden; transition: max-height .4s ease;
}
.fold-card.open .fold-back{ max-height: 220px; }
.fold-card.open .fold-toggle{ background:#f4faf7; }

/* accessibility focus */
.fold-card:focus{ outline:2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 980px){
  .a-fold-grid{ grid-template-columns: 1fr; }
}

/* ===== SECTION 3: Materials Drawer ===== */
.a-drawer-wrap{ display:grid; gap:14px; }
.drawer-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.drawer{
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow);
  overflow:hidden;
}
.drawer-handle{
  width:100%; text-align:left; border:0; background:#fff; padding:12px 14px; font-weight:700; cursor:pointer;
  border-bottom:1px solid var(--line);
}
.drawer-tray{
  display:grid; grid-template-columns: 1fr; gap:10px; padding:12px 14px;
  max-height: 0; overflow:hidden; transition: max-height .4s ease;
}
.drawer[data-open="true"] .drawer-tray{ max-height: 400px; }
.drawer figure{ margin:0; }
.drawer img{ border-radius:12px; border:1px solid var(--line); }
.drawer figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
.drawer p{ margin:6px 0 0; color: var(--muted); }

@media (max-width: 860px){
  .drawer-grid{ grid-template-columns: 1fr; }
}
/* ===== SECTION 4: Steam Ledger ===== */
.a-steam-wrap{ display:grid; gap:16px; }
.steam-kpis{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px;
}
.kpi-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; text-align:center;
  box-shadow: var(--shadow);
}
.kpi-num{ font-weight:800; font-size:28px; line-height:1; }
.kpi-label{ color:var(--muted); font-size:13px; margin-top:6px; }

.steam-ledger{
  position:relative; border:1px solid var(--line); border-radius:16px; background:#fff; padding:10px;
  box-shadow: var(--shadow);
}
.steam-spark{ width:100%; height:60px; color: var(--accent); display:block; }
.steam-track{ position:relative; height:6px; background:#e6f1ec; border-radius:6px; overflow:hidden; margin-top:8px; }
.steam-fill{
  position:absolute; inset:0 auto 0 0; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .6s ease;
}

.steam-photos{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px;
}
.steam-pic{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.steam-pic img{ border-radius:12px; border:1px solid var(--line); }
.steam-pic figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

@media (max-width: 960px){
  .steam-kpis{ grid-template-columns: 1fr 1fr; }
  .steam-photos{ grid-template-columns: 1fr; }
}

/* ===== SECTION 5: Edge Classroom ===== */
.a-class-wrap{ display:grid; gap:16px; }
.class-rail{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:16px; align-items:start; }
.class-board{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
  transform: skewY(-3deg);
}
.edge-diagram{ width:100%; height:auto; display:block; transform: skewY(3deg); }
.dg-hedge{ fill:#dff0ea; stroke: var(--accent); stroke-width: 1.5; }
.dg-path{ fill:none; stroke:#9bd7c7; stroke-width:2; }
.dg-ridge{ fill: var(--accent); }
.dg-arrow{ stroke: var(--accent); stroke-width:3; stroke-linecap:round; }

.board-note{ font-size:13px; color:var(--muted); margin-top:6px; }

.class-photos{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px;
}
.class-photos figure{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.class-photos figure:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,42,35,.12); }
.class-photos img{ border-radius:12px; border:1px solid var(--line); }
.class-photos figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

@media (max-width: 980px){
  .class-rail{ grid-template-columns: 1fr; }
  .class-photos{ grid-template-columns: 1fr; }
}

/* ===== SECTION 6: Hands & Tools (горизонтальная полоса) ===== */
.a-tools{ background: linear-gradient(180deg,#f6faf8 0%, #eef6f2 100%); }
.tools-strip{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow: var(--shadow);
}
.tools-track{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px; scrollbar-width: thin;
}
.tools-card{ scroll-snap-align: center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow: var(--shadow); }
.tools-card img{ border-radius:12px; border:1px solid var(--line); }
.tools-card figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

.tools-btn{
  position:absolute; top: 50%; transform: translateY(-50%);
  border:0; background:#fff; width:38px; height:38px; border-radius:999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); cursor:pointer; font-weight:700;
}
.tools-btn:hover{ background: #f4faf7; }
.tools-btn.prev{ left: 10px; }
.tools-btn.next{ right: 10px; }

@media (max-width: 720px){
  .tools-track{ grid-auto-columns: 86%; }
}
/* ===== SECTION 7: Heritage Timeline ===== */
.a-heritage{ background: linear-gradient(180deg,#f6faf8 0%, #eef6f2 100%); }
.a-heritage-wrap{ display:grid; gap:14px; }

.h-timeline{ position:relative; display:grid; grid-template-columns: 24px 1fr; gap:14px; }
.h-track{ position:relative; width:24px; }
.h-track::before{
  content:""; position:absolute; left:11px; top:0; bottom:0; width:2px; background:#e6f1ec; border-radius:2px;
}
.h-bar{
  position:absolute; left:11px; top:0; width:2px; height:0%; background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius:2px; transition: height .5s ease;
}
.h-steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.h-step{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px;
  box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.h-step::before{
  content: attr(data-year);
  position:absolute; left:-68px; top:12px; width:56px; text-align:right; font-weight:700; color: var(--muted);
}
.h-step:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,42,35,.12); }
.h-step img{ border-radius:12px; border:1px solid var(--line); }
.h-step figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
.h-step.active{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width: 760px){
  .h-timeline{ grid-template-columns: 16px 1fr; }
  .h-track::before, .h-bar{ left:7px; }
  .h-step::before{ position:static; display:block; margin:-4px 0 6px; text-align:left; }
}

/* ===== SECTION 8: Water Minute ===== */
.a-water-wrap{ display:grid; gap:14px; }
.water-meter{
  display:grid; grid-template-columns: 120px 1fr; gap:14px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.water-drop{ width:120px; height:auto; color: var(--accent); }
.wm-track{ position:relative; height:6px; background:#e6f1ec; border-radius:6px; overflow:hidden; }
.wm-fill{
  position:absolute; inset:0 auto 0 0; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .6s ease;
}
.wm-kpis{ display:flex; gap:18px; align-items:baseline; flex-wrap:wrap; }
.wm-kpi{ font-weight:800; }
.wm-num{ font-size:24px; line-height:1; }
.wm-unit{ color: var(--muted); font-size:13px; margin-left:4px; }

.water-photos{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px;
}
.water-pic{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.water-pic img{ border-radius:12px; border:1px solid var(--line); }
.water-pic figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

@media (max-width: 880px){
  .water-meter{ grid-template-columns: 1fr; }
  .water-photos{ grid-template-columns: 1fr; }
}

/* ===== SECTION 9: Green Bench ===== */
.a-bench{ background: linear-gradient(180deg,#f7faf8 0%, #eef6f2 100%); }
.a-bench-wrap{ display:grid; gap:14px; }
.bench-shelf{
  position:relative; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; padding-bottom:18px;
}
.bench-shelf::after{
  content:""; position:absolute; left:6px; right:6px; bottom:0; height:8px; border-radius:6px;
  background: linear-gradient(90deg, rgba(32,50,44,.15) 0 10%, rgba(32,50,44,.06) 10% 90%, rgba(32,50,44,.15) 90% 100%);
}
.bench-item{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bench-item:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,42,35,.12); }
.bench-item img{ border-radius:12px; border:1px solid var(--line); }
.bench-item figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

/* shimmer-акцент на полке */
@keyframes benchShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer{
  position:relative;
}
.shimmer::before{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  background-size: 200% 100%;
  opacity:0; transition: opacity .3s ease;
}
.shimmer:hover::before{
  opacity:.6; animation: benchShimmer 1.2s ease;
}

@media (max-width: 900px){
  .bench-shelf{ grid-template-columns: 1fr; }
}
/* ===== SECTION 10: Thermal Cross-section ===== */
.a-x-wrap{ display:grid; gap:14px; }
.x-diagram{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px;
  box-shadow: var(--shadow);
}
.x-svg{ width:100%; height:auto; display:block; }
.x-sky{ fill:#eaf5f0; }
.x-soil{ fill:#f3efe8; }
.x-root{ fill: rgba(155,215,199,.3); }
.x-pipe{
  fill:none; stroke: var(--accent); stroke-width:4; stroke-linecap:round;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}
.x-arrow{
  fill:none; stroke: var(--accent); stroke-width:3; stroke-linecap:round;
}
.x-note{ font-size:13px; color:var(--muted); margin-top:6px; }

.x-photos{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px;
}
.x-pic{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.x-pic img{ border-radius:12px; border:1px solid var(--line); }
.x-pic figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

@media (max-width: 900px){
  .x-photos{ grid-template-columns: 1fr; }
}

/* ===== SECTION 11: Quiet Logistics (no photos) ===== */
.a-log-wrap{ display:grid; gap:14px; }
.qgrid{
  display:grid; grid-template-columns: .55fr 1.45fr; gap:16px; align-items:start;
}
.qrail{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.qtrack{ position:relative; height:6px; background:#e6f1ec; border-radius:6px; overflow:hidden; margin-bottom:10px; }
.qbar{ position:absolute; inset:0 auto 0 0; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s ease; }
.qtags{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.qtags li{
  display:inline-block; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted);
}

.qcopy{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow);
}
.qcopy p{ margin:0 0 12px; }

@media (max-width: 920px){
  .qgrid{ grid-template-columns: 1fr; }
}

/* ===== SECTION 12: Berries & Notes (polaroids) ===== */
.a-berries{ background: linear-gradient(180deg,#f6faf8 0%, #eef6f2 100%); }
.a-berries-wrap{ display:grid; gap:14px; }
.berries-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.polaroid{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:12px; box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.polaroid:focus{ outline:2px solid var(--accent); outline-offset:3px; }
.polaroid:hover{ box-shadow: 0 14px 36px rgba(20,42,35,.14); }
.tape{
  position:absolute; top:-10px; left:50%; transform: translateX(-50%) rotate(2deg);
  width:72px; height:18px; background: rgba(255,255,200,.8); border:1px solid rgba(0,0,0,.05); border-radius:4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.p-face img{ border-radius:12px; border:1px solid var(--line); }
.p-face figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

.p-back{
  position:absolute; inset:12px; background:#fff; border:1px dashed var(--line); border-radius:12px;
  padding:12px; color:var(--muted); text-align:center;
  transform: rotateY(180deg); backface-visibility:hidden;
}
.p-face{ backface-visibility:hidden; }

.polaroid.flipped .p-face{ transform: rotateY(180deg); }
.polaroid.flipped .p-back{ transform: rotateY(0); }

@media (max-width: 980px){
  .berries-grid{ grid-template-columns: 1fr; }
}
/* ===== SECTION 13: Bench Calendar ===== */
.a-calendar{ background: linear-gradient(180deg,#f6faf8 0%, #eef6f2 100%); }
.a-cal-wrap{ display:grid; gap:14px; }
.cal-board{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px;
  box-shadow: var(--shadow);
}
.cal-track{ position:relative; height:6px; background:#e6f1ec; border-radius:6px; overflow:hidden; margin-bottom:10px; }
.cal-bar{ position:absolute; inset:0 auto 0 0; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s ease; }
.cal-months{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap:8px;
}
.cal-months .m{
  text-align:center; padding:6px 0; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted);
  transition: transform .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cal-months .m.active{
  color:#0f1416; border-color: var(--accent-2); box-shadow: 0 8px 20px rgba(20,42,35,.10);
  transform: translateY(-2px);
}
.cal-photos{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px;
}
.cal-pic{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.cal-pic img{ border-radius:12px; border:1px solid var(--line); }
.cal-pic figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
@media (max-width: 940px){
  .cal-months{ grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .cal-months{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .cal-photos{ grid-template-columns: 1fr; }
}

/* ===== SECTION 14: Seed Library ===== */
.a-seed-wrap{ display:grid; gap:14px; }
.seed-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:start; }
.seed-photos{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px;
}
.seed-pic{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
}
.seed-pic img{ border-radius:12px; border:1px solid var(--line); }
.seed-pic figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

.seed-cards{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
}
.seed-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 12px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.seed-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,42,35,.12); border-color: var(--accent-2); }
.seed-note{ font-size:14px; color:var(--muted); border-left:3px solid var(--accent-2); padding-left:10px; }

@media (max-width: 980px){
  .seed-grid{ grid-template-columns: 1fr; }
  .seed-photos{ grid-template-columns: 1fr; }
}

/* ===== SECTION 15: Edge Map v2 ===== */
.a-emap2{ background: linear-gradient(180deg,#f7faf8 0%, #eef6f2 100%); }
.a-emap2-wrap{ display:grid; gap:14px; }
.emap2{
  position:relative; border:1px solid var(--line); border-radius:18px; background:#fff; padding:12px;
  box-shadow: var(--shadow); overflow:hidden;
}
.emap2-pic{ margin:0; }
.emap2-pic img{ border-radius:12px; border:1px solid var(--line); }
.emap2-pic figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
.emap2{ --x:50%; --y:50%; }
.emap2-marker{
  position:absolute; width:16px; height:16px; border-radius:50%;
  transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%));
  transition: transform .15s linear;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  border:1px solid var(--line);
}
.emap2-marker.bee{  background: #ffd166; }
.emap2-marker.leaf{ background: #9bd7c7; }
.emap2-marker.drop{ background: #80ced6; }

/* ===== SECTION 16: Closing Notes ===== */
.a-closing{ background:
  radial-gradient(60% 60% at 0% 100%, rgba(47,141,126,.08), transparent 60%),
  var(--bg);
}
.a-close-wrap{ display:grid; gap:14px; }
.close-board{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px;
}
.close-card{
  position:relative; margin:0; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px;
  box-shadow: var(--shadow); overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.close-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,42,35,.12); }
.close-card img{ border-radius:12px; border:1px solid var(--line); }
.close-card figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

/* «занавес» */
.curtain{
  position:absolute; left:12px; right:12px; top:12px; height:100%;
  border-radius:12px; background: linear-gradient(180deg,#eaf5f0 0%, #ffffff 100%);
  transition: height .6s ease;
  pointer-events:none;
}
.close-card.revealed .curtain{ height:0; }

@media (max-width: 980px){
  .close-board{ grid-template-columns: 1fr; }
}
/* --- SECTION 2: Fold-out Field Map — фикс свёрнутого блока --- */
.fold-back{
  /* было: margin-top:10px; padding:10px; border:1px dashed var(--line); */
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--muted);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .25s ease;
  will-change: max-height;
}
.fold-card.open .fold-back{
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--line);
  max-height: 600px; /* достаточно, но всё равно перекрывается JS через inline */
  opacity: 1;
}
.fold-toggle{
  /* чуть спокойнее на мобилках */
  padding: 6px 12px;
}

/* --- SECTION 3: Materials Drawer — динамическая высота и мягкий reveal --- */
.drawer-tray{
  /* было: padding:12px 14px; max-height:0; */
  padding: 0 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .25s ease, padding .2s ease;
  will-change: max-height;
}
.drawer[data-open="true"] .drawer-tray{
  padding: 12px 14px;
  opacity: 1;
}