.demo-hero,.demo-band,.demo-panel{background:var(--ttd-color-neutral-0);border:1px solid var(--ttd-color-neutral-200);border-radius:var(--ttd-radius-8);}
.demo-hero{display:grid;grid-template-columns:1.1fr .9fr;min-height:25rem;overflow:hidden;background:var(--ttd-color-primary-900);color:var(--ttd-color-white);}
.demo-hero__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(var(--ttd-space-6),6vw,var(--ttd-space-16));}
.demo-hero__copy h1,.demo-hero__copy h2{color:inherit}.demo-hero__copy p{max-width:34rem;color:var(--ttd-color-primary-100)}
.demo-hero__visual,.demo-media{display:grid;place-items:center;min-height:16rem;background:linear-gradient(135deg,var(--ttd-color-primary-700),var(--ttd-color-primary-400));}
.demo-hero__visual::before,.demo-media::before{width:11rem;height:11rem;border:18px solid var(--ttd-color-accent-400);border-radius:50%;content:"";box-shadow:inset 0 0 0 18px var(--ttd-color-accent-200),0 0 0 2rem rgb(255 255 255 / .08);}
.demo-dots{display:flex;gap:var(--ttd-space-2);margin-top:var(--ttd-space-6)}.demo-dots span{width:2.2rem;height:.35rem;background:var(--ttd-color-primary-300)}.demo-dots span:first-child{background:var(--ttd-color-accent-400)}
.demo-intro{max-width:48rem}.demo-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ttd-space-8);align-items:start}.demo-narrow{max-width:52rem}.demo-panel{padding:var(--ttd-space-6)}
.demo-brand{display:grid;place-items:center;min-height:6rem;color:var(--ttd-color-primary-700);background:var(--ttd-color-neutral-0);border:1px solid var(--ttd-color-neutral-200);font-family:var(--ttd-font-family-heading);font-size:var(--ttd-font-size-h4);font-weight:var(--ttd-font-weight-bold);text-align:center}
.demo-controls{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--ttd-space-4);padding:var(--ttd-space-4);background:var(--ttd-color-neutral-100);border-block:1px solid var(--ttd-color-neutral-200)}.demo-controls .ttd-field{min-width:12rem}.demo-select{min-height:var(--ttd-button-height-md);padding:var(--ttd-space-2) var(--ttd-space-3);color:var(--ttd-color-neutral-900);background:var(--ttd-color-neutral-0);border:1px solid var(--ttd-color-neutral-300);border-radius:var(--ttd-radius-4)}
.demo-pagination{display:flex;justify-content:center;gap:var(--ttd-space-2);padding-top:var(--ttd-space-4)}.demo-pagination a{display:grid;min-width:2.5rem;min-height:2.5rem;place-items:center;color:var(--ttd-color-neutral-700);background:var(--ttd-color-neutral-0);border:1px solid var(--ttd-color-neutral-300);text-decoration:none}.demo-pagination a[aria-current]{color:var(--ttd-color-white);background:var(--ttd-color-primary-600);border-color:var(--ttd-color-primary-600)}
.demo-list{display:grid;gap:var(--ttd-space-3);margin:0;padding:0;list-style:none}.demo-list a{color:var(--ttd-color-neutral-700);font-weight:var(--ttd-font-weight-semibold)}.demo-category{display:flex;flex-wrap:wrap;gap:var(--ttd-space-2)}
.demo-product{display:grid;grid-template-columns:1fr 1fr;gap:var(--ttd-space-8);align-items:start}.demo-product__info{display:grid;gap:var(--ttd-space-4)}.demo-media{min-height:26rem;border-radius:var(--ttd-radius-8)}.demo-media::after{position:absolute;color:var(--ttd-color-white);content:"PRODUCT VIEW";font-size:var(--ttd-font-size-caption);font-weight:var(--ttd-font-weight-bold);letter-spacing:var(--ttd-letter-spacing-label)}.demo-media{position:relative}.demo-media__caption{margin:var(--ttd-space-3) 0 0;color:var(--ttd-color-neutral-600);font-size:var(--ttd-font-size-body-sm)}
.demo-cart{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--ttd-space-8);align-items:start}.demo-line{display:grid;grid-template-columns:5rem 1fr auto;gap:var(--ttd-space-4);align-items:center;padding-block:var(--ttd-space-4);border-bottom:1px solid var(--ttd-color-neutral-200)}.demo-thumb{display:grid;min-height:5rem;place-items:center;background:var(--ttd-color-primary-50);border-radius:var(--ttd-radius-4)}.demo-thumb::before{width:2.5rem;height:2.5rem;border:6px solid var(--ttd-color-primary-400);border-radius:50%;content:""}.demo-summary{position:sticky;top:var(--ttd-space-4)}.demo-total{display:flex;justify-content:space-between;align-items:baseline;margin-block:var(--ttd-space-5);padding-top:var(--ttd-space-5);border-top:1px solid var(--ttd-color-neutral-200)}
.demo-accordion{display:grid;gap:var(--ttd-space-2)}.demo-accordion details{padding:var(--ttd-space-4) var(--ttd-space-5);background:var(--ttd-color-neutral-0);border:1px solid var(--ttd-color-neutral-200);border-radius:var(--ttd-radius-4)}.demo-accordion summary{cursor:pointer;font-family:var(--ttd-font-family-heading);font-size:var(--ttd-font-size-h5);font-weight:var(--ttd-font-weight-bold)}.demo-accordion p{max-width:48rem;color:var(--ttd-color-neutral-600)}
@media(max-width:767px){.demo-hero,.demo-layout,.demo-product,.demo-cart{grid-template-columns:1fr}.demo-hero__visual{min-height:13rem}.demo-line{grid-template-columns:4rem 1fr}.demo-line .demo-line__price{grid-column:2}.demo-summary{position:static}}