/* Shell chrome only. Existing page content stays outside .shopyli-ui. */
body.sh-shell-enabled { --sh-shell-admin-offset: 0px; --sh-shell-nav-row: 3.5rem; --sh-shell-nav-pad: .35rem; --sh-shell-safe-bottom: env(safe-area-inset-bottom, 0px); --sh-shell-nav-space: calc(var(--sh-shell-nav-row) + var(--sh-shell-nav-pad) + var(--sh-shell-nav-pad) + 1px + var(--sh-shell-safe-bottom)); padding-block-end: 0; }
body.sh-shell-enabled.admin-bar { --sh-shell-admin-offset: 32px; }
/* Independent end-of-page obstruction space. Never wrap or style the owner footer. */
.sh-shell-nav-clearance { display: block; block-size: var(--sh-shell-nav-space); flex: none; pointer-events: none; }
.sh-shell-content { min-inline-size: 0; overflow-wrap: anywhere; max-inline-size: 1200px; margin-inline: auto; padding: 1.25rem max(1rem, env(safe-area-inset-right, 0px)) 1.5rem max(1rem, env(safe-area-inset-left, 0px)); min-block-size: 60vh; scroll-margin-block-start: 6rem; }
.sh-shell-content:focus { outline: none; }
#sh-shell-top { position: sticky; inset-block-start: var(--sh-shell-admin-offset, 0px); z-index: 70; }
.sh-shell-ui .sh-shell-header { background: var(--sh-surface); border-block-end: 1px solid var(--sh-line); padding-block-start: env(safe-area-inset-top, 0px); }
.sh-shell-ui .sh-shell-header-inner { max-inline-size: 1200px; margin-inline: auto; min-block-size: 4.5rem; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.sh-shell-ui .sh-shell-brand { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; color: var(--sh-ink); font: 800 1.35rem/1.1 var(--sh-font); letter-spacing: -.06em; text-decoration: none; flex: none; }
.sh-shell-ui .sh-shell-brand > span:last-child > span { color: var(--sh-brand); }
.sh-shell-ui .sh-shell-brand-mark { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; background: var(--sh-brand); color: white; border-radius: .7rem .7rem .7rem .2rem; }
.sh-shell-ui .sh-shell-header-actions, .sh-shell-ui .sh-shell-languages { display: flex; align-items: center; gap: .25rem; }
.sh-shell-ui .sh-shell-language { display: inline-flex; align-items: center; justify-content: center; flex: none; min-inline-size: 44px; min-block-size: 44px; border-radius: var(--sh-radius-full); color: var(--sh-ink); text-decoration: none; white-space: nowrap; font-size: .875rem; font-weight: 600; line-height: 1.2; }
/* The neutral pill is 34px tall at normal text size; its link retains a 44px target. */
.sh-shell-ui .sh-shell-language-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 34px; padding: 2px 8px; border: 1px solid var(--sh-line); border-radius: inherit; background: var(--sh-surface); }
.sh-shell-ui .sh-shell-language:is(:hover,:focus-visible) .sh-shell-language-pill { background: var(--sh-brand-soft); border-color: var(--sh-brand-soft); }
.sh-shell-ui .sh-shell-language:active .sh-shell-language-pill { background: var(--sh-brand-soft); border-color: var(--sh-brand); }
.sh-shell-ui .sh-shell-language-code { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.sh-shell-ui .sh-shell-language-code:lang(ar) { font-family: var(--sh-font-ar) !important; font-size: 1.0625rem; transform: translateY(-1px); }
.sh-shell-ui .sh-shell-language-code:lang(fr) { font-family: var(--sh-font) !important; }
.sh-shell-ui .sh-shell-flag { display: block; inline-size: 1.4rem; block-size: 1rem; border: 1px solid rgb(24 20 43 / .12); border-radius: 2px; }
.sh-shell-ui .sh-shell-language-pill .sh-shell-flag { inline-size: 22px; block-size: 16px; flex: none; }
.sh-shell-ui .sh-shell-nav-icon { position: relative; display: inline-flex; align-items: center; }
.sh-shell-ui .sh-shell-header-actions > .sh-shell-nav-link { min-inline-size: 44px; min-block-size: 44px; display: grid; place-items: center; color: var(--sh-brand-hover); border-radius: .75rem; text-decoration: none; }
.sh-shell-ui .sh-shell-header-actions > .sh-shell-nav-link .sh-shell-nav-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.sh-shell-ui .sh-shell-header-actions > :is(.sh-shell-search-trigger,.sh-shell-nav-link) { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; flex: none; min-inline-size: 44px; min-block-size: 44px; padding: 0; border: 0; border-radius: var(--sh-radius-full); color: var(--sh-brand-hover); background: transparent; text-decoration: none; }
.sh-shell-ui .sh-shell-header-actions > :is(.sh-shell-search-trigger,.sh-shell-nav-link)::before { content: ''; position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%,-50%); inline-size: 36px; block-size: 36px; border-radius: inherit; background: transparent; pointer-events: none; }
.sh-shell-ui[dir=rtl] .sh-shell-header-actions > :is(.sh-shell-search-trigger,.sh-shell-nav-link)::before { transform: translate(50%,-50%); }
.sh-shell-ui .sh-shell-header-actions > :is(.sh-shell-search-trigger,.sh-shell-nav-link):is(:hover,:focus-visible,:active)::before { background: var(--sh-brand-soft); }
.sh-shell-ui .sh-shell-count-number { position: absolute; inset-block-start: -.55rem; inset-inline-end: -.75rem; min-inline-size: 1.1rem; block-size: 1.1rem; padding-inline: .2rem; border-radius: 99px; display: grid; place-items: center; background: var(--sh-action); color: var(--sh-action-ink); font: 700 .625rem/1 var(--sh-font); }
.sh-shell-ui .sh-shell-navigation { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 65; padding: var(--sh-shell-nav-pad) max(.75rem, env(safe-area-inset-right, 0px)) calc(var(--sh-shell-nav-pad) + var(--sh-shell-safe-bottom)) max(.75rem, env(safe-area-inset-left, 0px)); background: var(--sh-surface); border-block-start: 1px solid var(--sh-line); box-shadow: 0 -3px 12px rgb(24 20 43 / .04); }
.sh-shell-ui .sh-shell-navigation .sh-navigation { max-inline-size: 36rem; margin-inline: auto; border: 0; padding: 0; gap: .3rem; grid-auto-rows: var(--sh-shell-nav-row); }
.sh-shell-ui .sh-shell-navigation .sh-shell-nav-link { min-block-size: var(--sh-shell-nav-row); }
.sh-shell-ui .sh-shell-navigation .sh-shell-nav-label { font-size: .75rem; }
.sh-shell-ui .sh-shell-skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -20rem; z-index: 100; }
.sh-shell-ui .sh-shell-skip:focus { inset-block-start: .5rem; }
.sh-shell-ui .sh-shell-search-fallback { padding: .75rem 1rem; border-block-end: 1px solid var(--sh-line); background: var(--sh-surface); }
.sh-shell-ui .sh-shell-search-form { display: flex; align-items: stretch; gap: .5rem; max-inline-size: 40rem; margin-inline: auto; inline-size: 100%; }
.sh-shell-ui .sh-shell-search-form input { min-inline-size: 0; }
.sh-shell-ui .sh-shell-search-form .sh-button { flex: none; }
.sh-shell-ui .sh-shell-dialog { padding-block-end: env(safe-area-inset-bottom, 0px); }
.sh-shell-ui .sh-shell-dialog .sh-stack > * { flex-shrink: 0; }
.sh-shell-ui .sh-shell-category-links { display: grid; gap: .5rem; }
.sh-shell-ui .sh-shell-category-links a { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; min-block-size: 48px; border: 1px solid var(--sh-line); border-radius: .75rem; text-decoration: none; color: var(--sh-ink); }
.sh-shell-ui .sh-shell-category-links a > span { flex: 1; }
.sh-shell-ui .sh-shell-category-links a:is(:hover,[aria-current=page]) { background: var(--sh-brand); color: var(--sh-on-color); }
.sh-shell-ui .sh-shell-status { position: fixed; z-index: 85; inset-block-start: calc(5rem + var(--sh-shell-admin-offset, 0px) + env(safe-area-inset-top, 0px)); inset-inline: 1rem; margin-inline: auto; inline-size: min(36rem, calc(100% - 2rem)); display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; background: var(--sh-surface); border: 1px solid var(--sh-control-line); border-radius: 1rem; padding: .75rem 1rem; box-shadow: var(--sh-shadow-raised); }
.sh-shell-ui .sh-shell-status p { flex: 1; min-inline-size: 10rem; font-size: .875rem; }
.sh-shell-ui .sh-shell-status[data-state=error], .sh-shell-ui .sh-shell-status[data-state=offline] { border-color: var(--sh-error); }
.sh-shell-ui .sh-shell-status[data-state=loading] { border-color: var(--sh-brand); }
/* Override the legacy global Arabic font only inside the newly owned shell. */
.sh-shell-ui:lang(ar), .sh-shell-ui:lang(ar) :is(a,button,input,h2,p,label,span) { font-family: var(--sh-font-ar) !important; }
.sh-shell-ui:lang(ar) .sh-shell-brand, .sh-shell-ui:lang(ar) .sh-shell-brand span, .sh-shell-ui:lang(ar) .sh-shell-count-number { font-family: var(--sh-font) !important; }
@media (max-width: 380px) { .sh-shell-ui .sh-shell-brand { font-size: 1.15rem; gap: .35rem; } .sh-shell-ui .sh-shell-header-inner { padding-left: max(.65rem, env(safe-area-inset-left, 0px)); padding-right: max(.65rem, env(safe-area-inset-right, 0px)); } .sh-shell-ui .sh-shell-header-actions { gap: 0; } }
@media (max-width: 782px) { body.sh-shell-enabled.admin-bar { --sh-shell-admin-offset: 46px; } }
@media (max-width: 600px) { body.sh-shell-enabled.admin-bar { --sh-shell-admin-offset: 0px; } }
@media (min-width: 960px) {
 .sh-shell-nav-clearance { display: none; }
 .sh-shell-ui .sh-shell-navigation { inset-block-end: auto; inset-block-start: calc(.5rem + var(--sh-shell-admin-offset, 0px) + env(safe-area-inset-top, 0px)); inline-size: min(32rem,42vw); margin-inline: auto; padding: 0; border: 0; box-shadow: none; background: transparent; z-index: 75; }
 .sh-shell-ui .sh-shell-navigation .sh-shell-nav-link { flex-direction: row; min-block-size: 3.5rem; gap: .5rem; }
 .sh-shell-ui .sh-shell-navigation .sh-shell-nav-label { font-size: .875rem; }
 .sh-shell-content { padding-block: 2rem; }
 .sh-shell-ui .sh-dialog--sheet { inset-block: 8rem auto; border-radius: var(--sh-radius-xl); }
}
@media (forced-colors: active) { .sh-shell-ui [aria-current=page], .sh-shell-ui [aria-current=true] { outline: 2px solid Highlight; } }
/* Measured only while a shell dialog locks scrolling. No footer layout owner. */
.sh-shell-ui .sh-shell-navigation { left: var(--sh-shell-lock-left,0px); right: var(--sh-shell-lock-right,0px); }
.sh-shell-ui .sh-shell-status { left: calc(1rem + var(--sh-shell-lock-left,0px)); right: calc(1rem + var(--sh-shell-lock-right,0px)); inline-size: min(36rem,calc(100% - 2rem - var(--sh-shell-lock-left,0px) - var(--sh-shell-lock-right,0px))); }
body.sh-shell-enabled #wpadminbar { left: var(--sh-shell-lock-left,0px); right: var(--sh-shell-lock-right,0px); width: auto; }