/* Shop Pakistan storefront design system */
:root {
    --sp-cream: #f9f7f0;
    --sp-navy: #0f1f3d;
    --sp-blue: #2c4270;
    --sp-blue-dark: #1a2744;
    --sp-blue-light: #e8eef6;
    --sp-accent: #d97706;
    --sp-ink: #1e293b;
    --sp-muted: #64748b;
    --sp-radius: 0.875rem;
    --sp-shadow: 0 4px 24px rgba(61, 106, 149, 0.08);
    --sp-shadow-lg: 0 12px 40px rgba(61, 106, 149, 0.12);
}

.sp-storefront {
    background-color: var(--sp-cream);
    color: var(--sp-ink);
}
.bg-sp-cream { background-color: var(--sp-cream); }

/* Harmonize legacy purple Tailwind utilities with blue palette */
.sp-storefront .bg-purple-50,
.sp-storefront .from-purple-50 {
    --tw-bg-opacity: 1;
}
.sp-storefront .bg-purple-50 { background-color: var(--sp-blue-light) !important; }
.sp-storefront .border-purple-100,
.sp-storefront .border-purple-200 { border-color: #c5d8eb !important; }
.sp-storefront .text-purple-100 { color: #e8f0f8 !important; }
.sp-storefront .text-purple-200 { color: #d1e3f3 !important; }
.sp-storefront .text-purple-300 { color: #a8c4de !important; }
.sp-storefront .from-purple-950,
.sp-storefront .via-purple-900,
.sp-storefront .to-purple-900 {
    --tw-gradient-from: var(--sp-blue-dark) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(61 106 149 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.sp-storefront .from-purple-950 { --tw-gradient-from: #2d5270 !important; }
.sp-storefront .via-purple-900 { --tw-gradient-via: var(--sp-blue-dark) !important; }
.sp-storefront .to-purple-900 { --tw-gradient-to: #4a7399 !important; }
.sp-storefront .bg-purple-900 { background-color: var(--sp-blue-dark) !important; }
.sp-storefront .bg-purple-950 { background-color: #2d5270 !important; }
.sp-storefront .border-purple-800 { border-color: #3d6a95 !important; }
.sp-storefront .border-purple-600 { border-color: #5b84b1 !important; }

.sp-container {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .sp-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1280px) {
    .sp-container { padding-left: 2rem; padding-right: 2rem; }
}

.sp-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
@media (min-width: 768px) {
    .sp-section { padding-top: 2.75rem; padding-bottom: 2.75rem; }
}

.sp-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.sp-section-head h2 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sp-ink);
    line-height: 1.2;
}
@media (min-width: 640px) {
    .sp-section-head h2 { font-size: 1.65rem; }
}
.sp-section-head .sp-section-accent {
    display: block;
    width: 3rem;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sp-blue), var(--sp-accent));
    margin-bottom: 0.5rem;
}
.sp-link-more {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--sp-blue);
    white-space: nowrap;
}
.sp-link-more:hover { color: var(--sp-blue-dark); text-decoration: underline; }

.sp-card {
    background: #fff;
    border-radius: var(--sp-radius);
    border: 1px solid rgba(91, 132, 177, 0.15);
    box-shadow: var(--sp-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sp-card:hover {
    box-shadow: var(--sp-shadow-lg);
}

.sp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--sp-accent), #c0392b);
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sp-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(231, 76, 60, 0.35);
}

.sp-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    background: var(--sp-blue);
    transition: background 0.15s ease;
}
.sp-btn-secondary:hover { background: var(--sp-blue-dark); }

.sp-hero {
    position: relative;
    border-radius: calc(var(--sp-radius) + 4px);
    overflow: hidden;
    min-height: 260px;
    box-shadow: var(--sp-shadow-lg);
}
@media (min-width: 640px) {
    .sp-hero { min-height: 340px; }
}
@media (min-width: 1024px) {
    .sp-hero { min-height: 400px; }
}

.sp-category-sidebar {
    background: #fff;
    border-radius: var(--sp-radius);
    border: 1px solid rgba(91, 132, 177, 0.25);
    box-shadow: var(--sp-shadow);
    overflow: hidden;
}
.sp-category-sidebar__head {
    background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.85rem 1rem;
}
.sp-category-list a {
    display: block;
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sp-ink);
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sp-category-list a:hover {
    background: var(--sp-blue-light);
    border-left-color: var(--sp-blue);
    color: var(--sp-blue-dark);
}

.sp-mobile-categories {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sp-mobile-categories::-webkit-scrollbar { display: none; }
.sp-mobile-categories a {
    flex-shrink: 0;
    padding: 0.5rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid rgba(91, 132, 177, 0.3);
    color: var(--sp-blue-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sp-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 1024px) {
    .sp-service-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1rem; }
}
.sp-service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
.sp-service-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid rgba(91, 132, 177, 0.2);
    color: var(--sp-blue);
    box-shadow: var(--sp-shadow);
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
@media (min-width: 640px) {
    .sp-service-icon { width: 4rem; height: 4rem; }
}
.sp-service-item:hover .sp-service-icon {
    background: var(--sp-blue);
    color: #fff;
    transform: translateY(-2px);
}
.sp-service-label {
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sp-muted);
}
@media (min-width: 640px) {
    .sp-service-label { font-size: 0.6875rem; }
}

.sp-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.sp-product-grid > * {
    min-width: 0;
}
@media (min-width: 640px) {
    .sp-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1024px) {
    .sp-product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .sp-product-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.sp-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: var(--sp-radius);
    border: 1px solid rgba(91, 132, 177, 0.12);
    overflow: hidden;
    box-shadow: var(--sp-shadow);
    transition: box-shadow 0.2s, transform 0.2s;
}
.sp-product-card:hover {
    box-shadow: var(--sp-shadow-lg);
    transform: translateY(-2px);
}
.sp-product-card__media {
    position: relative;
    aspect-ratio: 1;
    background: var(--sp-cream);
    overflow: hidden;
}
.sp-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}
.sp-product-card:hover .sp-product-card__media img {
    transform: scale(1.05);
}
.sp-product-card__body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.35rem;
}
.sp-product-card__title {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sp-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5rem;
}
.sp-product-card__price {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--sp-blue-dark);
}
.sp-product-card__cta {
    margin-top: auto;
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--sp-blue);
    transition: background 0.15s;
}
.sp-product-card__cta:hover { background: var(--sp-blue-dark); }

.sp-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.sp-scroll-row > * {
    flex: 0 0 72%;
    max-width: 280px;
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    .sp-scroll-row > * { flex: 0 0 45%; }
}

.sp-page-hero {
    border-radius: calc(var(--sp-radius) + 4px);
    background: linear-gradient(135deg, var(--sp-blue-dark), var(--sp-blue));
    color: #fff;
    padding: 1.5rem;
    box-shadow: var(--sp-shadow-lg);
    position: relative;
    overflow: hidden;
}
@media (min-width: 640px) {
    .sp-page-hero { padding: 2rem 2.5rem; }
}

/* Legacy alias */
.sp-footer,
.sp-ft {
    --sp-ft-ink: #1e293b;
    --sp-ft-muted: #64748b;
    --sp-ft-line: rgba(91, 132, 177, 0.2);
}

/* ——— Professional footer (all pages) ——— */
.sp-ft {
    background: var(--sp-cream);
    color: var(--sp-ft-ink);
    font-size: 0.8125rem;
}

.sp-ft-trust {
    background: #fff;
    border-top: 1px solid var(--sp-ft-line);
    border-bottom: 1px solid var(--sp-ft-line);
    padding: 1.25rem 0;
}
.sp-ft-trust__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .sp-ft-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .sp-ft-trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
.sp-ft-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--sp-cream);
    border: 1px solid var(--sp-ft-line);
    border-radius: var(--sp-radius);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.sp-ft-trust__item:hover {
    border-color: rgba(91, 132, 177, 0.35);
    box-shadow: var(--sp-shadow);
}
.sp-ft-trust__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    background: var(--sp-blue-light);
    color: var(--sp-blue-dark);
    flex-shrink: 0;
}
.sp-ft-trust__title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--sp-blue-dark);
    line-height: 1.3;
}
.sp-ft-trust__sub {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--sp-ft-muted);
    margin: 0.2rem 0 0;
    line-height: 1.35;
}

