/* One horizontal row for every occasion, including the original ten designs. */
#template-grid[data-template-rail],.journey-template-grid.phone-mockup-grid[data-template-rail]{display:flex!important;flex-wrap:nowrap!important;direction:rtl;gap:20px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:4px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#b99d85 #eee8df;padding:10px 4px 20px;max-width:100%;min-width:0;align-items:stretch}
[data-template-rail]>.template-tile,[data-template-rail]>.phone-mockup-item{flex:0 0 280px;width:280px;min-width:0;scroll-snap-align:start;scroll-margin-inline:4px}
.journey-layout,.journey-work,.journey-content{min-width:0}
/* The cover itself fills the card edge to edge, without a second inset frame. */
#journey-template-rail>.phone-mockup-item{padding:0 0 14px;overflow:hidden}
#journey-template-rail .phone-screen-container{position:relative;width:100%;height:auto;aspect-ratio:9/16;flex-shrink:0;border:0;border-radius:0}
#journey-template-rail .phone-screen-container img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;border-radius:0;margin:0;padding:0}
#journey-template-rail .phone-item-meta{padding-inline:14px}
#journey-template-rail .storybook-cover-card .phone-screen-container{aspect-ratio:3/4}
#journey-template-rail .storybook-cover-card .phone-screen-container img{object-position:center 20%}
#journey-occasion-rail[data-template-rail]{display:flex!important;flex-wrap:nowrap!important;direction:rtl;gap:20px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:4px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#b99d85 #eee8df;padding:10px 4px 20px;margin-top:0;max-width:100%;min-width:0;align-items:stretch}
#journey-occasion-rail>.creation-occasion-card{flex:0 0 280px;width:280px;min-width:0;scroll-snap-align:start;scroll-margin-inline:4px}
#journey-occasion-rail>.creation-occasion-card:hover{transform:none}
@media(max-width:600px){#journey-occasion-rail[data-template-rail]{gap:14px!important}#journey-occasion-rail>.creation-occasion-card{flex-basis:82%;width:82%;max-width:280px}.journey:has(#journey-occasion-rail) .journey-title{font-size:27px}.journey:has(#journey-occasion-rail) .journey-description{font-size:13px}}
.template-rail-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 6px;direction:rtl;color:var(--muted);font-size:13px}
.template-rail-controls>div{display:flex;gap:8px;direction:rtl}.template-rail-controls button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fffdf8;color:var(--wine);font-size:23px;cursor:pointer}.template-rail-controls button:disabled{opacity:.3;cursor:default}.template-rail-controls button:not(:disabled):hover{background:#eee4db;border-color:var(--wine)}
[data-template-rail] .phone-mockup-item:hover{transform:none}
@media(max-width:600px){#template-grid[data-template-rail],.journey-template-grid.phone-mockup-grid[data-template-rail]{gap:14px!important}[data-template-rail]>.template-tile,[data-template-rail]>.phone-mockup-item{flex-basis:82%;width:82%;max-width:280px}.template-rail-controls{font-size:12px}#template-grid[data-template-rail] .template-art{height:340px}}
@media(prefers-reduced-motion:reduce){[data-template-rail]{scroll-behavior:auto}}
@media(max-width:600px){
 .journey:has(#journey-template-rail) .journey-top h1{font-size:27px;margin:4px 0 12px}
 .journey:has(#journey-template-rail) .journey-progress{margin-bottom:15px}
 .journey:has(#journey-template-rail) .journey-step-header{gap:10px;margin-bottom:8px;padding-bottom:8px;align-items:flex-start}
 .journey:has(#journey-template-rail) .journey-title{font-size:25px;margin:0 0 5px}
 .journey:has(#journey-template-rail) .journey-description{font-size:12px;margin:0;line-height:1.6}
 .journey:has(#journey-template-rail) .journey-back-link{font-size:11px;padding:8px 11px;white-space:nowrap}
 #journey-template-rail .phone-screen-container{height:auto;aspect-ratio:9/16;flex-shrink:0}
 #journey-template-rail .phone-screen-container img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
 #journey-template-rail .phone-item-meta{margin-top:10px}
 #journey-template-rail .phone-item-meta p{min-height:16px;margin-bottom:8px}
}