/* Public Digital Menu — standalone (no Bootstrap, no admin CSS). Logical properties only, so RTL/LTR is automatic.
   One input drives the palette: --pm-brand (set from the same colour as the admin's --mx-brand). */
@font-face{font-family:'BYekan';src:url('../fonts/BYekan.eot');src:url('../fonts/BYekan.eot?#iefix') format('embedded-opentype'),url('../fonts/BYekan.woff2') format('woff2'),url('../fonts/BYekan.woff') format('woff'),url('../fonts/BYekan.ttf') format('truetype'),url('../fonts/BYekan.svg?#byekanregular') format('svg');font-weight:normal;font-style:normal;font-display:swap}

:root{--pm-brand:#007a3d;--pm-ease:cubic-bezier(.22,1,.36,1);--pm-rail:76px;--pm-font:"BYekan","Bricolage Grotesque",Tahoma,system-ui,sans-serif;color-scheme:light dark}
html[lang=en]{--pm-font:"Bricolage Grotesque","BYekan",system-ui,sans-serif}
@media(min-width:768px){:root{--pm-rail:108px}}

/* Palette — fallback built with color-mix, then the OKLCH formula where supported */
:root,[data-theme=light]{--pm-accent:var(--pm-brand);--pm-on:#fff;--pm-accent-2:color-mix(in srgb,var(--pm-brand) 40%,#e8b04a);--pm-bg:color-mix(in srgb,var(--pm-brand) 4%,#fff);--pm-surface:#fff;--pm-text:color-mix(in srgb,var(--pm-brand) 18%,#101614);--pm-border:color-mix(in srgb,var(--pm-brand) 12%,#e4e8e6)}
[data-theme=dark]{--pm-accent:color-mix(in srgb,var(--pm-brand) 55%,#fff);--pm-on:#06130d;--pm-accent-2:color-mix(in srgb,var(--pm-brand) 40%,#e8b04a);--pm-bg:color-mix(in srgb,var(--pm-brand) 8%,#0b0f0e);--pm-surface:color-mix(in srgb,var(--pm-brand) 10%,#131817);--pm-text:#ecf1ef;--pm-border:color-mix(in srgb,var(--pm-brand) 18%,#242b29)}
@supports (color:oklch(from red l c h)){
  :root,[data-theme=light]{--pm-accent:oklch(from var(--pm-brand) min(l,.55) c h);--pm-on:#fff;--pm-accent-2:oklch(from var(--pm-brand) .8 .12 calc(h + 50));--pm-bg:oklch(from var(--pm-brand) .965 .008 h);--pm-surface:oklch(from var(--pm-brand) .995 .003 h);--pm-text:oklch(from var(--pm-brand) .27 .03 h);--pm-border:oklch(from var(--pm-brand) .9 .012 h)}
  [data-theme=dark]{--pm-accent:oklch(from var(--pm-brand) max(l,.72) min(c,.14) h);--pm-on:oklch(from var(--pm-brand) .2 .04 h);--pm-accent-2:oklch(from var(--pm-brand) .7 .1 calc(h + 50));--pm-bg:oklch(from var(--pm-brand) .19 .015 h);--pm-surface:oklch(from var(--pm-brand) .235 .018 h);--pm-text:oklch(from var(--pm-brand) .93 .01 h);--pm-border:oklch(from var(--pm-brand) .31 .02 h)}
}
:root,[data-theme]{--pm-muted:color-mix(in srgb,var(--pm-text) 62%,transparent);--pm-tint:color-mix(in srgb,var(--pm-accent) 10%,transparent);
  --pm-shadow:0 1px 2px color-mix(in srgb,var(--pm-text) 8%,transparent),0 14px 30px -20px color-mix(in srgb,var(--pm-text) 38%,transparent);
  --pm-skel-a:color-mix(in srgb,var(--pm-text) 6%,var(--pm-surface));--pm-skel-b:color-mix(in srgb,var(--pm-text) 13%,var(--pm-surface))}

/* Base */
*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{margin:0;padding-inline-start:var(--pm-rail);background:var(--pm-bg);color:var(--pm-text);font-family:var(--pm-font);line-height:1.65;transition:background-color .4s,color .4s}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pm-accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}

/* Category rail (full-height, scrolls on Y only) */
.pm-rail{position:fixed;inset-block:0;inset-inline-start:0;z-index:50;width:var(--pm-rail);display:flex;flex-direction:column;background:var(--pm-surface);border-inline-end:1px solid var(--pm-border);transition:background-color .4s,border-color .4s}
.pm-logo{display:block;margin:.6rem .5rem .25rem;padding:.35rem;border-radius:1rem}
[data-theme=dark] .pm-logo{background:#f3f5f4}
.pm-logo img{width:100%;height:auto}
.pm-rail nav{display:flex;flex:1;min-height:0}
.pm-rail-list{position:relative;flex:1;min-height:0;margin:0 6px;padding:.4rem .4rem 1.5rem;list-style:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.pm-rail-list::-webkit-scrollbar{display:none}
.pm-pill{position:absolute;inset-inline:.4rem;top:0;height:var(--h,0);border-radius:.75rem;background:var(--pm-accent);transform:translateY(var(--y,0));opacity:0;box-shadow:0 10px 22px -10px var(--pm-accent);transition:transform .5s var(--pm-ease),height .5s var(--pm-ease),opacity .3s}
.pm-pill.on{opacity:1}
.pm-rail-item.is-off{display:none}
.pm-rail-link{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;margin-block-end:.15rem;padding:.55rem .2rem;border-radius:1rem;color:var(--pm-muted);font-size:.7rem;line-height:1.35;text-align:center;text-decoration:none;transition:color .3s}
.pm-rail-link:hover{color:var(--pm-text)}
.pm-rail-link img{width:2.4rem;height:2.4rem;padding:.3rem;object-fit:contain;/*border-radius:50%;background:var(--pm-bg);*/transition:transform .45s var(--pm-ease),background-color .3s}
.pm-rail-link.active{color:var(--pm-on);font-weight:700}
.pm-rail-link.active img{transform:scale(1.12);/*background:var(--pm-surface)*/}
@media(min-width:768px){.pm-rail-link{font-size:.8rem}.pm-rail-link img{width:2.9rem;height:2.9rem}}

/* Top bar: search + theme + language */
.pm-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.5rem;padding:.65rem 1rem;background:color-mix(in srgb,var(--pm-bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-block-end:1px solid transparent;transition:border-color .3s}
.pm-top.is-stuck{border-block-end-color:var(--pm-border)}
.pm-search{position:relative;flex:1;max-width:34rem}
.pm-search input{width:100%;height:2.75rem;padding-inline:2.8rem 2.8rem;border:1px solid var(--pm-border);border-radius:50rem;background:var(--pm-surface);color:inherit;font:inherit;transition:border-color .2s,box-shadow .25s,background-color .4s}
.pm-search input::placeholder{color:var(--pm-muted)}
.pm-search input:focus{outline:0;border-color:var(--pm-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--pm-accent) 18%,transparent)}
.pm-search input::-webkit-search-cancel-button{display:none}
.pm-search .i{position:absolute;inset-block:0;inset-inline-start:.95rem;margin-block:auto;color:var(--pm-muted);pointer-events:none;transition:color .2s}
.pm-search:focus-within>.i{color:var(--pm-accent)}
.pm-clear{position:absolute;inset-block:.3rem;inset-inline-end:.3rem;display:grid;place-items:center;width:2.15rem;border:0;border-radius:50%;background:var(--pm-tint);color:var(--pm-accent);cursor:pointer;opacity:0;scale:.6;pointer-events:none;transition:opacity .2s,scale .3s var(--pm-ease)}
.pm-clear .i{width:1rem;height:1rem}
.pm-search input:not(:placeholder-shown)~.pm-clear{opacity:1;scale:1;pointer-events:auto}
.pm-iconbtn{display:grid;place-items:center;flex:none;min-width:2.75rem;height:2.75rem;padding:0 .6rem;border:1px solid var(--pm-border);border-radius:50rem;background:var(--pm-surface);color:inherit;font-size:.85rem;font-weight:700;text-decoration:none;cursor:pointer;transition:border-color .2s,background-color .4s,transform .3s var(--pm-ease)}
.pm-iconbtn:hover{border-color:var(--pm-accent);transform:translateY(-1px)}
.pm-iconbtn:active{transform:scale(.94)}
.pm-theme{position:relative;padding:0;width:2.75rem;overflow:hidden}
.pm-theme .i{position:absolute;transition:rotate .5s var(--pm-ease),scale .5s var(--pm-ease),opacity .3s}
[data-theme=light] .pm-theme .sun,[data-theme=dark] .pm-theme .moon{rotate:90deg;scale:.4;opacity:0}

/* Page */
.pm-content{max-width:80rem;margin-inline:auto;padding:.75rem 1rem 4rem}
.pm-quick{display:grid;gap:.5rem;margin-block-end:1.5rem}
.pm-phones{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.pm-btn{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem 1rem;border:1px solid var(--pm-border);border-radius:1rem;background:var(--pm-surface);color:inherit;text-decoration:none;box-shadow:var(--pm-shadow);transition:transform .35s var(--pm-ease),border-color .2s,background-color .4s}
.pm-btn:hover{transform:translateY(-2px);border-color:var(--pm-accent)}
.pm-btn:active{transform:scale(.98)}
.pm-btn .i{color:var(--pm-accent)}
[dir=rtl] .flip{scale:-1 1}
.pm-num{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pm-badge{padding:.1rem .6rem;border-radius:50rem;font-size:.75rem;color:var(--pm-accent);background:var(--pm-tint);white-space:nowrap}
.pm-notice{margin-block-end:1.5rem;padding:.8rem 1rem;border-radius:1rem;background:var(--pm-tint);color:var(--pm-accent)}
.pm-result{margin:0 0 1rem;color:var(--pm-muted);font-size:.9rem}
.pm-empty{display:grid;justify-items:center;gap:.75rem;padding:3.5rem 1rem;text-align:center;color:var(--pm-muted);animation:pm-in .5s var(--pm-ease) backwards}
.pm-empty .i{width:2.5rem;height:2.5rem;color:var(--pm-accent)}
.pm-empty button{padding:.5rem 1.2rem;border:0;border-radius:50rem;background:var(--pm-accent);color:var(--pm-on);font-weight:700;cursor:pointer}

/* Category sections */
.pm-cat{margin-block-end:2.5rem;scroll-margin-top:5rem}
.pm-cat-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-block-end:1.1rem}
.pm-cat-title{position:relative;margin:0;padding-block-end:.55rem;font-size:clamp(1.3rem,1.1rem + 1vw,1.85rem);font-weight:700;line-height:1.3}
.pm-cat-title::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:2.75rem;height:3px;border-radius:3px;background:var(--pm-accent);transform-origin:0 50%;scale:0 1;transition:scale .8s var(--pm-ease) .2s}
[dir=rtl] .pm-cat-title::after{transform-origin:100% 50%}
.pm-cat.is-in .pm-cat-title::after{scale:1}
.pm-time{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .75rem;border-radius:50rem;font-size:.82rem;color:var(--pm-accent);background:var(--pm-tint)}
.pm-time .i{width:1rem;height:1rem}
.pm-grid{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.pm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1500px){.pm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Item card */
.pm-item{overflow:hidden;border:1px solid var(--pm-border);border-radius:1.15rem;background:var(--pm-surface);box-shadow:var(--pm-shadow);opacity:0;transition:transform .4s var(--pm-ease),border-color .25s,box-shadow .3s,background-color .4s}
.pm-item.is-in{opacity:1;animation:pm-in .65s var(--pm-ease) var(--d,0ms) backwards}
.pm-item:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pm-accent) 40%,var(--pm-border))}
.pm-item.is-open{border-color:var(--pm-accent);box-shadow:0 18px 36px -22px var(--pm-accent)}
.pm-card-main{display:grid;grid-template-columns:5.75rem minmax(0,1fr);gap:.85rem;padding:.7rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media(min-width:480px){.pm-card-main{grid-template-columns:7.25rem minmax(0,1fr)}}
.pm-info{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.pm-name{margin:0;font-size:1.05rem;font-weight:700;line-height:1.4}
.pm-desc{margin:0;color:var(--pm-muted);font-size:.88rem;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pm-item.is-open .pm-desc{-webkit-line-clamp:unset}
.pm-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-block-start:auto;padding-block-start:.3rem}
.pm-price{font-weight:700;font-variant-numeric:tabular-nums;color:var(--pm-accent)}
.pm-more{display:grid;place-items:center;width:2rem;height:2rem;margin-inline-start:auto;padding:0;border:0;border-radius:50%;background:var(--pm-tint);color:var(--pm-accent);cursor:pointer;transition:rotate .45s var(--pm-ease),background-color .25s,color .25s}
.pm-more .i{width:1rem;height:1rem}
.pm-item.is-open .pm-more{rotate:180deg;background:var(--pm-accent);color:var(--pm-on)}
.pm-extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--pm-ease)}
.pm-item.is-open .pm-extra{grid-template-rows:1fr}
.pm-extra>div{min-height:0;overflow:hidden}
.pm-tags{display:flex;flex-wrap:wrap;gap:.4rem;padding:.15rem .85rem .95rem}
.pm-tag{padding:.15rem .7rem;border-radius:50rem;font-size:.8rem;background:color-mix(in srgb,var(--pm-text) 8%,transparent)}
.pm-tag.lead{background:var(--pm-text);color:var(--pm-bg);font-weight:700}

/* Progressive image (blur/skeleton → full photo) */
.progressive{position:relative;margin:0;aspect-ratio:1;overflow:hidden;border-radius:.9rem;background:linear-gradient(110deg,var(--pm-skel-a) 30%,var(--pm-skel-b) 50%,var(--pm-skel-a) 70%) 0 0/200% 100%;animation:pm-skel 1.5s linear infinite}
.progressive.is-loaded{animation:none;background:var(--pm-skel-a)}
.progressive img{width:100%;height:100%;object-fit:cover}
.progressive img.reveal{position:absolute;inset:0;opacity:0;scale:1.08;transition:opacity .7s,scale 1s var(--pm-ease)}
.progressive img.reveal.in{opacity:1;scale:1}

/* Back-to-top with scroll-progress ring */
.pm-fab{position:fixed;inset-block-end:1rem;inset-inline-end:1rem;z-index:45;display:grid;place-items:center;width:3rem;height:3rem;padding:0;border:0;border-radius:50%;background:var(--pm-surface);color:var(--pm-accent);box-shadow:var(--pm-shadow);cursor:pointer;opacity:0;translate:0 1rem;pointer-events:none;transition:opacity .3s,translate .45s var(--pm-ease),background-color .4s}
.pm-fab.show{opacity:1;translate:0;pointer-events:auto}
.pm-fab svg.ring{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.pm-fab circle{fill:none;stroke-width:2.5}
.pm-fab .bg{stroke:var(--pm-border)}
.pm-fab .fg{stroke:var(--pm-accent);stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:calc(113.1*(1 - var(--p,0)))}

/* Theme switch: circular reveal from the button (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:pm-reveal .75s var(--pm-ease) both}
@keyframes pm-reveal{from{clip-path:circle(0 at var(--tx,50%) var(--ty,0))}to{clip-path:circle(150vmax at var(--tx,50%) var(--ty,0))}}
@keyframes pm-in{from{opacity:0;translate:0 18px}}
@keyframes pm-skel{to{background-position:-200% 0}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .progressive{animation:none}
}