.sp-ft-newsletter {
    padding: 1.5rem 0;
    background: linear-gradient(180deg, #eef4fa 0%, var(--sp-cream) 100%);
}
.sp-ft-newsletter__box {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
    border-radius: calc(var(--sp-radius) + 4px);
    background: linear-gradient(135deg, var(--sp-blue-dark) 0%, var(--sp-blue) 55%, #6a94bd 100%);
    color: #fff;
    box-shadow: var(--sp-shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 1024px) {
    .sp-ft-newsletter__box {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.75rem 2rem;
        gap: 2rem;
    }
}
.sp-ft-newsletter__badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin-bottom: 0.5rem;
}
.sp-ft-newsletter__heading {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}
@media (min-width: 640px) {
    .sp-ft-newsletter__heading { font-size: 1.5rem; }
}
.sp-ft-newsletter__desc {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    max-width: 28rem;
}
.sp-ft-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
}
@media (min-width: 640px) {
    .sp-ft-newsletter__form { flex-direction: row; align-items: stretch; max-width: 420px; }
}
@media (min-width: 1024px) {
    .sp-ft-newsletter__form { flex-shrink: 0; width: auto; max-width: none; min-width: 340px; }
}
.sp-ft-newsletter__field {
    position: relative;
    flex: 1;
}
.sp-ft-newsletter__field-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sp-ft-muted);
    pointer-events: none;
}
.sp-ft-newsletter__input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sp-ft-ink);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.sp-ft-newsletter__input:focus {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}
.sp-ft-newsletter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    color: #1e293b;
    background: #fbbf24;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: filter 0.15s, transform 0.15s;
    white-space: nowrap;
}
.sp-ft-newsletter__btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.sp-ft-policies {
    background: #fff;
    border-bottom: 1px solid var(--sp-ft-line);
    padding: 0.75rem 0;
}
.sp-ft-policies__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}
@media (min-width: 1024px) {
    .sp-ft-policies__nav { justify-content: flex-start; }
}
.sp-ft-policies__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--sp-blue-dark);
    text-decoration: none;
    padding: 0.35rem 0;
    transition: color 0.15s;
}
.sp-ft-policies__link:hover {
    color: var(--sp-blue);
}

