:root {
    --ew-navy: #071d5a;
    --ew-electric: #1677ff;
    --ew-cyan: #27d7ff;
    --ew-slate: #6e7693;
    --ew-mist: #f2f4f8;
    --ew-violet: #5a1dff;
    --ew-gradient: linear-gradient(135deg, #5a1dff 0%, #1677ff 50%, #27d7ff 100%);
    --ew-ink: #0b1220;
    --ew-line: #dfe6f3;
    --ew-shop-bg: #f7faff;
    --ew-danger: #f04438;
    --ew-success: #12b76a;
    --ew-warning: #f79009;
}

/* Remap Bagisto utility colors */
.bg-navyBlue { background-color: var(--ew-navy) !important; }
.text-navyBlue { color: var(--ew-navy) !important; }
.border-navyBlue { border-color: var(--ew-navy) !important; }

.text-blue-600,
.text-blue-700 { color: var(--ew-electric) !important; }
.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover { color: var(--ew-cyan) !important; }

.primary-button,
button.primary-button {
    background-color: var(--ew-electric) !important;
    border-color: var(--ew-electric) !important;
}

.primary-button:hover {
    background-color: var(--ew-cyan) !important;
    color: var(--ew-navy) !important;
}

body,
.font-poppins,
.font-dmserif {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

/* Bagisto applies Poppins via `* { @apply font-poppins }` in shop.css — override all
   text nodes while preserving icomoon / marketplace icon fonts. */
body *:where(:not([class*="icon-"]):not([class^="mp-"]):not([class*=" mp-"])) {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

html,
body,
.ew-page {
    background:
        radial-gradient(circle at top left, rgb(39 215 255 / 12%), transparent 30rem),
        var(--ew-shop-bg) !important;
    color: var(--ew-ink);
}

#main.bg-white {
    background:
        radial-gradient(circle at 8% 0%, rgb(39 215 255 / 8%), transparent 28rem),
        var(--ew-shop-bg) !important;
}

.ew-wordmark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}

.ew-wordmark__image {
    display: block;
    height: 2.6rem;
    width: auto;
    max-width: min(14rem, 52vw);
    flex-shrink: 0;
}

/* Remove Bagisto demo/top-strip chrome. EventWarp is USD-only. */
.top-nav-container,
.offers,
.currency-switcher,
[aria-label="Currencies"] {
    display: none !important;
}

/* Mobile drawer footer: Bagisto renders currency + language together when either exists.
   EventWarp only supports USD, so hide the currency half and keep language. */
.ew-shop-header .fixed.bottom-0.grid > :first-child,
.ew-shop-header .fixed.bottom-0.grid > :nth-child(2) {
    display: none !important;
}

.ew-shop-header .fixed.bottom-0.grid {
    grid-template-columns: 1fr !important;
}

/* Locale toggle (injected partial) */
.ew-lang-toggle {
    display: inline-flex;
    gap: 0.25rem;
    border: 1px solid var(--ew-mist);
    border-radius: 999px;
    padding: 0.2rem;
    margin-right: 0.5rem;
}

.ew-lang-toggle__link {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--ew-slate);
    line-height: 1.4;
}

.ew-lang-toggle__link--active {
    background: var(--ew-navy);
    color: #fff;
}

/* Shop mobile nav drawer (hamburger) */
.ew-shop-header .fixed.z-\[1000\] {
    width: min(100vw, 24rem) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-inline-end: 1px solid var(--ew-line);
    box-shadow: 18px 0 48px rgb(7 29 90 / 14%);
}

.ew-mobile-drawer__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.ew-mobile-drawer__nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.35rem;
    padding: 1.15rem 1.25rem 1.5rem;
}

.ew-mobile-drawer__section--secondary {
    margin-top: auto;
    padding-top: 0.5rem;
}

.ew-mobile-drawer__section {
    display: grid;
    gap: 0.55rem;
}

.ew-mobile-drawer__label {
    margin: 0;
    color: var(--ew-slate);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ew-mobile-drawer__links {
    display: grid;
    gap: 0.2rem;
    border: 1px solid var(--ew-line);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 8%), transparent 42%),
        #fff;
    box-shadow: 0 12px 30px rgb(7 29 90 / 6%);
    overflow: hidden;
}

.ew-mobile-drawer__link {
    display: block;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgb(7 29 90 / 6%);
    color: var(--ew-navy);
    font-size: 0.98rem;
    font-weight: 600;
    text-decoration: none;
}

.ew-mobile-drawer__link:first-child {
    border-top: 0;
}

.ew-mobile-drawer__link--primary {
    font-size: 1.02rem;
    font-weight: 800;
}

.ew-mobile-drawer__link--all {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ew-electric);
    border-top: 1px dashed rgb(7 29 90 / 12%);
}

.ew-mobile-drawer__links--secondary {
    box-shadow: none;
    background: var(--ew-mist);
    border-color: rgb(7 29 90 / 7%);
}

.ew-mobile-drawer__link--secondary {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ew-slate);
}

.ew-mobile-drawer__link:hover,
.ew-mobile-drawer__link:focus-visible {
    background: rgb(22 119 255 / 6%);
    color: var(--ew-electric);
}

.ew-mobile-drawer__footer {
    margin-top: auto;
    border-top: 1px solid var(--ew-line);
    background: #fff;
}

.ew-mobile-drawer__locale {
    display: grid;
    gap: 0.65rem;
    padding: 1rem 1.25rem 1.35rem;
}

.ew-mobile-drawer__locale .ew-lang-toggle {
    margin-right: 0;
    width: fit-content;
}

/* Header */
.ew-shop-header,
.ew-shop-header.bg-white,
.ew-shop-header.shadow-gray {
    background: #fff !important;
    border-bottom: 1px solid rgb(7 29 90 / 9%) !important;
    box-shadow: 0 12px 34px rgb(7 29 90 / 6%) !important;
}

.ew-shop-header > div,
.ew-shop-header .border-b {
    border-color: rgb(7 29 90 / 8%) !important;
}

.ew-shop-header .ew-wordmark__image {
    height: 2.45rem;
}

.ew-shop-category-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.7rem);
    min-width: 0;
}

.ew-shop-category-nav__link {
    position: relative;
    display: inline-flex;
    height: 78px;
    align-items: center;
    color: var(--ew-navy);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.ew-shop-category-nav__link::after {
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 3px;
    content: "";
    border-radius: 999px 999px 0 0;
    background: var(--ew-electric);
    opacity: 0;
    transform: scaleX(0.65);
    transition: opacity 160ms ease, transform 160ms ease;
}

.ew-shop-category-nav__link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.ew-shop-header input[name="query"] {
    border-color: rgb(7 29 90 / 10%) !important;
    background: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 28px rgb(7 29 90 / 5%);
}

.ew-shop-header .icon-search {
    color: var(--ew-electric) !important;
}

.ew-shop-header .icon-users,
.ew-shop-header .icon-cart,
.ew-shop-header .icon-compare,
.ew-shop-header .icon-menu,
.ew-shop-header .icon-camera {
    color: var(--ew-navy) !important;
}

.ew-hdr-shimmer-mobile {
    display: flex;
}

.ew-hdr-shimmer-desktop {
    display: none;
}

@media (min-width: 1180px) {
    .ew-hdr-shimmer-mobile { display: none; }
    .ew-hdr-shimmer-desktop { display: flex; }
}

/* Shared shop primitives */
.ew-shop-container {
    width: min(1180px, 100% - 3rem);
    margin-inline: auto;
}

.ew-shop-kicker {
    margin: 0 0 0.85rem;
    color: var(--ew-electric);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ew-shop-kicker--light {
    color: rgb(255 255 255 / 72%);
}

.ew-shop-btn {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.2rem;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.ew-shop-btn:hover {
    transform: translateY(-1px);
}

.ew-shop-btn--primary {
    background: var(--ew-electric);
    color: #fff;
    box-shadow: 0 16px 32px rgb(22 119 255 / 24%);
}

.ew-shop-btn--secondary {
    background: #fff;
    color: var(--ew-electric);
    border-color: rgb(22 119 255 / 25%);
}

.ew-shop-btn--light {
    background: #fff;
    color: var(--ew-navy);
}

.ew-shop-btn--dark-outline {
    color: #fff;
    border-color: rgb(255 255 255 / 25%);
    background: rgb(255 255 255 / 8%);
}

/* Shop home */
.ew-shop-hero {
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 5rem) 0;
    background:
        radial-gradient(circle at 8% 0%, rgb(39 215 255 / 18%), transparent 24rem),
        linear-gradient(180deg, #fff 0%, #eff6ff 100%);
}

.ew-shop-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.ew-shop-hero__copy h1 {
    max-width: 10ch;
    margin: 0 0 1rem;
    color: var(--ew-navy);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.98;
}

.ew-shop-hero__copy p:not(.ew-shop-kicker) {
    max-width: 58ch;
    margin: 0;
    color: var(--ew-slate);
    font-size: 1.1rem;
}

.ew-shop-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.6rem;
}

/* Quick category access on tablet/mobile — desktop uses header nav + cards below. */
.ew-shop-category-chips {
    display: none;
}

.ew-shop-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid rgb(7 29 90 / 12%);
    border-radius: 999px;
    background: #fff;
    color: var(--ew-navy);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgb(7 29 90 / 6%);
}

.ew-shop-category-chip__thumb {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgb(7 29 90 / 8%);
}

.ew-shop-category-chip:hover {
    border-color: var(--ew-electric);
    color: var(--ew-electric);
}

.ew-shop-hero__visual {
    position: relative;
    min-height: 440px;
    padding-bottom: 5.25rem;
}

.ew-shop-slide {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid rgb(7 29 90 / 10%);
    border-radius: 34px;
    padding: clamp(1.4rem, 4vw, 2.4rem);
    background:
        linear-gradient(135deg, rgb(7 29 90 / 82%), rgb(7 29 90 / 32)),
        radial-gradient(circle at 70% 20%, rgb(39 215 255 / 55%), transparent 15rem),
        var(--ew-gradient);
    box-shadow: 0 28px 88px rgb(7 29 90 / 18%);
    color: #fff;
}

.ew-shop-slide::before {
    position: absolute;
    inset: auto -5rem -7rem auto;
    width: 22rem;
    height: 22rem;
    content: "";
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgb(255 255 255 / 12%) 1px, transparent 1px),
        linear-gradient(180deg, rgb(255 255 255 / 12%) 1px, transparent 1px);
    background-size: 42px 42px;
    transform: rotate(-8deg);
}

.ew-shop-slide span {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    background: rgb(255 255 255 / 16%);
    color: rgb(255 255 255 / 82%);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ew-shop-slide strong {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 13ch;
    margin-top: 5rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1;
}

.ew-shop-slide p {
    position: relative;
    z-index: 1;
    max-width: 36ch;
    margin: 1rem 0 0;
    color: rgb(255 255 255 / 80%);
}

.ew-shop-mini-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: min(250px, 58%);
    border: 1px solid rgb(7 29 90 / 8%);
    border-radius: 22px;
    padding: 1rem;
    background: rgb(255 255 255 / 88%);
    box-shadow: 0 20px 54px rgb(7 29 90 / 14%);
    backdrop-filter: blur(14px);
}

.ew-shop-mini-card--top {
    top: 2rem;
    right: -0.4rem;
}

.ew-shop-mini-card--bottom {
    left: 2.25rem;
    bottom: -1.25rem;
}

.ew-shop-mini-card span {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    background: var(--ew-electric);
    font-weight: 800;
}

.ew-shop-mini-card p {
    margin: 0;
    color: var(--ew-navy);
    font-weight: 800;
    line-height: 1.15;
}

