/* Every component is opt-in under .shopyli-ui. No Elementor / Woo selectors. */
.shopyli-ui *, .shopyli-ui *::before, .shopyli-ui *::after { box-sizing: border-box; }
.shopyli-ui [hidden] { display: none !important; }
.shopyli-ui :is(button, input, select, textarea) { font: inherit; }
.shopyli-ui :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--sh-focus); outline-offset: 3px;
}
.shopyli-ui :is(h1, h2, h3, h4, p) { margin: 0; }
.shopyli-ui h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.2; letter-spacing: -.035em; }
.shopyli-ui h2 { font-size: var(--sh-text-xl); line-height: 1.35; letter-spacing: -.025em; }
.shopyli-ui h3 { font-size: var(--sh-text-lg); line-height: 1.4; }
.shopyli-ui:lang(ar) :is(h1,h2,h3) { line-height: 1.45; letter-spacing: 0; }
.shopyli-ui a { color: var(--sh-brand-hover); text-underline-offset: .2em; }
.shopyli-ui img { display: block; max-inline-size: 100%; block-size: auto; }
.shopyli-ui .sh-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.shopyli-ui .sh-muted { color: var(--sh-muted); }
.shopyli-ui .sh-small { font-size: var(--sh-text-sm); }
.shopyli-ui .sh-stack { display: flex; flex-direction: column; gap: var(--sh-space-4); min-inline-size: 0; }
.shopyli-ui .sh-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sh-space-3); }
.shopyli-ui .sh-icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; display: inline-block; fill: currentColor; vertical-align: middle; }
.shopyli-ui [dir=rtl] .sh-icon--directional, .shopyli-ui[dir=rtl] .sh-icon--directional { transform: scaleX(-1); }
.shopyli-ui .sh-button {
  display: inline-flex; justify-content: center; align-items: center; gap: .5rem;
  min-block-size: var(--sh-touch); min-inline-size: var(--sh-touch); max-inline-size: 100%; padding: .65rem 1rem;
  border: 1px solid transparent; border-radius: var(--sh-radius-md);
  background: var(--sh-brand); color: var(--sh-on-color); font-weight: 600; text-align: center;
  box-shadow: var(--sh-glow-brand);
  line-height: 1.4; text-decoration: none; cursor: pointer;
  transition: background-color var(--sh-motion-fast) var(--sh-ease), box-shadow var(--sh-motion-fast) var(--sh-ease);
}
.shopyli-ui .sh-button:hover { background: var(--sh-brand-hover); }
.shopyli-ui .sh-button--purchase { background: var(--sh-action); color: var(--sh-action-ink); border-color: var(--sh-action-line); box-shadow: var(--sh-glow-action); }
.shopyli-ui .sh-button--purchase:hover { background: var(--sh-action-hover); box-shadow: var(--sh-glow-action-hover); }
.shopyli-ui .sh-button--secondary { background: var(--sh-surface); color: var(--sh-ink); border-color: var(--sh-control-line); box-shadow: none; }
.shopyli-ui .sh-button--secondary:hover { background: var(--sh-page); }
.shopyli-ui .sh-button--quiet { background: transparent; color: var(--sh-brand-hover); box-shadow: none; }
.shopyli-ui .sh-button--quiet:hover { background: var(--sh-brand-soft); }
.shopyli-ui .sh-button--icon { padding: .65rem; }
.shopyli-ui .sh-button--full { inline-size: 100%; }
.shopyli-ui .sh-button:is(:disabled, [aria-disabled=true]) { background: var(--sh-disabled); border-color: var(--sh-disabled); color: var(--sh-muted); box-shadow: none; cursor: not-allowed; }
.shopyli-ui .sh-button[aria-busy=true] { cursor: wait; }
.shopyli-ui .sh-spinner { inline-size: 1rem; block-size: 1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: sh-spin .8s linear infinite; }
@keyframes sh-spin { to { transform: rotate(360deg); } }
.shopyli-ui .sh-field { display: grid; gap: .4rem; min-inline-size: 0; }
.shopyli-ui .sh-field label { font-weight: 600; font-size: var(--sh-text-sm); }
.shopyli-ui .sh-input { inline-size: 100%; min-block-size: 3rem; border: 1px solid var(--sh-control-line); border-radius: var(--sh-radius-md); background: var(--sh-surface); color: var(--sh-ink); padding: .7rem .85rem; }
.shopyli-ui textarea.sh-input { min-block-size: 6rem; resize: vertical; }
.shopyli-ui .sh-input::placeholder { color: var(--sh-muted); opacity: 1; }
.shopyli-ui .sh-input[aria-invalid=true] { border: 2px solid var(--sh-error); }
.shopyli-ui .sh-input:disabled { background: var(--sh-page); cursor: not-allowed; }
.shopyli-ui .sh-help { font-size: var(--sh-text-sm); color: var(--sh-muted); }
.shopyli-ui .sh-field-error { font-size: var(--sh-text-sm); color: var(--sh-error); display: flex; align-items: center; gap: .4rem; }
.shopyli-ui .sh-choice { position: relative; display: flex; align-items: center; gap: .65rem; min-block-size: var(--sh-touch); cursor: pointer; }
.shopyli-ui .sh-choice input { inline-size: 1.2rem; block-size: 1.2rem; accent-color: var(--sh-brand); flex: none; }
.shopyli-ui .sh-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.shopyli-ui .sh-options legend { font-weight: 600; margin-block-end: .65rem; }
.shopyli-ui .sh-option { cursor: pointer; position: relative; min-inline-size: 0; }
.shopyli-ui .sh-option input { position: absolute; inset-block-start: .8rem; inset-inline-start: .7rem; inline-size: 1rem; block-size: 1rem; accent-color: var(--sh-on-color); }
.shopyli-ui .sh-option span { display: block; border: 1px solid var(--sh-control-line); border-radius: var(--sh-radius-md); padding: .7rem .65rem .7rem 2.1rem; padding-inline: 2.1rem .65rem; min-block-size: var(--sh-touch); font-size: var(--sh-text-sm); }
.shopyli-ui .sh-option input:checked + span { border-color: var(--sh-brand); background: var(--sh-brand); box-shadow: var(--sh-glow-selection); color: var(--sh-on-color); }
.shopyli-ui .sh-option input:disabled + span { background: var(--sh-page); color: var(--sh-muted); border-color: var(--sh-control-line); box-shadow: none; cursor: not-allowed; }
.shopyli-ui .sh-option input:focus-visible + span { outline: 3px solid var(--sh-focus); outline-offset: 3px; }
.shopyli-ui .sh-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: var(--sh-radius-sm); font-size: var(--sh-text-xs); font-weight: 600; line-height: 1.5; background: var(--sh-brand); color: var(--sh-on-color); }
.shopyli-ui .sh-badge--deal { background: var(--sh-accent); color: var(--sh-accent-ink); }
.shopyli-ui .sh-badge--success { background: var(--sh-success); color: var(--sh-on-color); }
.shopyli-ui .sh-badge--warning { background: var(--sh-warning); color: var(--sh-on-color); }
.shopyli-ui .sh-badge--error { background: var(--sh-error); color: var(--sh-on-color); }
.shopyli-ui .sh-badge--neutral { background: var(--sh-page); color: var(--sh-muted); }
.shopyli-ui .sh-card { background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: var(--sh-radius-lg); padding: var(--sh-space-5); box-shadow: var(--sh-shadow-card); min-inline-size: 0; }
.shopyli-ui .sh-product-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,7.5rem),1fr)); gap: var(--sh-product-gap); align-items: stretch; }
.shopyli-ui .sh-product { background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: var(--sh-radius-md); min-inline-size: 0; }
.shopyli-ui .sh-product-link { display: flex; flex-direction: column; block-size: 100%; border-radius: inherit; overflow: hidden; color: var(--sh-ink); text-decoration: none; }
.shopyli-ui .sh-product-link:focus-visible { outline: 3px solid var(--sh-focus); outline-offset: 3px; }
@media (hover: hover) {
  .shopyli-ui .sh-product-link:hover { box-shadow: var(--sh-shadow-card); }
  .shopyli-ui .sh-product-link:hover .sh-product-name { color: var(--sh-brand-hover); }
}
.shopyli-ui .sh-product-media { position: relative; background: var(--sh-media); aspect-ratio: 1; }
.shopyli-ui .sh-product-media > img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.shopyli-ui .sh-product-media > .sh-badge { position: absolute; inset-block-start: .375rem; inset-inline-start: .375rem; max-inline-size: calc(100% - .75rem); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .625rem; padding: .2rem .45rem; }
.shopyli-ui .sh-product-body { display: grid; grid-template-rows: 1.125rem calc(2 * var(--sh-product-title-line)) 1.5rem; gap: .25rem; padding: var(--sh-product-padding); }
.shopyli-ui .sh-product .sh-product-name { font-size: var(--sh-product-title-size); font-weight: 600; line-height: var(--sh-product-title-line); block-size: calc(2 * var(--sh-product-title-line)); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; letter-spacing: 0; }
.shopyli-ui .sh-category-label, .shopyli-ui .sh-product-type { display: block; min-inline-size: 0; max-inline-size: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shopyli-ui .sh-product-type { font-size: var(--sh-product-meta-size); color: var(--sh-muted); line-height: 1.125rem; block-size: 1.125rem; }
.shopyli-ui .sh-product-price { min-inline-size: 0; display: flex; align-items: center; line-height: 1.5rem; }
.shopyli-ui .sh-price { font-family: var(--sh-font); font-size: 1.25rem; font-weight: 700; color: var(--sh-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shopyli-ui .sh-price > span { font-family: inherit; line-height: inherit; letter-spacing: inherit; }
.shopyli-ui .sh-price-unit { font-size: .7em; font-weight: 600; }
.shopyli-ui .sh-product-price .sh-price { font-family: var(--sh-font); font-size: var(--sh-product-price-size); line-height: 1.5rem; letter-spacing: -.02em; color: var(--sh-brand); }
.shopyli-ui .sh-old-price { font-size: var(--sh-text-xs); color: var(--sh-muted); white-space: nowrap; }
.shopyli-ui .sh-service-note { display: flex; align-items: center; gap: .5rem; font-size: var(--sh-text-xs); color: var(--sh-muted); }
.shopyli-ui .sh-service-note .sh-icon { inline-size: 1.125rem; block-size: 1.125rem; }
.shopyli-ui .sh-navigation { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: var(--sh-radius-lg); padding: .5rem .25rem; gap: .2rem; overflow-wrap: anywhere; }
.shopyli-ui .sh-navigation a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-decoration: none; color: var(--sh-muted); min-block-size: 3.5rem; font-size: var(--sh-text-xs); border-radius: var(--sh-radius-md); padding: .3rem; font-weight: 600; }
.shopyli-ui .sh-navigation a[aria-current=page] { color: var(--sh-on-color); background: var(--sh-brand); box-shadow: var(--sh-glow-brand); }
.shopyli-ui .sh-navigation a > span:last-child { max-inline-size: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shopyli-ui .sh-nav-icon { position: relative; }
.shopyli-ui .sh-count { position: absolute; inset-block-start: -.5rem; inset-inline-end: -.65rem; min-inline-size: 1rem; block-size: 1rem; border-radius: var(--sh-radius-full); display: grid; place-items: center; background: var(--sh-action); color: var(--sh-action-ink); font-size: .65rem; font-weight: 700; }
.shopyli-ui .sh-alert { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border-radius: var(--sh-radius-md); background: var(--sh-brand-soft); color: var(--sh-brand-hover); border-inline-start: 3px solid currentColor; }
.shopyli-ui .sh-alert .sh-icon { margin-block-start: .2rem; }
.shopyli-ui .sh-alert--success { background: var(--sh-success-soft); color: var(--sh-success); }
.shopyli-ui .sh-alert--error { background: var(--sh-error-soft); color: var(--sh-error); }
.shopyli-ui .sh-alert--warning { background: var(--sh-warning-soft); color: var(--sh-warning); }
.shopyli-ui .sh-empty { padding: 2rem 1rem; text-align: center; align-items: center; }
.shopyli-ui .sh-empty > .sh-icon { inline-size: 2.5rem; block-size: 2.5rem; color: var(--sh-control-line); }
.shopyli-ui .sh-skeleton { background: var(--sh-line); border-radius: .5rem; animation: sh-pulse 1.4s ease-in-out infinite alternate; }
.shopyli-ui .sh-skeleton--image { aspect-ratio: 1; }
.shopyli-ui .sh-skeleton--text { block-size: .8rem; margin-block: .6rem; }
.shopyli-ui .sh-skeleton--short { inline-size: 60%; }
@keyframes sh-pulse { to { opacity: .5; } }
.shopyli-ui .sh-dialog { border: 1px solid var(--sh-line); border-radius: var(--sh-radius-xl); padding: 0; background: var(--sh-surface); color: var(--sh-ink); box-shadow: var(--sh-shadow-overlay); inline-size: min(32rem, calc(100% - 2rem)); max-block-size: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; }
.shopyli-ui .sh-dialog::backdrop { background: var(--sh-overlay); }
.shopyli-ui .sh-dialog-inner { padding: 1.5rem; }
.shopyli-ui .sh-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-block-end: 1rem; }
.shopyli-ui .sh-dialog-header h2 { padding-block-start: .35rem; }
.shopyli-ui .sh-dialog--sheet { inset-block: auto 0; margin-block: 0; margin-inline: auto; border-end-start-radius: 0; border-end-end-radius: 0; padding-block-end: env(safe-area-inset-bottom, 0px); }
.shopyli-ui .sh-dialog--drawer { inset-block: 0; inset-inline: auto 0; margin: 0; inline-size: min(25rem, calc(100% - 1.5rem)); block-size: 100dvh; max-block-size: 100dvh; border-radius: 0; padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); }
.shopyli-ui .sh-dialog:focus-visible { outline: 3px solid var(--sh-focus); outline-offset: -4px; }
.shopyli-ui .sh-toast-area { position: fixed; z-index: 100; inset-inline: 1rem; inset-block-end: calc(var(--sh-nav-height) + 1rem + env(safe-area-inset-bottom,0px)); margin-inline: auto; inline-size: min(30rem, calc(100% - 2rem)); }
.shopyli-ui .sh-toast { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border: 1px solid var(--sh-control-line); background: var(--sh-ink); color: var(--sh-on-color); border-radius: var(--sh-radius-lg); box-shadow: var(--sh-shadow-raised); }
.shopyli-ui .sh-toast p { flex: 1; }
.shopyli-ui .sh-toast .sh-button { color: var(--sh-on-color); background: transparent; box-shadow: none; }
.shopyli-ui .sh-toast :focus-visible { outline-color: var(--sh-on-color); }
.shopyli-ui .sh-only-js { display: none; }
.shopyli-ui[data-sh-enhanced=true] .sh-only-js { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
  .shopyli-ui *, .shopyli-ui *::before, .shopyli-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .shopyli-ui .sh-button, .shopyli-ui .sh-badge, .shopyli-ui .sh-toast { border: 1px solid ButtonText; box-shadow: none; }
  .shopyli-ui .sh-option input:checked + span { outline: 2px solid Highlight; }
  .shopyli-ui .sh-skeleton { background: GrayText; }
}