.sticker-page { --paper:#fff; --accent:#00a84f; --line:#eceeed; --max:1280px; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.site-fixed-top { flex:none; background:#fff; }
.site-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; }
.site-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.sticker-page header { width:100%; max-width:none; padding:4px max(16px,calc((100vw - 1280px)/2)); display:flex; gap:8px; margin:0; background:#303030; border:0; }
.sticker-page header a { color:#fff; }
.sticker-page header .brand { font-size:1rem; letter-spacing:0; margin:0; white-space:nowrap; }
.sticker-page .header-tools { gap:12px; align-items:center; flex-direction:row; }
.sticker-page nav { font-size:.72rem; gap:10px; flex-wrap:nowrap; white-space:nowrap; }
.sticker-page .language-switcher { background:#fff; width:auto; }
.sticker-page .language-switcher button { flex:0 1 auto; padding:2px 4px; }
.product-top, .store-layout { width:min(calc(100% - 40px),980px); margin:auto; }
.store-layout main.page { width:100%; padding:0 0 24px; min-width:0; }
.product-back { margin:3px 0 0; font-size:.68rem; line-height:1.3; }
.product-intro { display:grid; grid-template-columns:160px minmax(0,1fr); align-items:start; gap:16px; padding:4px 0 6px; border-bottom:1px solid var(--line); }
.product-intro h1 { font-size:clamp(1.05rem,2.2vw,1.55rem); line-height:1.2; margin:2px 0; }
.product-intro .eyebrow { margin:0; font-size:.6rem; line-height:1.35; }
.product-copy > p { font-size:.76rem; margin:2px 0; line-height:1.45; }
.product-copy .creator { color:#66746b; font-size:.68rem; }
.sample-card { padding:0; text-align:center; }
.sample-card img:not([hidden]), .sample-card canvas:not([hidden]) { display:block; margin:0 auto; width:160px; max-width:100%; height:auto; }
#chat-toggle { cursor:pointer; border:1px solid var(--line); border-radius:5px; padding:8px 14px; color:#24553e; background:#fff; font:inherit; font-size:.8rem; }
.sticker-page button:focus-visible, .sticker-page a:focus-visible, .chat-scroll:focus-visible { outline:3px solid #00a84f; outline-offset:3px; }
.product-copy .sale-status { display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:215px; max-width:100%; height:44px; background:#00b900; color:#fff; padding:0 12px; text-align:center; text-decoration:none; font-weight:700; margin:8px 0 0; font-size:16px; line-height:1; }
.sale-status:hover { background:#009e00; }
.section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:12px 0 8px; }
.page .section-heading h2 { margin:0; font-size:1.2rem; }
.section-heading > span { color:#859188; font-size:.75rem; }
.sample-sheets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.sticker-tile { display:block; }
.sticker-thumbnail { display:block; aspect-ratio:1; background-image:var(--sheet); background-size:200% 300%; background-position:calc(var(--column)*100%) calc(var(--row)*50%); background-repeat:no-repeat; }
.conversation-section { margin:0; }
.gallery-section { margin-top:20px; border-top:1px solid var(--line); }
.phone-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:12px; }
.phone-example { margin:0; min-width:0; }
.phone-example h3 { font-size:.85rem; font-weight:600; margin:0 0 12px; }
.phone-screen { aspect-ratio:390/844; display:grid; grid-template-rows:26px 40px minmax(0,1fr) 42px; border:3px solid #26333a; border-radius:26px; overflow:hidden; background:#b6cbe0; box-shadow:0 3px 8px #15232f0d; }
.phone-status { display:flex; align-items:center; justify-content:space-between; background:#fafafa; padding:4px 13px 0; font-size:.65rem; color:#283940; }
.phone-island { width:30%; height:10px; border-radius:20px; background:#293239; }
.phone-toolbar { display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#fafafa; font-size:.8rem; }
.chat-scroll { padding:12px 8px 2px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; display:flex; flex-direction:column; }
.chat-day { text-align:center; color:#4d6477; font-size:.55rem; margin-bottom:12px; }
.chat-messages { margin-top:auto; }
.chat-message { display:flex; gap:5px; margin:0 0 11px; align-items:flex-start; }
.chat-message.right { flex-direction:row-reverse; }
.chat-avatar { width:20px; height:20px; flex:0 0 20px; margin-top:16px; border:6px solid #f8e8cd; border-radius:50%; background:#6d946c; }
.right .chat-avatar { border-color:#efe2f7; background:#ac83ae; }
.message-content { min-width:0; max-width:calc(100% - 25px); }
.chat-name { display:block; font-size:.55rem; color:#425c70; margin-bottom:3px; }
.right .chat-name { text-align:right; }
.bubble { margin:0; padding:7px 9px; border-radius:12px; background:#fff; font-size:clamp(.58rem,.9vw,.78rem); line-height:1.6; }
.right .bubble { background:#b2ee88; }
.chat-sticker { display:block; width:min(100%,140px); height:auto; margin-top:8px; background:transparent; }
.right .chat-sticker { margin-left:auto; }
.chat-time { display:block; color:#476279; font-size:.5rem; margin-top:3px; }
.right .chat-time { text-align:right; }
.chat-continuation { color:#516b81; font-size:.8rem; text-align:center; margin:2px 0; letter-spacing:.15em; }
.phone-composer { display:flex; align-items:center; gap:8px; background:#fafafa; padding:7px 10px; color:#61706d; font-size:.9rem; }
.composer-field { flex:1; border:1px solid #e5e9e7; border-radius:18px; background:#fff; padding:3px 10px; font-size:.6rem; }
.phone-example figcaption { padding:10px 0; text-align:center; font-size:.75rem; color:#7d8780; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:760px) {
 .sticker-page header { padding:4px 12px; }
 .sticker-page .header-tools { flex-direction:column; align-items:flex-end; gap:2px; }
 .sticker-page nav { font-size:.6rem; gap:7px; }
 .sticker-page .language-switcher { font-size:.44rem; padding:1px; }
 .sticker-page .language-switcher button { padding:1px 3px; }
 .sticker-page header .brand { margin:0; font-size:.84rem; }
 .product-top, .store-layout { width:calc(100% - 24px); }
 .store-layout main.page { padding:0 0 40px; }
 .product-intro { grid-template-columns:96px minmax(0,1fr); gap:8px; padding:3px 0 5px; }
 .sample-card img:not([hidden]), .sample-card canvas:not([hidden]) { width:96px; }
 .product-copy > p { font-size:.65rem; line-height:1.4; }
 .product-copy .creator { font-size:.6rem; }
 .product-intro .eyebrow { font-size:.5rem; }
 .product-copy .sale-status { margin-top:6px; }
 .product-copy h1 { font-size:1rem; }
 .sample-sheets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .phone-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:20px; padding-bottom:8px; }
 .phone-example { flex:0 0 calc(100% - 24px); max-width:350px; scroll-snap-align:start; }
 .bubble { font-size:.82rem; }
 .phone-screen { grid-template-rows:30px 44px minmax(0,1fr) 46px; }
 .chat-scroll { padding:14px 10px 4px; }
 .chat-avatar { width:25px; height:25px; flex-basis:25px; border-width:8px; }
 .message-content { max-width:calc(100% - 30px); }
 .chat-sticker { width:145px; }
 .phone-status,.phone-toolbar { font-size:.8rem; }
 .chat-name,.chat-time { font-size:.65rem; }
}

@media (max-height:560px) and (min-width:761px) {
 .product-intro { grid-template-columns:88px minmax(0,1fr); gap:12px; }
 .sample-card img:not([hidden]), .sample-card canvas:not([hidden]) { width:80px; }
 .product-copy h1 { font-size:1.1rem; }
 .product-copy > p { font-size:.65rem; }
}