.ew-shop-categories {
    padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.ew-shop-section-heading {
    max-width: 780px;
    margin-bottom: 2rem;
}

.ew-shop-section-heading h2 {
    margin: 0;
    color: var(--ew-navy);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.05;
}

.ew-shop-section-heading p:not(.ew-shop-kicker) {
    margin: 1rem 0 0;
    color: var(--ew-slate);
    font-size: 1.04rem;
}

.ew-shop-category-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.ew-shop-category-card {
    position: relative;
    min-height: 230px;
    overflow: hidden;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: end;
    border: 1px solid rgb(7 29 90 / 9%);
    border-radius: 28px;
    padding: 1.65rem;
    text-decoration: none;
    background:
        linear-gradient(180deg, transparent 0%, rgb(7 29 90 / 84%) 100%),
        radial-gradient(circle at 70% 20%, rgb(39 215 255 / 38%), transparent 12rem),
        var(--ew-gradient);
    color: #fff;
    box-shadow: 0 22px 60px rgb(7 29 90 / 10%);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.ew-shop-category-card:nth-child(1),
.ew-shop-category-card:nth-child(2) {
    grid-column: span 3;
}

.ew-shop-category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 78px rgb(7 29 90 / 16%);
}

.ew-shop-category-card::before {
    position: absolute;
    inset: 0.9rem;
    content: "";
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 22px;
    pointer-events: none;
    z-index: 2;
}

.ew-shop-category-card--has-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
        linear-gradient(
            180deg,
            rgb(7 29 90 / 28%) 0%,
            rgb(7 29 90 / 52%) 42%,
            rgb(7 29 90 / 82%) 68%,
            rgb(7 29 90 / 96%) 100%
        ),
        var(--ew-cat-image);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.ew-shop-category-card--has-image {
    background: linear-gradient(135deg, var(--ew-navy), var(--ew-electric));
}

.ew-shop-category-card--has-image.ew-shop-category-card--catering-food,
.ew-shop-category-card--has-image.ew-shop-category-card--entertainment,
.ew-shop-category-card--has-image.ew-shop-category-card--decor-flowers,
.ew-shop-category-card--has-image.ew-shop-category-card--services {
    background: linear-gradient(135deg, var(--ew-navy), var(--ew-electric));
}

.ew-shop-category-card span,
.ew-shop-category-card strong,
.ew-shop-category-card em {
    position: relative;
    z-index: 3;
    max-width: calc(100% - 1.25rem);
}

.ew-shop-category-card--has-image span,
.ew-shop-category-card--has-image strong,
.ew-shop-category-card--has-image em {
    text-shadow:
        0 1px 2px rgb(7 29 90 / 55%),
        0 8px 24px rgb(7 29 90 / 65%);
}

.ew-shop-category-card span {
    color: rgb(255 255 255 / 72%);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ew-shop-category-card--has-image span {
    color: rgb(255 255 255 / 88%);
}

.ew-shop-category-card strong {
    display: block;
    margin-top: 0.45rem;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    line-height: 1.05;
}

.ew-shop-category-card em {
    display: block;
    max-width: 32ch;
    margin-top: 0.55rem;
    margin-bottom: 0.15rem;
    color: rgb(255 255 255 / 76%);
    font-style: normal;
    font-size: 0.92rem;
}

.ew-shop-category-card--has-image em {
    color: rgb(255 255 255 / 92%);
}

.ew-shop-category-card--catering-food {
    background:
        linear-gradient(180deg, transparent 0%, rgb(7 29 90 / 84%) 100%),
        radial-gradient(circle at 75% 22%, rgb(255 255 255 / 32%), transparent 11rem),
        linear-gradient(135deg, #1677ff, #27d7ff);
}

.ew-shop-category-card--entertainment {
    background:
        linear-gradient(180deg, transparent 0%, rgb(7 29 90 / 84%) 100%),
        radial-gradient(circle at 80% 20%, rgb(255 255 255 / 30%), transparent 11rem),
        linear-gradient(135deg, #5a1dff, #1677ff);
}

.ew-shop-category-card--decor-flowers {
    background:
        linear-gradient(180deg, transparent 0%, rgb(7 29 90 / 84%) 100%),
        radial-gradient(circle at 75% 20%, rgb(39 215 255 / 35%), transparent 11rem),
        linear-gradient(135deg, #071d5a, #5a1dff);
}

.ew-shop-category-card--services {
    background:
        linear-gradient(180deg, transparent 0%, rgb(7 29 90 / 84%) 100%),
        radial-gradient(circle at 75% 22%, rgb(39 215 255 / 30%), transparent 11rem),
        linear-gradient(135deg, #071d5a, #1677ff);
}

.ew-shop-vendor-pitch {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background:
        radial-gradient(circle at 85% 20%, rgb(39 215 255 / 18%), transparent 22rem),
        linear-gradient(135deg, var(--ew-navy), #061342 74%);
    color: #fff;
}

.ew-shop-vendor-pitch__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}

.ew-shop-vendor-pitch h2 {
    max-width: 700px;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.05;
}

.ew-shop-vendor-pitch p:not(.ew-shop-kicker) {
    max-width: 62ch;
    margin: 1rem 0 0;
    color: rgb(255 255 255 / 76%);
}

.ew-shop-vendor-pitch__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: flex-end;
}

.ew-shop-services {
    padding: 4rem 0;
}

.ew-shop-services__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.ew-shop-service-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 150px;
    border: 1px solid rgb(7 29 90 / 8%);
    border-radius: 22px;
    padding: 1.2rem;
    background: #fff;
    box-shadow: 0 18px 50px rgb(7 29 90 / 6%);
}

.ew-shop-service-card span {
    display: inline-flex;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgb(22 119 255 / 10%);
    color: var(--ew-electric);
    font-weight: 800;
}

.ew-shop-service-card h3 {
    margin: 0;
    color: var(--ew-navy);
    font-size: 1rem;
    font-weight: 800;
}

.ew-shop-service-card p {
    margin: 0.35rem 0 0;
    color: var(--ew-slate);
    font-size: 0.9rem;
}

.ew-shop-footer {
    margin-top: 0 !important;
    background: var(--ew-navy);
    color: #fff;
}

.ew-shop-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(160px, 0.45fr));
    gap: 2rem;
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.ew-shop-footer__brand .ew-wordmark__image {
    height: 2.65rem;
}

.ew-shop-footer p {
    max-width: 46ch;
    margin: 1rem 0 0;
    color: rgb(255 255 255 / 74%);
}

.ew-shop-footer__links {
    display: grid;
    gap: 0.55rem;
    align-content: start;
}

.ew-shop-footer__links h3 {
    margin: 0 0 0.35rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ew-shop-footer__links a {
    color: rgb(255 255 255 / 74%);
    text-decoration: none;
    font-weight: 650;
}

.ew-shop-footer__links a:hover {
    color: var(--ew-cyan);
}

.ew-shop-footer__bottom {
    border-top: 1px solid rgb(255 255 255 / 10%);
    padding: 1rem 0;
    color: rgb(255 255 255 / 66%);
    font-size: 0.9rem;
}

@media (max-width: 1080px) {
    .ew-shop-hero__grid,
    .ew-shop-vendor-pitch__grid,
    .ew-shop-footer__grid {
        grid-template-columns: 1fr;
    }

    .ew-shop-category-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin-top: 1.35rem;
    }

    /* Hero visual pushes category cards ~2 screens down on phones; chips are the mobile entry point. */
    .ew-shop-hero__visual {
        display: none;
    }

    .ew-shop-vendor-pitch__actions {
        justify-content: flex-start;
    }

    .ew-shop-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .ew-shop-container {
        width: min(100% - 2rem, 1180px);
    }

    .ew-shop-header .ew-wordmark__image {
        height: 2.15rem;
    }

    .ew-shop-hero {
        padding-top: 2.25rem;
        padding-bottom: 1.5rem;
    }

    .ew-shop-hero__copy h1 {
        max-width: 11ch;
        font-size: clamp(2.65rem, 14vw, 3.7rem);
    }

    .ew-shop-category-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -0.25rem;
        padding-bottom: 0.2rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ew-shop-category-chips::-webkit-scrollbar {
        display: none;
    }

    .ew-shop-categories {
        padding-top: 2rem;
    }

    .ew-shop-category-grid {
        grid-template-columns: 1fr;
    }

    .ew-shop-category-card,
    .ew-shop-category-card:nth-child(1),
    .ew-shop-category-card:nth-child(2) {
        grid-column: auto;
        min-height: 210px;
    }

    .ew-shop-services__grid {
        grid-template-columns: 1fr;
    }

    .ew-shop-footer__grid {
        gap: 1.5rem;
    }
}

/* Vendor pitch panels */
.ew-cat-hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(13.5rem, 24vw, 20rem);
    display: flex;
    align-items: end;
    margin: 0;
    background:
        radial-gradient(circle at 75% 20%, rgb(39 215 255 / 26%), transparent 22rem),
        linear-gradient(135deg, var(--ew-navy), #061342);
}

.ew-cat-hero__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.01);
}

.ew-cat-hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(7 29 90 / 18%) 0%, rgb(7 29 90 / 78%) 100%),
        linear-gradient(90deg, rgb(7 29 90 / 82%) 0%, rgb(7 29 90 / 38%) 54%, transparent 100%);
}

.ew-cat-hero--no-image .ew-cat-hero__shade {
    background:
        radial-gradient(circle at 75% 20%, rgb(39 215 255 / 22%), transparent 20rem),
        linear-gradient(135deg, var(--ew-navy), #061342);
}

.ew-cat-hero__content {
    position: relative;
    z-index: 1;
    width: min(100% - 3rem, 1180px);
    margin: 0 auto;
    padding: clamp(2.4rem, 5vw, 3.75rem) 0 clamp(2.1rem, 4.5vw, 3.25rem);
    color: #fff;
}

.ew-cat-hero h1 {
    max-width: 11ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2.6rem, 5.8vw, 4.75rem);
    font-weight: 800;
    letter-spacing: -0.065em;
    line-height: 0.96;
}

.ew-cat-hero__tagline {
    max-width: 42rem;
    margin-top: 1.2rem;
    color: rgb(255 255 255 / 86%);
}

.ew-cat-hero__tagline .ew-cat-tagline h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.2;
}

.ew-cat-hero__tagline .ew-cat-tagline p {
    margin: 0.5rem 0 0;
    max-width: 52ch;
    color: rgb(255 255 255 / 80%);
    font-size: clamp(0.98rem, 1.4vw, 1.1rem);
    line-height: 1.65;
}

.ew-cat-main {
    margin-top: clamp(2rem, 4vw, 3.25rem);
}

.ew-cat-main .group:has(a[href*="/shop/"]) {
    overflow: visible !important;
    border: 1px solid rgb(7 29 90 / 9%);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgb(7 29 90 / 9%);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ew-cat-main .group:has(a[href*="/shop/"]):hover {
    transform: translateY(-2px);
    border-color: rgb(22 119 255 / 24%);
    box-shadow: 0 24px 58px rgb(7 29 90 / 14%);
}

.ew-cat-main .group:has(a[href*="/shop/"]) > div:first-child {
    max-width: none !important;
    border-radius: 22px 22px 0 0;
}

.ew-cat-main .group:has(a[href*="/shop/"]) > div:first-child img {
    width: 100%;
}

.ew-cat-main .group:has(a[href*="/shop/"]) > div:nth-child(2) {
    max-width: none !important;
    margin-top: 0 !important;
    transform: none !important;
    border-radius: 0 0 22px 22px !important;
    padding: 1rem !important;
    background: #fff;
}

.ew-cat-main .group:has(a[href*="/shop/"]) > div:nth-child(2) .action-items {
    opacity: 1 !important;
}

.ew-cat-main .group:has(a[href*="/shop/"]) > div:nth-child(2) .secondary-button {
    border-radius: 999px !important;
    border-color: var(--ew-navy) !important;
    color: var(--ew-navy) !important;
}

.ew-cat-main .group:has(a[href*="/shop/"]) > div:nth-child(2) .secondary-button:hover {
    border-color: var(--ew-electric) !important;
    background: var(--ew-electric) !important;
    color: #fff !important;
}

/* Category / search listing toolbar (sort, limit, grid/list) */
.ew-listing-toolbar {
    align-items: center;
    margin-bottom: 0.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ew-line);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 8%), transparent 42%),
        #fff;
    box-shadow: 0 12px 30px rgb(7 29 90 / 6%);
}

.ew-listing-toolbar button {
    border-color: var(--ew-line) !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: var(--ew-navy) !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgb(7 29 90 / 5%);
}

.ew-listing-toolbar button:hover,
.ew-listing-toolbar button:focus-visible {
    border-color: var(--ew-electric) !important;
}

.ew-listing-toolbar .icon-listing,
.ew-listing-toolbar .icon-listing-fill,
.ew-listing-toolbar .icon-grid-view,
.ew-listing-toolbar .icon-grid-view-fill {
    color: var(--ew-slate);
    transition: color 160ms ease;
}

.ew-listing-toolbar .icon-listing-fill,
.ew-listing-toolbar .icon-grid-view-fill {
    color: var(--ew-electric);
}

.ew-listing-toolbar .icon-arrow-down {
    color: var(--ew-navy);
}

/* Product listing filters
 *
 * EventWarp keeps each filter title and body in one connected card. This
 * solves Bagisto's default "floating label + white box" spacing while leaving
 * the top Filters / Clear All row as a simple sidebar header.
 */
.panel-side {
    padding-right: 0 !important;
}

.panel-side > .flex.h-\[50px\] {
    height: auto !important;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem !important;
    border-color: rgb(7 29 90 / 10%) !important;
    overflow: visible !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.panel-side > .flex.h-\[50px\] p:first-child {
    color: var(--ew-navy);
    font-size: 1rem !important;
    font-weight: 800 !important;
}

.panel-side > .flex.h-\[50px\] p:last-child {
    color: var(--ew-navy);
    font-size: 0.8rem !important;
    font-weight: 700 !important;
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) {
    margin-bottom: 0.95rem;
    overflow: hidden;
    border: 1px solid var(--ew-line) !important;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgb(7 29 90 / 6%);
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) > div > [role="button"] {
    padding: 1rem 1.1rem 0.85rem !important;
    border-bottom: 1px solid var(--ew-line);
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 8%), transparent 42%),
        #fff;
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) > div > [role="button"] p {
    color: var(--ew-navy) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) > div > [role="button"] span[class*="icon-arrow"] {
    color: var(--ew-navy) !important;
    font-size: 1.25rem !important;
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) > div > .z-10.rounded-lg.bg-white {
    padding: 0.95rem 1rem 1rem !important;
    border: 0;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none;
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) input[type="text"] {
    border-color: var(--ew-line) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px 0 rgb(7 29 90 / 3%);
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) input[type="text"]:focus {
    border-color: var(--ew-electric) !important;
    box-shadow: 0 0 0 3px rgb(22 119 255 / 14%);
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) ul {
    padding-bottom: 0 !important;
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) li .hover\:bg-gray-100:hover {
    background: rgb(22 119 255 / 6%) !important;
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) label[role="checkbox"] {
    color: var(--ew-navy) !important;
}

.panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) label[role="button"] {
    color: var(--ew-ink) !important;
}

.panel-side .relative.mx-auto.flex.h-20 {
    height: 4.5rem !important;
    padding-inline: 0.35rem !important;
}

.ew-pitch {
    margin: 2rem 0;
    padding: 2rem;
    border-radius: 16px;
    background: var(--ew-mist);
    border: 1px solid rgb(7 29 90 / 8%);
}

.ew-pitch__title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ew-navy);
}

.ew-pitch__body {
    margin: 0 0 1.25rem;
    color: var(--ew-slate);
    max-width: 60ch;
}

.ew-pitch__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ew-sell-hero {
    background: var(--ew-navy);
    color: #fff;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.ew-sell-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
}

.ew-sell-hero p {
    margin: 0 0 1.5rem;
    max-width: 50ch;
    color: rgb(255 255 255 / 90%);
}

.ew-sell-hero .ew-btn--primary {
    background: var(--ew-electric);
}

.ew-sell-hero .ew-btn--secondary {
    background: transparent;
    color: #fff;
    border-color: rgb(255 255 255 / 40%);
}

.ew-empty {
    display: flex;
    justify-content: center;
    padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2.5rem);
}

.ew-empty__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
    text-align: center;
}

.ew-empty__illo {
    position: relative;
    width: clamp(140px, 36vw, 188px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--ew-line);
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 24px 48px -28px rgb(7 29 90 / 22%);
}

.ew-empty__illo::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 12% 8%, rgb(39 215 255 / 10%) 0%, transparent 42%),
        radial-gradient(circle at 88% 92%, rgb(7 29 90 / 6%) 0%, transparent 42%);
}

.ew-empty__illo svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ew-empty__eyebrow {
    margin: clamp(1.5rem, 4vw, 2rem) 0 0;
    color: var(--ew-electric);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ew-empty__title {
    margin: 0.75rem 0 0;
    color: var(--ew-navy);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
}

.ew-empty__lead {
    margin: 0.9rem 0 0;
    color: var(--ew-slate);
    font-size: 0.95rem;
    line-height: 1.7;
}

.ew-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.ew-empty__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ew-empty__btn--primary {
    background: var(--ew-electric);
    color: #fff;
}

.ew-empty__btn--primary:hover {
    background: var(--ew-navy);
    color: #fff;
}

.ew-empty__btn--ghost {
    border-color: var(--ew-line);
    background: transparent;
    color: var(--ew-navy);
}

.ew-empty__btn--ghost:hover {
    border-color: var(--ew-electric);
    background: #fff;
    color: var(--ew-electric);
}

.ew-card {
    background: #fff;
    border: 1px solid rgb(7 29 90 / 8%);
    border-radius: 16px;
    padding: 1.5rem;
}

.ew-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}

.ew-btn--primary {
    background: var(--ew-electric);
    color: #fff;
}

/* Product detail pages */
form:has(input[name="product_id"]) {
    display: block;
    margin-bottom: clamp(2.5rem, 7vw, 5rem);
}

form:has(input[name="product_id"]) > .container {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

form:has(input[name="product_id"]) img[fetchpriority="high"],
form:has(input[name="product_id"]) img.aspect-square {
    width: 100%;
    max-height: clamp(20rem, 58vw, 34rem);
    object-fit: cover;
    border-radius: 22px;
}

form:has(input[name="product_id"]) img[fetchpriority="high"] {
    box-shadow: 0 18px 46px rgb(7 29 90 / 10%);
}

form:has(input[name="product_id"]) [class*="max-w-[590px]"] {
    align-self: flex-start;
    border: 1px solid rgb(7 29 90 / 9%);
    border-radius: 22px;
    padding: clamp(1.35rem, 3vw, 2rem) !important;
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 8%), transparent 14rem),
        #fff;
    box-shadow: 0 16px 42px rgb(7 29 90 / 9%);
}

form:has(input[name="product_id"]) h1 {
    color: var(--ew-navy);
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.055em;
    line-height: 1.02;
}

form:has(input[name="product_id"]) h1 + * {
    flex-shrink: 0;
}

form:has(input[name="product_id"]) h1 ~ p,
form:has(input[name="product_id"]) [class*="text-zinc-500"] {
    color: var(--ew-slate) !important;
}

form:has(input[name="product_id"]) [class*="text-2xl"] .font-semibold,
form:has(input[name="product_id"]) [class*="text-2xl"] {
    color: var(--ew-navy);
}

