/* Native product showcase. Uses the existing Gp fonts, icons and accent token. */
#portfolio.product-stack-section{background:linear-gradient(180deg,#fff,#fafafa 55%,#fff);overflow:hidden}
#portfolio .product-stack-layout{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,2fr);gap:72px;align-items:start}
#portfolio .stack-tabs{display:flex;flex-direction:column;border-top:1px solid #e6e6e6}
#portfolio .stack-tabs button{display:flex;align-items:center;gap:15px;text-align:left;border:0;border-bottom:1px solid #e6e6e6;border-left:2px solid transparent;background:transparent;padding:14px 12px;font:500 14px/1.5 var(--heading-font);color:#777;transition:background .2s,color .2s,border-color .2s}
#portfolio .stack-tabs button>span{font:11px/1.5 var(--default-font);color:#999}
#portfolio .stack-tabs button>i{margin-left:auto;opacity:0;color:#957024;font-size:15px}
#portfolio .stack-tabs button:hover{color:var(--heading-color);background:#f5f5f4}
#portfolio .stack-tabs button[aria-selected=true]{color:var(--heading-color);background:#faf6ec;border-left-color:var(--accent-color)}
#portfolio .stack-tabs button[aria-selected=true]>i{opacity:1}
#portfolio .stack-detail{padding-top:29px}
#portfolio .stack-detail[hidden]{display:none}
#portfolio .stack-category{font-size:11px;letter-spacing:.8px;color:#888;text-transform:uppercase}
#portfolio .stack-detail h3{font:700 22px/1.3 var(--heading-font);margin:10px 0 13px}
#portfolio .stack-detail>p{font-size:14px;line-height:1.75;margin-bottom:15px;color:#666}
#portfolio .stack-detail .stack-capabilities{font-size:12px;color:#888;line-height:1.8}
#portfolio .stack-cta{display:inline-flex;align-items:center;gap:25px;border:1px solid #e1c47e;background:#fff9ea;color:var(--heading-color);padding:10px 16px;border-radius:4px;font-size:13px;font-weight:500;transition:background .2s}
#portfolio .stack-cta i{color:#97712a}
#portfolio .stack-cta:hover{background:var(--accent-color);color:var(--contrast-color)}
#portfolio .stack-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:1.4px;color:#888;margin:0 0 58px}
#portfolio .stack-position{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#888;white-space:nowrap}
#portfolio .stack-stage{position:relative;aspect-ratio:16/10;touch-action:pan-y;isolation:isolate}
#portfolio .stack-stage::before{content:"";position:absolute;inset:-75px -50px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#ffc45110,transparent 65%)}
#portfolio .stack-panel{position:absolute;inset:0;display:flex;flex-direction:column;border:1px solid #dadcdd;border-radius:6px;background:#fff;overflow:hidden;box-shadow:0 12px 32px #14202a09;transform-origin:50% 0;transform:translateY(calc(var(--stack-depth) * -18px)) scale(calc(1 - var(--stack-depth) * .045));z-index:calc(10 - var(--stack-offset));transition:transform .45s cubic-bezier(.22,.8,.25,1),opacity .3s;opacity:1}
#portfolio .stack-panel[aria-hidden=true]{pointer-events:none}
#portfolio .stack-panel[data-distant=true]{opacity:0}
#portfolio .stack-panel[aria-hidden=true]::after{content:"";position:absolute;inset:0;background:#f3f3f0e8}
#portfolio .stack-browser{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:18px;border-bottom:1px solid #e8e8e8;background:#fafafa;font-size:10px;color:#888;flex-shrink:0}
#portfolio .browser-dots{display:flex;gap:5px}
#portfolio .browser-dots b{width:5px;height:5px;background:#dededb;border-radius:50%}
#portfolio .browser-dots b:first-child{background:#d5b66c}
#portfolio .stack-image-link{display:flex;align-items:center;justify-content:center;position:relative;flex:1;min-height:0;padding:12px;background:#fff;cursor:zoom-in}
#portfolio .stack-image-link img{width:100%;height:100%;object-fit:contain;display:block}
#portfolio .stack-zoom{position:absolute;right:15px;bottom:15px;display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:3px;background:#fffffff2;border:1px solid #e5e5e5;font-size:10px;color:#555;opacity:0;transition:opacity .2s}
#portfolio .stack-image-link:hover .stack-zoom,#portfolio .stack-image-link:focus-visible .stack-zoom{opacity:1}
#portfolio .stack-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:22px;padding-top:17px;border-top:1px solid #e8e8e8}
#portfolio .stack-hint{font-size:12px;color:#888}
#portfolio .stack-controls>div{display:flex;align-items:center;gap:17px}
#portfolio .stack-controls button{width:34px;height:34px;border:1px solid #ddd;background:white;color:#555;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
#portfolio .stack-controls button:hover{background:#fff7e5;border-color:var(--accent-color)}
#portfolio button:focus-visible,#portfolio a:focus-visible{outline:2px solid var(--accent-color);outline-offset:4px}
@media(max-width:1199px){#portfolio .product-stack-layout{gap:36px;grid-template-columns:minmax(250px,1fr) minmax(0,1.9fr)}#portfolio .stack-hint{font-size:10px}}
@media(max-width:991px){#portfolio .product-stack-layout{grid-template-columns:1fr;gap:30px}#portfolio .stack-sidebar{display:contents}#portfolio .stack-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));order:0}#portfolio .stack-tabs button{font-size:12px;padding:12px 8px;gap:8px}#portfolio .stack-tabs button>i{display:none}#portfolio .stack-showcase{order:1}#portfolio .stack-details{order:2}#portfolio .stack-detail{padding-top:0;max-width:600px}#portfolio .stack-heading{margin-bottom:52px}#portfolio .stack-hint{font-size:12px}}
@media(max-width:575px){#portfolio .stack-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}#portfolio .stack-tabs button{font-size:12px}#portfolio .stack-tabs button>span{font-size:10px}#portfolio .stack-browser{font-size:9px;padding:8px 10px}#portfolio .stack-image-link{padding:5px}#portfolio .stack-heading{margin-bottom:42px}#portfolio .stack-controls{margin-top:16px}#portfolio .stack-hint{font-size:10px;max-width:150px}#portfolio .stack-controls>div{gap:10px}#portfolio .stack-zoom{display:none}#portfolio .stack-detail h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){#portfolio .stack-panel,#portfolio .stack-tabs button,#portfolio .stack-cta,#portfolio .stack-zoom,#portfolio .stack-controls button{transition:none}#portfolio .stack-panel{transform:none}#portfolio .stack-panel[aria-hidden=true]{visibility:hidden}}