/* MCC pages.css — page-specific styles incl. product detail. Load 4th. */

/* ===== PRODUCT DETAIL SYSTEM (pages.css) ===== */
.pd-hero{padding-block:34px clamp(40px,6vw,80px);position:relative;overflow:hidden}
.pd-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.pd-hero h1{font-size:clamp(38px,6vw,76px);font-weight:900}
.pd-lead{color:var(--concrete-2);font-size:17px;margin:16px 0 22px;max-width:46ch}
.pd-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.pd-stats{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:18px}
.pd-stats .n{font-family:var(--f-display);font-weight:900;font-size:22px;color:var(--concrete)}
.pd-stats .l{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.pd-stage{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.pd-stage::before{content:"";position:absolute;width:74%;height:74%;border-radius:50%;background:radial-gradient(circle,rgba(233,140,66,.32),transparent 64%);filter:blur(46px)}
.pd-stage img{position:relative;max-width:72%;max-height:86%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)) drop-shadow(0 42px 60px rgba(0,0,0,.55)) drop-shadow(0 0 70px rgba(233,140,66,.26))}
.pd-stage.float img{animation:float 7s var(--ease) infinite}
.pd-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.pd-spec{width:100%;border-collapse:collapse;font-size:14px}
.pd-spec tr{border-bottom:1px solid var(--hair)}
.pd-spec td{padding:13px 4px}
.pd-spec td:first-child{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);width:44%}
.pd-spec td:last-child{color:var(--concrete);font-weight:500}
.pd-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pd-feat{background:var(--floor-2);border:1px solid var(--floor-3);border-radius:14px;padding:20px;transition:transform .35s var(--ease),border-color .35s}
.pd-feat:hover{transform:translateY(-4px);border-color:var(--floor-4)}
.pd-feat .ic{width:38px;height:38px;border-radius:9px;background:rgba(233,140,66,.12);display:grid;place-items:center;color:var(--primary);margin-bottom:12px}
.pd-feat h3{font-size:15px;font-weight:700;margin-bottom:5px}
.pd-feat p{font-size:13px;color:var(--muted)}
.pd-steps{counter-reset:s;display:flex;flex-direction:column;gap:14px}
.pd-step{display:flex;gap:16px;align-items:flex-start}
.pd-step::before{counter-increment:s;content:counter(s);flex:none;width:34px;height:34px;border-radius:50%;background:var(--floor-2);border:1px solid var(--primary);color:var(--primary);font-family:var(--f-mono);font-weight:600;display:grid;place-items:center;font-size:14px}
.pd-step p{padding-top:5px;color:#CFC9BC;font-size:14.5px;margin:0}
.pd-dry{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pd-dry .d{background:var(--floor-2);border:1px solid var(--floor-3);border-radius:14px;padding:22px;position:relative;overflow:hidden}
.pd-dry .d::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--primary);opacity:.7}
.pd-dry .d .t{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pd-dry .d .v{font-family:var(--f-display);font-weight:900;font-size:30px;color:var(--concrete);margin:8px 0 2px}
.pd-dry .d .n{font-size:12.5px;color:var(--muted)}
.pd-big{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,7vw,72px);color:var(--primary);line-height:1}
.pd-sys{display:flex;flex-direction:column;max-width:560px}
.pd-sys .layer{background:var(--floor-2);border:1px solid var(--floor-3);border-radius:12px;padding:16px 18px}
.pd-sys .layer.top{border-color:var(--primary)}
.pd-sys .layer .ly{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.pd-sys .layer .nm{font-family:var(--f-display);font-weight:700;color:var(--concrete);font-size:16px;margin-top:2px}
.pd-sys .layer .ds{font-size:12.5px;color:var(--muted);margin-top:3px}
.pd-sys .arrow{height:22px;display:grid;place-items:center;color:var(--primary)}
.pd-dlcard{display:grid;grid-template-columns:140px 1fr;gap:20px;background:var(--floor-2);border:1px solid var(--floor-3);border-radius:16px;padding:18px;align-items:center}
.pd-dlcard img{width:100%;border-radius:8px;border:1px solid var(--floor-3)}
.pd-dlcard .ti{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--concrete)}
.pd-dlcard .mm{font-family:var(--f-mono);font-size:11px;color:var(--muted);margin:6px 0 14px;display:flex;gap:14px;flex-wrap:wrap}
.pd-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pd-gallery .g{aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid var(--floor-3);background:radial-gradient(120% 120% at 50% 0,#231F18,#15130F);display:grid;place-items:center;cursor:pointer}
.pd-gallery .g img{max-width:64%;max-height:80%;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5));transition:transform .4s var(--ease)}
.pd-gallery .g:hover img{transform:scale(1.06)}
.pd-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pd-rel a{background:var(--floor-2);border:1px solid var(--floor-3);border-radius:16px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pd-rel a:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.5)}
.pd-rel .st{aspect-ratio:4/3;background:radial-gradient(120% 120% at 50% 0,#231F18,#15130F);display:grid;place-items:center}
.pd-rel .st img{max-width:56%;max-height:80%;filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}
.pd-rel .b{padding:16px 18px}
.pd-rel .c{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.pd-rel .n{font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--concrete);margin:3px 0}
.pd-rel .d{font-size:12.5px;color:var(--muted)}
.pd-avail{display:flex;flex-wrap:wrap;gap:10px}
.pd-avail .r{font-family:var(--f-mono);font-size:12px;color:var(--concrete);background:var(--floor-2);border:1px solid var(--floor-3);border-radius:10px;padding:11px 15px;display:flex;gap:8px;align-items:center}
.pd-avail .r::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
@keyframes float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@media(max-width:820px){.pd-grid{grid-template-columns:1fr;gap:10px}.pd-stage{aspect-ratio:4/5;order:-1;max-width:340px;margin-inline:auto}.pd-split{grid-template-columns:1fr;gap:24px}.pd-feats{grid-template-columns:1fr}.pd-gallery{grid-template-columns:repeat(2,1fr)}.pd-rel{grid-template-columns:1fr}}
@media(max-width:600px){.pd-dry{grid-template-columns:1fr}.pd-dlcard{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pd-stage.float img{animation:none}}

/* === PRODUCT ECOSYSTEM (plate, hub) === */
.pd-plate{width:210px;height:280px;border-radius:16px;background:linear-gradient(160deg,#d9d4c8,#a7a294);position:relative;box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 2px 6px rgba(255,255,255,.4);overflow:hidden}
.pd-plate.sm{width:120px;height:150px;border-radius:12px}
.pl-lid{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:120px;height:20px;border-radius:8px;background:linear-gradient(#c4bfb2,#928d80)}
.pd-plate.sm .pl-lid{display:none}
.pl-band{position:absolute;inset-inline:0;top:62px;padding:16px 12px;background:var(--pc,#E98C42);color:#fff;text-align:center}
.pd-plate.sm .pl-band{top:auto;bottom:0;padding:10px 8px}
.pl-band b{display:block;font-family:var(--f-display);font-weight:800;font-size:21px;line-height:1.1}
.pd-plate.sm .pl-band b{font-size:13px}
.pl-band i{font-family:var(--f-mono);font-size:13px;opacity:.9;font-style:normal}
.pd-plate.sm .pl-band i{font-size:10px}
.pl-logo{position:absolute;bottom:16px;inset-inline:0;text-align:center;font-family:var(--f-display);font-weight:900;color:#15130F;opacity:.45;letter-spacing:.05em}
/* hub */
.hub-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:6px 0 26px}
.hub-search{flex:1;min-width:240px;display:flex;gap:10px;align-items:center;background:var(--floor-2);border:1px solid var(--floor-3);border-radius:12px;padding:4px 6px 4px 14px}
.hub-search input{flex:1;background:transparent;border:none;color:var(--concrete);font-size:15px;padding:11px 0}
.hub-search input:focus{outline:none}
.hub-search button{flex:none}
.hub-cats{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.hub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hub-card{background:var(--floor-2);border:1px solid var(--floor-3);border-radius:16px;overflow:hidden;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;display:flex;flex-direction:column}
.hub-card::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--accent,var(--primary));opacity:.85;z-index:1}
.hub-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.5);border-color:var(--floor-4)}
.hub-card .st{aspect-ratio:4/3;background:radial-gradient(120% 120% at 50% 0,#231F18,#15130F);display:grid;place-items:center;overflow:hidden}
.hub-card .st img{max-width:54%;max-height:80%;filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));transition:transform .4s var(--ease)}
.hub-card:hover .st img{transform:translateY(-5px) scale(1.04)}
.hub-card .st .pd-plate{transform:scale(.62)}
.hub-card .b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.hub-card .c{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.hub-card .n{font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--concrete)}
.hub-card .d{font-size:12px;color:var(--muted);flex:1}
.hub-card .meta{display:flex;gap:12px;font-family:var(--f-mono);font-size:10px;color:var(--muted-d);border-top:1px solid var(--hair);padding-top:9px;margin-top:4px}
.hub-card.hide{display:none}
@media(max-width:980px){.hub-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.hub-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.hub-grid{grid-template-columns:1fr}}

/* === TOOLS === */
.cmp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 22px}
.cmp-slots select{width:100%;background:var(--floor-2);border:1px solid var(--floor-3);border-radius:10px;padding:13px 14px;color:var(--concrete);font-size:14px}
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp-table th,.cmp-table td{border:1px solid var(--floor-3);padding:11px 13px;text-align:start;vertical-align:top}
.cmp-table th{background:var(--floor-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cmp-table td.lab{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:rgba(30,27,22,.5);width:150px}
.cmp-table .ph{color:var(--concrete);font-family:var(--f-display);font-weight:700}
@media(max-width:760px){.cmp-slots{grid-template-columns:1fr}.cmp-table{font-size:12px}}
.tool-choices{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 8px}
.tool-choice{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--concrete);background:var(--floor-2);border:1px solid var(--floor-3);border-radius:12px;padding:14px 18px;cursor:pointer;transition:.2s}
.tool-choice:hover{border-color:var(--primary)}.tool-choice.on{background:var(--primary);color:#160F08;border-color:var(--primary)}
.wiz-step{display:none}.wiz-step.on{display:block;animation:win .4s var(--ease)}
@keyframes win{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wiz-prog{display:flex;gap:8px;margin-bottom:20px}
.wiz-prog .dot{flex:1;height:4px;border-radius:2px;background:var(--floor-3)}
.wiz-prog .dot.on{background:var(--primary)}
.result-card{background:linear-gradient(120deg,#241F18,#15130F);border:1px solid var(--floor-3);border-radius:18px;padding:30px}