form:has(input[name="product_id"]) .secondary-button,
form:has(input[name="product_id"]) .primary-button {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

form:has(input[name="product_id"]) .secondary-button {
    border-color: var(--ew-electric) !important;
    color: var(--ew-electric) !important;
    background: #fff !important;
}

form:has(input[name="product_id"]) .secondary-button:hover {
    background: var(--ew-electric) !important;
    color: #fff !important;
}

form:has(input[name="product_id"]) .primary-button {
    background: var(--ew-electric) !important;
    border-color: var(--ew-electric) !important;
    color: #fff !important;
}

form:has(input[name="product_id"]) .primary-button:hover {
    background: var(--ew-navy) !important;
    border-color: var(--ew-navy) !important;
}

form:has(input[name="product_id"]) + div,
form:has(input[name="product_id"]) ~ div {
    scroll-margin-top: 6rem;
}

#main > .container.mt-6.grid.gap-3[class*="1180:hidden"] {
    width: min(calc(100vw - 2rem), 640px);
    max-width: 640px;
    margin: 0 auto clamp(2rem, 6vw, 4rem) !important;
    padding: 0 !important;
    gap: 1rem !important;
}

#main > .container.mt-6.grid.gap-3[class*="1180:hidden"] > div {
    overflow: hidden;
    border: 1px solid rgb(7 29 90 / 9%) !important;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 40px rgb(7 29 90 / 8%);
}

#main > .container.mt-6.grid.gap-3[class*="1180:hidden"] [role="button"] {
    background: #fff !important;
    padding: 1rem 1.25rem !important;
}

#main > .container.mt-6.grid.gap-3[class*="1180:hidden"] [role="button"] p {
    color: var(--ew-navy);
    font-weight: 800;
}

#main > .container.mt-6.grid.gap-3[class*="1180:hidden"] [class*="bg-white"] {
    padding: 0 1.25rem 1.25rem !important;
}

#main > .container.mt-6.grid.gap-3[class*="1180:hidden"] .text-zinc-500 {
    color: var(--ew-slate) !important;
    line-height: 1.7;
}

#main > .container.mt-6.grid.gap-3[class*="1180:hidden"] .max-md\:px-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 1180px) {
    form:has(input[name="product_id"]) > .container {
        margin-top: 0;
    }

    form:has(input[name="product_id"]) > .container > .flex {
        justify-content: center;
        row-gap: 0;
    }

    form:has(input[name="product_id"]) div[class~="scrollbar-hide"][class~="w-screen"][class*="1180:hidden"] {
        flex: 0 0 min(calc(100vw - 2rem), 640px) !important;
        width: min(calc(100vw - 2rem), 640px) !important;
        max-width: 640px !important;
        margin: 1rem auto 0 !important;
        border-radius: 22px;
        overflow: hidden !important;
    }

    form:has(input[name="product_id"]) div[class~="scrollbar-hide"][class~="w-screen"][class*="1180:hidden"] > div {
        width: 100% !important;
    }

    form:has(input[name="product_id"]) div[class~="scrollbar-hide"][class~="w-screen"][class*="1180:hidden"] [class~="inline-flex"],
    form:has(input[name="product_id"]) div[class~="scrollbar-hide"][class~="w-screen"][class*="1180:hidden"] .grid.w-screen {
        width: 100% !important;
        min-width: 100% !important;
    }

    form:has(input[name="product_id"]) img.aspect-square {
        aspect-ratio: 15 / 8 !important;
        max-height: clamp(18rem, 48vw, 22rem);
        object-fit: cover;
    }

    form:has(input[name="product_id"]) [class*="max-w-[590px]"] {
        flex: 0 0 min(calc(100vw - 2rem), 640px) !important;
        width: min(calc(100vw - 2rem), 640px) !important;
        max-width: 640px !important;
        margin: clamp(1rem, 3vw, 1.5rem) auto 0 !important;
        position: relative;
        z-index: 2;
    }
}

@media (max-width: 640px) {
    form:has(input[name="product_id"]) img.aspect-square {
        max-height: 18rem;
    }

    form:has(input[name="product_id"]) [class*="max-w-[590px]"] {
        margin-top: 1rem !important;
    }
}

.ew-cat-pitch {
    position: relative;
    overflow: hidden;
    margin-top: 2.5rem;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 0%, rgb(39 215 255 / 20%), transparent 18rem),
        linear-gradient(135deg, var(--ew-navy), #061342 76%);
    border: 1px solid rgb(39 215 255 / 14%);
    box-shadow: 0 24px 64px rgb(7 29 90 / 16%);
    color: #fff;
}

.ew-cat-pitch__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 4vw, 3rem);
    justify-content: space-between;
    align-items: center;
}

.ew-cat-pitch__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ew-cyan);
}

.ew-cat-pitch__headline {
    margin: 0 0 1rem;
    max-width: 13ch;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.98;
    color: #fff;
}

.ew-cat-pitch__body {
    margin: 0 0 1rem;
    color: rgb(255 255 255 / 78%);
    max-width: 60ch;
    line-height: 1.7;
}

.ew-cat-pitch__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 1.35rem 0 0;
    padding: 0;
    color: rgb(255 255 255 / 82%);
    list-style: none;
}

.ew-cat-pitch__points li {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.35rem;
    padding-left: 1.15rem;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
}

.ew-cat-pitch__points li::before {
    position: absolute;
    top: 0.85rem;
    left: 0;
    width: 0.4rem;
    height: 0.4rem;
    content: "";
    border-radius: 999px;
    background: var(--ew-cyan);
    box-shadow: 0 0 0 4px rgb(39 215 255 / 12%);
}

.ew-cat-pitch__cta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 230px;
}

.ew-cat-pitch__btn-primary,
.ew-cat-pitch__btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.35rem;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
}

.ew-cat-pitch__btn-primary {
    background: var(--ew-electric);
    color: #fff;
}

.ew-cat-pitch__btn-primary:hover {
    background: var(--ew-cyan);
    color: var(--ew-navy);
}

.ew-cat-pitch__btn-secondary {
    background: rgb(255 255 255 / 10%);
    color: #fff;
    border: 1px solid rgb(255 255 255 / 24%);
}

.ew-cat-pitch__btn-secondary:hover {
    border-color: var(--ew-cyan);
    color: var(--ew-cyan);
}

@media (max-width: 900px) {
    .ew-cat-pitch__inner {
        grid-template-columns: 1fr;
    }

    .ew-cat-pitch__points {
        grid-template-columns: 1fr;
    }

    .ew-cat-pitch__cta {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .ew-cat-hero__content {
        width: min(100% - 2rem, 1180px);
    }

    .ew-cat-hero {
        min-height: 16rem;
    }

}

/* -----------------------------------------------------------------
 * Product cards — shop-wide (category, search, cross-sell, home)
 * ----------------------------------------------------------------- */
#main .group:has(.action-items):has(a[href*="/shop/"]) {
    overflow: visible !important;
    border: 1px solid rgb(7 29 90 / 9%);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgb(7 29 90 / 9%);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

#main .group:has(.action-items):has(a[href*="/shop/"]):hover {
    transform: translateY(-2px);
    border-color: rgb(22 119 255 / 24%);
    box-shadow: 0 24px 58px rgb(7 29 90 / 14%);
}

#main .group:has(.action-items):has(a[href*="/shop/"]) > div:first-child {
    max-width: none !important;
    border-radius: 22px 22px 0 0;
}

#main .group:has(.action-items):has(a[href*="/shop/"]) > div:first-child img {
    width: 100%;
}

#main .group:has(.action-items):has(a[href*="/shop/"]) > div:nth-child(2) {
    max-width: none !important;
    margin-top: 0 !important;
    transform: none !important;
    border-radius: 0 0 22px 22px !important;
    padding: 1rem !important;
    background: #fff;
}

#main .group:has(.action-items):has(a[href*="/shop/"]) > div:nth-child(2) .action-items {
    opacity: 1 !important;
}

#main .group:has(.action-items):has(a[href*="/shop/"]) > div:nth-child(2) .secondary-button {
    border-radius: 999px !important;
    border-color: var(--ew-navy) !important;
    color: var(--ew-navy) !important;
}

#main .group:has(.action-items):has(a[href*="/shop/"]) > div:nth-child(2) .secondary-button:hover {
    border-color: var(--ew-electric) !important;
    background: var(--ew-electric) !important;
    color: #fff !important;
}

/* -----------------------------------------------------------------
 * Cart page (populated) — scoped to `.ew-cart`
 * ----------------------------------------------------------------- */
.ew-cart [role="heading"] {
    color: var(--ew-navy) !important;
}

.ew-cart img[width="110"] {
    border: 1px solid var(--ew-line);
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 8px 20px rgb(7 29 90 / 8%);
    object-fit: cover;
}

.ew-cart .grid.gap-y-6 p.font-medium,
.ew-cart .grid.gap-y-6 p.font-semibold {
    color: var(--ew-navy) !important;
}

.ew-cart .rounded-\[54px\] {
    background: var(--ew-shop-bg);
    box-shadow: 0 1px 2px rgb(7 29 90 / 6%);
}

.ew-cart > div:last-child {
    align-self: flex-start;
}

.ew-cart .w-\[418px\] {
    position: sticky;
    top: 1.5rem;
    padding: clamp(1.5rem, 2.4vw, 2rem);
    border: 1px solid var(--ew-line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 10%), transparent 38%),
        #fff;
    box-shadow: 0 18px 42px rgb(7 29 90 / 10%);
}

@media (max-width: 1060px) {
    .ew-cart .w-\[418px\] {
        position: static;
        width: 100%;
    }
}

/* -----------------------------------------------------------------
 * Mini-cart drawer — scoped to `.ew-mini-cart-*`
 * ----------------------------------------------------------------- */
header div.fixed.bg-white .ew-mini-cart-header {
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 10%), transparent 42%),
        var(--ew-shop-bg);
    border-bottom: 1px solid var(--ew-line);
}

header div.fixed.bg-white .ew-mini-cart-header p.text-2xl {
    color: var(--ew-navy) !important;
    letter-spacing: -0.01em;
}

header div.fixed.bg-white .ew-mini-cart-header p.text-base {
    color: var(--ew-slate) !important;
}

header div.fixed.bg-white .ew-mini-cart-content {
    background-color: var(--ew-shop-bg);
}

header div.fixed.bg-white .ew-mini-cart-content .gap-12 {
    gap: 1.5rem !important;
}

header div.fixed.bg-white .ew-mini-cart-content .gap-12 > div:not(:last-child) {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ew-line);
}

header div.fixed.bg-white .ew-mini-cart-content img.rounded-xl {
    border: 1px solid var(--ew-line);
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 8px 20px rgb(7 29 90 / 8%);
    object-fit: cover;
}

header div.fixed.bg-white .ew-mini-cart-content a p,
header div.fixed.bg-white .ew-mini-cart-content p.text-lg {
    color: var(--ew-navy) !important;
}

header div.fixed.bg-white .ew-mini-cart-content .rounded-\[54px\] {
    background: #fff;
    box-shadow: 0 1px 2px rgb(7 29 90 / 6%);
}

header div.fixed.bg-white .ew-mini-cart-footer p.text-3xl {
    color: var(--ew-navy) !important;
}

header div.fixed.bg-white .ew-mini-cart-footer a.bg-navyBlue {
    border-radius: 14px !important;
    box-shadow: 0 14px 30px -12px rgb(7 29 90 / 35%);
}

header div.fixed.bg-white .ew-mini-cart-footer a:not(.bg-navyBlue) {
    color: var(--ew-navy) !important;
    font-weight: 600;
}

header div.fixed.bg-white .ew-mini-cart-footer a:not(.bg-navyBlue):hover {
    color: var(--ew-electric) !important;
}

/* -----------------------------------------------------------------
 * Checkout onepage flow (CSS-only)
 *
 * Checkout remains upstream Bagisto markup: minimal class hook `.ew-checkout`
 * on the Vue grid; scope step panels via `#steps-container`.
 * Surface rule: white cards on shop-bg canvas (see DESIGN_SYSTEM.md §6b).
 * --------------------------------------------------------------- */
.container:has(#steps-container) {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.container:has(#steps-container) .ew-checkout {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

#steps-container > .mb-7 {
    margin-top: 0 !important;
}

#steps-container {
    display: grid;
    gap: 1.25rem;
}

#steps-container h2,
.container:has(#steps-container) h1,
.container:has(#steps-container) [role="heading"] {
    color: var(--ew-navy) !important;
}

#steps-container .overflow-hidden.\!border-b-0 {
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 8%), transparent 36%),
        #fff !important;
    border: 1px solid var(--ew-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 34px rgb(7 29 90 / 8%);
    overflow: hidden;
}

#steps-container .flex.cursor-pointer.select-none.items-center.justify-between {
    padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.25rem, 2.2vw, 1.75rem) !important;
    border-bottom: 1px solid var(--ew-line);
}

#steps-container div.rounded-lg.bg-white {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding: clamp(1.5rem, 2.4vw, 2rem) !important;
}

@media (max-width: 768px) {
    #steps-container .max-md\:\!bg-gray-100,
    #steps-container .max-md\:bg-gray-100 {
        background-color: #fff !important;
    }
}

#steps-container input[type="radio"] + label + label {
    background-color: #fff;
    border-color: var(--ew-line) !important;
    box-shadow: 0 1px 2px rgb(7 29 90 / 5%);
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#steps-container input[type="radio"] + label + label:hover {
    border-color: rgb(7 29 90 / 38%) !important;
    box-shadow: 0 12px 26px rgb(7 29 90 / 8%);
    transform: translateY(-1px);
}

#steps-container input[type="radio"]:checked + label + label {
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 8%), transparent 42%),
        #fff;
    border-color: var(--ew-navy) !important;
    box-shadow: 0 10px 28px rgb(7 29 90 / 10%);
}

#steps-container input[type="radio"]:checked + label + label p,
#steps-container input[type="radio"]:checked + label + label span {
    color: var(--ew-navy) !important;
}

#steps-container input[type="radio"] + label + label > span[class*="icon-"],
#steps-container input[type="radio"] + label + label img {
    display: grid;
    place-items: center;
    width: 3.35rem !important;
    height: 3.35rem !important;
    max-width: 3.35rem !important;
    max-height: 3.35rem !important;
    padding: 0.45rem;
    background-color: var(--ew-shop-bg);
    border: 1px solid var(--ew-line);
    border-radius: 14px;
    color: var(--ew-navy) !important;
    object-fit: contain;
}

#steps-container input[type="radio"]:checked + label + label > span[class*="icon-"],
#steps-container input[type="radio"]:checked + label + label img {
    background-color: rgb(247 250 255 / 82%);
    border-color: rgb(7 29 90 / 28%);
}

@media (min-width: 769px) {
    .container:has(#steps-container) .ew-checkout > .sticky.top-8 {
        align-self: start;
        background:
            radial-gradient(circle at 100% 0%, rgb(39 215 255 / 10%), transparent 38%),
            #fff;
        border: 1px solid var(--ew-line);
        border-radius: 20px;
        box-shadow: 0 18px 42px rgb(7 29 90 / 10%);
        padding: clamp(1.5rem, 2.4vw, 2rem);
    }

    .container:has(#steps-container) .ew-checkout > .sticky.top-8 h1:first-of-type {
        margin-top: 0;
    }
}

.container:has(#steps-container) .hidden.max-md\:block {
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 8%), transparent 38%),
        #fff;
    border: 1px solid var(--ew-line);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgb(7 29 90 / 8%);
    padding: 1.25rem;
}

.container:has(#steps-container) img[width="110"][height="110"] {
    background-color: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgb(7 29 90 / 8%);
    object-fit: cover;
}

.container:has(#steps-container) .text-navyBlue {
    color: var(--ew-navy) !important;
}

