BRAND Starbucks 2026 · Page: product-detail

HEADER brand: Starbucks; design_date: 2026-09; page_type: product-detail; variants: food and at-home coffee items use the same layout without the size selector or with the whole-bean size (inf) example_urls: https://www.starbucks.com/menu/product/873068625/hot; evidence: measured from ordering-pdp.3402528c178837219b1c.css, patternLibStyles and computed styles 2026-09-28 at 1440x900 and 390x844 unless marked purpose: pick a size, customize and add the drink to the order skeleton: header 99px, breadcrumb bar 53px, dark product header 332px, options, summary band, footer, fixed crust; total height ~2305px desktop, ~2335px mobile; sidebar: none overrides: header active item Menu; content starts at the logo offset (x 131); two 420px columns centered with 88px gap on each side of the middle (>=1206) SECTIONS S1 header - as Overview S2 breadcrumb bar - location background: #f9f9f9 (subnav style); height: 53px; text 13-14px (text-xxs) rgba(0,0,0,0.87), current item 600; separators " / " copy: "Menu / Hot Coffee & Espresso / Blonde Roast - Starbucks® Sunsera" S3 product header / split-media-left - identify the drink background: #1f3933 (House Green); height: 332px at 1440, 480px mobile; padding: 16px 0 (py3) around the image layout: two columns max 420px each; left image column margin-right 88px (>=1206; 44px >=1100, 24px >=1024), right column margin-left 88px; vertically centered (lg-flex items-center); mobile: image on top, text centered below with 32px bottom padding elements: circular image block 300px (180px when viewport height < 600) with the cut-out cup and a faint round glow; H1 product name 36px/1.29 700 white (28px at 375-767, 22px <375); calories line "5 calories" 36px 700 white (same class as the name) with a 16px info icon button rgba(255,255,255,0.7) raised at the top right copy: product name 3-6 words media: cut-out drink photo, no background; placeholder [CUP CUTOUT IN 300px CIRCLE] S4 options - size and customization background: #ffffff; padding-top 32px layout: same two 420px columns left column: H2 "Size Options" 24px 600 with a 4px #d4e9e2 bar under it (sb-heading__bottomBorder: padding 0 8px 12px, bar radius 12px, full column width), margin-bottom 32px size selector: 4 radio items in a row, each 72x104px: cup icon 24x40px (outline SVG, green-filled SVG when selected, background-image swap 250ms ease-in-out, 50ms delay), label 14-16px 600 ("Short"), sub label "8 fl oz" 16px; the selected item gets a 56px circle behind the icon: bg #d4e9e2, 2px #006241 border, transition all 250ms ease-in-out availability line: 20px pin icon rgba(0,0,0,0.6) + "Select a café to view availability" 16px rgba(0,0,0,0.58), padding-bottom 32px right column: Customize frap (House Green, gold wand icon), padding-top 32px; centered on mobile, left at >=768 Add to Order frap: fixed bottom right above the crust (Recipe frap-button) S5 product summary band - description and nutrition background: #1e3932; padding 32px 0; margin-top 64px (mt9) layout: left column 420px elements: star cost badge "100★ item" (14px #cba258, 1px #cba258 border, radius 6px, padding 0 8px, margin-bottom 16px); description 14px/21px rgba(255,255,255,0.7), pre-line ("Notes of bright citrus and toasted almond..."); nutrition summary: 1px rule rgba(255,255,255,0.1), three values (Calories, Total Fat, Sugar) in a spaced row, label 14px, value 14px 600 white; outline-white pill "Full nutrition & ingredients list" 16px, margin-top 16px responsive: full width with 16px gutters on mobile S6 footer - as Overview; S7 crust - as Recipe frap-button PAGE COMPONENTS size selector item (above); star cost badge; nutrition summary (values animate font-size 300ms cubic-bezier(0.35,0,0,1) when enlarged, "Nutrition updated" notice slides up and fades over 4s); quick-mod cards in the customize view (radius 16px, bg #f9f7f3, 2px border that flashes #00754a for 1.5s when changed; topping chips 64px tall, radius 16px, 3px border #f9f7f3, selected bg #cad4c3 700) INTERACTIONS - size select: click a size: the 56px circle and the filled cup icon appear (250ms ease-in-out); calories and nutrition update - Customize: opens the customization view (full overlay, fixed, scrollable) (inf) - Add to Order: bag notification bubble (Recipe frap-button) - calories info button: opens a disclaimer tooltip STATES initial: Grande preselected; the page moves keyboard focus to the Customize frap after load (focus-visible ring visible) store not selected: availability line with pin; out of stock: not seen SCREENSHOTS - file: starbucks_2026_product-detail_d1440_top.jpg shows: first screen at 1440x900, live https://www.starbucks.com/menu/product/873068625/hot 2026-09-28: breadcrumb bar, 332px #1f3933 header, 300px cup, H1 36px white, size selector with Grande active, Customize frap in focus-visible state, Add to Order frap above the crust key values: header #1f3933; active size circle 56px #d4e9e2 / 2px #006241; frap 60px 19px 600 do not copy: product photo, cup icons, logo - file: starbucks_2026_product-detail_d1440_full.jpg shows: full page at 1440: summary band #1e3932 with gold star badge, description, nutrition row, outline-white pill - file: starbucks_2026_product-detail_m390_full.jpg shows: full page at 390 (stored at 1x): header 480px stacked, name 28px centered, fraps and 74px crust