.pos-template-coffee{--pos-accent:#70442b;--pos-soft:#f2e7d9;--scene-x:0%;--scene-y:0%}
.pos-template-barber{--pos-accent:#173e50;--pos-soft:#e4edf0;--scene-x:25%;--scene-y:0%}
.pos-template-salon{--pos-accent:#793f64;--pos-soft:#f3e5ee;--scene-x:50%;--scene-y:0%}
.pos-template-grocery{--pos-accent:#326044;--pos-soft:#e6efdf;--scene-x:75%;--scene-y:0%}
.pos-template-sarisari{--pos-accent:#23615f;--pos-soft:#e1efea;--scene-x:100%;--scene-y:0%}
.pos-template-streetfood{--pos-accent:#93451c;--pos-soft:#faead6;--scene-x:0%;--scene-y:100%}
.pos-template-carinderia{--pos-accent:#8c4739;--pos-soft:#f4e6da;--scene-x:25%;--scene-y:100%}
.pos-template-bakery{--pos-accent:#81581d;--pos-soft:#f7edda;--scene-x:50%;--scene-y:100%}
.pos-template-laundry{--pos-accent:#2e5f85;--pos-soft:#e3eef6;--scene-x:75%;--scene-y:100%}
.pos-template-water{--pos-accent:#176477;--pos-soft:#dff0f1;--scene-x:100%;--scene-y:100%}
.pos-brand.shop-title{position:relative;isolation:isolate;overflow:hidden}
.pos-brand.shop-title::before{content:"";position:absolute;right:0;top:50%;translate:0 -50%;width:240px;height:240px;z-index:-1;pointer-events:none;background-image:url(pos-themes.webp);background-size:500% 200%;background-position:var(--scene-x) var(--scene-y);opacity:.2;mask-image:linear-gradient(to left,#000 15%,transparent 100%)}
.pos-brand .pos-brand-copy{position:relative;z-index:1}.pos-brand .eyebrow{color:var(--pos-accent)}.pos-art-label{position:absolute;right:2px;bottom:2px;font-size:9px;color:#54636c;background:#f8f5ecdd;padding:2px 5px;border-radius:4px}
.pos-workspace[class*=pos-template-]{position:relative;isolation:isolate}
.pos-workspace[class*=pos-template-]::before{content:"";position:absolute;right:0;bottom:0;width:min(390px,100%);aspect-ratio:1;z-index:-1;pointer-events:none;background-image:url(pos-themes.webp);background-size:500% 200%;background-position:var(--scene-x) var(--scene-y);opacity:.09;mask-image:linear-gradient(135deg,transparent 15%,#000 100%)}
.pos-workspace[class*=pos-template-] .pos-order-heading{background:var(--pos-accent)}
.pos-workspace[class*=pos-template-] .category-tabs button.selected{background:var(--pos-accent);border-color:var(--pos-accent);color:#fff}
.pos-workspace[class*=pos-template-] .product-card.in-order{border-color:var(--pos-accent);background:var(--pos-soft)}
@media(max-width:650px){.pos-brand.shop-title::before{width:160px;height:160px;opacity:.17}.pos-art-label{font-size:8px}.pos-workspace[class*=pos-template-]::before{opacity:.06}}
@media print{.pos-brand.shop-title::before,.pos-workspace[class*=pos-template-]::before,.pos-art-label{display:none}}

/* Template chooser: retain the existing grid and control positions. */
.pos-template-card{position:relative;isolation:isolate;overflow:hidden;border-top:3px solid var(--pos-accent)!important}
.pos-template-card::before{content:"";position:absolute;right:-8px;bottom:-8px;width:210px;height:210px;z-index:-1;pointer-events:none;background-image:url(pos-themes.webp);background-size:500% 200%;background-position:var(--scene-x) var(--scene-y);opacity:.3;mask-image:linear-gradient(115deg,transparent 10%,#000 100%)}
.pos-template-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#fffefb 15%,#fffefbe8 48%,#fffefb00 100%)}
.pos-template-card h2,.pos-template-card>span>strong{color:var(--pos-accent)}
.pos-template-card .button{background:var(--pos-accent);border-color:var(--pos-accent);color:#fff}
.pos-template-card .badge{background:var(--pos-soft);color:var(--pos-accent)}
.pos-template-card a:focus-visible,.pos-template-card:focus-within{outline:3px solid var(--pos-accent);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.pos-template-card{transition:transform .2s ease,box-shadow .2s ease}@media(hover:hover) and (pointer:fine){.pos-template-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #173e5012}}}
@media(max-width:650px){.pos-template-card::before{width:180px;height:180px;opacity:.26}}
@media print{.pos-template-card::before,.pos-template-card::after{display:none}}
