/* V21 motion & fixes — loaded after v19.css, before color-mode.css */

/* 換頁布幕 */
.route-curtain{position:fixed;inset:0;z-index:120;background:#efe4da;display:grid;place-items:center;pointer-events:none;visibility:hidden}
.route-curtain.on{visibility:visible}
.route-curtain span{font:italic 400 clamp(26px,4vw,46px)/1.2 var(--serif);color:#765d4e;letter-spacing:.02em}
.route-curtain small{display:block;margin-top:10px;font:10px/1 Arial,sans-serif;letter-spacing:4px;color:#a08877;text-align:center;font-style:normal}

/* 標題逐字 */
.ch{display:inline-block;white-space:pre}

/* 首頁輪播：遮罩轉場（取代 v19 的硬切） */
.hero-slides img.hero-slide{transition:none!important}
.hero-slides img.hero-slide.leaving{opacity:1;z-index:1}
.hero-slides img.hero-slide.active{z-index:2}
.hero-timer{position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:#493f3826;overflow:hidden;border-radius:1px}
.hero-timer i{position:absolute;inset:0;background:#765d4e;transform-origin:left;transform:scaleX(0)}
.hero-controls{overflow:hidden}
.hero-slide-label{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:3;font-size:12px;letter-spacing:.08em;color:#4f433d;background:#fcf9f5d9;padding:6px 14px;border-radius:20px;white-space:nowrap;pointer-events:none}
@media(max-width:700px){.hero-slide-label{bottom:50px;font-size:11px}}


/* 商品卡：桌機錯落統一為偶數欄同一高度 */
@media(min-width:1101px){#products .product-card:nth-child(4n+2),#products .product-card:nth-child(4n+4){padding-top:44px}}

/* 商品卡：平拍圖由下往上遮罩切換（取代淡入） */
.product-media .altshot{opacity:1!important;clip-path:inset(100% 0 0 0);transition:clip-path .62s cubic-bezier(.22,.8,.24,1)!important}
.product-media.show-flat .altshot{clip-path:inset(0 0 0 0)}
@media(hover:hover){.product-media:hover .altshot,.product-media:focus-within .altshot{clip-path:inset(0 0 0 0)}}
.motion-off .product-media .altshot{transition:none!important}

/* 觸控裝置：看平拍／快速選購移到圖片下方，不遮人物 */
@media(hover:none),(max-width:760px){
 .product-media{aspect-ratio:auto!important;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;background:transparent;overflow:visible}
 .product-media>a{grid-column:1/-1;display:block;overflow:hidden;position:relative}
 .product-media>a>.shot{aspect-ratio:3/4;height:auto!important}
 .product-media .flip-shot,.product-media .quickadd{position:static;transform:none;margin:0;grid-row:2;border-radius:20px;font-size:11px;padding:8px 10px;border:1px solid #d4c4b6;background:#fcf9f5;white-space:nowrap}
 .product-media .flip-shot{grid-column:1}
 .product-media .quickadd{grid-column:1/-1}
 .product-media .flip-shot~.quickadd{grid-column:2}
}

/* 數字跳動 */
.count-bump{display:inline-block}

/* 文章檢查清單：打勾劃線 */
#socialPage fieldset label span{background:linear-gradient(#b8957f,#b8957f) left 55%/0 1px no-repeat;transition:background-size .45s cubic-bezier(.22,.8,.24,1),color .3s}
#socialPage fieldset label input:checked+span{background-size:100% 1px;color:#9a8678}
.motion-off #socialPage fieldset label span{transition:none}

/* 減少動態 */
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.route-curtain{display:none}.product-media .altshot{transition:none!important}}

/* ===== V22 ===== */
/* 跑馬燈：統一間距、加大字級、✦ 分隔 */
.ticker{display:flex;justify-content:flex-start;gap:0!important;padding:20px 0!important;background:#f3eae1;border-top:1px solid #e6d9cc;border-bottom:1px solid #e6d9cc}
.ticker-track{display:flex;align-items:center;flex:none;animation:ticker 60s linear infinite}
.ticker-track>*{flex:none;margin:0 clamp(18px,2.2vw,34px)}
.ticker span{font:500 11px/1 Arial,sans-serif!important;letter-spacing:.32em!important;color:#6d574b}
.ticker em{font:italic 400 clamp(22px,2.4vw,32px)/1 var(--serif)!important;color:#a07f6c;letter-spacing:.01em}
.ticker i{font-style:normal;font-size:12px;color:#c2a28d;margin:0!important}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-100%)}}
@media(max-width:760px){.ticker{padding:14px 0!important}.ticker-track{animation-duration:42s}.ticker-track>*{margin:0 14px}.ticker span{font-size:9px!important}.ticker em{font-size:19px!important}}
.motion-off .ticker-track{animation:none}

/* 首頁 Hero：桌機整張圖收在一個螢幕高度內，不裁圖；兩側以同圖柔焦補滿 */
@media(min-width:701px){
 .hero{grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr)!important;height:calc(100svh - 144px)!important;min-height:560px!important;max-height:1100px!important}
 .hero-photo{aspect-ratio:auto!important;height:100%!important;width:100%!important;align-self:stretch!important;background:#e7dfd5}
 .hero-photo::before{content:"";position:absolute;inset:-40px;background:var(--hero-bg) center/cover no-repeat;filter:blur(34px) saturate(.9);opacity:.55;transform:scale(1.05)}
 .hero-photo .hero-slides{z-index:1}
 .hero-photo .hero-arrow,.hero-photo .hero-controls,.hero-slide-label,.hero-photo .vertical{z-index:4}
}

/* 商品徽章 */
.badges{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px}
.badge{font-size:10.5px;letter-spacing:.06em;line-height:1;padding:5px 8px;border-radius:20px;border:1px solid #dccbbd;color:#7d6656;background:#fbf6f0;white-space:nowrap}
.badge-hot{background:#a66f61;border-color:#a66f61;color:#fff8f2;position:relative;overflow:hidden}
.badge-new{background:#4f433d;border-color:#4f433d;color:#fbf5ee}
.badge-pick{background:#e9d6c8;border-color:#d8bca9;color:#6b4f40}
.badge-color{border-style:dashed}
.badges-lg{margin:0 0 14px}.badges-lg .badge{font-size:12px;padding:6px 11px}
.badge-hot::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff8 50%,transparent 70%);transform:translateX(-120%);animation:badge-shine 3.6s ease-in-out infinite}
@keyframes badge-shine{60%,100%{transform:translateX(120%)}}
.motion-off .badge-hot::after{animation:none;display:none}

/* 商品頁：圖片故事長捲 */
.product-story{max-width:1180px;margin:70px auto 30px;padding:0 4vw}
.story-head{text-align:center;margin-bottom:46px}
.story-head h2{font:400 clamp(24px,2.6vw,34px)/1.35 var(--serif);color:#5d4a40;margin-top:10px}
.story-figure{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:center;margin:0 0 70px}
.story-figure:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.story-figure:nth-of-type(even) .story-media{order:2}
.story-media{background:#efe7de;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.story-media img{width:100%;height:100%;object-fit:contain}
.story-figure figcaption span{font:11px Arial;letter-spacing:3px;color:#a08877}
.story-figure figcaption h3{font:400 clamp(22px,2.2vw,30px)/1.3 var(--serif);color:#5d4a40;margin:14px 0 12px}
.story-figure figcaption p{font-size:14px;line-height:2;color:#6e5f56;max-width:34em}
.story-colors{margin:20px 0 70px}
.story-colors>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:16px}
.story-colors figure{margin:0}.story-colors figcaption{display:flex;justify-content:space-between;gap:8px;padding-top:8px;font-size:13px}
.story-colors figcaption span{font-size:11px;color:#9a8678}
.story-source{border-top:1px solid #e3d6ca;padding-top:34px}
.story-source-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:16px 0 20px}
.story-source-grid button{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#efe7de}
.story-source-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.8,.24,1)}
.story-source-grid button:hover img{transform:scale(1.04)}
.story-source-grid span{position:absolute;left:6px;bottom:6px;font:10px Arial;letter-spacing:1px;background:#fcf9f5d9;padding:3px 6px}
@media(max-width:760px){.product-story{margin-top:50px;padding:0 5vw}.story-figure,.story-figure:nth-of-type(even){grid-template-columns:1fr;gap:16px;margin-bottom:46px}.story-figure:nth-of-type(even) .story-media{order:0}.story-source-grid{grid-template-columns:repeat(3,1fr)}}

/* 頁尾：聯絡資訊併入，統一風格 */
.site-footer{display:block!important;padding:0!important;background:#eae1d6;color:#5b4b42;position:relative;z-index:1}
.footer-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.8fr);gap:clamp(28px,4vw,60px);padding:64px 5vw 46px;max-width:1700px;margin:auto}
.site-footer h3{font:500 11px/1 Arial,sans-serif;letter-spacing:.28em;color:#8d7462;margin:6px 0 22px}
.footer-brand .footer-logo img{width:120px;height:120px}
.footer-brand p{font-size:11px;letter-spacing:.14em;margin:14px 0 10px!important;color:#7d6656}
.footer-brand h2{font:400 22px/1.4 var(--serif);color:#5d4a40;margin:0 0 18px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;border:1px solid #cdb9a9;border-radius:50%;display:grid;place-items:center;margin:0!important;color:#6b5546;transition:background .3s,color .3s}
.footer-social a:hover{background:#6b5546;color:#fbf5ee}
.site-footer address{font-style:normal;display:grid;gap:14px}
.site-footer address a,.footer-hours{display:flex;align-items:flex-start;gap:12px;font-size:14px!important;line-height:1.5;margin:0!important;color:#5b4b42;overflow-wrap:anywhere}
.site-footer address a:hover span{text-decoration:underline;text-underline-offset:4px}
.ficon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:1px;color:#8d7462}
.footer-social .ficon{color:inherit;margin:0}
.footer-links{display:grid;gap:12px}
.footer-links a{font-size:14px!important;margin:0!important;color:#5b4b42;width:fit-content;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .35s}
.footer-links a:hover{background-size:100% 1px}
.footer-bottom{border-top:1px solid #d9c9bb;padding:20px 5vw 26px;display:flex;gap:24px;align-items:center;justify-content:space-between;max-width:1700px;margin:auto;flex-wrap:wrap}
.footer-bottom p{margin:0!important;font-size:11px;letter-spacing:.16em}
.footer-bottom small{flex:1;min-width:260px}
@media(max-width:1000px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-top{padding:46px 6vw 30px;row-gap:34px}.footer-brand,.footer-top>.footer-col:nth-child(2){grid-column:1/-1}.footer-brand .footer-logo img{width:96px;height:96px}}

/* 回到最上方（外圈為閱讀進度） */
.to-top{position:fixed;right:max(18px,2vw);bottom:max(18px,2vw);width:52px;height:52px;border-radius:50%;border:0;padding:0;background:#fcf9f5ee;box-shadow:0 8px 26px #4a372b2b;color:#6b5546;z-index:60;cursor:pointer;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.22,.8,.24,1)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top.show:hover{transform:translateY(-3px)}
.to-top svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.to-top .ring-bg{stroke:#e6d9cc;stroke-width:2}
.to-top .ring{stroke:#a07f6c;stroke-width:2;transform:rotate(-90deg);transform-origin:center}
.to-top path{stroke:currentColor;stroke-width:1.8}
body:has(dialog[open]) .to-top{display:none}
@media(max-width:760px){.to-top{width:46px;height:46px}}

/* 動態背景：暖色光暈緩慢漂移 + 細顆粒 */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.75}
.ambient i:nth-child(1){background:radial-gradient(closest-side,#f0d9cf,#f0d9cf00);left:-18vmax;top:-20vmax;animation:drift1 38s ease-in-out infinite alternate}
.ambient i:nth-child(2){background:radial-gradient(closest-side,#efe3cf,#efe3cf00);right:-22vmax;top:20vh;animation:drift2 46s ease-in-out infinite alternate}
.ambient i:nth-child(3){background:radial-gradient(closest-side,#ead8d8,#ead8d800);left:20vw;bottom:-30vmax;animation:drift3 52s ease-in-out infinite alternate}
.ambient::after{content:"";position:absolute;inset:0;opacity:.32;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift1{to{transform:translate(18vw,22vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-20vw,-14vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-14vw,-26vh) scale(1.1)}}
.motion-off .ambient i{animation:none}
@media(prefers-reduced-motion:reduce){.ambient i{animation:none}}
/* 讓背景光暈畫在 body 底色之上、內容之下（body 仍保有明確底色） */
body{isolation:isolate}
/* 輪播說明移到圖片上緣，不遮人物；手機隱藏 */
.hero-slide-label{top:18px;bottom:auto!important}
@media(max-width:700px){.hero-slide-label{display:none}}
.footer-bottom{padding-right:max(90px,6vw)}

/* V23：商品頁只保留一個圖片入口——主圖＋往下捲的捷徑列 */
.story-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0 4px}
.story-jump>span{font:11px Arial,sans-serif;letter-spacing:.24em;color:#9a8678;margin-right:4px;text-transform:uppercase}
.story-jump button{display:inline-flex;align-items:center;gap:7px;border:1px solid #d9c8ba;background:#fbf6f0;color:#5d4a40;border-radius:24px;padding:9px 14px;font-size:13px;cursor:pointer;transition:background .3s,border-color .3s}
.story-jump button b{font-weight:400;color:#a07f6c;font-size:12px}
.story-jump button i{font-style:normal;transition:transform .35s cubic-bezier(.22,.8,.24,1)}
.story-jump button:hover{background:#f1e5da;border-color:#c9b09e}
.story-jump button:hover i{transform:translateY(3px)}
.page-detail .gallery-view-note{margin-top:10px}
.story-pick{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.story-pick .story-media{transition:box-shadow .35s}
.story-pick:hover .story-media,.story-pick:focus-visible .story-media{box-shadow:0 0 0 2px #a07f6c}
.story-pick figcaption{display:flex;justify-content:space-between;gap:8px;padding-top:8px;font-size:13px}
.story-pick figcaption span{font-size:11px;color:#9a8678}
#story-figures,#story-colors,#story-source{scroll-margin-top:130px}
@media(max-width:760px){.story-jump button{padding:8px 12px;font-size:12px}#story-figures,#story-colors,#story-source{scroll-margin-top:100px}}
.admin-login{max-width:440px;margin:70px auto 90px;padding:0 6vw}
.admin-login h1{font:400 32px/1.3 var(--serif);margin:12px 0 14px;color:#5d4a40}
.admin-login form{margin:26px 0 22px}

/* V26：商品頁 UI/UX——選色與主圖同一視線 */
/* 桌機：主圖固定在視窗內，右欄捲動時一直看得到 */
@media(min-width:901px){
 .page-detail .product-detail{align-items:start}
 .page-detail .gallery{position:sticky;top:120px;align-self:start}
 .page-detail .gallery-main .shot.independent-shot,.page-detail .gallery-main .shot.source-shot{height:calc(100svh - 215px)!important;max-height:calc(100svh - 215px)!important;aspect-ratio:auto!important}
 .page-detail .gallery-main .shot img{object-fit:contain!important}
 .page-detail .gallery-main .color-reference img{max-height:calc(100svh - 275px);width:100%;object-fit:contain}
}
/* 手機：主圖限高，選色在第一屏附近 */
@media(max-width:900px){
 .page-detail .gallery-main .shot.independent-shot,.page-detail .gallery-main .shot.source-shot{max-height:62svh!important;aspect-ratio:auto!important;height:62svh!important}
 .page-detail .gallery-main .shot img{object-fit:contain!important}
 .page-detail .gallery-main .color-reference img{max-height:56svh;width:100%;object-fit:contain}
}
.page-detail .gallery>.demo-note,.page-detail .gallery-view-note{display:none}
/* 顏色按鈕：附該色小圖 */
.colors{gap:10px!important}
.colors button{display:inline-flex!important;flex-direction:column;align-items:center;gap:6px;padding:6px 6px 8px!important;min-width:68px;border:1px solid #d6c5b6!important;background:#fbf6f0!important;color:#5d4a40!important;transition:border-color .25s,box-shadow .25s,transform .25s}
.colors button img{width:56px;height:70px;object-fit:cover;object-position:center 20%;display:block;background:#efe7de}
.colors button span{font-size:13px;line-height:1}
.colors button:hover{border-color:#a07f6c!important;transform:translateY(-2px)}
.colors button.active{border-color:#6b5546!important;box-shadow:0 0 0 1px #6b5546;background:#f3e8de!important;color:#4f433d!important}
.colors button:not(:has(img)){padding:10px 16px!important}
.color-hint{margin-top:4px!important;font-size:12px!important}
/* 說明區移到購買按鈕之後 */
.detail-about{margin:28px 0 8px;padding-top:22px;border-top:1px solid #e6d9cc}
.detail-about>p{line-height:1.9}
/* 「往下看更多」移到購買區下方，改為較輕的樣式 */
.detail-copy .story-jump{margin:18px 0 6px;padding:14px 0 0;border-top:1px dashed #e0d0c2}
.detail-copy .story-jump button{padding:7px 12px;font-size:12px;background:transparent}
/* 標題逐字的 span 不可被外部 span 規則影響（.journal-heading span 曾讓字變直排） */
span.ch{display:inline-block!important;max-width:none!important;margin:0!important;padding:0!important;font:inherit!important;color:inherit!important;text-align:inherit!important;letter-spacing:inherit!important;background:none!important}

/* 檢查清單：進度與完成回饋 */
.checklist .check-progress{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:12px;color:#8d7462}
.check-bar{flex:1;height:3px;background:#e3d4c6;border-radius:3px;overflow:hidden;max-width:220px}
.check-bar i{display:block;height:100%;background:#a07f6c;transform-origin:left;transform:scaleX(0);transition:transform .5s cubic-bezier(.22,.8,.24,1)}
.check-progress b{font-weight:400;letter-spacing:.06em;white-space:nowrap}
.checklist.complete .check-progress b{color:#6b5546}
.check-done{display:flex;align-items:center;gap:22px;margin-top:20px;padding:20px 22px;background:#fbf6f0;border:1px solid #e3d2c3;border-radius:2px}
.check-done[hidden]{display:none}
.check-stamp{position:relative;width:96px;height:96px;flex:none;color:#a66f61;transform:rotate(-10deg)}
.check-stamp svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.check-stamp svg circle:nth-child(2){stroke-width:1;stroke-dasharray:2 4}
.check-stamp span{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:600 8px/1 Arial,sans-serif;letter-spacing:.2em}
.check-done h3{font:400 21px/1.4 var(--serif);color:#5d4a40;margin:6px 0 6px}
.check-done p:not(.eyebrow){font-size:13px;line-height:1.85;color:#6e5f56;margin:0 0 8px}
.check-spark{position:fixed;z-index:130;pointer-events:none;font-style:normal;font-size:14px;color:#c08d77}
@media(max-width:560px){.check-done{flex-direction:column;align-items:flex-start;gap:12px}.check-stamp{width:78px;height:78px}}

/* 手機後台：每件商品獨立卡片，狀態不再藏在右側。 */
.custom-product-video{width:100%;height:100%;object-fit:cover}.editor-gallery video,#mainVideoPreview video{width:100%;max-height:300px}.video-main-options button{min-height:44px;padding:12px;border:1px solid #bda18e;border-radius:8px;margin:8px 0}.lesson-recommendations{margin-top:32px;padding:clamp(18px,4vw,36px);background:#f1e3d8;border-radius:20px}.lesson-recommendations .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}
@media(max-width:700px){#adminContent .table-wrap:has(.admin-product-row){overflow:visible}#adminContent table:has(.admin-product-row),#adminContent table:has(.admin-product-row) tbody{display:block;width:100%;min-width:0}#adminContent table:has(.admin-product-row) thead{display:none}.admin-product-row{display:grid;grid-template-columns:1fr 1fr;background:#fffaf5;border:1px solid #dfd4ca;border-radius:16px;margin:16px 0;padding:12px;gap:6px}.admin-product-row td{display:block;border:0;padding:8px;min-width:0}.admin-product-row td:first-child,.admin-product-row td:nth-child(5){grid-column:1/-1}.admin-product-row td:not(:first-child)::before{content:attr(data-label);display:block;font-size:11px;color:#766253;margin-bottom:4px}.admin-product{min-width:0!important}.admin-product .shot{flex-shrink:0}.admin-product-row .editbutton{min-height:44px;width:100%}.admin-tabs{flex-wrap:wrap}.lesson-recommendations .product-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:minmax(0,1fr)}.form-grid>*{min-width:0}.editor-gallery{max-width:100%}}
.site-header .wordmark,.wordmark{display:flex!important;flex-direction:column;align-items:center!important;justify-content:center;text-align:center}.wordmark img{display:block;margin-inline:auto!important}.wordmark span{display:block;text-align:center;width:100%}

.story-source-grid button{border:2px solid transparent;padding:0;cursor:pointer;border-radius:6px;color:var(--ink);min-height:44px}.story-source-grid button.active,.story-source-grid button:focus-visible{border-color:#765d4e;outline:2px solid #ecd8d1;outline-offset:2px}.story-source-grid button.active span{background:#765d4e;color:white}.gallery-main:focus{outline:none}

/* 原始輪播獨立圖庫：固定預覽高度，切圖不跳動。 */
.story-source-preview{margin:20px 0 12px;background:#f0eae3;border:1px solid var(--line);border-radius:8px;overflow:hidden;text-align:center}
.story-source-preview>img{display:block;width:100%;height:min(75vh,760px);object-fit:contain}
.story-source-count{padding:12px;font-size:12px;color:#765d4e;background:#fcf9f5}
.story-source .story-source-grid{display:flex;gap:10px;overflow-x:auto;padding:5px 3px 12px;scroll-snap-type:x proximity}
.story-source-grid button{flex:0 0 90px;scroll-snap-align:start}
@media(max-width:760px){.story-source-preview>img{height:56svh}.story-source-grid button{flex-basis:70px}}

/* Keep the complete brand lockup inside both header sizes. */
header:has(>.wordmark){padding-block:8px}
header>.wordmark{flex-shrink:0}
header>.wordmark img{flex-shrink:0;transition:width .4s ease,height .4s ease}
header.compact>.wordmark img{width:120px;height:48px}
header.compact>.wordmark span{margin-top:4px}
@media(max-width:760px){header:has(>.wordmark){padding-block:10px}header.compact>.wordmark img{width:105px;height:45px}header.compact>.wordmark span{margin-top:7px}}
@media(prefers-reduced-motion:reduce){header>.wordmark img{transition:none}}
/* Product image choices are present immediately, including the original IG carousel. */
.gallery-thumbnails{padding:16px 12px 8px;min-width:0;background:#fcf9f5}
.gallery-thumbnails>.eyebrow{padding:0 2px 8px;font-size:10px;letter-spacing:1px}
.gallery-thumbnails .gallery-tabs{display:flex;overflow-x:auto;gap:10px;padding:4px 2px 12px;scroll-snap-type:x proximity}
.gallery-thumbnails .gallery-tabs button{flex:0 0 82px;width:82px;min-height:44px;align-self:start;border:2px solid transparent;border-radius:5px;overflow:hidden;scroll-snap-align:start;background:#eee6dc}
.gallery-thumbnails .gallery-tabs button.active{border-color:#765d4e}
.gallery-thumbnails .gallery-tabs .shot,.gallery-thumbnails .gallery-tabs .color-reference{height:100px!important;min-height:0!important;max-height:100px!important;aspect-ratio:auto!important}
.gallery-thumbnails .gallery-tabs img{height:100%;width:100%;object-fit:contain}
.gallery-thumbnails .gallery-tabs button>span{display:block;font-size:10px;padding:5px 2px;line-height:1.4}
.gallery-thumbnails .color-reference>p,.gallery-thumbnails .color-reference>span{display:none}
.product-detail>.gallery{min-width:0}
@media(min-width:761px){.page-detail .gallery{top:96px}.page-detail .gallery-main .shot.independent-shot,.page-detail .gallery-main .shot.source-shot{height:calc(100svh - 310px)!important;max-height:calc(100svh - 310px)!important}.page-detail .gallery-main .color-reference img{max-height:calc(100svh - 350px)}}
.page-detail .gallery{position:relative;top:auto;align-self:start}
/* Stable vector heart above video and flat-lay layers. */
.product-media .heart{z-index:6;width:44px;height:44px;padding:11px;display:grid;place-items:center;border-radius:50%;line-height:1;box-sizing:border-box}
.product-media .heart svg{display:block;width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.product-media .heart.chosen svg{fill:currentColor}
/* Quick-buy images follow their intrinsic proportions, without a reserved 2:3 gap. */
.product-dialog .gallery-main .shot.source-shot,
.product-dialog .gallery-main .shot.independent-shot{aspect-ratio:auto!important;height:auto!important;min-height:0!important;max-height:none!important}
.product-dialog .gallery-main .shot.source-shot img,
.product-dialog .gallery-main .shot.independent-shot img{display:block;width:100%!important;height:auto!important;aspect-ratio:auto!important;position:static!important}
.admin-main-tabs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 14px}.admin-main-tabs button{padding:22px 12px;min-height:64px;border:1px solid #cbb7a6;background:#f2e8de;color:#4f433d;font-size:20px;border-radius:12px}.admin-main-tabs button.active{background:#765d4e;color:#fff}.journal-admin{background:#fffaf5;border:1px solid #dfd4ca;padding:24px;border-radius:14px}.journal-admin label{display:block;margin:12px 0}.journal-admin input,.journal-admin select,.journal-admin textarea{display:block;width:100%;min-height:44px;padding:12px;border:1px solid #cbb7a6;background:white;color:#4f433d;box-sizing:border-box}.journal-admin fieldset{margin:20px 0;border:1px solid #dfd4ca}.journal-edit-cover{width:160px;max-height:210px;object-fit:contain}.journal-admin .button{margin:10px 8px 10px 0}@media(max-width:600px){.admin-main-tabs button{font-size:16px;padding:16px 8px}.journal-admin{padding:14px}.admin-tabs{flex-wrap:wrap}.admin-studio-host iframe{height:1500px!important}}