.container:has(#steps-container) .font-semibold,
.container:has(#steps-container) .font-medium {
    color: var(--ew-navy);
}

.container:has(#steps-container) .primary-button {
    border-radius: 9999px !important;
}

.container:has(#steps-container) .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 {
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 8%), transparent 38%),
        var(--ew-shop-bg) !important;
    border: 1px solid var(--ew-line);
    border-radius: 20px !important;
    box-shadow: 0 18px 42px rgb(7 29 90 / 18%);
}

.container:has(#steps-container) .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 > .bg-white,
.container:has(#steps-container) .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 .bg-white {
    background: transparent !important;
}

.container:has(#steps-container) .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 .border-b {
    border-color: var(--ew-line) !important;
}

.container:has(#steps-container) .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 input[name="code"] {
    border-color: var(--ew-line) !important;
    border-radius: 12px !important;
}

.container:has(#steps-container) .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 input[name="code"]:focus {
    border-color: var(--ew-electric) !important;
    box-shadow: 0 0 0 2px rgb(22 119 255 / 25%) !important;
}

/* -----------------------------------------------------------------
 * Checkout login prompt + modal
 * --------------------------------------------------------------- */
.ew-checkout-login__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    color: var(--ew-navy);
    background-color: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgb(7 29 90 / 6%);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ew-checkout-login__trigger:hover {
    border-color: rgb(22 119 255 / 45%);
    box-shadow: 0 6px 16px rgb(7 29 90 / 8%);
    transform: translateY(-1px);
}

.ew-checkout-login__prompt {
    color: rgb(7 29 90 / 72%);
    font-size: 0.85rem;
    font-weight: 500;
}

.ew-checkout-login__link {
    color: var(--ew-electric);
    font-size: 0.9rem;
    font-weight: 700;
}

.ew-checkout-login__modal .fixed.inset-0.bg-gray-500 {
    background-color: rgb(7 29 90 / 48%) !important;
}

.ew-checkout-login__modal .absolute.left-1\/2.top-1\/2 {
    max-width: 520px !important;
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 8%), transparent 38%),
        var(--ew-shop-bg) !important;
    border: 1px solid var(--ew-line);
    border-radius: 20px !important;
    box-shadow: 0 18px 42px rgb(7 29 90 / 18%);
}

.ew-checkout-login__modal-header,
.ew-checkout-login__modal-content,
.ew-checkout-login__modal-footer {
    background: transparent !important;
}

.ew-checkout-login__modal-header {
    padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem) 1.25rem !important;
    border-color: var(--ew-line) !important;
}

.ew-checkout-login__modal-header .icon-cancel {
    color: var(--ew-navy);
}

.ew-checkout-login__eyebrow {
    margin-bottom: 0.45rem;
    color: var(--ew-electric);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ew-checkout-login__title {
    color: var(--ew-navy);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.12;
}

.ew-checkout-login__modal-content {
    padding: clamp(1.5rem, 3vw, 2rem) !important;
}

.ew-checkout-login__lead {
    margin-bottom: 1.5rem;
    color: rgb(7 29 90 / 78%);
    line-height: 1.65;
}

.ew-checkout-login__modal-content input {
    border-color: var(--ew-line) !important;
    border-radius: 12px !important;
}

.ew-checkout-login__helper-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: space-between;
    margin-top: 1rem;
}

.ew-checkout-login__helper-links a {
    color: var(--ew-electric);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.ew-checkout-login__helper-links a:hover {
    color: var(--ew-cyan);
}

.ew-checkout-login__modal-footer {
    margin-top: 0 !important;
    padding: 0 clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem) !important;
}

.ew-checkout-login__submit {
    width: 100%;
    border-radius: 9999px !important;
}

@media (max-width: 640px) {
    .ew-checkout-login__trigger {
        gap: 0.35rem;
        padding: 0.4rem 0.65rem;
    }

    .ew-checkout-login__prompt {
        display: none;
    }

    .ew-checkout-login__modal .absolute.left-1\/2.top-1\/2 {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
    }
}

/* -----------------------------------------------------------------
 * Order success / thank-you page
 * --------------------------------------------------------------- */
.ew-order-success {
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(3rem, 7vw, 6rem);
}

.ew-order-success__card {
    max-width: 860px;
    margin-inline: auto;
    padding: clamp(2rem, 4vw, 3.25rem);
    text-align: center;
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 10%), transparent 38%),
        var(--ew-shop-bg);
    border: 1px solid var(--ew-line);
    border-radius: 24px;
    box-shadow: 0 18px 42px rgb(7 29 90 / 10%);
}

.ew-order-success__mark {
    display: grid;
    place-items: center;
    width: clamp(4.5rem, 8vw, 6rem);
    height: clamp(4.5rem, 8vw, 6rem);
    margin-inline: auto;
    margin-bottom: 1.25rem;
    color: var(--ew-navy);
    background-color: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 9999px;
    box-shadow: 0 8px 20px rgb(7 29 90 / 8%);
}

.ew-order-success__mark svg {
    width: 62%;
    height: 62%;
}

.ew-order-success__mark circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
}