.sp-ft-main {
    background: linear-gradient(180deg, #2d5270 0%, #1e3a52 100%);
    color: rgba(255, 255, 255, 0.92);
    padding: 2.5rem 0 2rem;
}
.sp-ft-main__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .sp-ft-main__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .sp-ft-main__grid {
        grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
        gap: 1.5rem 2rem;
    }
}
.sp-ft-brand__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.75rem;
}
.sp-ft-brand__logo-img {
    max-height: 3rem;
    width: auto;
    object-fit: contain;
}
.sp-ft-brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}
.sp-ft-brand__wordmark {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.sp-ft-brand__name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1.1;
}
.sp-ft-brand__accent {
    color: #fbbf24;
}
.sp-ft-brand__tag {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}
.sp-ft-brand__about {
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    max-width: 22rem;
    margin: 0 0 1rem;
}
.sp-ft-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sp-ft-social__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    transition: background 0.15s, border-color 0.15s;
}
.sp-ft-social__btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.sp-ft-col__title {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sp-ft-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.sp-ft-col__link {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.15s;
}
.sp-ft-col__link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sp-ft-apps__desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.72);
    margin: -0.5rem 0 0.75rem;
    line-height: 1.45;
}
.sp-ft-apps__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sp-ft-app-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s;
}
.sp-ft-app-btn:hover {
    background: rgba(0, 0, 0, 0.32);
    color: #fff;
}
.sp-ft-app-btn span {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.sp-ft-app-btn small {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}
.sp-ft-app-btn strong {
    font-size: 0.75rem;
    font-weight: 800;
}

.sp-ft-copy {
    background: #152238;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem 0;
    text-align: center;
}
.sp-ft-copy p {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.sp-header-main {
    background: linear-gradient(180deg, var(--sp-blue) 0%, var(--sp-blue-dark) 100%);
}

.sp-trust-strip {
    background: #fff;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    border: 1px solid rgba(91, 132, 177, 0.12);
}

/* ——— Enhanced professional layer ——— */
.sp-storefront {
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(91, 132, 177, 0.08), transparent 55%);
}

.sp-announcement {
    background: linear-gradient(90deg, #2d5270, #5b84b1, #2d5270);
    background-size: 200% 100%;
    animation: sp-shimmer 8s ease-in-out infinite;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.45rem 1rem;
}
@keyframes sp-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-announcement { animation: none; }
}

.sp-topbar {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--sp-muted);
}
.sp-topbar a:hover { color: var(--sp-blue-dark); }

