/* Product page layout "pd2": terrarium.trade + tcplants.* storefronts. See storefront/_pd2.php. Light theme only. */
.container.pd2-wrap{max-width:1240px}
.pd2{--pd2-r:14px;--pd2-g:20px}
@media(max-width:700px){.pd2{--pd2-g:14px}}
.pd2 *{box-sizing:border-box}

/* ── top zone: photo + promise + delivery | buy box + glance ─────────────────── */
.pd2-top{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:40px;align-items:start}
.pd2-left,.pd2-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.pd2-head{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pd2-head>div{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pd2 #dlv{margin:0!important}
.pd2-aux{display:flex;flex-direction:column;gap:10px}
.pd2-aux>div{padding-top:0!important}
.pd2-buy{display:flex;flex-direction:column;gap:14px;padding:16px;border:1.5px solid var(--bd);border-radius:var(--pd2-r);background:var(--sf)}
.pd2-buy:empty{display:none}
.pd2-buy #add-cart-btn{min-height:48px}

/* promise card (live-arrival guarantee / contamination guarantee) */
.pd2 .pd2-promise,.pd2-left>div[style*="#f0fdf4"]{margin:0!important;border-radius:var(--pd2-r)!important}
.pd2-promise{padding:14px 16px;border:1px solid #bbf7d0;background:#f0fdf4;color:#14532d;font-size:13px;line-height:1.55}
.pd2-promise__big{font-weight:700;font-size:13.5px}
.pd2-promise__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 14px;margin-top:10px}
.pd2-promise__grid>div{display:flex;gap:8px;align-items:flex-start;min-width:0}
.pd2-promise__grid small{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#166534}
.pd2-promise__grid b{display:block;font-size:13px;overflow-wrap:anywhere}
.pd2-promise__note{margin-top:10px;font-size:12.5px;padding-top:10px;border-top:1px solid #bbf7d0}

/* at a glance */
.pd2-glance__t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:8px}
.pd2-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pd2-tile{display:flex;gap:10px;align-items:flex-start;min-width:0;padding:11px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--sf);transition:border-color .15s,transform .15s}
.pd2-tile:hover{border-color:var(--ac);transform:translateY(-1px)}
.pd2-tile__ico{font-size:20px;line-height:1.2;flex-shrink:0}
.pd2-tile__b{min-width:0;flex:1}
.pd2-tile__l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mu)}
.pd2-tile__v{font-size:14px;font-weight:700;color:var(--tx);line-height:1.3;overflow-wrap:anywhere;margin-top:1px}
.pd2-tile--good{background:#f0fdf4;border-color:#bbf7d0}.pd2-tile--good .pd2-tile__v{color:#166534}
.pd2-tile--warn{background:#fffbeb;border-color:#fde68a}.pd2-tile--warn .pd2-tile__v{color:#92400e}
.pd2-dots{display:flex;gap:3px;margin-top:6px}.pd2-dots i{width:100%;max-width:22px;height:5px;border-radius:3px;background:var(--bd)}.pd2-dots i.on{background:var(--ac)}
.pd2-range{display:block;position:relative;height:5px;border-radius:3px;background:var(--bd);margin-top:7px;overflow:hidden}.pd2-range i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--ac)}

