html[data-website-id="1"] #tp-page-loader { display: none !important; }
html[data-website-id="1"] {
    --oudship-loading-block: #e9e3d9;
    --oudship-loading-highlight: #faf8f4;
}
html[data-website-id="1"][data-oudship-design="saudi_national_day"] {
    --oudship-loading-block: #dceae1;
    --oudship-loading-highlight: #f0f7f3;
}
html[data-website-id="1"][data-theme="dark"],
html[data-website-id="1"][data-bs-theme="dark"],
html[data-website-id="1"] body:is(.o_dark, .o_dark_theme) {
    --oudship-loading-block: #244a43;
    --oudship-loading-highlight: #375b50;
}

#oudship-page-skeleton {
    --sk-canvas: #faf8f4;
    --sk-surface: #fff;
    --sk-block: #e9e3d9;
    --sk-border: #e1d9cc;
    position: fixed;
    inset: 0;
    z-index: 99990;
    overflow: hidden;
    background: var(--sk-canvas);
    color: #163e35;
}
#oudship-page-skeleton[hidden] { display: none !important; }
#oudship-page-skeleton[data-phase="navigation"] {
    bottom: auto;
    height: 3px;
    pointer-events: none;
    background: var(--oudship-loading-block);
}
#oudship-page-skeleton[data-phase="navigation"] .oudship-skeleton-shell { display: none; }
#oudship-page-skeleton[data-phase="navigation"]::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(100deg, transparent 20%, #008b50 50%, transparent 80%);
    animation: oudship-page-shimmer 1.6s ease-in-out infinite;
}
html[data-oudship-design="saudi_national_day"] #oudship-page-skeleton {
    --sk-canvas: #f0f7f3;
    --sk-block: #dceae1;
    --sk-border: #bfd6c8;
}
body.o_dark #oudship-page-skeleton,
body.o_dark_theme #oudship-page-skeleton,
html[data-theme="dark"] #oudship-page-skeleton,
html[data-bs-theme="dark"] #oudship-page-skeleton {
    --sk-canvas: #082b29;
    --sk-surface: #123a35;
    --sk-block: #244a43;
    --sk-border: #375b50;
}
.oudship-skeleton-shell { max-width: 1440px; margin: auto; padding: 0 32px 32px; }
.oudship-skeleton-header { height: 96px; display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--sk-border); }
.oudship-skeleton-block { display: block; position: relative; overflow: hidden; background: var(--sk-block); border-radius: 6px; flex-shrink: 0; }
.oudship-skeleton-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, #ffffff55 50%, transparent 80%);
    transform: translateX(-100%);
    animation: oudship-page-shimmer 1.6s ease-in-out infinite;
}
.oudship-skeleton-logo { width: 120px; height: 32px; }
.oudship-skeleton-nav { width: min(40%, 400px); height: 16px; margin-inline-start: auto; }
.oudship-skeleton-icon { width: 32px; height: 32px; border-radius: 50%; }
.oudship-skeleton-intro { padding: 40px 0 32px; }
.oudship-skeleton-eyebrow { width: 100px; height: 10px; margin-bottom: 16px; }
.oudship-skeleton-title { width: min(70%, 330px); height: 34px; margin-bottom: 18px; }
.oudship-skeleton-subtitle { width: min(90%, 500px); height: 14px; }
.oudship-skeleton-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.oudship-skeleton-card { overflow: hidden; border: 1px solid var(--sk-border); border-radius: 18px; background: var(--sk-surface); }
.oudship-skeleton-image { width: 100%; aspect-ratio: 1; border-radius: 0; }
.oudship-skeleton-card-body { padding: 20px 16px 16px; }
.oudship-skeleton-line { width: 85%; height: 14px; margin-bottom: 16px; }
.oudship-skeleton-price { width: 40%; height: 20px; margin-bottom: 24px; }
.oudship-skeleton-button { width: 100%; height: 42px; }
.oudship-skeleton-detail { display: none; grid-template-columns: 1fr 1fr; gap: 40px; }
.oudship-skeleton-detail > .oudship-skeleton-image { border-radius: 18px; }
.oudship-skeleton-panel { padding: 32px; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: 18px; }
.oudship-skeleton-panel .oudship-skeleton-line:nth-child(even) { width: 65%; }
.oudship-skeleton-panel .oudship-skeleton-button { margin-top: 40px; }
.oudship-skeleton-content { display: none; max-width: 820px; }
#oudship-page-skeleton[data-layout="product"] .oudship-skeleton-detail { display: grid; }
#oudship-page-skeleton[data-layout="content"] .oudship-skeleton-content { display: block; }
#oudship-page-skeleton[data-layout="product"] .oudship-skeleton-grid,
#oudship-page-skeleton[data-layout="content"] .oudship-skeleton-grid { display: none; }
.oudship-skeleton-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes oudship-page-shimmer { to { transform: translateX(100%); } }
html[data-website-id="1"] img.oudship-image-loading {
    background: linear-gradient(100deg, var(--oudship-loading-block) 20%, var(--oudship-loading-highlight) 50%, var(--oudship-loading-block) 80%);
    background-size: 250% 100%;
    animation: oudship-image-shimmer 1.6s ease-in-out infinite;
}
/* Preserve the banner's dimensions, text, links and background positioning. */
html[data-website-id="1"] .oudship-background-loading {
    background-color: var(--oudship-loading-block);
    animation: oudship-background-pulse 1.6s ease-in-out infinite alternate;
}
html[data-website-id="1"] .tp-skeleton-shimmer {
    background: linear-gradient(100deg, var(--oudship-loading-block) 20%, var(--oudship-loading-highlight) 50%, var(--oudship-loading-block) 80%);
    background-size: 250% 100%;
    animation: oudship-image-shimmer 1.6s ease-in-out infinite;
}
@keyframes oudship-background-pulse { to { background-color: var(--oudship-loading-highlight); } }
@keyframes oudship-image-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (max-width: 991.98px) {
    .oudship-skeleton-shell { padding: 0 16px 24px; }
    .oudship-skeleton-header { height: 72px; gap: 16px; }
    .oudship-skeleton-logo { width: 90px; height: 26px; }
    .oudship-skeleton-intro { padding: 28px 0 24px; }
    .oudship-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .oudship-skeleton-card-body { padding: 16px 12px 12px; }
    .oudship-skeleton-detail { grid-template-columns: 1fr; gap: 20px; }
    .oudship-skeleton-detail > .oudship-skeleton-image { max-height: 38vh; }
    .oudship-skeleton-panel { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .oudship-skeleton-block::after { animation: none; display: none; }
    html[data-website-id="1"] :is(img.oudship-image-loading, .oudship-background-loading, .tp-skeleton-shimmer),
    #oudship-page-skeleton[data-phase="navigation"]::after { animation: none; }
}