#site-header-sticky {
    box-shadow: 0 4px 30px rgba(45, 82, 112, 0.12);
}
.sp-header-main {
    background: linear-gradient(165deg, #6a94bd 0%, var(--sp-blue) 35%, var(--sp-blue-dark) 100%);
    position: relative;
}
.sp-header-main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%);
    pointer-events: none;
}

.sp-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.sp-wordmark__name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}
@media (min-width: 1280px) {
    .sp-wordmark__name { font-size: 1.65rem; }
}
.sp-wordmark__tag {
    font-size: 0.625rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.02em;
    margin-top: 0.15rem;
}

.sp-search {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 2px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sp-search:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

.sp-header-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.6875rem;
    font-weight: 700;
    transition: background 0.15s;
}
.sp-header-action:hover { background: rgba(255, 255, 255, 0.18); }

.sp-stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}
@media (min-width: 640px) {
    .sp-stats-bar { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
}
.sp-stat {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--sp-radius);
    padding: 0.75rem 1rem;
    text-align: center;
}
.sp-stat__value {
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}
.sp-stat__label {
    font-size: 0.625rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    background: rgba(245, 166, 35, 0.2);
    border: 1px solid rgba(245, 166, 35, 0.45);
    color: #fde68a;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sp-trust-strip--padded {
    padding: 1rem 1.25rem;
}
@media (min-width: 640px) {
    .sp-trust-strip--padded { padding: 1.25rem 1.5rem; }
}

.sp-section-subtitle {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sp-muted);
    max-width: 36rem;
    line-height: 1.45;
}

.sp-link-more--pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
    background: var(--sp-blue-light);
    border: 1px solid rgba(91, 132, 177, 0.25);
    text-decoration: none !important;
}
.sp-link-more--pill:hover {
    background: #fff;
    box-shadow: var(--sp-shadow);
}

.sp-section--elevated {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.6) 100%);
    border-top: 1px solid rgba(91, 132, 177, 0.08);
    border-bottom: 1px solid rgba(91, 132, 177, 0.08);
}

