/* Shared storefront brand values. Preserve the customer palette exactly. */
:root {
  --plum:#5c3d6e;
  --lavender:#c3b2d7;
  --lilac:#e8dff5;
  --cream:#fdf8f2;
  --blush:#f5d9e8;
  --gold:#c9a85c;
  --dark:#1e1218;
  --text:#3a2840;
  --mid:#7a5d8a;
  --ui-primary:#5c3d6e;
  --ui-primary-hover:#493059;
  --ui-surface:#fff;
  --ui-border:#e5ddec;
  --ui-muted:#705c7c;
  --ui-success:#216b4b;
  --ui-warning:#875b16;
  --ui-danger:#a73345;
  --ui-radius-sm:8px;
  --ui-radius-md:12px;
  --ui-radius-lg:16px;
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-6:24px;
  --ui-space-8:32px;
  --ui-shadow-panel:0 12px 32px rgba(45,28,58,.12);
  --ui-motion:180ms ease;
}

/* Shared interaction foundations; page styles retain their existing layouts. */
button,a,input,select,textarea{touch-action:manipulation}
button:not(:disabled),a{transition:background-color var(--ui-motion),border-color var(--ui-motion),color var(--ui-motion),transform var(--ui-motion)}
button:not(:disabled):active{transform:scale(.98)}
:focus-visible{outline:3px solid #9a76bc;outline-offset:3px}
.ui-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.ui-icon--small{width:18px;height:18px}
.ui-icon--large{width:24px;height:24px}
.ui-skeleton{position:relative;overflow:hidden;background:#eee8f2;border-radius:var(--ui-radius-sm);color:transparent!important}
.ui-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff88,transparent);animation:ui-shimmer 1.25s ease-in-out infinite}
@keyframes ui-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* Content-shaped loading blocks shared by the storefront, payment, chat, and Admin. */
.skel{display:block;min-width:0;background:#eae5ef;border-radius:8px;position:relative;overflow:hidden;color:transparent!important}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);animation:ui-shimmer 1.55s ease-in-out infinite}
.skel-line{height:12px;width:72%}.skel-line--short{width:38%}.skel-line--long{width:90%}.skel-title{height:20px;width:58%}.skel-value{height:32px;width:48%}.skel-circle{width:40px;height:40px;border-radius:50%;flex:none}.skel-badge{height:22px;width:70px;border-radius:99px}.skel-button{height:40px;width:110px}.skel-image{width:100%;aspect-ratio:4/3}.skel-image--square{aspect-ratio:1}.skel-stack{display:grid;gap:10px;min-width:0}.skel-panel{background:#fff;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);padding:20px;min-width:0}.skel-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:16px}.skel-product{display:grid;gap:12px;overflow:hidden;padding:0}.skel-product .skel-stack{padding:0 16px 16px}.skel-list{display:grid;gap:10px}.skel-list-row{display:flex;align-items:center;gap:12px;min-height:56px}.skel-list-row .skel-stack{flex:1}.skel-list-row .skel-badge{flex:none}.skel-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));gap:14px}.skel-stat{display:grid;gap:12px;min-height:132px}.skel-chart{height:220px;display:flex;align-items:end;gap:12px;padding:22px 8px 2px}.skel-chart .skel{flex:1;height:var(--skel-height,50%);border-radius:5px 5px 0 0}.skel-form{display:grid;gap:16px}.skel-form-field{display:grid;gap:8px}.skel-form-field .skel:last-child{height:44px;width:100%}.skel-fade-in{animation:skel-content-in .2s ease backwards}@keyframes skel-content-in{from{opacity:.45}to{opacity:1}}
@media(max-width:600px){.skel-panel{padding:16px}.skel-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skel-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.skel-chart{height:180px;gap:7px}}
@media(max-width:390px){.skel-card-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.skel::after,.ui-skeleton::after{animation:none!important}.skel-fade-in{animation:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* A short reveal helps fetched content replace its reserved shape without flashing. */
#productsGrid>.product-card:not(.product-card-skeleton),#galleryGrid>.gallery-item:not(.gallery-item-skeleton),#publicReviews>.t-card:not(.t-card-skeleton),#shoppingOrdersList>.customer-order-card,#content .ops-metric,#content .admin-product,#content .data-table tbody tr:not(:has(.skel)),#payment-content>.payment-strip{animation:skel-content-in .2s ease backwards}