.ew-order-success__mark path {
    fill: none;
    stroke: var(--ew-electric);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ew-order-success__eyebrow {
    margin-bottom: 0.75rem;
    color: var(--ew-electric);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ew-order-success__title {
    max-width: 680px;
    margin-inline: auto;
    color: var(--ew-navy);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
}

.ew-order-success__order {
    margin-top: 1rem;
    color: var(--ew-navy);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.ew-order-success__order a,
.ew-order-success__order strong {
    color: var(--ew-electric);
    font-weight: 700;
}

.ew-order-success__lead {
    max-width: 620px;
    margin: 1.25rem auto 0;
    color: rgb(7 29 90 / 78%);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.7;
}

.ew-order-success__next {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
    text-align: left;
    background-color: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 18px;
}

.ew-order-success__next-title {
    margin-bottom: 1rem;
    color: var(--ew-navy);
    font-weight: 700;
}

.ew-order-success__next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem;
}

.ew-order-success__next-grid div {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    background-color: var(--ew-shop-bg);
    border: 1px solid var(--ew-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgb(7 29 90 / 6%);
}

.ew-order-success__next-grid span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    background-color: var(--ew-electric);
    border-radius: 9999px;
}

.ew-order-success__next-grid p {
    color: rgb(7 29 90 / 78%);
    font-size: 0.92rem;
    line-height: 1.55;
}

.ew-order-success__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.ew-order-success__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.8rem 1.5rem;
    border: 1px solid var(--ew-navy);
    border-radius: 9999px;
    font-weight: 700;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.ew-order-success__button:hover {
    transform: translateY(-1px);
}

.ew-order-success__button--primary {
    color: #fff;
    background-color: var(--ew-navy);
}

.ew-order-success__button--primary:hover {
    background-color: var(--ew-electric);
    border-color: var(--ew-electric);
}

.ew-order-success__button--ghost {
    color: var(--ew-navy);
    background-color: var(--ew-shop-bg);
}

.ew-order-success__button--ghost:hover {
    background-color: #fff;
}

@media (max-width: 768px) {
    .ew-order-success {
        padding-inline: 1rem !important;
    }

    .ew-order-success__card {
        border-radius: 20px;
    }

    .ew-order-success__next-grid {
        grid-template-columns: 1fr;
    }

    .ew-order-success__actions,
    .ew-order-success__button {
        width: 100%;
    }
}

/* -----------------------------------------------------------------
 * Customer account dashboard (/shop/customer/account)
 * --------------------------------------------------------------- */
.ew-account-dashboard-nav {
    flex-shrink: 0;
}

.ew-account-dashboard {
    min-width: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
}

.ew-account-dashboard__hero {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background:
        radial-gradient(circle at 100% 0%, rgb(22 119 255 / 8%), transparent 38%),
        var(--ew-shop-bg);
    border: 1px solid var(--ew-line);
    border-radius: 22px;
    box-shadow: 0 18px 42px rgb(7 29 90 / 10%);
}

.ew-account-dashboard__eyebrow {
    margin-bottom: 0.45rem;
    color: var(--ew-electric);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ew-account-dashboard__hero h2 {
    color: var(--ew-navy);
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.ew-account-dashboard__hero h2 + p {
    max-width: 48rem;
    margin-top: 0.65rem;
    color: var(--ew-slate);
    line-height: 1.7;
}

.ew-account-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ew-account-dashboard__card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgb(7 29 90 / 7%);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ew-account-dashboard__card:hover {
    border-color: rgb(22 119 255 / 48%);
    box-shadow: 0 14px 34px rgb(7 29 90 / 11%);
    transform: translateY(-1px);
}

.ew-account-dashboard__card > span:first-child {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: var(--ew-navy);
    background-color: var(--ew-mist);
    border: 1px solid var(--ew-line);
    border-radius: 14px;
    font-size: 1.55rem;
}

.ew-account-dashboard__card strong {
    display: block;
    color: var(--ew-navy);
    font-size: 1rem;
    font-weight: 650;
}

.ew-account-dashboard__card small {
    display: block;
    margin-top: 0.25rem;
    color: var(--ew-slate);
    line-height: 1.45;
}

.ew-account-dashboard__logout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background-color: var(--ew-mist);
    border: 1px solid var(--ew-line);
    border-radius: 18px;
}

.ew-account-dashboard__logout strong {
    color: var(--ew-navy);
}

.ew-account-dashboard__logout p {
    margin-top: 0.2rem;
    color: var(--ew-slate);
    font-size: 0.92rem;
}

.ew-account-dashboard__logout a {
    flex-shrink: 0;
    padding: 0.65rem 1.1rem;
    color: var(--ew-navy);
    font-weight: 650;
    border: 1px solid rgb(7 29 90 / 28%);
    border-radius: 9999px;
    background-color: #fff;
}

.ew-account-dashboard__logout a:hover {
    color: var(--ew-electric);
    border-color: rgb(22 119 255 / 48%);
}

@media (max-width: 768px) {
    .ew-account-dashboard {
        margin-top: 1rem;
    }

    .ew-account-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .ew-account-dashboard__logout {
        align-items: stretch;
        flex-direction: column;
    }

    .ew-account-dashboard__logout a {
        text-align: center;
    }
}

/* -----------------------------------------------------------------
 * Customer account sidebar + sub-pages (addresses, wishlist, orders,
 * profile, GDPR, reviews). Adapted from Artisavo patterns.
 * --------------------------------------------------------------- */
.ew-account-nav .hover\:bg-zinc-100:hover {
    background-color: var(--ew-mist) !important;
}

.ew-account-nav .bg-zinc-100 {
    background-color: var(--ew-mist) !important;
    box-shadow: inset 3px 0 0 var(--ew-electric);
}

.ew-account-nav .bg-zinc-100 > p {
    color: var(--ew-navy);
    font-weight: 600;
}

/* Account card avatar: Bagisto sizes it with `h-[60px] w-[60px]`, but the
 * arbitrary `w-[60px]` utility is not in the shop CSS bundle, so the square
 * 200x200 placeholder collapsed to ~45x60 inside the `auto` grid track and
 * `object-fit: fill` distorted it. Force a fixed square + cover so it stays
 * round and undistorted regardless of which Tailwind arbitrary values ship. */
.ew-account-nav img.rounded-full {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px;
    max-width: none !important;
    object-fit: cover !important;
    flex-shrink: 0;
}

/* Branded initial avatar shown when the customer has no uploaded photo
 * (replaces Bagisto's gray user-placeholder.png). Forest disc + cream letter. */
.ew-account-nav .ew-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: linear-gradient(150deg, var(--ew-navy) 0%, var(--ew-navy) 100%);
    color: var(--ew-mist);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    user-select: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* -----------------------------------------------------------------
 * Customer address book (/customer/account/addresses)
 *
 * Scoped to `.ew-address-book`, a small hook in the forked address index.
 * The page should read like the order/profile account area: one clear card
 * per saved address, warm borders, forest headings, and a quiet terracotta
 * default badge. Create/edit forms are unforked; form styling is scoped by
 * the account layout plus the address-form field set.
 * --------------------------------------------------------------- */
.ew-address-book > .flex.items-center.justify-between {
    align-items: flex-start;
    gap: 1rem;
}

.ew-address-book h2 {
    color: var(--ew-navy);
    letter-spacing: -0.01em;
}

.ew-address-book .secondary-button {
    border-color: var(--ew-line) !important;
    background-color: #fff !important;
    color: var(--ew-navy) !important;
    box-shadow: 0 1px 2px rgb(7 29 90, 0.06);
}

.ew-address-book .secondary-button:hover {
    border-color: var(--ew-electric) !important;
    color: var(--ew-electric) !important;
}

.ew-address-book > .grid {
    margin-top: clamp(1.25rem, 4vw, 2.5rem) !important;
}

.ew-address-book > .grid > .p-5.border.rounded-xl {
    min-height: 178px;
    background: #fff;
    border-color: var(--ew-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgb(7 29 90, 0.08);
}

.ew-address-book > .grid > .p-5.border.rounded-xl > .flex {
    gap: 1rem;
}

.ew-address-book > .grid > .p-5.border.rounded-xl p:first-child {
    color: var(--ew-navy);
    font-weight: 650;
}

.ew-address-book > .grid > .p-5.border.rounded-xl p.mt-6 {
    color: var(--ew-slate) !important;
    line-height: 1.7;
}

.ew-address-book .label-pending {
    border: 1px solid rgb(22 119 255, 0.25);
    border-radius: 9999px;
    background-color: rgb(22 119 255, 0.10) !important;
    color: var(--ew-electric) !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ew-address-book .icon-more {
    color: var(--ew-slate) !important;
}

.ew-address-book .icon-more:hover,
.ew-address-book .icon-more:focus {
    background-color: var(--ew-mist) !important;
    color: var(--ew-navy) !important;
}

.ew-address-form h2 {
    color: var(--ew-navy);
    letter-spacing: -0.01em;
}

main:has(.ew-account-nav) form:has(input[name="postcode"]):has(input[name="phone"]),
.ew-address-form form:has(input[name="postcode"]):has(input[name="phone"]) {
    max-width: 760px;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgb(7 29 90, 0.08);
}

main:has(.ew-account-nav) form:has(input[name="postcode"]):has(input[name="phone"]) input,
main:has(.ew-account-nav) form:has(input[name="postcode"]):has(input[name="phone"]) select,
.ew-address-form form:has(input[name="postcode"]):has(input[name="phone"]) input,
.ew-address-form form:has(input[name="postcode"]):has(input[name="phone"]) select {
    border-color: var(--ew-line) !important;
    background-color: #FFFFFF !important;
}

main:has(.ew-account-nav) form:has(input[name="postcode"]):has(input[name="phone"]) input:focus,
main:has(.ew-account-nav) form:has(input[name="postcode"]):has(input[name="phone"]) select:focus,
.ew-address-form form:has(input[name="postcode"]):has(input[name="phone"]) input:focus,
.ew-address-form form:has(input[name="postcode"]):has(input[name="phone"]) select:focus {
    border-color: var(--ew-electric) !important;
    box-shadow: 0 0 0 3px rgb(22 119 255, 0.14) !important;
}

main:has(.ew-account-nav) form:has(input[name="postcode"]):has(input[name="phone"]) .icon-uncheck,
main:has(.ew-account-nav) form:has(input[name="postcode"]):has(input[name="phone"]) .icon-check-box {
    color: var(--ew-navy) !important;
}

@media (max-width: 768px) {
    .ew-address-book {
        min-width: 0;
    }

    .ew-address-book > .flex.items-center.justify-between {
        align-items: center;
    }

    .ew-address-book > .grid > .p-5.border.rounded-xl {
        min-height: 0;
        padding: 1rem !important;
    }

    main:has(.ew-account-nav) form:has(input[name="postcode"]):has(input[name="phone"]) {
        padding: 1rem;
        border-radius: 18px;
    }

    .ew-address-form form:has(input[name="postcode"]):has(input[name="phone"]) {
        padding: 1rem;
        border-radius: 18px;
    }
}

/* -----------------------------------------------------------------
 * Customer profile (/customer/account/profile + /profile/edit)
 *
 * The profile index has a small fork for the `.ew-profile` hook, destructive
 * delete button classes, localized delete modal placeholder, and friendly DOB
 * formatting. The edit form remains upstream; CSS scopes to the account layout
 * plus its profile field set.
 * --------------------------------------------------------------- */
.ew-profile > .flex.items-center.justify-between {
    align-items: flex-start;
    gap: 1rem;
}

.ew-profile h2 {
    color: var(--ew-navy);
    letter-spacing: -0.01em;
}

.ew-profile .secondary-button {
    border-color: var(--ew-line) !important;
    background-color: #fff !important;
    color: var(--ew-navy) !important;
    box-shadow: 0 1px 2px rgb(7 29 90, 0.06);
}

.ew-profile .secondary-button:hover {
    border-color: var(--ew-electric) !important;
    color: var(--ew-electric) !important;
}

.ew-profile > .grid {
    gap: 0 !important;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    background: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgb(7 29 90, 0.08);
}

.ew-profile > .grid > .grid {
    padding-inline: 0 !important;
    padding-block: 1rem !important;
    border-color: var(--ew-line) !important;
}

.ew-profile > .grid > .grid:first-of-type {
    padding-top: 0 !important;
}

.ew-profile > .grid > .grid p:first-child {
    color: var(--ew-navy);
    font-weight: 650;
}

.ew-profile > .grid > .grid p:last-child {
    color: var(--ew-slate) !important;
}

.ew-profile-delete-section {
    margin-top: 1.5rem;
}

.ew-profile-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 1.25rem;
    border: 1px solid var(--ew-danger) !important;
    border-radius: 12px;
    background-color: var(--ew-danger) !important;
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
}

.ew-profile-delete-button:hover {
    background-color: color-mix(in srgb, var(--ew-danger) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--ew-danger) 88%, #000) !important;
    color: #fff !important;
}

.ew-profile-delete-mobile {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 1.25rem;
    border: 1px solid color-mix(in srgb, var(--ew-danger) 28%, #fff);
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--ew-danger) 8%, #fff);
    color: var(--ew-danger) !important;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.ew-profile-delete-mobile:hover {
    background-color: color-mix(in srgb, var(--ew-danger) 14%, #fff);
    border-color: color-mix(in srgb, var(--ew-danger) 42%, #fff);
}

.ew-profile .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ew-danger) 8%, #fff), transparent 38%),
        #fff !important;
    border: 1px solid var(--ew-line);
    border-radius: 20px !important;
    box-shadow: 0 18px 42px rgb(7 29 90, 0.18);
}

.ew-profile .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 .bg-white {
    background: transparent !important;
}

.ew-profile .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 .border-b {
    border-color: var(--ew-line) !important;
}

.ew-profile .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 input[name="password"] {
    border-color: var(--ew-line) !important;
    border-radius: 12px !important;
}

.ew-profile .absolute.left-1\/2.top-1\/2.z-\[999\].bg-zinc-100 input[name="password"]:focus {
    border-color: var(--ew-danger) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ew-danger) 22%, transparent) !important;
}

main:has(.ew-account-nav) form:has(input[name="first_name"]):has(input[name="email"]):has(input[name="current_password"]),
.ew-profile form:has(input[name="first_name"]):has(input[name="email"]) {
    max-width: 760px;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgb(7 29 90, 0.08);
}

main:has(.ew-account-nav) form:has(input[name="first_name"]):has(input[name="email"]):has(input[name="current_password"]) input,
main:has(.ew-account-nav) form:has(input[name="first_name"]):has(input[name="email"]):has(input[name="current_password"]) select,
.ew-profile form:has(input[name="first_name"]):has(input[name="email"]) input,
.ew-profile form:has(input[name="first_name"]):has(input[name="email"]) select {
    border-color: var(--ew-line) !important;
    border-radius: 12px !important;
}

main:has(.ew-account-nav) form:has(input[name="first_name"]):has(input[name="email"]):has(input[name="current_password"]) input:focus,
main:has(.ew-account-nav) form:has(input[name="first_name"]):has(input[name="email"]):has(input[name="current_password"]) select:focus,
.ew-profile form:has(input[name="first_name"]):has(input[name="email"]) input:focus,
.ew-profile form:has(input[name="first_name"]):has(input[name="email"]) select:focus {
    border-color: var(--ew-electric) !important;
    box-shadow: 0 0 0 2px rgb(22 119 255, 0.25) !important;
}

main:has(.ew-account-nav) form:has(input[name="first_name"]):has(input[name="email"]):has(input[name="current_password"]) .text-zinc-500,
.ew-profile form:has(input[name="first_name"]):has(input[name="email"]) .text-zinc-500 {
    color: var(--ew-slate) !important;
}

@media (max-width: 768px) {
    .ew-profile {
        min-width: 0;
    }

    .ew-profile > .flex.items-center.justify-between {
        align-items: center;
    }

    .ew-profile > .grid {
        padding: 1rem;
        border-radius: 18px;
    }

    .ew-profile > .grid > .grid {
        grid-template-columns: 1fr !important;
        gap: 0.35rem;
    }

    .ew-profile-delete-button,
    .ew-profile-delete-mobile {
        width: 100%;
    }

    main:has(.ew-account-nav) form:has(input[name="first_name"]):has(input[name="email"]):has(input[name="current_password"]) {
        padding: 1rem;
        border-radius: 18px;
    }
}

/* -----------------------------------------------------------------
 * Customer wishlist (/customer/account/wishlist)
 *
 * Scoped to `.ew-wishlist`, a hook in the small Vue view fork. The list rows
 * are transactional account cards, not product-grid cards: image, saved item
 * name, price, quantity, move-to-cart, and remove action all live on one
 * surface. The empty state reuses `.ew-empty*`.
 * --------------------------------------------------------------- */
.ew-wishlist > div > .flex.items-center.justify-between {
    align-items: flex-start;
    gap: 1rem;
}

.ew-wishlist h2 {
    color: var(--ew-navy);
    letter-spacing: -0.01em;
}

.ew-wishlist .secondary-button {
    cursor: pointer;
    border-color: var(--ew-line) !important;
    background-color: #fff !important;
    color: var(--ew-navy) !important;
    box-shadow: 0 1px 2px rgb(7 29 90, 0.06);
}

.ew-wishlist .secondary-button:hover {
    border-color: var(--ew-electric) !important;
    color: var(--ew-electric) !important;
}

.ew-wishlist-item {
    margin-top: clamp(1rem, 3vw, 1.5rem) !important;
    gap: 0 !important;
}

.ew-wishlist-card {
    width: 100%;
    padding: clamp(1rem, 2.5vw, 1.25rem) !important;
    background: #fff;
    border: 1px solid var(--ew-line) !important;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgb(7 29 90, 0.08);
}

.ew-wishlist-card img {
    border: 1px solid var(--ew-line);
    background-color: var(--ew-mist);
    object-fit: cover;
}

.ew-wishlist-card p.text-base.font-medium {
    color: var(--ew-navy);
    font-weight: 650;
}

.ew-wishlist-card [v-html],
.ew-wishlist-card .text-lg.font-semibold {
    color: var(--ew-navy);
}

.ew-wishlist-card .text-blue-700,
.ew-wishlist-card a.text-blue-700 {
    color: var(--ew-electric) !important;
    font-weight: 600;
}

.ew-wishlist-card .text-blue-700:hover,
.ew-wishlist-card a.text-blue-700:hover {
    color: var(--ew-cyan) !important;
}

.ew-wishlist-card .icon-bin {
    color: var(--ew-slate);
}

.ew-wishlist-card .icon-bin:hover {
    color: var(--ew-electric);
}

.ew-wishlist-card .rounded-\[54px\].border-navyBlue {
    border-color: var(--ew-line) !important;
    background: var(--ew-mist);
    color: var(--ew-navy);
}

.ew-wishlist-card .primary-button {
    min-width: 150px;
}

@media (max-width: 768px) {
    .ew-wishlist {
        min-width: 0;
    }

    .ew-wishlist > div > .flex.items-center.justify-between {
        align-items: center;
    }

    .ew-wishlist-card {
        gap: 0.75rem !important;
        border-radius: 18px;
    }

    .ew-wishlist-card > .flex {
        min-width: 0;
    }

    .ew-wishlist-card .flex.gap-5 {
        flex-wrap: wrap;
        gap: 0.625rem !important;
    }

    .ew-wishlist-card .primary-button {
        min-width: 0;
    }
}

/* -----------------------------------------------------------------
 * Customer reviews (/customer/account/reviews)
 *
 * Scoped to `.ew-reviews`, a hook in the small account review fork. Review
 * rows are single account cards with a framed product thumbnail, forest title,
 * muted date/comment, and warm stars. The empty state reuses `.ew-empty*`.
 * --------------------------------------------------------------- */
.ew-reviews h2 {
    color: var(--ew-navy);
    letter-spacing: -0.01em;
}

.ew-review-list {
    margin-top: clamp(1rem, 3vw, 1.5rem) !important;
}

.ew-review-list > a {
    display: block;
    color: inherit;
}

.ew-review-card {
    background: #fff;
    border-color: var(--ew-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgb(7 29 90, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.ew-review-list > a:hover .ew-review-card {
    transform: translateY(-1px);
    border-color: rgb(22 119 255, 0.45) !important;
    box-shadow: 0 12px 30px rgb(7 29 90, 0.11);
}

.ew-review-card img,
.ew-review-card picture img {
    border: 1px solid var(--ew-line);
    background-color: var(--ew-mist);
    object-fit: cover;
}

.ew-review-card p.text-xl.font-medium {
    color: var(--ew-navy);
    font-weight: 650;
}

.ew-review-card p.text-sm.font-medium,
.ew-review-card p.font-normal {
    color: #7A8273 !important;
}

.ew-review-card p.text-zinc-500 {
    color: var(--ew-slate) !important;
    line-height: 1.7;
}

.ew-review-card .text-amber-500 {
    color: var(--ew-electric) !important;
}

.ew-review-card .text-zinc-500.icon-star-fill {
    color: rgba(95, 104, 87, 0.28) !important;
}

@media (max-width: 768px) {
    .ew-reviews {
        min-width: 0;
    }

    .ew-review-card {
        border-radius: 18px !important;
    }

    .ew-review-card > .flex {
        min-width: 0;
    }

    .ew-review-card p.text-xl.font-medium {
        line-height: 1.35;
    }
}

/* -----------------------------------------------------------------
 * Customer account orders list (/customer/account/orders)
 *
 * Scoped to `.ew-orders`, a small hook in the order list fork. The desktop
 * view uses Bagisto's shared Vue datagrid, so these selectors warm the table
 * shell without changing the component globally. Mobile uses the fork's
 * `.ew-order-list-card` rows.
 * --------------------------------------------------------------- */
.ew-orders h2 {
    color: var(--ew-navy);
    letter-spacing: -0.01em;
}

.ew-orders .table-responsive {
    background: #fff !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgb(7 29 90, 0.08) !important;
}

.ew-orders .table-responsive > .row:first-child {
    background: var(--ew-mist) !important;
    color: var(--ew-navy) !important;
    border-color: var(--ew-line) !important;
}

.ew-orders .table-responsive > .row:not(:first-child) {
    color: var(--ew-slate) !important;
    border-color: var(--ew-line) !important;
}

.ew-orders .table-responsive > .row:not(:first-child):hover {
    background-color: rgba(247, 245, 242, 0.65) !important;
}

.ew-orders .table-responsive > .row p:first-child,
.ew-orders .table-responsive > .row p:nth-child(3),
.ew-orders .ew-order-list-card .text-xl {
    color: var(--ew-navy) !important;
}

.ew-orders .icon-eye {
    color: var(--ew-slate);
}

.ew-orders .icon-eye:hover {
    color: var(--ew-electric);
    background-color: var(--ew-mist) !important;
}

.ew-orders .label-processing,
.ew-orders .label-active,
.ew-orders .label-pending,
.ew-orders .label-canceled,
.ew-orders .label-closed {
    display: inline-flex !important;
    align-items: center;
    width: max-content;
    border: 1px solid transparent;
    border-radius: 9999px !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

.ew-orders .label-processing,
.ew-orders .label-pending {
    border-color: rgb(22 119 255, 0.25);
    background-color: rgb(22 119 255, 0.10) !important;
    color: var(--ew-electric) !important;
}

.ew-orders .label-active {
    border-color: rgb(7 29 90, 0.25);
    background-color: rgb(7 29 90, 0.10) !important;
    color: var(--ew-navy) !important;
}

.ew-orders .label-canceled,
.ew-orders .label-closed {
    border-color: rgba(95, 104, 87, 0.24);
    background-color: rgba(95, 104, 87, 0.10) !important;
    color: var(--ew-slate) !important;
}

.ew-order-list-card {
    background: #fff !important;
    border-color: var(--ew-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgb(7 29 90, 0.08);
}

.ew-order-list-card:hover {
    border-color: rgb(22 119 255, 0.45) !important;
    background: #fff !important;
}

.ew-order-list-card .text-neutral-500 {
    color: #7A8273 !important;
}

@media (max-width: 768px) {
    .ew-orders {
        min-width: 0;
    }

    .ew-orders-mobile .mt-8.flex {
        margin-top: 0 !important;
    }
}

/* -----------------------------------------------------------------
 * Customer account order detail (/customer/account/orders/{id})
 *
 * Scoped to `.ew-order-detail` — a hook class we add to the order view's
 * content column in the forked
 * resources/themes/default/views/customers/account/orders/view.blade.php.
 * We previously scoped via `:has(.relative.mt-8...border)` (the desktop
 * items table), but that table lives in the Information tab panel, which
 * Bagisto's Vue tabs REMOVE from the DOM when another tab is active — so the
 * whole page reverted to stock styling on tab switch. The `.ew-order-detail`
 * wrapper is always present regardless of the active tab. The orders LIST
 * page does not carry this class, so it stays untouched.
 * --------------------------------------------------------------- */
.ew-order-detail > .flex.items-center.justify-between {
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.ew-order-detail h2 {
    color: var(--ew-navy);
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
}

.ew-order-detail .secondary-button {
    border-color: var(--ew-line) !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 2px rgb(7 29 90, 0.06);
}

.ew-order-detail .secondary-button:hover {
    background-color: var(--ew-mist) !important;
}

/* Tabs: turn the stock gray bar into quiet pills that match account/cart.
 * `width: fit-content` makes the bar hug its tabs — this page usually has a
 * single "Information" tab, and a full-width pill bar around it read as an
 * empty cream block. */
.ew-order-detail .mt-8 > div > .flex.flex-row.justify-center.gap-8.bg-zinc-100 {
    display: inline-flex !important;
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.45rem;
    background-color: var(--ew-mist) !important;
    border: 1px solid var(--ew-line);
    border-radius: 9999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.ew-order-detail .mt-8 > div > .flex.flex-row.justify-center.gap-8.bg-zinc-100 > div {
    border: 0 !important;
    border-radius: 9999px;
    color: rgb(7 29 90, 0.70) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 0.65rem 1rem !important;
}

.ew-order-detail .mt-8 > div > .flex.flex-row.justify-center.gap-8.bg-zinc-100 > div.border-navyBlue {
    color: var(--ew-navy) !important;
    background-color: #fff;
    box-shadow: 0 1px 2px rgb(7 29 90, 0.06);
}

/* Empty-state card for the always-visible Invoices / Shipments / Refunds
 * tabs (see the forked order view + ew-tab-empty.blade.php). The tabs render
 * even when the order has none so customers can always find them (esp.
 * refunds); this is the friendly "nothing here yet" panel. */
.ew-order-detail .ew-order-tab-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    padding: 2rem 1.5rem;
    text-align: center;
    background-color: var(--ew-mist);
    border: 1px dashed var(--ew-line);
    border-radius: 0.875rem;
}

.ew-order-detail .ew-order-tab-empty p {
    margin: 0;
    max-width: 28rem;
    color: rgb(7 29 90, 0.62);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ew-order-detail .max-md\:hidden > .text-base.font-medium {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.25rem;
    padding: 0.45rem 0.8rem;
    color: rgb(7 29 90, 0.76);
    background-color: var(--ew-mist);
    border: 1px solid var(--ew-line);
    border-radius: 9999px;
}

.ew-order-detail .relative.mt-8.overflow-x-auto.rounded-xl.border {
    border-color: var(--ew-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgb(7 29 90, 0.08);
}

.ew-order-detail table {
    background-color: #fff;
}

.ew-order-detail thead {
    color: var(--ew-navy) !important;
    background-color: var(--ew-mist) !important;
}

.ew-order-detail thead th {
    color: var(--ew-navy);
    font-size: 0.78rem;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ew-order-detail tbody tr {
    border-color: var(--ew-line) !important;
}

.ew-order-detail tbody td {
    color: rgb(7 29 90, 0.82);
    line-height: 1.55;
}

.ew-order-detail tbody td[data-value*="Product"],
.ew-order-detail tbody td[data-value*="Producto"] {
    color: var(--ew-navy);
    font-weight: 700;
}

/* Desktop totals rail. */
.ew-order-detail .mt-8.flex.items-start .grid.max-w-max {
    min-width: min(100%, 360px);
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
    color: rgb(7 29 90, 0.78);
    background:
        radial-gradient(circle at 100% 0%, rgb(22 119 255, 0.06), transparent 38%),
        #fff;
    border: 1px solid var(--ew-line);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgb(7 29 90, 0.08);
}

.ew-order-detail .mt-8.flex.items-start .grid.max-w-max > div {
    gap: 2rem;
    padding-block: 0.25rem;
}

.ew-order-detail .mt-8.flex.items-start .grid.max-w-max > div.font-semibold {
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    color: var(--ew-navy);
    border-top: 1px solid var(--ew-line);
    font-size: 1.08rem;
}

.ew-order-detail .mt-8.flex.items-start .grid.max-w-max p:last-child {
    color: var(--ew-navy);
    font-weight: 700;
}

/* -----------------------------------------------------------------
 * Mobile order sections — ONE surface = ONE card (design-system §4).
 *
 * Each mobile section (status card, Item Ordered accordion, Order Summary,
 * Shipping & Payment Details) ships from Bagisto as an outer `bg-gray-100`
 * shell + a header slot + an inner `bg-white` card. Per the design system we
 * card the OUTER shell only and strip the inner slot, so each section reads as
 * one continuous card — never a card-in-a-card — and every section header gets
 * the same transparent + forest treatment (cool gray Bagisto tints removed).
 * --------------------------------------------------------------- */

/* Outer shell = the single card. */
.ew-order-detail .md\:hidden .rounded-lg.border,
.ew-order-detail .md\:hidden .overflow-hidden.rounded-lg,
.ew-order-detail .md\:hidden .w-full.rounded-md.bg-gray-100,
.ew-order-detail .w-full.rounded-md.bg-gray-100.md\:hidden {
    overflow: hidden;
    background-color: #fff !important;
    border: 1px solid var(--ew-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgb(7 29 90, 0.08);
}

/* Section headers (accordion toggle + static section labels): transparent so
 * they read as part of the one card, forest label, consistent across sections. */
.ew-order-detail .md\:hidden .overflow-hidden.rounded-lg .flex.cursor-pointer.select-none,
.ew-order-detail .md\:hidden .w-full.rounded-md.bg-gray-100 > .rounded-t-md,
.ew-order-detail .w-full.rounded-md.bg-gray-100.md\:hidden > .rounded-t-md {
    background-color: transparent !important;
    color: var(--ew-navy);
    font-weight: 600;
}

/* Strip the inner content slots (accordion content wrapper + inner bg-white
 * cards) so there is no card-in-card — content sits directly on the one card. */
.ew-order-detail .md\:hidden .overflow-hidden.rounded-lg .grid.\!bg-gray-100,
.ew-order-detail .md\:hidden .rounded-md.rounded-t-none.border {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ew-order-detail .md\:hidden .text-zinc-500 {
    color: rgb(7 29 90, 0.68) !important;
}

/* Status labels in the order header and mobile status card. */
.ew-order-detail .label-completed,
.ew-order-detail .label-processing,
.ew-order-detail .label-pending,
.ew-order-detail .label-closed,
.ew-order-detail .label-canceled,
.ew-order-detail .label-info {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 0.25rem 0.65rem;
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
}

.ew-order-detail .label-completed,
.ew-order-detail .label-processing {
    color: var(--ew-navy);
    background-color: rgb(7 29 90, 0.08);
}

.ew-order-detail .label-pending,
.ew-order-detail .label-info {
    color: var(--ew-electric);
    background-color: rgb(22 119 255, 0.10);
}

.ew-order-detail .label-closed,
.ew-order-detail .label-canceled {
    color: rgb(7 29 90, 0.62);
    background-color: var(--ew-mist);
}

@media (max-width: 768px) {
    .ew-order-detail {
        margin-inline: 1rem !important;
        min-width: 0;
    }

    .ew-order-detail h2 {
        font-size: 1.25rem !important;
    }

    /* On mobile the account layout row and the order view's inner section both
     * become CSS grids (`max-md:grid`). Their implicit `auto` column expands to
     * the widest child's max-content — the 4-tab pill switcher (~474px) — which
     * pushed the whole order column WIDER than the page header/footer. Force the
     * columns to the container width so the order content lines up with the rest
     * of the page, and let the tab bar wrap to a second row instead of forcing
     * the overflow. (`:has(> .ew-order-detail)` is the account layout row; the
     * `.ew-order-detail` class only exists on this page.) */
    :has(> .ew-order-detail) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ew-order-detail .mt-8.max-md\:grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ew-order-detail .mt-8 > div > .flex.flex-row.justify-center.gap-8.bg-zinc-100 {
        flex-wrap: wrap;
    }
}

/* -----------------------------------------------------------------
 * Customer privacy requests (/customer/account/gdpr)
 *
 * Bagisto exposes this account page as "GDPR Data Requests" with a cold
 * datagrid shell and an upstream breadcrumb typo (`addresses`). The fork adds
 * `.ew-gdpr*` hooks, fixes the breadcrumb, and keeps the datagrid/form routes
 * untouched. This CSS warms the header, action buttons, desktop grid chrome,
 * mobile cards, empty state, and request-status labels.
 * --------------------------------------------------------------- */
.ew-gdpr {
    min-width: 0;
}

.ew-gdpr__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
    padding: clamp(1.15rem, 2.5vw, 1.5rem);
    background:
        radial-gradient(circle at 100% 0%, rgb(22 119 255, 0.08), transparent 40%),
        #fff;
    border: 1px solid var(--ew-line);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgb(7 29 90, 0.08);
}

.ew-gdpr__eyebrow {
    margin-bottom: 0.3rem;
    color: var(--ew-electric);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ew-gdpr h2 {
    color: var(--ew-navy);
    letter-spacing: -0.01em;
}

.ew-gdpr__lead {
    max-width: 42rem;
    margin-top: 0.45rem;
    color: var(--ew-slate);
    line-height: 1.65;
}

.ew-gdpr__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.ew-gdpr__actions .secondary-button {
    border-color: rgb(7 29 90, 0.18) !important;
    background-color: var(--ew-mist);
    color: var(--ew-navy) !important;
    font-weight: 650 !important;
}

.ew-gdpr__actions .secondary-button:hover {
    border-color: rgb(22 119 255, 0.52) !important;
    color: var(--ew-electric) !important;
}

.ew-gdpr__datagrid {
    padding: 1rem;
    background-color: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgb(7 29 90, 0.07);
}

.ew-gdpr__datagrid .label-active,
.ew-gdpr__datagrid .label-processing,
.ew-gdpr__datagrid .label-pending,
.ew-gdpr__datagrid .label-closed,
.ew-gdpr__datagrid .label-canceled,
.ew-gdpr-card .label-active,
.ew-gdpr-card .label-processing,
.ew-gdpr-card .label-pending,
.ew-gdpr-card .label-closed,
.ew-gdpr-card .label-canceled {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 0.25rem 0.65rem;
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
}

.ew-gdpr__datagrid .label-active,
.ew-gdpr__datagrid .label-processing,
.ew-gdpr-card .label-active,
.ew-gdpr-card .label-processing {
    color: var(--ew-navy);
    background-color: rgb(7 29 90, 0.08);
}

.ew-gdpr__datagrid .label-pending,
.ew-gdpr-card .label-pending {
    color: var(--ew-electric);
    background-color: rgb(22 119 255, 0.10);
}

.ew-gdpr__datagrid .label-closed,
.ew-gdpr__datagrid .label-canceled,
.ew-gdpr-card .label-closed,
.ew-gdpr-card .label-canceled {
    color: rgb(7 29 90, 0.62);
    background-color: var(--ew-mist);
}

.ew-gdpr__datagrid form .primary-button,
.ew-gdpr-card form .primary-button,
.ew-gdpr__datagrid button[disabled],
.ew-gdpr-card button[disabled] {
    min-width: 5.5rem;
}

.ew-gdpr-card {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #fff;
    border-color: var(--ew-line) !important;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgb(7 29 90, 0.07);
}

.ew-gdpr-card__row,
.ew-gdpr-card__message {
    display: grid;
    gap: 0.2rem;
}

.ew-gdpr-card__row p,
.ew-gdpr-card__message p {
    color: #6B7464;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ew-gdpr-card__row strong,
.ew-gdpr-card__message strong {
    color: var(--ew-navy);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.45;
}

.ew-gdpr-empty {
    display: grid;
    place-items: center;
    gap: 0.35rem;
    min-height: 12rem;
    padding: 2rem;
    color: var(--ew-slate);
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgb(22 119 255, 0.08), transparent 46%),
        #fff;
    border: 1px dashed rgb(7 29 90, 0.22);
    border-radius: 20px;
}

.ew-gdpr-empty p {
    color: var(--ew-navy);
    font-size: 1.05rem;
    font-weight: 650;
}

@media (max-width: 768px) {
    .ew-gdpr {
        margin-top: 1rem;
    }

    .ew-gdpr__header {
        display: grid;
        gap: 1rem;
    }

    .ew-gdpr__actions {
        justify-content: stretch;
    }

    .ew-gdpr__actions > * {
        flex: 1 1 100%;
        text-align: center;
    }

    .ew-gdpr-card > .flex {
        flex-wrap: wrap;
/* -----------------------------------------------------------------
 * Contact page (/contact-us)
 *
 * Branded support page shell around Bagisto's stock contact form. The form
 * action, validation controls, and captcha behavior remain upstream.
 * --------------------------------------------------------------- */
.ew-contact {
    width: min(1180px, calc(100% - clamp(2rem, 7vw, 7.5rem)));
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.ew-contact__hero {
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    background:
        radial-gradient(circle at 100% 0%, rgb(22 119 255, 0.08), transparent 42%),
        #fff;
    border: 1px solid var(--ew-line);
    border-radius: 32px;
    box-shadow: 0 18px 42px rgb(7 29 90, 0.08);
}

.ew-contact__eyebrow {
    margin: 0 0 0.75rem;
    color: var(--ew-electric);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
}

.ew-contact__title {
    max-width: 800px;
    margin: 0;
    color: var(--ew-navy);
    font-size: clamp(2.35rem, 5vw, 4.75rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.ew-contact__lead {
    max-width: 720px;
    margin: clamp(1rem, 2vw, 1.25rem) 0 0;
    color: rgb(7 29 90, 0.72);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.75;
}

.ew-contact__grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.ew-contact__aside {
    display: grid;
    gap: 1rem;
}

.ew-contact__note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1.1rem;
    background: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 18px;
    box-shadow: 0 8px 20px rgb(7 29 90, 0.06);
}

.ew-contact__note--forest {
    background: var(--ew-navy);
    border-color: var(--ew-navy);
    box-shadow: 0 18px 40px rgb(7 29 90, 0.18);
}

.ew-contact__note-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--ew-electric);
    background: var(--ew-mist);
    border: 1px solid var(--ew-line);
    border-radius: 9999px;
    font-size: 1.25rem;
}

.ew-contact__note-icon svg {
    width: 22px;
    height: 22px;
}

.ew-contact__note h2 {
    margin: 0;
    color: var(--ew-navy);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.ew-contact__note p {
    margin: 0.35rem 0 0;
    color: rgb(7 29 90, 0.68);
    font-size: 0.93rem;
    line-height: 1.65;
}

.ew-contact__note--forest h2,
.ew-contact__note--forest p {
    color: var(--ew-mist);
}

.ew-contact__note--forest p {
    opacity: 0.78;
}

.ew-contact__form-card {
    padding: clamp(1.35rem, 3vw, 2.35rem);
    background: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 22px;
    box-shadow: 0 14px 34px rgb(7 29 90, 0.08);
}

.ew-contact__form-title {
    margin: 0 0 1.35rem;
    color: var(--ew-navy);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ew-contact__form-card label {
    color: var(--ew-navy) !important;
    font-weight: 700 !important;
}

.ew-contact__form-card input,
.ew-contact__form-card textarea {
    background-color: var(--ew-mist) !important;
    border-color: var(--ew-line) !important;
    border-radius: 14px !important;
    color: var(--ew-navy) !important;
    box-shadow: none !important;
}

.ew-contact__form-card input:focus,
.ew-contact__form-card textarea:focus {
    border-color: var(--ew-electric) !important;
    box-shadow: 0 0 0 3px rgb(22 119 255, 0.18) !important;
}

.ew-contact__actions {
    margin-top: 1.5rem;
}

.ew-contact__actions .primary-button {
    min-height: 48px;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px !important;
    font-weight: 700;
}

@media (max-width: 900px) {
    .ew-contact__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .ew-contact {
        width: min(100% - 2rem, 1180px);
        padding-block: 2rem 3rem;
    }

    .ew-contact__hero {
        border-radius: 24px;
    }

    .ew-contact__note,
    .ew-contact__form-card {
        border-radius: 18px;
    }
}

/* -----------------------------------------------------------------
 * CMS/static pages (/page/*)
 *
 * Bagisto's upstream `shop::cms.page` drops raw CMS HTML into a plain
 * container. The theme fork adds `.ew-cms-page*` hooks so footer-linked
 * About/FAQ/policy pages get the same Artisavo shell while the CMS body
 * remains editable in the admin.
 * --------------------------------------------------------------- */
.ew-cms-page {
    width: min(1120px, calc(100% - clamp(2rem, 7vw, 7.5rem)));
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.ew-cms-page__hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    background:
        radial-gradient(circle at 100% 0%, rgb(22 119 255, 0.08), transparent 42%),
        #fff;
    border: 1px solid var(--ew-line);
    border-radius: 32px;
    box-shadow: 0 18px 42px rgb(7 29 90, 0.08);
}

.ew-cms-page__title {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    color: var(--ew-navy);
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.ew-cms-page__lead {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: clamp(1rem, 2vw, 1.25rem) 0 0;
    color: rgb(7 29 90, 0.7);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.75;
}

.ew-cms-page__card {
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
    padding: clamp(1.35rem, 3vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 22px;
    box-shadow: 0 12px 30px rgb(7 29 90, 0.08);
}

.ew-cms-page__content {
    color: rgb(7 29 90, 0.76);
    font-size: 1rem;
    line-height: 1.8;
}

.ew-cms-page__content :where(.static-container, .mb-5) {
    margin: 0 !important;
}

.ew-cms-page__content :where(h1, h2, h3, h4) {
    margin: 1.8em 0 0.65em;
    color: var(--ew-navy);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.ew-cms-page__content :where(h1, h2):first-child,
.ew-cms-page__content :where(.static-container, .mb-5):first-child {
    margin-top: 0 !important;
}

.ew-cms-page__content h2 {
    font-size: clamp(1.55rem, 2vw, 2rem);
}

.ew-cms-page__content h3 {
    font-size: clamp(1.25rem, 1.6vw, 1.55rem);
}

.ew-cms-page__content :where(p, ul, ol, blockquote, table) {
    margin: 1rem 0 0;
}

.ew-cms-page__content :where(ul, ol) {
    padding-inline-start: 1.35rem;
}

.ew-cms-page__content ul {
    list-style: disc;
}

.ew-cms-page__content ol {
    list-style: decimal;
}

.ew-cms-page__content li::marker {
    color: var(--ew-electric);
}

.ew-cms-page__content li + li {
    margin-top: 0.45rem;
}

.ew-cms-page__content a:not(.primary-button):not(.secondary-button) {
    color: var(--ew-electric);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgb(22 119 255, 0.35);
    text-underline-offset: 0.22em;
}

.ew-cms-page__content a:not(.primary-button):not(.secondary-button):hover {
    color: var(--ew-cyan);
    text-decoration-color: currentColor;
}

.ew-cms-page__content :where(.primary-button, .secondary-button, .btn, button) {
    border-radius: 9999px !important;
}

.ew-cms-page__content blockquote {
    padding: 1rem 1.25rem;
    color: var(--ew-navy);
    background: var(--ew-mist);
    border-inline-start: 4px solid var(--ew-electric);
    border-radius: 14px;
}

.ew-cms-page__content table {
    width: 100%;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ew-line);
    border-radius: 16px;
}

.ew-cms-page__content :where(th, td) {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--ew-line);
    text-align: start;
}

.ew-cms-page__content th {
    color: var(--ew-navy);
    background: var(--ew-mist);
    font-weight: 700;
}

.ew-cms-page__content tr:last-child :where(th, td) {
    border-bottom: 0;
}

/* FAQ accordion (native <details>/<summary>, no JS) inside CMS content.
 * Any CMS page can author `<details class="ew-faq">` and inherit this. */
.ew-cms-page__content .ew-faq {
    margin: 0.75rem 0 0;
    background: var(--ew-mist);
    border: 1px solid var(--ew-line);
    border-radius: 16px;
    overflow: hidden;
}

.ew-cms-page__content .ew-faq:first-child {
    margin-top: 0;
}

.ew-cms-page__content .ew-faq > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    color: var(--ew-navy);
    font-size: clamp(1.02rem, 1.5vw, 1.15rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    list-style: none;
    cursor: pointer;
    transition: color 160ms ease;
}

.ew-cms-page__content .ew-faq > summary::-webkit-details-marker {
    display: none;
}

.ew-cms-page__content .ew-faq > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--ew-electric);
    border-bottom: 2px solid var(--ew-electric);
    transform: rotate(45deg);
    transition: transform 200ms ease;
}

.ew-cms-page__content .ew-faq[open] > summary::after {
    transform: rotate(-135deg);
}

.ew-cms-page__content .ew-faq > summary:hover {
    color: var(--ew-electric);
}

.ew-cms-page__content .ew-faq:focus-within {
    border-color: var(--ew-electric);
    box-shadow: 0 0 0 3px rgb(22 119 255, 0.14);
}

.ew-cms-page__content .ew-faq__answer {
    padding: 0 1.25rem 1.15rem;
}

.ew-cms-page__content .ew-faq__answer > :first-child {
    margin-top: 0;
}

@media (max-width: 767px) {
    .ew-cms-page {
        width: min(100% - 2rem, 1120px);
        padding-block: 2rem 3rem;
    }

    .ew-cms-page__hero {
        border-radius: 24px;
    }

    .ew-cms-page__card {
        border-radius: 18px;
    }
}



/* -----------------------------------------------------------------
 * Public vendor shop (/shop/marketplace/{slug})
 * --------------------------------------------------------------- */
.ew-seller-shop {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.ew-seller-shop > .mt-8 > div:first-child {
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 18px 46px rgb(7 29 90 / 10%);
}

.ew-seller-shop > .mt-8 > div:first-child img {
    border-radius: 22px;
}

.ew-seller-shop__name {
    color: var(--ew-navy) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
}

.ew-seller-shop h6.text-base {
    color: var(--ew-slate) !important;
}

.ew-seller-shop .h-20.w-20.rounded-xl {
    border-color: var(--ew-line) !important;
    box-shadow: 0 8px 22px rgb(7 29 90 / 8%);
}

.ew-seller-shop__tabs {
    margin-top: 0.35rem;
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 8%), transparent 42%),
        #fff;
    border-color: var(--ew-line) !important;
    box-shadow: 0 14px 34px rgb(7 29 90 / 7%);
}

.ew-seller-shop__tabs button {
    color: var(--ew-navy);
    font-weight: 700;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ew-seller-shop__tabs button.border-navyBlue,
.ew-seller-shop__tabs button.border.border-navyBlue {
    border-color: var(--ew-electric) !important;
    background: rgb(22 119 255 / 7%);
    color: var(--ew-navy);
}

.ew-seller-shop__tabs input[name="term"] {
    border-color: var(--ew-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: inset 0 1px 0 rgb(7 29 90 / 3%);
}

.ew-seller-shop__tabs input[name="term"]:focus {
    border-color: var(--ew-electric) !important;
    box-shadow: 0 0 0 3px rgb(22 119 255 / 14%);
}

.ew-seller-shop .icon-pen,
.ew-seller-shop [class*="mp-share"],
.ew-seller-shop .rounded-xl.border.border-navyBlue {
    border-color: var(--ew-line) !important;
    border-radius: 999px !important;
    color: var(--ew-navy);
}

.ew-seller-shop .icon-pen:hover,
.ew-seller-shop .rounded-xl.border.border-navyBlue:hover {
    border-color: var(--ew-electric) !important;
    background: rgb(22 119 255 / 6%);
}

.ew-seller-shop .panel-side > div.border-b.border-zinc-200:not(.h-\[50px\]) {
    margin-bottom: 0.95rem;
    overflow: hidden;
    border: 1px solid var(--ew-line) !important;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgb(7 29 90 / 6%);
}

.ew-seller-shop .text-\[\#757575\] {
    color: var(--ew-slate) !important;
}

@media (max-width: 767px) {
    .ew-seller-shop > .mt-8 {
        gap: 1.35rem;
    }

    .ew-seller-shop__tabs {
        padding: 1rem !important;
        border: 1px solid var(--ew-line) !important;
    }

    .ew-seller-shop__tabs .flex.gap-5 {
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .ew-seller-shop__tabs button {
        font-size: 0.92rem;
        padding-inline: 0.85rem;
    }
}



/* -----------------------------------------------------------------
 * Marketplace: product seller policies, seller about, communications
 * ----------------------------------------------------------------- */
/* -----------------------------------------------------------------
 * Marketplace seller policies
 *
 * Product pages need to make vendor-specific shipping/return terms visible
 * before checkout. Seller profile About already owns the full policies;
 * these hooks brand that area and add a compact product-page preview.
 * --------------------------------------------------------------- */
.ew-product-seller-policy {
    display: grid;
    gap: 0.75rem;
    width: min(100%, 430px);
    margin: 0.75rem 0 0.25rem;
    padding: 1rem;
    background:
        radial-gradient(circle at 100% 0%, rgb(22 119 255, 0.07), transparent 42%),
        #fff;
    border: 1px solid var(--ew-line);
    border-radius: 18px;
    box-shadow: 0 8px 20px rgb(7 29 90, 0.08);
}

.ew-product-seller-policy__eyebrow {
    margin: 0;
    color: var(--ew-electric);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.ew-product-seller-policy__item {
    display: grid;
    gap: 0.25rem;
}

.ew-product-seller-policy__label {
    color: var(--ew-navy);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
}

.ew-product-seller-policy__text {
    color: rgb(7 29 90, 0.68);
    font-size: 0.9rem;
    line-height: 1.6;
}

.ew-product-seller-policy__link {
    width: max-content;
    max-width: 100%;
    color: var(--ew-electric) !important;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: underline;
    text-decoration-color: rgb(22 119 255, 0.35);
    text-underline-offset: 0.22em;
}

.ew-product-seller-policy__link:hover {
    color: var(--ew-cyan) !important;
    text-decoration-color: currentColor;
}

.ew-seller-about {
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.ew-seller-about > .max-sm\:hidden {
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 18px;
    box-shadow: 0 8px 20px rgb(7 29 90, 0.06);
}

.ew-seller-about > .max-sm\:hidden span {
    color: rgb(7 29 90, 0.72);
    transition: color 160ms ease;
}

.ew-seller-about > .max-sm\:hidden span:hover,
.ew-seller-about > .max-sm\:hidden span.font-medium {
    color: var(--ew-navy);
}

.ew-seller-about h2 {
    color: var(--ew-navy) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

.ew-seller-about p {
    color: rgb(7 29 90, 0.72);
    line-height: 1.8;
}

.ew-seller-policy {
    scroll-margin-top: 140px;
}

.ew-seller-policy > h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 0.65rem;
    background: var(--ew-electric);
    border-radius: 9999px;
}

.ew-seller-policy p {
    padding: 1rem 1.15rem;
    background: var(--ew-mist);
    border: 1px solid var(--ew-line);
    border-radius: 16px;
}

.ew-seller-policy a {
    color: var(--ew-electric) !important;
    font-weight: 700;
}

@media (max-width: 767px) {
    .ew-product-seller-policy {
        width: 100%;
        border-radius: 16px;
    }

    .ew-seller-about p {
        line-height: 1.7;
    }
}

/* -----------------------------------------------------------------
 * Customer account communications (/customer/account/communications)
 *
 * The Webkul Multi-Vendor seller-messaging page ships stock blue chrome
 * (blue avatars, blue unread badges, blue send button, gray chat.png).
 * Scoped to `.ew-communications`, a hook on the chat-shell wrapper in the
 * marketplace fork
 * (resources/themes/default/views/marketplace/shop/customers/account/communications/index.blade.php).
 * All colour/layout branding lives here so the fork stays a 2-line diff.
 * --------------------------------------------------------------- */
.ew-communications {
    background: #fff !important;
    border-color: var(--ew-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgb(7 29 90, 0.08);
    overflow: hidden;
}

/* Panels + internal dividers */
.ew-communications .bg-white {
    background-color: #fff !important;
}

.ew-communications .border,
.ew-communications .border-r,
.ew-communications .border-b,
.ew-communications .border-t,
.ew-communications .border-gray-200,
.ew-communications input.border {
    border-color: var(--ew-line) !important;
}

/* Neutral text → warm forest/sage */
.ew-communications .text-gray-500,
.ew-communications .text-gray-600,
.ew-communications .text-gray-700,
.ew-communications .text-gray-800 {
    color: #5F6857 !important;
}

.ew-communications h3,
.ew-communications .font-semibold {
    color: var(--ew-navy) !important;
}

/* Avatar fallback initials: forest instead of blue */
.ew-communications .bg-blue-400 {
    background: linear-gradient(135deg, var(--ew-navy), var(--ew-forest-2)) !important;
    color: var(--ew-mist) !important;
    border-color: var(--ew-forest-2) !important;
}

.ew-communications .hover\:bg-blue-500:hover {
    background: var(--ew-forest-2) !important;
}

/* Unread badges (spans) → terracotta accent */
.ew-communications span.bg-blue-600 {
    background-color: var(--ew-electric) !important;
}

.ew-communications .text-blue-600 {
    color: var(--ew-electric) !important;
}

/* Send button (button) → forest primary action */
.ew-communications button.bg-blue-600 {
    background-color: var(--ew-navy) !important;
}

.ew-communications button.bg-blue-600:hover {
    background-color: var(--ew-forest-2) !important;
}

/* Attachment links */
.ew-communications .text-blue-500 {
    color: var(--ew-electric) !important;
}

/* Loading spinners */
.ew-communications .border-blue-500 {
    border-color: var(--ew-electric) !important;
}

.ew-communications .border-r-transparent {
    border-right-color: transparent !important;
}

/* Seller list rows: warm hover + active */
.ew-communications .hover\:bg-gray-100:hover {
    background-color: var(--ew-mist) !important;
}

.ew-communications .bg-gray-200 {
    background-color: rgb(22 119 255, 0.12) !important;
}

/* Search-message highlight */
.ew-communications .bg-yellow-200 {
    background-color: rgb(22 119 255, 0.22) !important;
}

/* Chat bubbles: seller = cream card, customer (own) = forest */
.ew-communications .bg-gray-100 {
    background-color: var(--ew-mist) !important;
    border: 1px solid var(--ew-line);
}

.ew-communications .justify-end .bg-gray-100 {
    background-color: var(--ew-navy) !important;
    border-color: var(--ew-navy) !important;
    color: var(--ew-mist) !important;
}

.ew-communications .justify-end .bg-gray-100 .chat-message,
.ew-communications .justify-end .bg-gray-100 a {
    color: var(--ew-mist) !important;
}

/* Inputs */
.ew-communications input {
    background-color: #fff !important;
}

.ew-communications input:focus {
    border-color: var(--ew-electric) !important;
    box-shadow: 0 0 0 2px rgb(22 119 255, 0.25) !important;
}

/* Settings panel: de-carded section (one surface = one card) */
.ew-comm-settings {
    padding: clamp(1rem, 2.5vw, 1.25rem);
    border-bottom: 1px solid var(--ew-line);
}

/* Seller toggle (below xl): a clear labeled button, not a bare hamburger bar.
 * Inset from the shell edges and offset the content panes below it. */
.ew-communications .ew-comm-seller-toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    top: 0.625rem;
    width: auto !important;
    inset-inline: 0.625rem;
    min-height: 44px;
    padding: 0 0.875rem;
    background: var(--ew-mist);
    border: 1px solid var(--ew-line);
    border-radius: 12px;
    color: var(--ew-navy);
    z-index: 2;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.ew-communications .ew-comm-seller-toggle:hover {
    border-color: var(--ew-electric);
    background: #fff;
}

.ew-comm-seller-toggle__icon {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ew-navy);
}

.ew-comm-seller-toggle__label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ew-navy);
}

.ew-comm-seller-toggle__chevron {
    margin-inline-start: auto;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ew-electric);
}

@media (max-width: 1279px) {
    .ew-communications .ew-comm-pane {
        margin-top: 64px !important;
    }
}

/* Branded empty illustration (replaces gray chat.png) */
.ew-comm-empty-illo {
    display: grid;
    place-items: center;
    width: clamp(120px, 28vw, 156px);
    aspect-ratio: 1 / 1;
    margin-bottom: 0.5rem;
    color: var(--ew-navy);
    background:
        radial-gradient(circle at 16% 12%, rgb(22 119 255, 0.07) 0%, transparent 44%),
        var(--ew-mist);
    border: 1px solid var(--ew-line);
    border-radius: 28px;
    box-shadow: 0 18px 40px -26px rgb(7 29 90, 0.35);
}

.ew-comm-empty-illo svg {
    width: 58%;
    height: 58%;
}

/* -----------------------------------------------------------------
 * Bagisto image carousel — branded hero overlay (admin-configured)
 * ----------------------------------------------------------------- */
.ew-hero {
    background-color: var(--ew-mist);
}
.ew-hero__slide {
    position: relative;
    overflow: hidden;
}
.ew-hero__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgb(7 29 90, 0.62) 0%,
        rgb(7 29 90, 0.38) 35%,
        rgb(7 29 90, 0.05) 65%,
        rgb(7 29 90, 0) 100%
    );
}
.ew-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}
.ew-hero__inner {
    pointer-events: auto;
    margin-left: clamp(1.25rem, 6vw, 5rem);
    max-width: min(46%, 38rem);
    color: var(--ew-mist);
}
.ew-hero__eyebrow {
    margin: 0 0 0.6rem 0;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ew-mist);
    opacity: 0.92;
}
.ew-hero__title {
    margin: 0;
    font-size: clamp(1.6rem, 3.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--ew-mist);
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.18);
}
.ew-hero__cta {
    display: inline-block;
    margin-top: 1.4rem;
    padding: 0.75rem 1.6rem;
    border-radius: 9999px;
    background-color: var(--ew-mist);
    color: var(--ew-navy);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ew-hero__cta:hover,
.ew-hero__cta:focus-visible {
    background-color: var(--ew-electric);
    color: var(--ew-mist);
    transform: translateY(-1px);
}

.ew-hero__dot {
    background-color: rgb(242 244 248, 0.45);
    transition: background-color 0.15s ease;
}
.ew-hero__dot--active {
    background-color: var(--ew-mist);
}

/*
 * Cap the hero height on desktop. The slide image is aspect-driven
 * (2.743:1) with no ceiling, so on wide monitors it grows to ~600-700px
 * and pushes the Featured Products row well below the fold. Capping the
 * height keeps the hero short enough that products surface with minimal
 * scroll; object-fit: cover crops the photo cleanly on wide screens.
 * Phones/tablets keep their own height rule in the max-width block below.
 */
@media (min-width: 769px) {
    .ew-hero__slide img {
        max-height: 440px;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    .ew-hero__slide img {
        aspect-ratio: auto !important;
        height: clamp(260px, 72vw, 340px) !important;
        object-fit: cover;
    }

    .ew-hero__overlay {
        align-items: flex-start;
        padding-top: 1.4rem;
    }

    .ew-hero__inner {
        max-width: 78%;
        margin-left: 1.25rem;
    }

    .ew-hero__eyebrow {
        margin-bottom: 0.35rem;
        font-size: 0.68rem;
    }

    .ew-hero__title {
        font-size: clamp(1.25rem, 7vw, 1.65rem);
        line-height: 1.1;
    }

    .ew-hero__cta {
        margin-top: 0.9rem;
        padding: 0.6rem 1.1rem;
        font-size: 0.85rem;
        line-height: 1;
    }

    .ew-hero__slide::before {
        background: linear-gradient(
            180deg,
            rgb(7 29 90, 0.78) 0%,
            rgb(7 29 90, 0.55) 35%,
            rgb(7 29 90, 0.10) 75%,
            rgb(7 29 90, 0) 100%
        );
    }
}

/* -----------------------------------------------------------------
 * Seller portal — authenticated vendor dashboard (/seller/*)
 * All-navy wordmark, Plus Jakarta Sans, navy/electric tokens only.
 * ----------------------------------------------------------------- */
/* Font stack inherited from global body * override above; keep explicit hook for
   any seller-only typography tweaks. */
.ew-seller-portal,
.ew-seller-portal #app {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

.ew-seller-portal {
    background-color: var(--ew-shop-bg);
    color: var(--ew-ink);
}

.ew-seller-header {
    border-color: var(--ew-line) !important;
    background-color: #fff !important;
}

.ew-seller-portal .ew-wordmark--vendor .ew-wordmark__image {
    height: 1.65rem;
    max-width: 11rem;
}

.ew-seller-main {
    background:
        radial-gradient(circle at 8% 0%, rgb(39 215 255 / 6%), transparent 24rem),
        #fff !important;
}

.ew-seller-portal nav .group\/item.active > a {
    background-color: rgb(22 119 255 / 8%) !important;
    color: var(--ew-navy) !important;
}

.ew-seller-portal nav .group\/item.active .mp-arrow-right-icon,
.ew-seller-portal nav a.text-navyBlue {
    color: var(--ew-electric) !important;
}

.ew-seller-portal nav a:hover,
.ew-seller-portal .ew-seller-header .hover\:bg-gray-100:hover {
    background-color: var(--ew-mist) !important;
}

.ew-seller-portal .ew-seller-header [class*="mp-"],
.ew-seller-portal .ew-seller-header .icon-users,
.ew-seller-portal .ew-seller-header .icon-hamburger {
    color: var(--ew-navy);
}

.ew-seller-portal .bg-blue-500 {
    background-color: var(--ew-electric) !important;
}

.ew-seller-portal .bg-blue-50 {
    background-color: rgb(22 119 255 / 8%) !important;
}

.ew-seller-portal .border-blue-500,
.ew-seller-portal .border-l-4.border-blue-500 {
    border-color: var(--ew-electric) !important;
}

.ew-seller-portal .text-blue-600,
.ew-seller-portal a.text-blue-600,
.ew-seller-portal .hover\:text-blue-600:hover {
    color: var(--ew-electric) !important;
}

.ew-seller-portal .text-blue-700,
.ew-seller-portal .hover\:text-blue-700:hover {
    color: var(--ew-cyan) !important;
}

.ew-seller-portal .fixed.border-r.border-t.border-gray-200 {
    border-color: var(--ew-line) !important;
}

.ew-seller-portal .fixed.border-r {
    border-color: var(--ew-line) !important;
}

.ew-seller-portal .journal-scroll .inactive.active > a,
.ew-seller-portal .journal-scroll .active > a {
    background-color: rgb(22 119 255 / 8%);
    color: var(--ew-navy);
}

.ew-seller-portal .journal-scroll a:hover {
    background-color: var(--ew-mist);
}

.ew-seller-portal .primary-button,
.ew-seller-portal button.primary-button {
    background-color: var(--ew-electric) !important;
    border-color: var(--ew-electric) !important;
}

.ew-seller-portal .primary-button:hover {
    background-color: var(--ew-cyan) !important;
    color: var(--ew-navy) !important;
}

.ew-seller-portal .box-shadow,
.ew-seller-portal .rounded-xl.border,
.ew-seller-portal .rounded-lg.border {
    border-color: var(--ew-line);
}

.ew-seller-portal input:focus,
.ew-seller-portal select:focus,
.ew-seller-portal textarea:focus {
    border-color: var(--ew-electric) !important;
    box-shadow: 0 0 0 1px rgb(22 119 255 / 20%);
}

/* Sidebar — active rail, icons, submenu flyouts */
.ew-seller-portal .ew-seller-sidebar {
    background-color: #fff;
}

.ew-seller-portal .ew-seller-sidebar__nav .group\/item.active > a {
    box-shadow: inset 3px 0 0 var(--ew-electric);
    font-weight: 600;
}

.ew-seller-portal .ew-seller-sidebar__nav .group\/item.active > a [class*="icon-"],
.ew-seller-portal .ew-seller-sidebar__nav .group\/item.active > a [class*="mp-"] {
    color: var(--ew-electric);
}

.ew-seller-portal .ew-seller-sidebar__nav a:hover {
    background-color: var(--ew-mist) !important;
}

.ew-seller-portal .ew-seller-sidebar__nav .bg-gray-100 {
    background-color: var(--ew-mist) !important;
    border-color: var(--ew-line);
}

.ew-seller-portal .ew-seller-sidebar__nav .border-gray-300 {
    border-color: var(--ew-line) !important;
}

.ew-seller-portal .ew-seller-sidebar__collapse {
    color: var(--ew-navy);
}

.ew-seller-portal .ew-seller-sidebar__collapse [class*="mp-"] {
    color: var(--ew-electric);
}

/* Mobile drawer nav */
.ew-seller-portal .ew-seller-drawer .active > a {
    background-color: rgb(22 119 255 / 8%);
    color: var(--ew-navy);
    box-shadow: inset 3px 0 0 var(--ew-electric);
}

.ew-seller-portal .ew-seller-drawer a:hover {
    background-color: var(--ew-mist) !important;
}

.ew-seller-portal .ew-seller-drawer .bg-gray-100 {
    background-color: var(--ew-mist) !important;
}

/* Dashboard + content cards */
.ew-seller-portal .ew-seller-main .rounded-xl.border,
.ew-seller-portal .ew-seller-main .rounded-lg.border {
    border-color: var(--ew-line) !important;
    box-shadow: 0 1px 3px rgb(7 29 90 / 5%);
}

.ew-seller-portal .ew-seller-main h3.text-navyBlue,
.ew-seller-portal .ew-seller-main .text-navyBlue {
    color: var(--ew-navy) !important;
}

.ew-seller-portal .ew-seller-main .text-gray-800,
.ew-seller-portal .ew-seller-main .text-gray-600 {
    color: var(--ew-ink);
}

.ew-seller-portal .ew-seller-main .text-\[\#757575\],
.ew-seller-portal .ew-seller-main .text-\[\#6E6E6E\],
.ew-seller-portal .ew-seller-main .text-\[\#060C3B\] {
    color: var(--ew-slate) !important;
}

.ew-seller-portal .ew-seller-main .hover\:bg-gray-100:hover {
    background-color: var(--ew-mist) !important;
}

/* Secondary actions */
.ew-seller-portal .secondary-button {
    border-color: var(--ew-line) !important;
    color: var(--ew-navy) !important;
    background-color: #fff !important;
}

.ew-seller-portal .secondary-button:hover {
    background-color: var(--ew-mist) !important;
    border-color: var(--ew-electric) !important;
    color: var(--ew-navy) !important;
}

/* Datagrids (orders, products, etc.) */
.ew-seller-portal .table-responsive.box-shadow {
    border-color: var(--ew-line) !important;
    box-shadow: 0 1px 3px rgb(7 29 90 / 5%) !important;
}

.ew-seller-portal .row.grid.bg-zinc-100 {
    background-color: var(--ew-mist) !important;
    border-color: var(--ew-line) !important;
    color: var(--ew-navy) !important;
}

.ew-seller-portal .row.grid.border-zinc-200 {
    border-color: var(--ew-line) !important;
}

.ew-seller-portal .row.grid:not(.bg-zinc-100):hover {
    background-color: rgb(22 119 255 / 4%);
}

.ew-seller-portal .rounded-xl.border.border-gray-300,
.ew-seller-portal .border-gray-300 {
    border-color: var(--ew-line) !important;
}

.ew-seller-portal input.border-gray-300,
.ew-seller-portal select.border-gray-300,
.ew-seller-portal textarea.border-gray-300 {
    border-color: var(--ew-line) !important;
}

.ew-seller-portal input.border-gray-300:focus,
.ew-seller-portal select.border-gray-300:focus,
.ew-seller-portal textarea.border-gray-300:focus {
    border-color: var(--ew-electric) !important;
}

/* Profile score ring — use brand electric at completion */
.ew-seller-portal .text-green-500 {
    color: var(--ew-electric) !important;
}

.ew-seller-portal .bg-\[\#10B981\] {
    background-color: var(--ew-electric) !important;
}

/* Breadcrumbs */
.ew-seller-portal .ew-seller-main a.text-blue-600,
.ew-seller-portal .ew-seller-main .text-blue-600 {
    color: var(--ew-electric) !important;
}

/* -----------------------------------------------------------------
 * Search results page
 * --------------------------------------------------------------- */
.ew-search__head h2 {
    color: var(--ew-navy);
    letter-spacing: -0.02em;
}

.ew-search__suggest {
    color: var(--ew-slate);
}

.ew-search__suggest button {
    color: var(--ew-electric);
}

.ew-search__suggest button:hover {
    color: var(--ew-cyan);
}

.ew-search__results .ew-listing-toolbar {
    margin-top: 0.5rem;
}

/* -----------------------------------------------------------------
 * Seller portal — profile, settings, and form panels
 * --------------------------------------------------------------- */
.ew-seller-portal .ew-seller-main .rounded-xl.border.bg-white.p-5,
.ew-seller-portal .ew-seller-main .box-shadow.rounded-xl {
    border-color: var(--ew-line) !important;
    background:
        radial-gradient(circle at 100% 0%, rgb(39 215 255 / 7%), transparent 38%),
        #fff !important;
    box-shadow: 0 12px 30px rgb(7 29 90 / 6%);
}

.ew-seller-portal .ew-seller-main .rounded-xl.border.bg-white.p-5 > p.font-semibold,
.ew-seller-portal .ew-seller-main .text-2xl.font-medium {
    color: var(--ew-navy) !important;
}

.ew-seller-portal .bg-blue-50.border-l-4.border-blue-500 {
    border-left-color: var(--ew-electric) !important;
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgb(39 215 255 / 10%), transparent 42%),
        #fff !important;
    box-shadow: 0 12px 30px rgb(7 29 90 / 6%);
}

.ew-seller-portal .ew-seller-header .icon-search,
.ew-seller-portal .ew-seller-header [class*="mp-search"] {
    color: var(--ew-slate);
}

.ew-seller-portal .ew-seller-header input[type="search"],
.ew-seller-portal .ew-seller-header input[type="text"] {
    border-color: var(--ew-line) !important;
    border-radius: 13px;
}

.ew-seller-portal .ew-seller-header input:focus {
    border-color: var(--ew-electric) !important;
    box-shadow: 0 0 0 3px rgb(22 119 255 / 12%);
}

.ew-seller-portal .ew-seller-main .rounded.border.bg-gray-100 {
    border-color: var(--ew-line) !important;
    background-color: var(--ew-mist) !important;
    color: var(--ew-navy) !important;
}

.ew-seller-portal .ew-seller-main .border-gray-200,
.ew-seller-portal .ew-seller-main .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--ew-line) !important;
}

.ew-seller-portal .ew-seller-main .bg-gray-50,
.ew-seller-portal .ew-seller-main .hover\:bg-gray-50:hover,
.ew-seller-portal .ew-seller-main .hover\:bg-gray-100:hover {
    background-color: var(--ew-mist) !important;
}

.ew-seller-portal .ew-seller-main .text-gray-800,
.ew-seller-portal .ew-seller-main .font-semibold.text-gray-800 {
    color: var(--ew-navy) !important;
}

.ew-seller-portal .ew-seller-main .text-gray-600 {
    color: var(--ew-slate) !important;
}

.ew-seller-portal .ew-seller-main .text-navyBlue,
.ew-seller-portal .ew-seller-main a.text-navyBlue {
    color: var(--ew-electric) !important;
}

.ew-seller-portal .ew-seller-main .icon-delete,
.ew-seller-portal .ew-seller-main .icon-edit,
.ew-seller-portal .ew-seller-main [class*="icon-"] {
    color: var(--ew-navy);
}

.ew-seller-portal .ew-seller-main .label-active,
.ew-seller-portal .ew-seller-main .peer:checked ~ .icon-radio-selected {
    color: var(--ew-electric) !important;
}

@media (max-width: 768px) {
    .ew-search__head h2 {
        font-size: 1.05rem;
    }

    .ew-search__results .ew-empty {
        margin-top: 0.5rem;
    }
}