.sp-mini-banner {
    position: relative;
    border-radius: var(--sp-radius);
    overflow: hidden;
    min-height: 120px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    box-shadow: var(--sp-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.sp-mini-banner:hover {
    transform: translateY(-3px);
    box-shadow: var(--sp-shadow-lg);
}
.sp-mini-banner--fashion { background: linear-gradient(135deg, #4a7399, #2d5270); }
.sp-mini-banner--home { background: linear-gradient(135deg, #5b84b1, #3d6a95); }
.sp-mini-banner--beauty { background: linear-gradient(135deg, #6b8fb8, #4a7399); }

.sp-category-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    border-radius: var(--sp-radius);
    background: #fff;
    border: 1px solid rgba(91, 132, 177, 0.12);
    box-shadow: 0 2px 12px rgba(45, 82, 112, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.sp-category-pill:hover {
    border-color: var(--sp-blue);
    box-shadow: var(--sp-shadow);
    transform: translateY(-2px);
}
.sp-category-pill__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: var(--sp-cream);
    border: 2px solid rgba(91, 132, 177, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
@media (min-width: 640px) {
    .sp-category-pill__icon { width: 4.25rem; height: 4.25rem; }
}

.sp-product-card {
    border: 1px solid rgba(91, 132, 177, 0.1);
}
.sp-product-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(45, 82, 112, 0.04) 100%);
    pointer-events: none;
}
.sp-product-card__badge-save {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: linear-gradient(135deg, var(--sp-accent), #c0392b);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
}

.sp-newsletter-band {
    background: linear-gradient(135deg, var(--sp-blue-dark) 0%, #2d5270 50%, var(--sp-blue) 100%);
    border-radius: calc(var(--sp-radius) + 6px);
    padding: 2rem 1.5rem;
    color: #fff;
    box-shadow: var(--sp-shadow-lg);
    position: relative;
    overflow: hidden;
}
.sp-newsletter-band::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    top: -80px;
    right: -60px;
}
.sp-newsletter-band input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    border-radius: 9999px;
    border: none;
    font-size: 0.8125rem;
}
.sp-newsletter-band button {
    padding: 0.75rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    background: var(--sp-accent);
    color: #fff;
    white-space: nowrap;
    transition: transform 0.15s;
}
.sp-newsletter-band button:hover { transform: scale(1.02); }

.sp-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .sp-why-grid { grid-template-columns: repeat(3, 1fr); }
}
.sp-why-card {
    padding: 1.25rem;
    border-radius: var(--sp-radius);
    background: #fff;
    border: 1px solid rgba(91, 132, 177, 0.1);
    box-shadow: var(--sp-shadow);
}
.sp-why-card h3 {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--sp-blue-dark);
    margin-top: 0.75rem;
}
.sp-why-card p {
    font-size: 0.75rem;
    color: var(--sp-muted);
    margin-top: 0.35rem;
    line-height: 1.5;
}
.sp-why-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    background: var(--sp-blue-light);
    color: var(--sp-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-deals-panel {
    border-radius: calc(var(--sp-radius) + 4px);
    overflow: hidden;
    box-shadow: var(--sp-shadow-lg);
    min-height: 280px;
}
.sp-promo-countdown {
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fde68a;
    margin-top: 0.5rem;
}

/* ——— Reference mockup homepage ——— */
.sp-home-mock { background: #f5f3ee; }

.sp-home-hero-block { padding: 1rem 0 0.5rem; }
.sp-hero-shell { border-radius: 4px; overflow: hidden; box-shadow: 0 2px 16px rgba(45, 82, 112, 0.12); }
.sp-category-sidebar--mock { border-radius: 0; border-right: none; }
.sp-category-list--compact a { padding: 0.55rem 1rem; font-size: 0.75rem; }
.sp-hero--mock { border-radius: 0; min-height: 300px; }
@media (min-width: 1024px) {
    .sp-hero--mock { min-height: 380px; }
}
.sp-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.625rem;
    font-weight: 800;
    color: #fff;
}

.sp-home-services { padding: 1rem 0 1.25rem; background: #fff; border-bottom: 1px solid #e8e4dc; }
.sp-service-grid--mock { gap: 0.5rem; }
.sp-service-icon--mock {
    width: 3rem;
    height: 3rem;
    border: 1px solid #d4e2ef;
    box-shadow: none;
    background: #f8fbff;
}

.sp-wide-promo {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    min-height: 100px;
    box-shadow: 0 4px 20px rgba(45, 82, 112, 0.15);
}
@media (min-width: 640px) {
    .sp-wide-promo { min-height: 130px; }
}
.sp-wide-promo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
.sp-wide-promo__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(61, 106, 149, 0.92) 0%, rgba(91, 132, 177, 0.75) 55%, rgba(91, 132, 177, 0.4) 100%);
}
.sp-wide-promo__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    color: #fff;
}
.sp-wide-promo__arrow {
    margin-left: auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: #fff;
    color: var(--sp-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sp-home-panel { padding: 1.25rem 0 1.5rem; }
.sp-home-panel--cream { background: #faf8f4; }

.sp-tab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}
.sp-tab-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--sp-blue-dark);
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: -0.65rem;
}
.sp-tab-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: var(--sp-blue);
    border-radius: 2px 2px 0 0;
}
.sp-tab-more {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sp-muted);
}
.sp-tab-more:hover { color: var(--sp-blue); }

.sp-carousel-wrap {
    position: relative;
}
.sp-carousel-track {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.25rem 0 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.sp-carousel-item {
    flex: 0 0 46%;
    max-width: 220px;
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    .sp-carousel-item { flex: 0 0 28%; max-width: 240px; }
}
@media (min-width: 1024px) {
    .sp-carousel-item { flex: 0 0 22%; max-width: 260px; }
}
.sp-carousel-btn {
    display: none;
    position: absolute;
    top: 38%;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid #d4e2ef;
    color: var(--sp-blue-dark);
    box-shadow: var(--sp-shadow);
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    .sp-carousel-btn { display: flex; }
}
.sp-carousel-btn--prev { left: -0.5rem; }
.sp-carousel-btn--next { right: -0.5rem; }
.sp-carousel-btn:hover { background: var(--sp-blue-light); }

.sp-week-feature {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    box-shadow: var(--sp-shadow);
}
.sp-week-feature__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(45, 82, 112, 0.85) 100%);
}
.sp-week-countdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}
.sp-week-countdown__time {
    font-variant-numeric: tabular-nums;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--sp-accent);
}

