/* PLASIS / colour study 02. User reference: turquoise green, pinkish
   cinnamon, lemon yellow and ecru. Screen interpretations, not print matches. */
:root{
 --ink:oklch(33.74% .0274 169.85);
 --muted:oklch(49% .022 157.41);
 --paper:oklch(96.18% .0127 86.83);
 --sage:oklch(77.99% .0268 161.74);
 --cinnamon:oklch(77.24% .0729 58.08);
 --lemon:oklch(82.86% .1510 105.48);
 --ecru:oklch(72.97% .036 75.85);
 --stone:color-mix(in oklch,var(--ecru) 22%,var(--paper));
 --line:color-mix(in oklch,var(--ecru) 62%,var(--paper));
 --olive:var(--ink);
}
.announcement{background:var(--sage);color:var(--ink)}
.announcement span:last-child{opacity:1}
.wordmark,header .wordmark{font-size:33px;letter-spacing:5px}
.wordmark span,header .wordmark span{font-size:7px;letter-spacing:2.45px;margin-top:11px;padding-left:2px}
.hero-art{background:var(--sage)}
.hero-art:before{background:linear-gradient(125deg,transparent 45%,#293c3507 45%,transparent 72%)}
.hero-tag,.hero-note,.art-caption,.art-bottom{color:var(--ink)}
.hero-copy h1 em{color:var(--ink)}
.hero .button,.studio-total .button,.bag-bottom .button,.checkout-layout form>.button{background:var(--lemon);color:var(--ink)}
.hero .button:hover,.studio-total .button:hover,.bag-bottom .button:hover,.checkout-layout form>.button:hover{background:color-mix(in oklch,var(--lemon) 85%,var(--cinnamon))}
.promise-strip{background:var(--paper);border-color:var(--line)}
.creation-image{background:color-mix(in oklch,var(--cinnamon) 64%,var(--paper))}
.creation-image.tone-1{background:color-mix(in oklch,var(--sage) 72%,var(--paper))}
.creation-image.tone-2{background:color-mix(in oklch,var(--ecru) 45%,var(--paper))}
.circle-arrow{background:var(--paper);border-color:transparent}
.charm-edit{background:color-mix(in oklch,var(--sage) 35%,var(--paper))}
.story-band{background:var(--cinnamon)}
.story-photo{background:color-mix(in oklch,var(--cinnamon) 45%,var(--paper))}
.story-copy p,.story-copy .text-link{color:var(--ink)}
.preview-canvas{background:color-mix(in oklch,var(--sage) 60%,var(--paper))}
.canvas-label>span{font-size:25px;letter-spacing:5px;opacity:.55}
.canvas-label small{color:var(--ink)}
.position>button>.icon{background:color-mix(in oklch,var(--sage) 40%,var(--paper));color:var(--ink);border-color:color-mix(in oklch,var(--ink) 40%,var(--sage))}
.chain-option.selected{background:color-mix(in oklch,var(--sage) 30%,var(--paper));border-color:var(--ink)}
.charm-image{background:color-mix(in oklch,var(--ecru) 17%,var(--paper))}
.type-tabs a.active,.category-pills button.active,.length-options button.selected{background:var(--sage);color:var(--ink);border-color:var(--ink)}
.preview-switch button.active{background:var(--ink);color:var(--paper)}
.shop-layout aside .category-pills button.active{background:var(--sage);color:var(--ink)}
.gift-toggle{border-color:var(--ecru)}
.bag-bottom,.checkout-summary{background:color-mix(in oklch,var(--sage) 30%,var(--paper))}
.demo-notice{background:color-mix(in oklch,var(--lemon) 25%,var(--paper))}
footer{background:var(--ink)}
.footer-top .wordmark{font-size:45px;letter-spacing:7px;color:var(--sage)}
.footer-top .eyebrow{color:var(--cinnamon)}
.footer-top p,.footer-top a:not(.wordmark),.footer-bottom{color:var(--paper)}
.footer-top small{color:var(--sage)}
@media(max-width:800px){header .wordmark{font-size:28px;letter-spacing:4px}header .wordmark span{font-size:6px;letter-spacing:2px}}
@media(max-width:540px){.footer-top .wordmark{font-size:34px;letter-spacing:4px}.canvas-label>span{font-size:21px;letter-spacing:4px}.footer-top>div:first-child{gap:25px}}

/* Colour study 03: Laelia pink, olive, sulphur yellow, Corinthian pink.
   Digital interpretations of the user’s photographed printed swatches. */
:root[data-palette="rose"]{
 --ink:#353720; --muted:#63634D; --paper:#F7F4EB;
 --sage:#B58F9F; --cinnamon:#D49F98; --lemon:#E5DFAE; --ecru:#B7AE8E;
 --olive:#646438;
}
[data-palette="rose"] .announcement{background:var(--olive);color:var(--paper)}
[data-palette="rose"] .hero-art{background:var(--sage)}
[data-palette="rose"] .hero-tag,
[data-palette="rose"] .hero-note,
[data-palette="rose"] .art-caption,
[data-palette="rose"] .art-bottom{color:#292B1A}
[data-palette="rose"] .hero-art:before{background:linear-gradient(125deg,transparent 45%,#35372008 45%,transparent 72%)}
[data-palette="rose"] .type-tabs a.active,
[data-palette="rose"] .category-pills button.active,
[data-palette="rose"] .length-options button.selected,
[data-palette="rose"] .shop-layout aside .category-pills button.active{background:var(--olive);color:var(--paper);border-color:var(--olive)}
[data-palette="rose"] .charm-edit{background:color-mix(in oklch,var(--lemon) 40%,var(--paper))}
[data-palette="rose"] footer{background:var(--olive)}
[data-palette="rose"] .footer-top .wordmark,
[data-palette="rose"] .footer-top small{color:var(--lemon)}
/* Draft-only comparison toolbar, in normal flow so it never covers the studio. */
.palette-study{background:#F7F4EB;color:#353720;border-bottom:1px solid #D5D0C1;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:18px;font-family:Manrope,sans-serif;font-size:11px}
.palette-study>span{text-transform:uppercase;letter-spacing:1.5px;font-size:9px}
.palette-study-options{display:flex;gap:6px}
.palette-study button{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:3px;padding:8px 10px;color:inherit;font:inherit;cursor:pointer}
.palette-study button[aria-pressed="true"]{border-color:#77745F;background:#ECE8DB}
.palette-study button:focus-visible{outline:2px solid #353720;outline-offset:2px}
.palette-swatches{display:flex;gap:2px}
.palette-swatches i{width:10px;height:14px;display:block;background:var(--swatch)}
@media(max-width:540px){.palette-study{padding:8px;gap:5px;flex-direction:column}.palette-study button{padding:7px 8px;font-size:10px}.palette-study>span{font-size:8px}}
.sh-hero-frame>img{width:92%!important;margin-left:auto;margin-right:auto}
@media(max-width:540px){.sh-hero-frame>img{width:88%!important}}
.sh-materials-visual{position:relative;padding:0;overflow:hidden;border-radius:18px}
.sh-materials-visual>img{width:100%;height:100%;min-height:430px;object-fit:cover;display:block}
.sh-materials-visual>.eyebrow{position:absolute;z-index:1;left:28px;bottom:24px;margin:0;color:var(--paper);text-shadow:0 1px 8px color-mix(in oklch,var(--ink) 30%,transparent)}
@media(max-width:700px){.sh-materials-visual>img{min-height:300px}}