/* Native product shell adapter. Angular hosts consume their existing shared SCSS. */
.product-shell{display:grid;grid-template-columns:var(--tru-sidebar-width) minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:var(--tru-shell-gap);column-gap:var(--tru-shell-column-gap);max-width:var(--tru-shell-max-width);min-height:100dvh;margin-inline:auto;padding-inline:var(--tru-shell-inline-padding)}
.product-header,.shell-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--tru-product-logo-height);padding-block:0}
.product-sidebar{position:static;display:flex;flex-direction:column;gap:.35rem;align-self:start;min-width:0;padding-top:0}
.product-shell>main{min-width:0;width:100%;padding-top:var(--tru-content-top-padding)}
.eyebrow{font-size:.82rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;margin:0 0 .35rem}
.appearance-controls{display:flex;align-items:end;gap:.8rem;flex-wrap:wrap}
.scroll-top{position:fixed;right:1.25rem;bottom:1.25rem;z-index:3;display:grid;place-items:center;width:3rem;height:3rem;min-height:3rem;padding:.65rem;margin:0;border:1px solid var(--fg);border-radius:50%;box-shadow:none;background:var(--fg);color:var(--bg)}
.scroll-top:hover:not(:disabled){background:var(--bg);color:var(--fg)}
.scroll-top svg{width:100%;height:100%}
.appearance-controls label{margin:0}
.appearance-controls select{display:block;width:auto}
.appearance-controls button{margin:0}
@media(max-width:760px){.product-shell{grid-template-columns:1fr;gap:1rem}.product-header,.shell-header{flex-wrap:wrap}.header-controls{gap:.35rem}.product-shell>main{padding-top:0}}