.sp-category-grid-mock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}
@media (min-width: 640px) {
    .sp-category-grid-mock { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .sp-category-grid-mock { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.75rem; }
}
.sp-category-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.5rem 0.25rem;
    background: #fff;
    border: 1px solid #ebe8e0;
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sp-category-tile:hover {
    border-color: var(--sp-blue);
    box-shadow: 0 4px 12px rgba(91, 132, 177, 0.12);
}
.sp-category-tile__img {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 4px;
    background: #f5f3ee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sp-category-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.sp-category-tile__label {
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sp-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 640px) {
    .sp-category-tile__label { font-size: 0.625rem; }
}

.sp-feature-ad {
    border-radius: 4px;
    min-height: 120px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-end;
    color: #fff;
    box-shadow: var(--sp-shadow);
    transition: transform 0.15s;
}
.sp-feature-ad:hover { transform: translateY(-2px); }
.sp-feature-ad--coral { background: linear-gradient(135deg, #e8837a, #d35454); }
.sp-feature-ad--dark { background: linear-gradient(135deg, #2c3e50, #1a252f); }
.sp-feature-ad__link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.95;
}

/* Daily Shopping: CSS controls visibility (Tailwind hidden/sm:grid loses to .sp-product-grid) */
.sp-product-grid.sp-product-grid--daily {
    display: none;
}
.sp-scroll-row.sp-daily-shopping-mobile {
    display: flex;
}
@media (min-width: 640px) {
    .sp-product-grid.sp-product-grid--daily {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sp-scroll-row.sp-daily-shopping-mobile {
        display: none;
    }
}
@media (min-width: 768px) {
    .sp-product-grid.sp-product-grid--daily { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .sp-product-grid.sp-product-grid--daily { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.sp-home-mock .sp-product-card {
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(45, 82, 112, 0.06);
    border-color: #ebe8e0;
}
.sp-home-mock .sp-product-card:hover {
    box-shadow: 0 6px 20px rgba(45, 82, 112, 0.1);
}

/* Brand logos (SP wordmark assets) */
.sp-brand-logo {
    display: block;
    width: auto;
    object-fit: contain;
}
.sp-brand-logo--dark {
    mix-blend-mode: multiply;
}
.sp-brand-logo--header {
    height: 2.35rem;
    max-width: min(220px, 42vw);
}
.sp-brand-logo--header-sm {
    height: 1.85rem;
    max-width: min(180px, 52vw);
}
.sp-brand-logo--footer {
    height: 2.75rem;
    max-width: 220px;
    mix-blend-mode: normal;
}
.sp-logo--img {
    display: inline-flex;
    align-items: center;
}
.sp-ft-brand__tagline {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    margin: -0.35rem 0 0.75rem;
}

/* Storefront pages — match homepage shell */
.sp-page-theme {
    background-color: var(--sp-cream);
    color: var(--sp-ink);
}
.sp-page-main {
    width: 100%;
    flex: 1;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
}
.sp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sp-muted);
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 1rem;
}
.sp-breadcrumb a:hover {
    color: var(--sp-blue-dark);
}
.sp-breadcrumb__current {
    color: var(--sp-blue-dark);
    font-weight: 800;
}

/* Product detail — homepage-aligned */
.sp-pdp-section {
    margin-bottom: 1.75rem;
}
.sp-pdp-card {
    background: #fff;
    border: 1px solid rgba(26, 39, 68, 0.1);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
}
.sp-pdp-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sp-navy);
    line-height: 1.25;
}
@media (min-width: 1024px) {
    .sp-pdp-title { font-size: 1.85rem; }
}
.sp-btn-primary,
.sp-pdp .bg-beautage-pink {
    background: linear-gradient(180deg, var(--sp-accent) 0%, #b45309 100%) !important;
}
.sp-pdp .bg-beautage-purple,
.sp-pdp .hover\:bg-beautage-purpleDark:hover {
    background: linear-gradient(180deg, var(--sp-blue) 0%, var(--sp-blue-dark) 100%) !important;
}
.sp-pdp .text-beautage-purple {
    color: var(--sp-blue-dark) !important;
}
.sp-pdp .border-beautage-purple,
.sp-pdp .border-purple-100 {
    border-color: rgba(26, 39, 68, 0.12) !important;
}
.sp-pdp .bg-purple-50 {
    background-color: var(--sp-blue-light) !important;
}

/* ——— Pro header (utility + white bar + blue nav) ——— */
.sp-header-utility {
    background: linear-gradient(180deg, var(--sp-blue-dark) 0%, var(--sp-navy) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sp-header-sticky {
    box-shadow: 0 2px 16px rgba(15, 23, 42, 0.08);
}

.sp-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
}
.sp-logo--sm .sp-logo__text { font-size: 1.05rem; }
.sp-logo__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(145deg, var(--sp-blue) 0%, var(--sp-blue-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(61, 106, 149, 0.35);
}
.sp-logo--sm .sp-logo__mark {
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
}
.sp-logo__text {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sp-blue-dark);
    line-height: 1.1;
}
.sp-logo__accent {
    color: #e67e22;
}

.sp-search-pro__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 1.75rem !important;
}
.sp-search-pro__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    background: linear-gradient(180deg, var(--sp-blue) 0%, var(--sp-blue-dark) 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s;
}
.sp-search-pro__btn:hover { filter: brightness(1.06); }

.sp-header-tool {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: var(--sp-ink);
    min-width: 3.5rem;
    transition: background 0.15s;
}
.sp-header-tool:hover { background: var(--sp-blue-light); }
.sp-header-tool--cart {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    min-width: auto;
    padding-left: 0.5rem;
    padding-right: 0.75rem;
}
.sp-header-tool__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.sp-header-tool__label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--sp-muted);
    text-transform: capitalize;
}
.sp-header-tool__price {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--sp-blue-dark);
}

.sp-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 1.1rem;
    text-align: center;
    color: #1e293b;
    background: #fbbf24;
    border-radius: 9999px;
    transform: translate(25%, -25%);
}
.sp-badge--tool { top: 0.15rem; right: 0.35rem; }
.sp-badge--cart { top: 0.1rem; right: 0.1rem; }

.sp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.sp-icon-btn--light {
    background: transparent;
    color: var(--sp-blue-dark);
}
.sp-icon-btn--light:hover { background: var(--sp-blue-light); }

.sp-nav-strip {
    background: linear-gradient(180deg, #4a7ab5 0%, var(--sp-blue) 45%, var(--sp-blue-dark) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sp-header-pro .sp-header-mainbar--pro {
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.sp-header-pro.sp-header--menu-open {
    z-index: 110;
}

.sp-nav-strip--pro {
    background: #1a365d;
    border-bottom: none;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.sp-nav-strip__start {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    shrink: 0;
}

.sp-nav-collections-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.sp-nav-collections-link:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.sp-nav-link--muted {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.88;
    padding: 0.35rem 0.65rem;
}
.sp-nav-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
@media (max-width: 1023px) {
    .sp-nav-strip__inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.sp-nav-categories-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #1a365d;
    background: #fff;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.15s, transform 0.15s;
}

.sp-nav-categories-btn:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.sp-nav-categories-btn[aria-expanded="true"] {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.sp-nav-link {
    display: inline-block;
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    border-radius: 0.35rem;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.sp-nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.sp-nav-link--hot {
    color: #fde68a;
}
.sp-nav-link--hot:hover {
    color: #fff;
    background: rgba(251, 191, 36, 0.2);
}

.sp-nav-support {
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    transition: background 0.15s;
}
.sp-nav-support:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Header collections mega menu (All Categories) — always in shop-pakistan.css for live without Vite build */
#site-header-sticky,
.sp-nav-strip,
.sp-nav-strip__inner,
[data-nav-dropdown] {
    overflow: visible;
}

.mega-menu-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.22s;
    pointer-events: none;
}

.mega-menu-content.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.collections-mega-panel:not(.is-open),
.nav-dropdown-panel:not(.is-open) {
    display: none !important;
}

.collections-mega-panel.is-open,
.nav-dropdown-panel.is-open {
    display: block !important;
}

@media (max-width: 1023px) {
    .collections-mega-panel.is-open,
    .nav-dropdown-panel.is-open {
        position: fixed;
        left: 1rem;
        right: 1rem;
        width: auto;
        max-height: min(75vh, 560px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 200;
    }

    #storefront-nav-backdrop {
        z-index: 190;
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(2px);
    }

    body.storefront-nav-open #storefront-nav-backdrop {
        display: block;
    }

    [data-nav-dropdown] .collections-chevron {
        transition: transform 0.2s ease;
    }

    [data-nav-dropdown] [aria-expanded="true"] .collections-chevron {
        transform: rotate(180deg);
    }
}

.sp-mega-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
    overflow: hidden;
    color: #334155;
}

.sp-mega-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.sp-mega-panel__eyebrow {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0;
}

.sp-mega-panel__title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0.15rem 0 0;
}

.sp-mega-panel__catalog-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--sp-blue-dark);
    text-decoration: none;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.sp-mega-panel__catalog-link:hover {
    border-color: var(--sp-blue);
    color: var(--sp-blue);
}

.sp-mega-panel__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    padding: 1rem 1.25rem 1.25rem;
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

@media (min-width: 768px) {
    .sp-mega-panel__columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .sp-mega-panel__columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.sp-mega-panel__column-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f172a;
    text-decoration: none;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.sp-mega-panel__column-title:hover {
    color: var(--sp-blue-dark);
}

.sp-mega-panel__sublist {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.sp-mega-panel__sublink {
    display: block;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    line-height: 1.35;
}

.sp-mega-panel__sublink:hover {
    color: var(--sp-blue);
}

.sp-mega-panel__column-all {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sp-blue-dark);
    text-decoration: none;
}

.sp-mega-panel__column-all:hover {
    color: var(--sp-blue);
}

.sp-mega-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 1rem;
}

@media (min-width: 640px) {
    .sp-mega-panel__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .sp-mega-panel__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.sp-mega-panel__cat {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #1e293b;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: background 0.12s;
}

.sp-mega-panel__cat:hover {
    background: #f1f5f9;
    color: var(--sp-blue-dark);
}

.sp-mega-panel__cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: #eff6ff;
    color: var(--sp-blue);
    flex-shrink: 0;
}

.sp-mega-panel__cat-label {
    line-height: 1.25;
}

.sp-mega-panel__foot {
    padding: 0 1rem 1rem;
}

.sp-mega-panel__promo {
    display: block;
    text-align: center;
    padding: 0.65rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    text-decoration: none;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, #e6007e 0%, #c026d3 100%);
}

#storefront-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

body.storefront-mega-open #storefront-nav-backdrop {
    display: block;
}

[data-nav-dropdown] .collections-chevron {
    transition: transform 0.2s ease;
}

[data-nav-dropdown] [data-nav-dropdown-toggle][aria-expanded="true"] .collections-chevron {
    transform: rotate(180deg);
}