/* ── tabs ───────────────────────────────────────────────────────────────────── */
.pd2-tabs{position:sticky;top:58px;z-index:60;display:flex;gap:2px;overflow-x:auto;margin-top:34px;padding:0 4px;background:var(--bg,#fff);border-bottom:1px solid var(--bd);scrollbar-width:none}
.pd2-tabs::-webkit-scrollbar{display:none}
.pd2-tab{appearance:none;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--mu);padding:14px 16px 12px;cursor:pointer;white-space:nowrap;border-bottom:2.5px solid transparent;margin-bottom:-1px;text-decoration:none;transition:color .15s,border-color .15s;min-height:44px}
.pd2-tab:hover{color:var(--tx)}
.pd2-tab[aria-selected=true]{color:var(--ac);border-bottom-color:var(--ac)}
.pd2-tab:focus-visible{outline:2px solid var(--ac);outline-offset:-2px;border-radius:6px}
.pd2-tab--link span{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;background:var(--sf);border:1px solid var(--bd);font-size:11px;line-height:18px}
.pd2-panels{padding-top:22px}
.pd2-panel{columns:2 400px;column-gap:20px;animation:pd2in .22s ease-out}
.pd2-panel[hidden]{display:none}
.pd2-panel>*{break-inside:avoid;margin:0 0 16px!important}
.pd2-panel>.pd2-span.pd2-wide{column-span:all}
.pd2-panel .spec-card{margin-top:0}
.pd2-desc{font-size:14.5px;color:var(--mu);line-height:1.7}
.pd2-desc>div{border-top:0!important;padding-top:0!important}
@keyframes pd2in{from{opacity:0;transform:translateY(5px)}}

/* climate dials */
.pd2-dials{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.pd2-dial{text-align:center;min-width:0}
.pd2-dial svg{width:100%;max-width:150px;height:auto;display:block;margin:0 auto}
.pd2-dial__bg,.pd2-dial__on{fill:none;stroke-width:10;stroke-linecap:round}
.pd2-dial__bg{stroke:var(--bd)}.pd2-dial__on{stroke:var(--ac)}
.pd2-dial__v{font-size:17px;font-weight:800;color:var(--tx);margin-top:-6px}
.pd2-dial__l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mu);margin-top:2px}
.pd2-dial--sun{padding-top:14px}
.pd2-sun{display:flex;justify-content:center;gap:4px;font-size:22px;line-height:1;margin-bottom:6px}
.pd2-sun i{font-style:normal;opacity:.22;filter:grayscale(1)}.pd2-sun i.on{opacity:1;filter:none;color:#f59e0b}

/* terrarium: layer cross-section and numbered first-week steps */
.pd2 .tsx-stack>div{transform-origin:bottom;animation:pd2layer .5s ease both}
.pd2 .tsx-stack>div:nth-last-child(2){animation-delay:.08s}.pd2 .tsx-stack>div:nth-last-child(3){animation-delay:.16s}.pd2 .tsx-stack>div:nth-last-child(4){animation-delay:.24s}.pd2 .tsx-stack>div:nth-last-child(n+5){animation-delay:.32s}
@keyframes pd2layer{from{opacity:0;transform:scaleY(.2)}}
.pd2 .tsx-steps:not(.tsx-steps--plain),.pd2 .tcs-steps{counter-reset:pd2s;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;list-style:none;padding:0;margin:0}
.pd2 .tsx-steps:not(.tsx-steps--plain) p,.pd2 .tcs-steps li{counter-increment:pd2s;position:relative;margin:0;padding:11px 12px 11px 44px;border:1px solid var(--bd);border-radius:10px;background:var(--bg,#fff);font-size:13px;line-height:1.55}
.pd2 .tsx-steps:not(.tsx-steps--plain) p::before,.pd2 .tcs-steps li::before{content:counter(pd2s);position:absolute;left:11px;top:11px;width:24px;height:24px;border-radius:50%;background:var(--ac);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}

/* TC: culture-cycle bar, section cards */
.pd2-cycle{margin:12px 0 4px}
.pd2-cycle__bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--bd);gap:2px}
.pd2-cycle__bar i{display:block;min-width:4px;animation:pd2layer .6s ease both;transform-origin:left}
.pd2-cycle__bar i.d{background:#64748b}.pd2-cycle__bar i.l{background:#f59e0b}.pd2-cycle__bar i.r{background:var(--ac)}
.pd2 .pd2-sec .tcs-h{margin-top:0}
.pd2 .pd2-sec .tcs-h~.tcs-h{margin-top:18px}
.pd2-docs .tcs-doc{margin-bottom:8px}

/* ── bottom: swipe rails ────────────────────────────────────────────────────── */
.pd2-railgrid{display:flex!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
.pd2-railgrid::-webkit-scrollbar{display:none}
.pd2-railgrid .prod-card{flex:0 0 min(236px,64vw);scroll-snap-align:start}
.pd2-rail{position:relative}
.pd2-rail__btn{position:absolute;top:calc(50% - 22px);z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid var(--bd);background:var(--sf);color:var(--tx);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center}
.pd2-rail__btn:hover{border-color:var(--ac);color:var(--ac)}
.pd2-rail__btn[hidden]{display:none}
.pd2-rail__btn--l{left:-14px}.pd2-rail__btn--r{right:-14px}
@media(hover:none){.pd2-rail__btn{display:none}}

/* ── narrower screens ───────────────────────────────────────────────────────── */
@media(max-width:1000px){.pd2-top{gap:28px}.pd2-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .pd2-top{grid-template-columns:minmax(0,1fr);gap:20px}
  .pd2-left{display:contents}
  .pd2-left>*{order:2}
  .pd2-top .pd2-left>:first-child{order:0}
  .pd2-right{order:1}
  .pd2-top>.pd2-right{order:1}
  .pd2-buy{padding:14px}
  .pd2-glance{margin:0 calc(-1*var(--pd2-g))}
  .pd2-glance__t{padding:0 var(--pd2-g)}
  .pd2-tiles{display:flex;overflow-x:auto;gap:10px;padding:2px var(--pd2-g) 8px;scroll-snap-type:x proximity;scroll-padding:0 var(--pd2-g);scrollbar-width:none}
  .pd2-tiles::-webkit-scrollbar{display:none}
  .pd2-tile{flex:0 0 158px;scroll-snap-align:start}
  .pd2-tabs{margin-left:calc(-1*var(--pd2-g));margin-right:calc(-1*var(--pd2-g));padding:0 8px;margin-top:26px}
  .pd2-panel{columns:1}
  .pd2-desc{font-size:14px}
  .pd2-rail__btn{display:none}
}
@media(prefers-reduced-motion:reduce){.pd2-panel,.pd2 .tsx-stack>div,.pd2-cycle__bar i{animation:none}.pd2-tile{transition:none}}
@media print{.pd2-tabs{display:none}.pd2-panel[hidden]{display:block}}