/* ************ 19/11/2020 ************ */
/* .main-menu .nav-top {
    background: #021a48;
} */
.top-bar {
    border-bottom: 1px solid #111;
    background-color: #111;
}
.top-bar .navbar-nav .nav-item .nav-link {
    color: #fff;
}
.top-bar .navbar-nav .nav-item .nav-link i {
    color: #fff;
}
.navbar.navbar-light.navbar-expand {
    border-top: 1px solid #ebebeb;
}
.nav-top {
    padding: 30px 0;
}
.nav-main .navbar ul .nav-item .nav-link {
    padding: 8px 10px;
}
.section-banner {
    padding: 20px 0;
    background: #233a65;
}
.story-meta a, .story-meta span, .story-meta h3,.story-meta p {
    color: #fff;
}
a.story-action.btn.btn-default {
    background: #0F5A3A;
    padding: .540rem 1.6rem;
}
h3.story-title {
    font-size: 40px;
}

/* Native controls do not consistently inherit the page font across browsers. */
button, input, select, textarea { font-family: inherit; }
.story-meta {
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
}
.section-categories {
    margin-top: 30px;
    margin-bottom: 10px;
}

/*.main-menu .nav-top .top-search-bar .search-select button.btn.dropdown-toggle {
    background: #0F5A3A;
    border-color: #0F5A3A;
    color: #fff;
}
.main-menu .nav-top .nav-top-right ul li a, .main-menu .nav-top .nav-top-right ul li a i {
    color: #fff;
}
.nav-top .nav-top-right .nav li a:hover {
    color: #fff !important;
}*/
.nav-top .nav-top-right .nav li a.btn.btn-md.btn-custom {
    background-color: #0F5A3A!important;
}
.section-slider .caption button.btn.btn-slider {
    background: #0F5A3A !important;
    border-color: #0F5A3A !important;
}
.scrollup i {
    background-color: #0F5A3A;
}
#footer .newsletter .newsletter-inner button.btn.btn-default {
    background: #0F5A3A;
    color: #fff;
}
/* ═════════════════════════════════════════════════════════════════
 * User Dashboard — /dashboard
 * ═════════════════════════════════════════════════════════════════ */
.sfy-dash-greet {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 0 20px;
    flex-wrap: wrap;
}
.sfy-dash-greet__title {
    font-family: inherit;
    font-size: 32px;
    font-weight: 700;
    color: #0F5A3A;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.sfy-dash-greet__sub {
    color: #5F6368;
    font-size: 14px;
    margin: 0;
}
.sfy-dash-greet__ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.sfy-dash-greet__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}
.sfy-btn-secondary {
    background: #fff;
    color: #0F5A3A;
    border: 1.5px solid #0F5A3A;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.sfy-btn-secondary:hover {
    background: #0F5A3A;
    color: #fff;
    text-decoration: none;
}

/* Stat tiles — 2 or 4 across depending on vendor state */
.sfy-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
.sfy-dash-stat {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 18px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #222;
    transition: box-shadow 0.15s, transform 0.15s;
}
.sfy-dash-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 90, 58, 0.08);
    text-decoration: none;
    color: #222;
}
.sfy-dash-stat__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.sfy-dash-stat--emerald .sfy-dash-stat__icon { background: #E6F1EA; color: #0F5A3A; }
.sfy-dash-stat--amber   .sfy-dash-stat__icon { background: #FBEEDA; color: #C89A3D; }
.sfy-dash-stat--rose    .sfy-dash-stat__icon { background: #FDE3E3; color: #C84A4A; }
.sfy-dash-stat--sky     .sfy-dash-stat__icon { background: #E3EEF7; color: #3B7BB3; }
.sfy-dash-stat__body { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sfy-dash-stat__num {
    font-size: 24px;
    font-weight: 800;
    color: #222;
    letter-spacing: -0.02em;
}
.sfy-dash-stat__label {
    font-size: 12.5px;
    color: #5F6368;
    margin-top: 2px;
}
@media (max-width: 991px) { .sfy-dash-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 475px) { .sfy-dash-stats { grid-template-columns: 1fr; } }

.sfy-dash-section { margin-bottom: 28px; }
.sfy-dash-section__title {
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

/* Quick action rows */
.sfy-dash-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.sfy-dash-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    text-decoration: none;
    color: #222;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.sfy-dash-action:hover {
    border-color: #0F5A3A;
    box-shadow: 0 4px 14px rgba(15, 90, 58, 0.08);
    text-decoration: none;
    color: #222;
}
.sfy-dash-action__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F0F7F3;
    color: #0F5A3A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}
.sfy-dash-action__icon > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    font-size: 18px;
}

/* Uniform icon centering across every round holder on the dashboard —
 * the icon-font metric leaves the glyph baseline off-center inside
 * flex containers, so we force each <i> to fill and center itself. */
.sfy-dash-stat__icon > i,
.sfy-dash-service__icon > i,
.sfy-dash-activity__icon > i,
.sfy-srv-list__icon > i,
.sfy-dash-panel__title > i,
.sfy-dash-alert > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 100%;
    height: 100%;
}
.sfy-dash-action__icon--gold { background: #FBEEDA; color: #C89A3D; }
.sfy-dash-action > div { flex: 1; min-width: 0; }
.sfy-dash-action strong {
    display: block;
    font-size: 15px;
    color: #222;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
}
.sfy-dash-action span {
    display: block;
    font-size: 13px;
    color: #5F6368;
    line-height: 1.35;
}
.sfy-dash-action__chevron {
    color: #C89A3D;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.sfy-dash-action:hover .sfy-dash-action__chevron { transform: translateX(3px); }
@media (max-width: 767px) { .sfy-dash-actions { grid-template-columns: 1fr; } }

/* 2-column dashboard grid — Active Requests + Purchases on row 1,
 * My Furniture + Recent Activity on row 2 (mockup layout). */
.sfy-dash-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.sfy-dash-grid > .sfy-dash-panel { margin-bottom: 0; height: 100%; }
@media (max-width: 991px) {
    .sfy-dash-grid { grid-template-columns: 1fr; }
}

/* Panel cards on the dashboard (My Furniture / Purchases / etc.) */
.sfy-dash-panel {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
}
.sfy-dash-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.sfy-dash-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.01em;
}
.sfy-dash-panel__title i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F0F7F3;
    color: #0F5A3A;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfy-dash-panel__link {
    color: #0F5A3A;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}
.sfy-dash-panel__link:hover { color: #0A442C; text-decoration: none; }

.sfy-dash-listings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sfy-dash-listing {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    background: #FAF8F4;
    border-radius: 10px;
    transition: background 0.15s;
}
.sfy-dash-listing:hover { background: #F5EFE1; }
/* 2026-09-06 Peter: wrappers around the thumbnail and title
 * so the whole row deep-links to the specific item/order.
 * These are transparent anchor shells — they inherit color
 * from their child and don't add layout on their own. */
.sfy-dash-listing__thumb-link {
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
    text-decoration: none;
}
.sfy-dash-listing__thumb-link:hover { text-decoration: none; }
.sfy-dash-listing__title-link,
.sfy-dash-listing__order-link {
    color: inherit;
    text-decoration: none;
}
.sfy-dash-listing__title-link:hover,
.sfy-dash-listing__order-link:hover {
    color: #0F5A3A;
    text-decoration: none;
}
.sfy-dash-listing__thumb {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ECE7DA;
}
.sfy-dash-listing__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.sfy-dash-listing__title {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sfy-dash-listing__status {
    font-size: 12px;
    font-weight: 600;
}
.sfy-dash-listing__status--active  { color: #0F5A3A; }
.sfy-dash-listing__status--pending { color: #C89A3D; }
.sfy-dash-listing__status--hidden  { color: #8a8a8a; }
.sfy-dash-listing__status--ready   { color: #0F5A3A; font-weight: 700; }
/* Purchase card — Order # eyebrow + View Order secondary link
 * (Peter 2026-09-03). Eyebrow renders above the product title in
 * the same __title block; View Order sits below the status. */
.sfy-dash-listing__order {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #5F6368;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.sfy-dash-listing__view-order {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    color: #0F5A3A;
    font-weight: 600;
}
.sfy-dash-listing__view-order:hover { text-decoration: underline; color: #0F5A3A; }
.sfy-dash-listing__view-order .icon-arrow-right { font-size: 10px; }
.sfy-dash-listing__id {
    font-weight: 500;
    font-size: 12px;
    color: #8a8a8a;
    margin-left: 4px;
}
.sfy-dash-listing__meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b6b6b;
    margin-top: 3px;
}
.sfy-dash-listing__meta i { color: #C89A3D; font-size: 12px; }
.sfy-dash-listing--empty { opacity: 0.85; }
.sfy-dash-listing--soon  { opacity: 0.75; }
.sfy-dash-listing__soon-badge {
    background: #FBEEDA;
    color: #7a5f20;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* "Ready to Complete" highlight row inside the Purchases card */
.sfy-dash-listing--highlight {
    background: #FBEEDA;
    border: 1px solid #E8D3A4;
}
.sfy-dash-listing--highlight:hover { background: #F5E5C2; }

/* Alert bar at the top of the Purchases card when items need action */
.sfy-dash-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #FBEEDA;
    border: 1px solid #E8D3A4;
    border-radius: 10px;
    margin-bottom: 12px;
}
.sfy-dash-alert > i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #C89A3D;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfy-dash-alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sfy-dash-alert__body strong {
    font-size: 14px;
    font-weight: 700;
    color: #7a5f20;
    margin-bottom: 2px;
}
.sfy-dash-alert__body span {
    font-size: 12.5px;
    color: #7a5f20;
    opacity: 0.85;
}
.sfy-dash-alert__count {
    background: #C84A4A;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Purchase-row CTAs — pill styles matching sfy-btn-primary/secondary
 * but at the compact row size so they don't dominate the listing. */
.sfy-dash-listing__cta.sfy-btn-primary,
.sfy-dash-listing__cta.sfy-btn-secondary {
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.sfy-dash-listing__cta {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 8px;
    flex-shrink: 0;
    text-decoration: none;
}

/* Empty state inside a panel */
.sfy-dash-empty {
    text-align: center;
    padding: 24px 20px;
    color: #5F6368;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.sfy-dash-empty > i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F0F7F3;
    color: #0F5A3A;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sfy-dash-empty p { margin: 0; font-size: 14px; }
.sfy-dash-empty .sfy-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
}

/* Recent Activity feed (Purchases card / dashboard) */
.sfy-dash-activity {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.sfy-dash-activity__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #F5EFE1;
}
.sfy-dash-activity__item:first-child { border-top: 0; padding-top: 4px; }
.sfy-dash-activity__item:last-child  { padding-bottom: 4px; }
.sfy-dash-activity__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.sfy-dash-activity__icon--emerald { background: #E6F1EA; color: #0F5A3A; }
.sfy-dash-activity__icon--gold    { background: #FBEEDA; color: #C89A3D; }
.sfy-dash-activity__icon--sky     { background: #E3EEF7; color: #3B7BB3; }
.sfy-dash-activity__icon--rose    { background: #FDE3E3; color: #C84A4A; }
.sfy-dash-activity__title {
    flex: 1;
    min-width: 0;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}
.sfy-dash-activity__title:hover { color: #0F5A3A; text-decoration: none; }
.sfy-dash-activity__time {
    font-size: 12px;
    color: #8a8a8a;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Explore Services — 4 compact service tiles */
.sfy-dash-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.sfy-dash-service {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    text-decoration: none;
    color: #222;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
    position: relative;
}
.sfy-dash-service:hover {
    border-color: #0F5A3A;
    box-shadow: 0 4px 14px rgba(15, 90, 58, 0.08);
    transform: translateY(-2px);
    text-decoration: none;
    color: #222;
}
.sfy-dash-service--soon { opacity: 0.72; }
.sfy-dash-service--soon:hover {
    /* Still lift on hover so it's discoverable, but no colored border */
    border-color: #ECE7DA;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}
.sfy-dash-service--soon::after {
    content: attr(title);
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #C89A3D;
}
.sfy-dash-service__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.sfy-dash-service__icon--emerald { background: #E6F1EA; color: #0F5A3A; }
.sfy-dash-service__icon--sky     { background: #E3EEF7; color: #3B7BB3; }
.sfy-dash-service__icon--rose    { background: #FDE3E3; color: #C84A4A; }
.sfy-dash-service__icon--amber   { background: #FBEEDA; color: #C89A3D; }
.sfy-dash-service__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.sfy-dash-service__body strong {
    font-size: 14px;
    color: #222;
    font-weight: 700;
    margin-bottom: 2px;
}
.sfy-dash-service__body span {
    font-size: 12px;
    color: #5F6368;
    line-height: 1.35;
}
.sfy-dash-service__chevron {
    color: #C89A3D;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.sfy-dash-service:hover .sfy-dash-service__chevron { transform: translateX(3px); }
@media (max-width: 1199px) { .sfy-dash-services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .sfy-dash-services { grid-template-columns: 1fr; } }

/* Getting started card */
.sfy-dash-start {
    background: #F5EFE1;
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 28px;
}
.sfy-dash-start__title {
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.sfy-dash-start__lead {
    font-size: 14px;
    color: #5F6368;
    margin: 0 0 14px;
}
.sfy-dash-start__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sfy-dash-start__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.sfy-dash-start__list li i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0F5A3A;
    color: #fff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfy-dash-start__list a {
    color: #222;
    text-decoration: none;
    font-weight: 500;
}
.sfy-dash-start__list a:hover { color: #0F5A3A; text-decoration: underline; }

/* ═════════════════════════════════════════════════════════════════
 * /service-requests
 * ═════════════════════════════════════════════════════════════════ */
.sfy-srv-lead {
    font-size: 15px;
    color: #5F6368;
    margin: 8px 0 20px;
    line-height: 1.5;
}
.sfy-srv-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sfy-srv-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: #FAF8F4;
    border-radius: 10px;
    transition: background 0.15s;
}
.sfy-srv-list__item:hover { background: #F5EFE1; }
.sfy-srv-list__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #E6F1EA;
    color: #0F5A3A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.sfy-srv-list__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.sfy-srv-list__body strong {
    font-size: 14px;
    font-weight: 700;
    color: #222;
}
.sfy-srv-list__summary {
    font-size: 13px;
    color: #4a4a4a;
}
.sfy-srv-list__meta {
    font-size: 12px;
    color: #8a8a8a;
}

/* Coming-soon panels (Delivery / Cleaning / Removal) */
.sfy-srv-panel--soon { opacity: 0.75; }
.sfy-srv-panel__soon {
    background: #FBEEDA;
    color: #7a5f20;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    margin-left: 8px;
}
.sfy-srv-panel__lead {
    margin: 0;
    color: #5F6368;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 4px 6px 6px;
}
.sfy-srv-panel .sfy-dash-panel__title i.sfy-dash-service__icon--sky   { background: #E3EEF7; color: #3B7BB3; }
.sfy-srv-panel .sfy-dash-panel__title i.sfy-dash-service__icon--rose  { background: #FDE3E3; color: #C84A4A; }
.sfy-srv-panel .sfy-dash-panel__title i.sfy-dash-service__icon--amber { background: #FBEEDA; color: #C89A3D; }

/* ═════════════════════════════════════════════════════════════════
 * Flat sidebar (dashboard mockup style) — brand block at top,
 * flat nav items, unread badge on Messages.
 * ═════════════════════════════════════════════════════════════════ */
.sfy-account-nav--flat .sfy-account-nav__brand {
    display: block;
    padding: 20px 20px 22px;
    border-bottom: 1px solid #ECE7DA;
    text-decoration: none;
    color: inherit;
    margin-bottom: 8px;
}
.sfy-account-nav--flat .sfy-account-nav__brand:hover {
    text-decoration: none;
    color: inherit;
}
.sfy-account-nav--flat .sfy-account-nav__brand img {
    display: block;
    max-width: 150px;
    max-height: 48px;
    width: auto;
    height: auto;
    margin-bottom: 4px;
}
.sfy-account-nav--flat .sfy-account-nav__brand-tag {
    display: block;
    font-size: 12px;
    color: #C89A3D;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.sfy-account-nav--flat .sfy-account-nav__list {
    list-style: none;
    padding: 0 8px;
    margin: 0;
}
/* Section header — pure typographic divider. No border, no
 * background — just a small ALL-CAPS grey label with breathing room
 * above it. The empty space is what separates the group, not a
 * horizontal rule. */
.sfy-account-nav--flat .sfy-account-nav__section {
    display: block;
    padding: 4px 12px 4px;
    margin-top: 14px;
    list-style: none;
    background: transparent;
    border: 0;
}
.sfy-account-nav--flat .sfy-account-nav__section > span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #a3a3a3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
}
/* First section sits right under Home — a touch less top margin so
 * the sidebar doesn't feel top-heavy. */
.sfy-account-nav--flat .sfy-account-nav__section:first-of-type {
    margin-top: 10px;
}
.sfy-account-nav--flat .sfy-account-nav__item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    font-size: 15px;
    color: #4a4a4a;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s;
}
.sfy-account-nav--flat .sfy-account-nav__item > a > i {
    width: 22px;
    text-align: center;
    color: #5F6368;
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
}
.sfy-account-nav--flat .sfy-account-nav__item > a > span:not(.sfy-account-nav__badge):not(.sfy-nav-badge-new) {
    flex: 1;
}
.sfy-account-nav--flat .sfy-account-nav__item > a:hover {
    background: #F5EFE1;
    color: #0F5A3A;
}
.sfy-account-nav--flat .sfy-account-nav__item > a:hover > i {
    color: #0F5A3A;
}
.sfy-account-nav--flat .sfy-account-nav__item.is-active > a {
    background: #E6F1EA;
    color: #0F5A3A;
    font-weight: 700;
}
.sfy-account-nav--flat .sfy-account-nav__item.is-active > a > i {
    color: #0F5A3A;
}
.sfy-account-nav--flat .sfy-account-nav__badge {
    background: #0F5A3A;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
}
.sfy-account-nav--flat .sfy-account-nav__divider { display: none; }
.sfy-account-nav--flat .sfy-account-nav__item--logout {
    margin-top: 10px;
    border-top: 1px solid #ECE7DA;
    padding-top: 6px;
}
.sfy-account-nav--flat .sfy-account-nav__item--logout > a {
    color: #C84A4A;
}
.sfy-account-nav--flat .sfy-account-nav__item--logout > a > i {
    color: #C84A4A;
}

/* Sidebar bottom CTAs (Sell Furniture + Request Service pill pair
 * sitting between the nav items and Logout). */
.sfy-account-nav__ctas {
    list-style: none;
    padding: 10px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.sfy-account-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.2;
}
.sfy-account-nav__cta i { font-size: 13px; }
.sfy-account-nav__cta--primary {
    background: #0F5A3A;
    color: #fff;
    border: 1.5px solid #0F5A3A;
}
.sfy-account-nav__cta--primary:hover {
    background: #0A442C;
    border-color: #0A442C;
    color: #fff;
    text-decoration: none;
}
.sfy-account-nav__cta--outline {
    background: #fff;
    color: #0F5A3A;
    border: 1.5px solid #ECE7DA;
}
.sfy-account-nav__cta--outline:hover {
    background: #F5EFE1;
    border-color: #0F5A3A;
    color: #0F5A3A;
    text-decoration: none;
}

/* ═════════════════════════════════════════════════════════════════
 * Context tab bar (Purchases / My Furniture)
 * ─────────────────────────────────────────────────────────────────
 * Rendered at the top of the buyer's my_orders / my_offers pages
 * (and the seller's own profile page) whenever the URL carries
 * ?ctx=purchases or ?ctx=my_furniture. Gives the flat sidebar item
 * a real landing surface with its peer sections as tabs, instead
 * of nesting children in the drawer.
 * ═════════════════════════════════════════════════════════════════ */
.sfy-ctx-tabs {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
}
.sfy-ctx-tabs__title {
    font-size: 12px;
    font-weight: 700;
    color: #a3a3a3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.sfy-ctx-tabs__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sfy-ctx-tabs__item > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a;
    background: #F7F4EC;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.sfy-ctx-tabs__item > a:hover {
    background: #ECE5D2;
    color: #0F5A3A;
    text-decoration: none;
}
.sfy-ctx-tabs__item.is-active > a {
    background: #0F5A3A;
    color: #fff;
    font-weight: 600;
}
.sfy-ctx-tabs__item.is-active > a:hover {
    background: #0A442C;
    color: #fff;
}
.sfy-ctx-tabs__item.is-disabled > a {
    background: transparent;
    color: #a3a3a3;
    cursor: default;
    border-color: #ECE7DA;
}
.sfy-ctx-tabs__item.is-disabled > a:hover {
    background: transparent;
    color: #a3a3a3;
}
.sfy-ctx-tabs__soon {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #C89A3D;
    background: #FDF7E7;
    padding: 2px 7px;
    border-radius: 999px;
}

/* Nested sub-tab row (We Sell for You ▸ Listings / Drafts).
 * Sits directly under the primary tab list; visible only when the
 * active tab has children. Same pill vocabulary, but muted so the
 * hierarchy reads. */
.sfy-ctx-tabs__sublist {
    list-style: none;
    padding: 10px 0 0;
    margin: 10px 0 0;
    border-top: 1px dashed #ECE7DA;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sfy-ctx-tabs__subitem > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #5F6368;
    background: #fff;
    border: 1px solid #ECE7DA;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.sfy-ctx-tabs__subitem > a:hover {
    background: #F5EFE1;
    color: #0F5A3A;
    border-color: #E4D9B8;
    text-decoration: none;
}
.sfy-ctx-tabs__subitem.is-active > a {
    background: #E6F1EA;
    color: #0F5A3A;
    border-color: #0F5A3A;
    font-weight: 600;
}

/* My Furniture / Purchases context — tighten the top of any account
 * page where the breadcrumb + h1 are suppressed. The tab bar takes
 * over as the top-of-page nav, so we don't want the wrapper padding
 * that Modesy adds for public pages. */
.container.sfy-profile-mf,
.container.sfy-ctx-tight {
    padding-top: 4px;
}
#header.sfy-header--slim ~ #wrapper:has(.sfy-ctx-tight),
#header.sfy-header--slim ~ #wrapper:has(.sfy-profile-mf) {
    padding-top: 0;
}

/* ═════════════════════════════════════════════════════════════════
 * Slim-header pages — trim the top gap between the site header
 * and the page's first real content. Modesy's defaults were tuned
 * for the roomy public shell (30px breadcrumb padding, 30px
 * page-title margin, 15px wrapper padding = ~80px of dead space
 * before the h1). On the account area we want to drop the user
 * into their content faster.
 *
 * Uses the `#header.sfy-header--slim ~ #wrapper` sibling combinator
 * so it only affects account/slim pages — the homepage and any
 * public shell keeps its original breathing room.
 * ═════════════════════════════════════════════════════════════════ */
#header.sfy-header--slim ~ #wrapper {
    padding-top: 4px;
}
#header.sfy-header--slim ~ #wrapper .nav-breadcrumb {
    padding-bottom: 8px;
}
#header.sfy-header--slim ~ #wrapper .breadcrumb {
    padding: 4px 0;
    margin-bottom: 0;
}
#header.sfy-header--slim ~ #wrapper .page-title {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 22px;
    line-height: 1.25;
}
/* Also tighten the dashboard greeting + any first section on the
 * account layout so there's no double-padding stacking with the
 * wrapper padding above. */
#header.sfy-header--slim ~ #wrapper .sfy-dash-greet {
    padding-top: 10px;
}
#header.sfy-header--slim ~ #wrapper .sfy-account-layout__main > :first-child {
    margin-top: 0;
}
/* Extra tightening on mobile where every pixel helps */
@media (max-width: 767px) {
    #header.sfy-header--slim ~ #wrapper {
        padding-top: 0;
    }
    #header.sfy-header--slim ~ #wrapper > .container {
        padding-top: 0;
    }
    #header.sfy-header--slim ~ #wrapper .nav-breadcrumb {
        padding-bottom: 4px;
    }
    #header.sfy-header--slim ~ #wrapper .page-title {
        margin-bottom: 10px;
        font-size: 19px;
    }
    /* Collapse the first-child sidebar column so its Bootstrap
     * default padding doesn't push the main content down. */
    #header.sfy-header--slim ~ #wrapper .sfy-account-layout > [class^="col-"]:first-child {
        padding: 0 !important;
    }
    #header.sfy-header--slim ~ #wrapper .sfy-dash-greet {
        padding-top: 8px;
    }
}
@media (max-width: 575px) {
    .sfy-ctx-tabs { padding: 12px 12px; margin-bottom: 14px; }
    .sfy-ctx-tabs__list { gap: 5px; }
    .sfy-ctx-tabs__item > a { padding: 8px 12px; font-size: 13.5px; }
}

/* Sidebar tweaks for the new flat items */
.sfy-account-nav__divider {
    height: 1px;
    background: #ECE5D4;
    margin: 8px 12px;
    list-style: none;
    padding: 0;
}
.sfy-account-nav__item .sfy-account-nav__count {
    margin-left: auto;
    color: #8a8a8a;
    font-size: 12px;
    font-weight: 500;
}
.sfy-account-nav__item .sfy-nav-badge-new {
    margin-left: 8px;
}

/* Legacy dark footer bg + white text — kept for any admin/error
 * templates that still render the pre-redesign footer, but disarmed
 * for the redesigned footer (which uses the .sfy-footer class). */
#footer:not(.sfy-footer) {
    background-color: #111;
}
#footer:not(.sfy-footer) .footer-title,
#footer:not(.sfy-footer) .nav-footer ul li a,
#footer:not(.sfy-footer) .footer-social-links ul li a {
    color: #fff;
}
/* Redesigned footer: force the light cream background regardless of
 * the id-selector cascade. Also whitens the bottom bar area line +
 * copyright text since they sit on the dark green stripe. */
#footer.sfy-footer { background-color: #FAF8F4; }
#footer.sfy-footer .sfy-footer-bottom { background-color: #0C3A2A; }
.nav-mobile-header-container .mobile-cart .notification {
    background-color: #0F5A3A;
}
#navMobile .nav-mobile-inner .mobile-nav-buttons .btn-custom,.nav-mobile .nav-mobile-footer ul li .rss {
    background: #0F5A3A;
    border-color: #0F5A3A;
}
.main-slider-nav .prev, .main-slider-nav .next {
    background-color: #0F5A3A;
}
button.prev.slick-arrow i.icon-arrow-left, button.next.slick-arrow i.icon-arrow-right {
    color: #fff;
}
.blog-content .blog-categories .active a {
    background-color: #0F5A3A !important;
}
.btn-custom {
    background-color: #0F5A3A !important;
    border-color: #0F5A3A !important;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active {
    background-color: #f78325!important;
    border-color: #f78325!important;
}
.nav-main .navbar>.navbar-nav>.nav-item:hover .nav-link:before {
    background-color: #0F5A3A !important;
}
.btn-filter-price {
    background-color: #0F5A3A;
    color: #fff;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #0F5A3A !important;
    border-color: #0F5A3A;
}
.product-sort-by .sort-select .dropdown-toggle {    
    border: 1px solid #0F5A3A;
    color: #0F5A3A;
}
.filter-item .price-filter-inputs .price-filter-input:focus {
    border-color: #0F5A3A !important;
}
.mega-menu .menu-subcategories .second-category:hover {
    border-color: #0F5A3A;
}
.form-control:focus {
    border-color: #0F5A3A !important;
}
.product-content-details .price .discount-rate {
    background-color: #fff !important;
    color: rgb(144, 144, 144) !important;
    font-size: 12px;
    font-weight: 600;
}
.product-item .item-details .item-meta span.float-right {
    color: rgb(144, 144, 144);
    font-size: 12px;
    font-weight: 600;
}
.btn-block{
    background-color: #0F5A3A !important;
}
.product-share ul li a:hover {
    color: #0F5A3A !important;
}
.btn-wishlist .icon-heart {
    color: #0F5A3A !important;
}
.form-control:focus {
    border-color: #0F5A3A;
}
.product-slider-nav .prev, .product-slider-nav .next {
    background-color: #0F5A3A;
}
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #0F5A3A !important;
    background-color: #0F5A3A !important;
}
.nav-item-cart a .notification {
    background-color: #0F5A3A;
}
/* .number-spinner .btn-spinner-minus {
    border-right: 1px solid #0F5A3A;
    color: #0F5A3A;
}
.number-spinner .btn-spinner-plus {
    border-left: 1px solid #0F5A3A;
    color: #0F5A3A;
}
.number-spinner {
    border: 1px solid #0F5A3A;
} */
.section-subscription {
    background-color: #d1d673;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 0;
}
.section-subscription .newsletter {
    width: 50%;
    margin: auto;
}
.section-subscription button.btn.btn-default {
    background: #0F5A3A;
    color: #fff;
    border-color: #0F5A3A;
    border-radius: 0 3px 3px 0;
}
.section-subscription input.form-control {
    border-radius: 0;
}
.section-subscription input.form-control {
    border-color: #fff;
    border-radius: 3px 0 0 3px;
}
.section-subscription .d-table-cell {
    width: 100%;
}
.section-subscription .footer-title {
    margin-bottom: 20px;
}
.section-feture-main {
    background-color: #2e5167;
}
.section-feture-main .section-categories .title, .section-feture-main .section-categories .title-exp {
    color: #fff;
}
.section-ourclient {
    background-color: #2e5167;
    /*padding: 60px 0;*/
    padding: 45px 0;
    margin-bottom: -100px;
}

.section-ourclient .title, .section-ourclient .title-exp {
    color: #fff;
    text-align: center;
}
.section-ourclient ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
    margin: auto;
}
.section-ourclient .title {
    color: #fff;
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
}
.subscribe-text {
    margin-bottom: 0;
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: .03em;
}
.section-ourclient ul li {
    display: inline-block;
    padding: 10px 15px;
    vertical-align: middle;
}
.section-blog {
    margin-bottom: 40px !important;
    margin-top: 30px !important;
}
.week-preview .featured-categories .card.lazyloaded {
    height: 200px;
    width: 16.4%;
}
.shop-by-category .featured-categories .card.lazyloaded {
    height: 200px;
    width: 16.4%;
}
.section-banner .banner-left img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.week-preview .featured-categories .card-columns,.shop-by-category .featured-categories .card-columns {
    -webkit-column-count: unset;
    -moz-column-count: 3;
    column-count: unset;
    -webkit-column-gap: unset;
    -moz-column-gap: unset;
    column-gap: unset;
    orphans: unset;
    widows: unset;
}
.shop-by-category {
    margin-top: 0;
}
.section-blog .title-exp {
    margin-bottom: 20px;
}
/*
#footer .footer-bottom {
    background-color: #111;
}
.footer-bottom>.container {
    border-top: 1px solid #acacac;
}
.footer-soc-icons {
    float: right;
    text-align: right;
}*/

/***************************** 26/11/2020 ***************************/
fieldset.price-fields .input-group span.input-group-addon {
    padding: 6px 12px;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-right: 0;
    border-radius: 0.25rem 0 0 0.25rem;
}
.input-group-addon-lot-type:not(:empty)::before {
    content: '/';
}
.input-group-addon-lot-type {
    display: table-cell;
    /*width: 47px;*/
    white-space: nowrap;
    vertical-align: middle;
    padding: 6px 12px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0 0.25rem 0.25rem 0;
    background: #fff;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none;
    color: #acacac;
    font-size: 14px;
    padding-left: 0;
}
.form-control.with-input-group-suffix {
    background: #fff;
    border-right: none;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.form-control.with-input-group-suffix:focus {
    border-color: #ced4da !important;
}
#offer_price-error
{
    display: inline-block!important;
    position: absolute;
    margin-top: 35px;
}
li.nav-item.m-r-0 .dropdown-content a {
    border-bottom: 1px solid #e6e6e6;
}
li.nav-item.m-r-0 .dropdown-content a:hover {
    background: #0F5A3A;
    color: #fff !important;
}
li.nav-item.m-r-0 a.dropbtn {
    padding: .540rem 1.6rem;
    line-height: 1.5;
    border-radius: .1875rem;
    font-weight: 400;
    outline: 0!important;
    font-size: 14px;
}
/********************** sell page ******************************/
.wraper-bg {
    position: relative;
    text-align: center;
    background: #0F5A3A;
    padding: 46px 0;
    margin: 40px 0;
}
.wrapper-inner h1 {
    padding: 0 20px;
    font-size: 36px;
    max-width: 660px;
    line-height: 38px;
    text-align: center;
    margin: 0 auto 30px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 1.5px;
}
.wrapper-inner span {
    margin: 0 20px;
}
.wrapper-inner button.btn.btn-slider {
    color: #0F5A3A;
    background-color: #fff;
}
.wrapper-inner button span {
    text-transform: uppercase;
}
.how-it-works .slide-title {
    text-align: center;
}
.how-it-works .inner-title {
    font-size: 18px;
    text-align: center;
}
.how-it-works p.inner-text {
    font-size: 16px;
    text-align: center;
}
.how-it-works .next-arrow {
    width: 35px;
    height: 35px;
}
.how-it-works .slide-arrow {
    top: 50%;
}
.how-it-works a.faq-btn {
    color: rgb(244 113 7);
    letter-spacing: 0.5px;
    font-weight: bold;
}
.how-it-works .slider {
    text-align: center;
}
.how-it-works .row .col-md-6 #money_slide {
    background: #fff;
    text-align: center;
    width: 100%;
    max-width: 430px;
    margin: 20px auto;
}
.col-md-6.left-slider {
    background: #233a6526;
    padding: 50px;
}
.left-slider .slider {
    background: #fff;
    padding: 190px 0;
}
.bgimage {
    background-repeat: no-repeat;
    background-size: cover;
}
.img-section img {
    max-width: 100%;
}
.top-pick {
    margin-top: 46px;
    margin-bottom: 50px;
}
.top-pick .slide-title {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 0;
}
.top-pick .next-arrow {
    /*right: -15px;*/
    right: -25px;
}
.top-pick .prev-arrow {
    /*left: -15px;*/
    left: -25px;
}
.top-pick .slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.top-pick .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.top-pick .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.top-pick .slick-dots li button:before {
    font-family: 'slick';
    font-size: 33px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.top-pick .slick-dots li.slick-active button:before {
    opacity: 9;
    color: #0F5A3A;
}
.toppik-prod-title {
    font-size: 16px;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 8px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toppik-prod-title:hover {
    color: #0F5A3A;
}
.top-pick p.retail-pr {
    color: rgb(144, 144, 144);
    font-size: 12px;
    font-weight: 600;
}
.top-pick p.offer-pr {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}
.item:focus {
    outline: 0;
}
.img-section:hover .product-item-options .item-option {
    opacity: 1;
}
.top-pick .product-item-options {
    right: 15px;
}
.top-pick .product-item-options i.icon-heart-o {
    color: #0F5A3A;
}
ul.shop-category {
    list-style: none;
    padding: 0;
    width: 100%;
    text-align: center;
}
ul.shop-category li {
    display: inline-block;   
    text-align: center;
    /*float: left;*/
    width: 16.66666667%;
    margin-bottom: 10px;
}
.shop-category-imgtitle span {
    padding: 15px 0;
    display: block;
}
.shop-category-image {
    width: 100%;
    margin: auto;
    position: relative;
}
.shop-category-image img {
    max-width: 100%;
    margin: auto;
}

.shop-category-main {
    margin-top: 30px;
    /*margin-bottom: 50px;*/
    display: inline-block;
}
.cat-title {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}
ul.shop-category li:hover {
    -webkit-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear;
    opacity: .65;
}
.top-pick #money_slide_2 .img-section img {
    object-fit: cover;
    width: 100%;
    height: 355px;
    max-height: 355px;
}
#new_arrivals .img-section img {
    height: 263px;
    max-height: 263px;
    width: 100%;
    object-fit: cover;
    max-width: 100%;
    margin: auto;
}
#wrapper {
    min-height: auto !important;
    padding-top: 15px;
}
.new-arivals .product-item-options {
    right: 15px;
}
.section.new-arivals {
    margin-bottom: 37px;
}
#footer .footer-top {
    padding: 45px 0 !important;
}
.section.new-arivals .next-arrow {
    /*right: -15px;*/
    right: -25px;
}
.section.new-arivals .prev-arrow {
    /*left: -15px;*/
    left: -25px;
}

.category-banners__heading {
    color: #3e3e3e;
    font-size: 1.875rem;
    position: absolute;
    left: 1.5rem;
    top: 1.5rem;
    font-weight: 600;
}
.category-banners__list {
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    padding: 0;
}
.category-banners__item {
    box-shadow: 0 0 0.625rem 0 rgb(0 0 0 / 8%);
    margin-bottom: 20px;
}
.position-relative {
    position: relative!important;
}
.category-banners__cta {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
}
.category-banners__item img {
    max-width: 100%;
    object-fit: cover;
    height: 100%;
    width: 100%;
}


/*.category-banners__item:nth-child(4) {*/
    /*grid-row: 6/span 4;*/
/*}*/
/*.category-banners__item:nth-child(3) {*/
    /*grid-row: 5/span 5;*/
/*}*/
/*.category-banners__item:nth-child(2) {*/
    /*grid-row: 1/span 5;*/
/*}*/
/*.category-banners__item:first-child {*/
    /*grid-row: 1/span 4;*/
/*}*/
/*.category-banners__list {*/
    /*max-width: none;*/
    /*display: grid;*/
    /*grid-template-columns: repeat(2,1fr);*/
    /*grid-template-rows: repeat(9,auto);*/
    /*grid-gap: 20px;*/
/*}*/
/*.category-banners__item {*/
    /*margin-bottom: 0;*/
/*}*/
#blog-slider-nav button.prev.slick-arrow i.icon-arrow-left, #blog-slider-nav button.next.slick-arrow i.icon-arrow-right {
    color: #0F5A3A;
}
.category-banners__cta {
    background: #0F5A3A;
    border-color: #0F5A3A;
    color: #fff;
    padding: 10px 20px;
    font-size: 20px;
}
.category-banners__cta:hover {
    background: #0F5A3A;
    border-color: #0F5A3A;
    color: #fff;
}
.product-add-to-cart-container .button-container {
    width: 47.5% !important;
}

.product-add-to-cart-container .cart-button-container {
    width: 47.5% !important;
}

.product-item-options .item-option .icon-heart-o {
    color: #0F5A3A;
}
.cust-title {
    display: block;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

#header {
    position: sticky;
    transition: all .3s ease;
    box-shadow: rgb(0 0 0 / 15%) 0px 2px 4px 0px;
}
#header.hide {
    top: -190px;
}
.profile-tab-content {
    margin-bottom: 20px;
}
.profile-dropdown .dropdown-menu li a {
    white-space: normal;
}
.profile-dropdown .dropdown-menu .dropdown {
    width: 100%;
    padding-right: 0 !important;
}
.profile-dropdown .dropdown-menu .dropdown a.nav-link.dropdown-toggle {
    display: block;
    width: -webkit-fill-available;
    margin: 2px 4px;
    padding: 4px 15px;
    line-height: 24px;
}
.profile-dropdown .dropdown-menu li {
    width: 100%;
    display: inline-block;
}
.profile-dropdown .dropdown-menu .dropdown .dropdown-menu li:last-child {
    border-top: 0;
}
.top-bar .navbar-nav .submenu-dropdown .nav-link i {
    color: #888;
}
.profile-dropdown .submenu
{
    position: absolute;
    top: 0px;
    left: auto!important;
    right: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.top-bar .col-right .navbar-nav .submenu-dropdown
{
    border: none;
}

.nav-mobile .profile-dropdown.submenu-dropdown .icon-arrow-down
{
    position: absolute;
    right: 0;
    color: #222!important;
}
.nav-mobile .profile-dropdown .submenu
{
    left: 25px!important;
    right: 0;
}
.sell-main h2 {
    text-align: center;
    color: #ffff;
    display: block;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.26;
    margin: auto auto 30px;
}
.col-md-6.sell-main {
    padding: 0 50px;
}
.sell-main-inner {
    position: relative;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
}
.sell-main p {
    text-align: center;
}
.col-md-12.sell-main {
    padding: 100px 35px;
}
.container-fluid.how-it-work {
    background-color: rgb(244, 245, 247);
    padding: 100px 0;
}
.how-it-work .col-md-4 {
    text-align: center;
    padding: 20px;
}
.work-image.col-md-12 {
    margin-bottom: 20px;
}
.how-it-work .col-md-4 h4 {
    font-weight: 600;
}
.work-image.col-md-12 img {
    height: 70px;
    width: 70px;
}
.start-sell {
    padding: 44px;
    text-align: center;
}
.start-sell button {
    background: #0F5A3A;
    width: 33%;
}
.start-sell button:hover {
    color: #fff;
}
.col-md-6.rigth-content h4.slide-title {
    padding-bottom: 20px;
}
.col-md-6.rigth-content p {
    font-size: 16px;
}
.col-md-6.rigth-content h4.slide-title, .col-md-6.rigth-content p {
    max-width: 415px;
    margin: auto;
}
.sell .left-slider .slider {
    background: #fff;
    padding: 100px 0;
}
.col-md-6.rigth-content {
    background-color: rgb(248, 245, 242);
    padding-top: 222px;
}
.have-quest {
    padding-top: 100px;
    padding-bottom: 50px;
}
.titl-p {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
}
.titl-p a span {
    color: #0F5A3A;
    margin: 0 5px;
}
.inner-how-it-work .col-md-6{
    vertical-align: top;
    width: 240px;
}
.quest-inner {
    background-color: rgb(244, 245, 247);
    text-align: center;
    padding: 50px;
    display: inline-block;
    min-height: 277px;
}

.quest-inner h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.have-quest .inner-how-it-work {
    max-width: 62%;
    margin: auto;
    text-align: center;
}
.quest-inner p {
    font-size: 16px;
}
.col-md-12.redy-to {
    text-align: center;
    padding: 50px 0;
    background-color: rgb(244, 245, 247);
    margin: 50px 0;
}
.col-md-12.redy-to .faq-btn {
    color: #0F5A3A;
    letter-spacing: 0.5px;
    font-weight: bold;
}
.col-md-12.redy-to img {
    height: 75px;
    width: 75px;
}
.col-md-12.redy-to h3 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
}
.inner-how-it-work .col-md-4 h4 {
    font-size: 18px;
}
.sell-top-banner {
    background: #0F5A3A;
}
.mony-back-inner {
    width: 100%;
    max-width: 1000px;
    margin: 50px auto 0;
    padding: 50px 15px;
    text-align: center;
    background: rgb(244, 245, 247);
}
.mony-back-inner img {
    margin: auto auto 20px;
}
.mony-back-inner h4 {
    margin-bottom: 20px;
}
.mony-back-inner p {
    max-width: 527px;
    margin: auto;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 400;
}
.money_back {
    /*padding: 80px 15px;*/
}
.mony-back-inner img {
    margin: auto auto 20px;
    max-width: 50px !important;
}
.mony-back-inner a {
    color: rgb(255, 127, 90);
    letter-spacing: 0.5px;
    font-weight: bold;
    font-size: 15px;
}
.money_back .got_question {
    width: 100%;
    max-width: 768px;
    margin: 50px auto 0;
    padding: 30px 0;
    text-align: center;
}
.money_back .got_question a {
    color: rgb(255, 127, 90);
    letter-spacing: 0.5px;
    font-weight: bold;
}
.mony-back-inner.toptex h4 {
    font-size: 24px;
    font-weight: 600;
}
.mony-back-inner.toptex {
    padding: 50px 25px;
}
.mony-back-inner.toptex img {
    max-width: unset !important;
}




/******************* Drop down *********************/
li.nav-item.m-r-0.cust-dropdwn:hover a.dropbtn:hover {
    color: #fff;
}

.cust-dropdwn .dropbtn {
    background-color:#0F5A3A;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.cust-dropdwn .dropdown {
    position: relative;
    display: inline-block;
}

.cust-dropdwn .dropdown-content {
    display: none;
    position: absolute;
    background-color:white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top: 29px;
}

.cust-dropdwn .dropdown-content a {
    color: black;
    padding: 7px 15px;
    text-decoration: none;
    display: block;
}
li.nav-item.m-r-0.cust-dropdwn .dropdown:hover .dropdown-content {
    display: block;
}
.cust-dropdwn .dropdown-content a:hover {background-color: ;}
.cust-dropdwn .dropdown:hover .dropbtn {background-color: #0F5A3A;}

/***************** sell page **************************/
.zipcode-section h4 {
    margin-bottom: 20px;
    font-size: 1.5rem;
}
.zipcode-section p {
    font-size: 14px;
    color: rgb(159, 162, 170);
    margin-top: 5px;
}
.Deliveryzip {
    max-width: 400px;
    position: relative;
}
.Deliveryzip input.zipinput {
    font-size: 16px;
    width: 100%;
    height: 59px;
    background-color: rgb(248, 245, 242);
    display: block;
    margin: 5.5px 0px;
    border: none;
    vertical-align: text-bottom;
    box-sizing: border-box;
    color: #404656;
    padding: 0 20px;
}
.Deliveryzip svg.icon {
    position: absolute;
    right: 15px;
    top: 23px;
}
.pickupmain {
    justify-content: space-evenly;
    background-color: rgb(244, 245, 247);
    padding: 20px;
    min-height: 90px;
}
p.pickup-title {
    font-size: 1.33333rem;
    line-height: 1.63;
}
.pickupmain a.lmore {
    color: rgb(255, 127, 90);
    letter-spacing: 0.5px;
    font-weight: bold;
}
.pro-detail #accordion {
    width: 100%;
}
.pro-detail #accordion .card .card-header {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid rgb(64, 70, 86);
    background: transparent;
    margin-bottom: 20px;
}
.pro-detail #accordion .card .card-header h3 {
    margin: 0;
    font-size: 26px;
}
.pro-detail #accordion .card {
    border: 0;
}
.pro-detail #accordion .card .card-header a {
    width: 100%;
    float: left;
    font-size: 26px;
}
.card-header i {
    float: right;
    font-size: 25px;
    /*width: 1%;*/
    /*margin-top: 8px;*/
    /*margin-right: 10px;*/
    color: rgb(255, 127, 90);
}
h4.card-block-title {
    font-size: 18px;
    margin-bottom: 20px;
}
.card-block p {
    font-size: 14px;
    color: rgb(159, 162, 170);
    margin-top: 5px;
}
.pro-detail {
    padding: 0 30px;
}
#product_price_input-error
{
    display: inline-block!important;
}



/*===================23-12-20==================*/

.upload1 { grid-area: primary; }
.upload2 { grid-area: image2; }
.upload3 { grid-area: image3; }
.upload4 { grid-area: image4; }
.upload5 { grid-area: image5; }
.upload6 { grid-area: image6; }
.upload7 { grid-area: image7; }
.upload8 { grid-area: image8; }
.upload9 { grid-area: image9; }

.grid-container {
    display: grid;
    grid-template-areas:
      'primary primary image2 image3'
      'primary primary image4 image5'
      'image6 image7 image8 image9';
    grid-gap: 15px;
    background-color: #fafafa;
    padding: 15px;
  }

  .grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 0px;
    font-size: 30px;
    position: relative;
  }

   .grid-container > div > div img{
      float:left;
      width:100%;
      display:none;
  }

  .grid-container > div div.uploader{
      width:100%;
      background: #ebebeb;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      cursor: pointer;
  }

  .grid-container > div div.uploader .icon{
      position: absolute;
      top:50%;
      transform: translateY(-50%);
  }

  .grid-container > div div.uploader .icon::after{
      content: "";
      position: absolute;
      width: 1px;
      height: 30px;
      background: #acacac;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
  }

  .grid-container > div div.uploader .icon::before{
    content: "";
    position: absolute;
    width: 30px;
    height: 1px;
    background: #acacac;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(-50%);
}

.grid-container > div .image-cancel{
    position: absolute;
    width: 28px;
    height: 28px;
    background: #000000;
    right: 20px;
    top: 20px;
    border-radius: 50%;
    border: none;
    align-items:center;
    justify-content: center;
    display:none;
    padding: 0px;
}

.grid-container > div .image-cancel i{
    color:#fff;
    font-size: 20px;
    float: left;
    width: 100%;
    margin-top:-1px;
}

  .grid-container > div div.uploader:after{
      content: "" ;
      display: block;
      padding-bottom: 100%;
  }

  .grid-container > div div.uploader span.caption{
      position: absolute;
      bottom: 15px;
      font-size: 12px;
      font-weight: normal;
      font-style: italic;
      color:#acacac;
      left: 0;
      right: 0;
      text-align: center;
  }



.orange-text
{
    color: rgb(255, 127, 90);
    letter-spacing: 0.5px;
}
.hmivvf .graphic
{
    margin-right: 1em;
    width: 50px;
}


/*========================19-01-21 start=======================*/
#money_slide p{
    max-width: 340px;
    margin:0 auto;
}

#money_slide .title {
    font-size: 84px;
    font-weight: bold;
    text-align: center;
    color: #0F5A3A;
    margin-bottom: 20px;
}

#money_slide h4{
    margin-bottom:20px;
}

.money_back .condition{
    padding:50px 15px;
}



.money_back .title{
    max-width: 500px;
    margin: auto;
}

.money_back .title-exp::after{
    background:  #0F5A3A;;
    bottom: 0;
    content: "";
    height: .1rem;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    width: 80px;
}

.money_back ul{
    list-style-type: none;
    text-align: center;
    padding: 0px;
}




.money_back ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.money_back ul li svg{
    margin-right:5px;
}


.dispute{
    background: #233a65;
} 

.dispute .row .col-md-6:nth-child(1){
    padding: 50px !important;
    background: #d1d673;
}

.dispute .row .col-md-6 .slider{
    background: #fff;
    padding: 50px 0;
}

.dispute .row .col-md-6 #money_slide{
    background: #fff;
    text-align: center;
    width: 100%;
    max-width: 430px;
    margin:0 auto;
}

.dispute .row .col-md-6:nth-child(2){
    display: flex;
}

.dispute .row .col-md-6:nth-child(2) .text{
    display: flex;
    align-self: stretch;
    align-items:center;
    justify-content: center;
    flex-flow: column;
    padding:50px;
}

.dispute .row .col-md-6 .text h4, .dispute .row .col-md-6 .text p{
    color: #fff;
}

.resale{
    padding:80px 15px;
}

.resale .text{
    width:100%;
    max-width: 400px;
    margin:0 auto;
    margin-bottom: 30px;
}

.resale svg{
    width: 60px;
    height: 60px;
    fill: #0F5A3A;
    margin-bottom: 20px;
}

.resale .text h4{
    margin-bottom:10px;
}

.resale .got_question{
    width:100%;
    max-width: 768px;
    margin: 50px auto 0;
    padding:30px 0;
    text-align: center;
    background: rgb(244, 245, 247);
}

.resale a{
    color: rgb(255, 127, 90);
    letter-spacing: 0.5px;
    font-weight: bold;
}

.resale a svg{
    width:18px !important;
    height: 12px !important;
    margin-bottom:0px !important;
}

.slide-arrow{
    position: absolute;
    top: 50%;
    margin-top: -15px;
  }
  .prev-arrow{
    left: 0px;
    width: 32px;
    height: 32px;
    border-left: 0 solid transparent;
    border-right: 0px solid #113463;
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
    background: transparent;
  }

  .prev-arrow:before{
    font-family: "font-icon";
    font-style: normal;
    font-weight: normal;
    font-display: block;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content:'\e805';
    display: block;
    width: 100%!important;
    height: 2.125rem!important;
    line-height: 2.125rem!important;
    font-size: 32px;
    color: #0F5A3A;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .next-arrow{
    right: 0px;
    width: 32px;
    height: 32px;
    border-right: 0 solid transparent;
    border-left: 0px solid #113463;
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
    background:transparent;
  }

  .next-arrow:before{
    font-family: "font-icon";
    font-style: normal;
    font-weight: normal;
    font-display: block;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content:'\e806';
    display: block;
    width: 100%!important;
    height: 2.125rem!important;
    line-height: 2.125rem!important;
    font-size: 32px;
    color: #0F5A3A;
    display: flex;
    align-items:center;
    justify-content: center;
  }

.img_uploader{
    float:left;
    width:100%;
    display: block;
}


/*========================19-01-21 end=======================*/
.h-devider
{
    border: 1px solid #ebebeb;
    margin: 10px 10px 10px 0px;
}

/*.ui-datepicker-trigger
{
    position: absolute;
    top: 6px;
    right: 5px;
    bottom: 0;
}*/

/*#js-date-1::-webkit-search-cancel-button,
#js-date-1::-webkit-clear-button {
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%23000" fill-opacity=".54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3C/svg%3E');
  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
  height: 1.5rem;
  margin-right: 0;
  width: 1.5rem;
}

#js-date-1::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 1;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%23000" fill-opacity=".54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3C/svg%3E');
  width: 14px;
  height: 18px;
  cursor: pointer;
  border-radius: 50%;
  margin-left: .5rem;
}
#js-date-1::-webkit-calendar-picker-indicator:hover {
  -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
          box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}*/

/***********************************23- 4-2021******************************************/
#new_arrivals .col-md-12.img-section {
    padding: 0 5px;
}
.top-pick #money_slide_2 .img-section {
    padding: 0 5px;
}
a.viewall-btn {
    background: #0F5A3A;
    color: #fff;
    padding: .540rem 1.6rem;
    line-height: 1.5;
    border-radius: .1875rem;
    font-weight: 400;
    outline: 0!important;
    font-size: 14px;
    width: 25%;
    text-align: center;
}
a.viewall-btn:hover {
    color: #fff;
}
.viewall-btn-main {
    text-align: center;
    padding-bottom: 35px;
}
.mobile-user {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    width: 40px;
    height: 52px;
}
a.user-icon {
    position: relative;
    display: inline-block;
    font-size: 20px;
    line-height: 24px;
     padding: 12px 5px; 
    color: #222!important;
}
.mobile-heart {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    width: 40px;
    height: 52px;
}
.nav-mobile-header-container .mobile-cart
{
    width: 40px;
}
a.heart-icon {
    position: relative;
    display: inline-block;
    font-size: 20px;
    line-height: 24px;
    padding: 12px 5px; 
    color: #222!important;
}
.nav-mobile-header-container .mobile-cart a,.nav-mobile-header-container .mobile-search .search-icon {
    font-size: 20px!important;
}
.product-content-details .price .lbl-price {
    float: unset;
}
.product-content-details .price .discount-rate {
    margin-left: 0;
}
.sell-now-banner h1 {
    font-size: 3rem;
    font-weight: 600;
    text-align: left;
    width: 50%;
    color: #fff;
    margin-bottom: 55px;
}
.sell-now-bg {
    min-height: 500px;
}
.col-md-12.sell-now-banner {
    padding-top: 80px;
}
.sell-main-limage img {
    width: 100%;
}
.col-md-6.sell-main-limage {
    padding: 0;
}
p.sell-main-btn a {
    display: inline-block;
    margin-top: 10px;
}
p.sell-main-content {
    font-size: 16px;
    text-align: center;
    color: #ffff;
}
.bcome-seller {
    background-color: rgb(244, 245, 247);
    padding: 100px 0;
}
.inner-bcome-seller .work-image span {
    color: #0F5A3A;
    font-size: 70px;
    font-weight: bold;
    margin-right: 10px;
}
.inner-bcome-seller .work-image .row {
    align-items: center;
}
.inner-bcome-seller .row .col-md-6 {
    padding: 0 30px;
}
.bcome-seller .cust-title {
    margin-bottom: 40px;
}
.bcome-seller .start-sell {
    padding-bottom: 0;
}
.inner-bcome-seller .row .col-md-6 h4 {
    font-weight: 600;
    font-size: 18px;
}
.product-item .item-details .item-meta span {
    width: 100%;
}
.profile-tab-content .product-item .item-details .item-meta span {
    width: auto;
}
.new-howit-work {
    padding: 100px 0;
}
.col-md-12.new-work {
    width: 50%;
    max-width: 50%;
    padding: 0 30px;
}
.inner-new-howit-work:after {
    position: absolute;
    background-color: rgb(155, 180, 255);
    width: 1px;
    top: 0px;
    bottom: 0px;
    left: 50%;
    content: "";
    z-index: -1;
}
.inner-new-howit-work:before {
    height: 7px;
    width: 7px;
    border-radius: 3px;
    position: absolute;
    top: 10px;
    left: calc(50% - 3px);
    content: "";
    background-color: rgb(155, 180, 255);
}
.inner-new-howit-work:nth-child(2) .row,.inner-new-howit-work:nth-child(5) .row,.inner-new-howit-work:nth-child(9) .row {
    justify-content: flex-end;
}
.inner-new-howit-work:nth-child(7) .row {
    justify-content: center;
}
.inner-new-howit-work:nth-child(7) .row .new-work{
    text-align:center;
    background: #fff;
    margin-top: 30px;
    margin-bottom: 30px;
}
.inner-new-howit-work:nth-child(3) .row .new-work,.inner-new-howit-work:nth-child(4) .row .new-work,.inner-new-howit-work:nth-child(6) .row .new-work,.inner-new-howit-work:nth-child(8) .row .new-work {
    text-align: right;
}
.new-work-image span {
    display: block;
    font-size: 11px;
    color: #9bb4ff;
    font-weight: 700;
    padding: 7px 0;
}
.new-work-image.col-md-12 {
    padding-left: 0;
    padding-right: 0;
}
.new-howit-work .cust-title {
    margin-bottom: 50px;
}
.new-work h4 {
    font-weight: 600;
    font-size: 18px;
}
.col-md-12.inner-new-howit-work {
    padding: 0 105px 10px;
}
.inner-new-howit-work:nth-child(3) .new-work-image span,.inner-new-howit-work:nth-child(4) .new-work-image span,.inner-new-howit-work:nth-child(6) .new-work-image span,.inner-new-howit-work:nth-child(8) .new-work-image span {
    color: rgb(244 113 7);
}
.inner-new-howit-work:nth-child(3):before,.inner-new-howit-work:nth-child(4):before,.inner-new-howit-work:nth-child(6):before,.inner-new-howit-work:nth-child(8):before {
    background-color: rgb(244 113 7);
}
.new-work-image span .cust-tex {
    display: inline-block;
    margin: 0;
    color: #0F5A3A;
    font-size: 11px;
}
.new-work p {
    font-size: 16px;
}
.new-work-image img {
    width: 50px;
    display: initial;
}




/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.product-description .description>b {
    float: left;
    margin-right: 3px;
}
.topsection .h4 {
    font-size: 18px;
}
.topsection .h4 ol li a {
    color: #0F5A3A;
    text-decoration: underline;
}
.topsection {
    padding: 100px 0;
    background-color: rgb(244, 245, 247);
}
.topsection .h4 ol p {
    padding: 10px 0;
}
.que {
    padding: 100px 0;
    font-size: 14px;    
}
.qu-title {
    color: #333333;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    margin: 32px auto 56px auto;
}
.qu-title span {
    border-bottom: 1px solid #adadad;
    padding: 0 0 20px 0;
}
.que .question, .que .answer {
    margin: 0 36px 36px 36px;
    padding-left: 72px;
    position: relative;
}
.que .question {
    color: #0F5A3A;
}
/*.que .question::before {*/
/*    content: "Q";*/
/*    color: #0F5A3A;*/
/*    font-size: 24px;*/
/*    left: 15px;*/
/*    position: absolute;*/
/*    top: 0;*/
/*}*/
/*.que .answer::before {*/
/*    content: "A";*/
/*    color: #333333;*/
/*    font-size: 24px;*/
/*    left: 15px;*/
/*    position: absolute;*/
/*    top: 0;*/
/*}*/

.que .question .question-letter {
    color: #0F5A3A;
    font-size: 24px;
    left: 15px;
    position: absolute;
    top: 0;
}
.que .answer .answer-letter {
    color: #333333;
    font-size: 24px;
    left: 15px;
    position: absolute;
    top: 0;
}
.bgray {
    background-color: rgb(244, 245, 247);
}
.prod-main-inner h2 {
    text-align: center;
    color: #ffff;
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 auto 6px;
}
.prod-main-content {
    font-size: 13px;
    text-align: center;
    color: #ffff;
    line-height: 1.35;
    margin: 0;
}
/*
 * Category banner slimmed down from 70px / 30px h2 + 30px content /
 * 30px margin-bottom (~230px total vertical space) to a compact
 * ribbon so product cards appear higher on the page. Peter, /sell
 * meeting 2026-06-24: "products are going like way down".
 */
.prod-main {
    padding: 14px 20px;
    margin-bottom: 14px;
}
.address-modal .link-add-new-shipping-option {
    color: #0F5A3A;
}
.address-modal .link-add-new-shipping-option svg {
    top: -1px;
    position: relative;
    margin-right: 2px;
}
.addressModal {
    min-width: 600px;
}
.addressModal .modal-content {
    padding: 20px 10px;
}
.addressModal .modal-content button.close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
}
.tite-shipping-address {
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
}
.shipping-box {
    display: table;
    width: 100%;
    background-color: #f9f9f9;
    border: 0;
    border-radius: 3px;
    padding: 20px;
    position: relative;
}
.address-left .custom-control .custom-control-label p {
    margin-bottom: 0;
}
.address-left .custom-radio {
    padding-left: 28px;
}
.shipping-box .address-left {
    display: table-cell;
}
.butonaddress-right {
    display: table-cell;
    width: 40px;
}
.butonaddress-right .dropdown {
    position: absolute;
    right: 5px;
    top: 5px;
}
.butonaddress-right .dropdown>.btn>svg {
    width: 20px;
    height: 20px;
    color: #666;
}
.shipcust-title {
    /*display: flex;*/
    /*justify-content: space-between;*/
}
.shipcust-title h2.title, .shipcust-title .address-modal {
    /*width: 50%;*/
    /*float: left;*/
}
.into-cash {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    background: rgb(244 113 7);
    margin-top: 50px;
    margin-bottom: 25px;
}
.into-cash h1 {
    font-size: 30px;
    font-weight: 600;
    margin-top: 10px;
    color: #fff;
}
.intocash-btn .viewall-btn {
    display: inline-block;
    width: 200px;
    background: #ffffff;
    color: #0F5A3A;
}
.intocash-btn {
    margin-top: 20px;
}
.intocash-btn .viewall-btn:hover {
    color: #0F5A3A;
}

.custmob-selltop a.viewall-btn {
    padding: 5px 15px;
}

.navbar-nav.mobile-user {
    text-align: right;
}

.navbar-nav.mobile-user .user-icon {
    padding-left: 4px;
}
.viewall-btn-second {
    margin-left: 15px;
}
.pickup-step .col-sm-6 a, .pickup-step .row .col-sm-6 a {
    border: 1px solid #0F5A3A;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    min-height: 90px;
}
.pickup-step .col-sm-6 a p, .pickup-step .row .col-sm-6 a p {
    margin-bottom: 0;
    font-size: 18px;
}
.work-image-text img {
    width: 25px;
    height: auto;
    margin-right: 8px;
}
.work-image-row {
    margin-bottom: 20px;
}
.prod-dtltex .row-product-details {
    display: flex;
    margin-bottom: 10px;
}
.prod-dtltex .row-product-details .col-md-3 {
    flex: 0 0 35%;
    max-width: 35%;
    padding: 0;
}
.prod-dtltex .row-product-details .col-md-9 {
    flex: 0 0 65%;
    max-width: 65%;
}
.prod-dtltex .row-product-details .col-md-3 label {
    font-weight: 600;
}
.details-slider {
    margin-bottom: 20px;
}
.details-slider .slick-track {
    margin-left: 0;
}
.details-slider .item {
    padding: 0 5px;
}
.details-slider .item img {
    height: 210px;
    max-height: 210px;
    width: 100% !important;
    object-fit: cover;
    max-width: 100%;
    margin: auto;
}
.work-image-text p {
    min-height: 126px;
}
.bcome-seller .start-sell a.viewall-btn {
    display: block;
    min-width: 190px;
    margin: auto;
}

/* **********************responsive************************* */
@media(min-width:1500px){
    .dispute .row .col-md-6 #money_slide{
        max-width: 550px;
    }

    #money_slide p{
        max-width: 450px;
    }
}
@media (min-width: 1200px) {
    .category-banners__heading {
        font-size: 2.5rem;
    }
}
@media (max-width: 1286px) {
    .have-quest .inner-how-it-work {
        max-width: 84%;
    }
}
@media(max-width:992px){
    a.viewall-btn {
    width: 30% !important;
}
    .sell-now-banner h1 {
    width: 80% !important;
    }
    .have-quest {
        /*padding: 20px;*/
    }
    .have-quest .inner-how-it-work {
        max-width: 97%;
    }
    .product-add-to-cart-container .button-container {
        width: 47% !important;
        min-width: unset;
    }
    .product-add-to-cart-container .cart-button-container {
        width: 100% !important;
        min-width: unset;
    }
    .category-banners__heading {
        font-size: 1.875rem;
    }
    .top-pick #money_slide_2 .img-section img {
        max-height: 300px;
    }
    ul.shop-category li {
        width: 25%;
    }
    .grid-container > div div.uploader span.caption{
        display: none !important;
    }

    .grid-container > div .image-cancel{
        top:-14px;
        right: -14px;
    }
}
@media (min-width: 787px){
    /*.have-quest {*/
    /*    padding: 0;*/
    /*}*/
}
@media (min-width: 768px){

    .category-banners__item:nth-child(4) {
        grid-row: 6/span 4;
        max-height: 290px;
    }
    .category-banners__item:nth-child(3) {
        grid-row: 5/span 5;
        max-height: 372px;
    }
    .category-banners__item:nth-child(2) {
        grid-row: 1/span 5;
        max-height: 372px;
    }
    .category-banners__item:first-child {
        grid-row: 1/span 4;
        max-height: 290px;
    }
    .category-banners__list {
        max-width: none;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(9,auto);
        grid-gap: 20px;
    }
    .category-banners__item {
        margin-bottom: 0;
        overflow: hidden;
    }
    
   

}
@media (max-width: 991px) {
.que .container .row .col-md-6 {
    width: 100%;
    max-width: 100%;
    flex: 100%;
}
.inner-bcome-seller .work-image span {
    font-size: 60px;
}
.inner-bcome-seller .row .col-md-6>.col-md-12 {
    padding: 0;
}

}
@media (min-width: 768px) and (max-width: 991px) {
    .category-banners__heading {
        font-size: 1.25rem;
        left: 1.5rem;
        top: 1.5rem;
    }
}

@media only screen and (min-width: 768px){
     .col-md-9 .product-filters{
        display: none;
    }
    
     
    .btn-filter-products-mobile{
        display: none;
    }
    
    .col-md-3 .product-filters{
        display: block;
    }
}

@media(max-width:768px){
    .col-md-12.inner-new-howit-work {
    padding: 0 15px 10px !important;
}

  
    
   

    .category-banners__cta {
        padding: 6px 10px;
        font-size: 14px;
    }
    .section.new-arivals .prev-arrow, .section.new-arivals .next-arrow, .top-pick .next-arrow,.top-pick .prev-arrow {
        display: none !important;
    }
    .left-slider .slider {
        padding: 150px 0;
    }
    #money_slide p {
        max-width: 245px !important;
    }
    .top-pick #money_slide_2 .img-section img {
        max-height: 250px;
    }
    .resale{
        padding-bottom:40px;
    }
    .grid-container {
        display: grid;
        grid-template-areas:
                'primary primary image2'
                'primary primary image3'
                'image4 image5 image6'
                'image7 image8 image9';
        grid-gap: 15px;
        background-color: #fafafa;
        padding: 15px;
    }
   
}


@media(max-width:767px){

.work-image-text p {
    min-height: initial;
}
.viewall-btn-second {
    margin-left: 0;
}    
.we-sell-btn {
    margin-bottom: 35px;
}
.work-image-row {
    margin-bottom: 10px;
}
.inner-bcome-seller .work-image {
    width: 10%;
}
.inner-bcome-seller .work-image .row {
    justify-content: center;
}
.inner-bcome-seller .work-image span {
    font-size: 40px;
}
.work-image-text {
    width: 90%;
    text-align: left;
}
    
.shipcust-title h2.title, .shipcust-title .address-modal {
    width: 100%;
}    
.addressModal {
    min-width: initial;
}
.shipcust-title {
    display: initial;
}
     .btn-filter-products-mobile{
        display: block;
    }

      .col-md-9 .product-filters{
        display: block;
    }

    .col-md-9 .product-filters.collapse{
        display: none;
    }

    .col-md-9 .product-filters.collapse:not(.show) {
    display: none;
}

    .col-md-9 .product-filters.collapse.show{
        display: block;
    }

    /* On mobile only the col-md-9 collapsible filter block is used.
       Hide the desktop col-md-3 sidebar entirely — leaving it visible
       caused two filter UIs to render at once, with the unselected
       desktop inputs overriding the seller's mobile clicks on form
       submit (so filters appeared not to work). */
    .col-md-3.sidebar-products,
    .sidebar-products {
        display: none !important;
    }
    
    
.qu-title {
    border-bottom: 1px solid #adadad;
    padding: 0 0 20px 0;
    white-space: normal;
    margin: 12px auto 32px auto;
    font-size: 24px;
}
.qu-title span {
    padding: 0;
    border-bottom-width: 0;
}    
    .mony-back-inner.toptex h4 {
    font-size: 25px;
}
        .inner-bcome-seller .work-image .row {
    justify-content: center;
}
    .inner-bcome-seller .row .col-md-6 {
    padding: 0px 10px !important;
    text-align: center;
}
    a.viewall-btn {
    width: 50% !important;
}
    .col-12.section-blog {
    padding: 0;
}
        .category-banners__item:nth-child(1) a img, .category-banners__item:nth-child(4) a img {
    max-height: 184px;
}
.category-banners__item:nth-child(2) a img, .category-banners__item:nth-child(3) a img {
    max-height: 236px;
}
    .sell-now-bg {
    min-height: 400px !important;
}
    .sell-now-banner h1 {
    width: auto !important ;
    }
    .section.new-arivals {
    padding: 0;
    }
    .nav-mobile-header-container .menu-icon {
    width: 77px;
    }
    .nav-mobile-header-container .mobile-logo {
    padding-right: 15px;
    }
    #footer .footer-logo {
    margin-left: auto;
    margin-right: auto;
    }
    #footer .footer-logo img {
    margin: auto;
    }
    #footer .footer-social-links ul {
    display: inline-block;
    }
    form#form_validate_newsletter {
    display: inline-block;
    }
    #footer {
    text-align: center;
    }
    .how-it-works.sell .row .col-md-6 #money_slide {
        max-width: 500px;
    }
    .how-it-works.sell #money_slide p {
        max-width: 380px !important;
    }
    .col-md-6.rigth-content {
        padding: 50px 15px;
        text-align: center;
    }
    .start-sell button {
        width: auto;
    }
    .sell-main h2 {
        font-size: 26px;
    }
    .quest-inner {
        max-width: 80%;
    }
    .inner-how-it-work .col-md-6 {
        width: 100%;
        margin-bottom: 15px;
    }
    .col-md-6.left-slider {
        padding: 20px;
    }
    .left-slider .slider {
        padding: 20px 0;
    }
    .col-md-6.bgimage {
        height: 330px;
        background-size: cover;
        background-position: center center;
    }
 
.custmob-selltop a.viewall-btn {
    padding: 5px 13px;
}
}
@media only screen and (min-width: 601px) {
    .inner-how-it-work {
        max-width: 900px;
        margin: auto;
    }
}
@media(max-width:600px){
    .new-work p {
    font-size: 14px !important;
}
    .inner-new-howit-work:nth-child(3) .row .new-work, .inner-new-howit-work:nth-child(4) .row .new-work, .inner-new-howit-work:nth-child(7) .row .new-work {
    text-align: left !important;
}
.inner-new-howit-work:nth-child(7) .row .new-work, .inner-new-howit-work:nth-child(8) .row .new-work, .inner-new-howit-work:nth-child(6) .row .new-work {
    text-align: left !important;
    background: unset !important;
}
    .inner-new-howit-work:before {
    left: calc(0% - 3px) !important;
    }
    .inner-new-howit-work:after {
    left: 0 !important;
    }
    .inner-new-howit-work:nth-child(2) .row, .inner-new-howit-work:nth-child(5) .row, .inner-new-howit-work:nth-child(8) .row {
    justify-content: unset !important;
}
.col-md-12.inner-new-howit-work {
    padding: 0 15px 10px !important;
}
.col-md-12.new-work {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 0 15px !important;
}
    ul.shop-category li {
        width: 33.33%;
    }
    .dispute .row .col-md-6:nth-child(1){
        padding:20px !important;
    }

    #money_slide p{
        max-width: 300px;
    }
}
@media (max-width:581px){
    .titl-p>span {
        width: 100%;
        display: inline-block;
    }
    .wrapper-inner button.btn.btn-slider {
        width: 90%;
        margin: 5px 0;
    }
    .wrapper-inner h1 {
        padding: 0;
        font-size: 33px;
    }
    .wrapper-inner h1 span {
        margin: 0;
        width: 100%;
        display: inline-block;
    }
    .wrapper-inner span {
        margin: 0;
    }
}
@media(max-width:576px){
.mony-back-inner.toptex h4 {
    font-size: 18px;
}
.mony-back-inner h4 {
    font-size: 20px;
}
.container.mony-back,.container.mony-back .col-md-12 {
    padding: 0 !important;
}    
.container.mony-back {
    padding: 0 !important;
}
.nav-mobile-header-container .mobile-search{
    display:none;
}
.mobile-search-form {
    display: block !important;
}
}

@media(max-width:575px){
    .que {
    padding: 25px 0;
}    
.que .question, .que .answer {
    margin: 0 0 36px 0;
}  

}

@media(max-width:480px){
.nav-mobile-header-container .menu-icon {
    width: auto;
}       
.into-cash h1 {
    font-size: 18px;
}    
.nav-mobile-header-container .mobile-search{
    display:none;
}
.mobile-search-form {
    display: block !important;
}
.sell-main p {
    text-align: center;
}
    .bcome-seller,.new-howit-work {
    padding: 50px 0 !important;
}
    .sell-main-inner h2, p.sell-main-content {
    text-align: center;
}
a.viewall-btn {
    width: 90% !important;
}
    .col-md-12.sell-now-banner {
    padding-top: 60px !important;
}
    .sell-now-bg {
    min-height: 320px !important;
}
    .sell-now-banner h1 {
    font-size: 2rem !important; 
    width: auto !important;
    }
    #blog-slider-nav,.slide-arrow.next-arrow,.slide-arrow.prev-arrow {
    display: none;
}
/*   .blog-slider-container {
    float: unset;
    width: 285px;
    margin: 0 auto;
}*/
.blog-item-img {
    height: 285px;
}
.blog-item-img img.img-fluid {
    height: 100%;
    object-fit: cover;
}

    .col-md-12.redy-to {
        margin: 20px 0;
        margin-top: 0;
    }
    .col-md-12.sell-main {
        padding: 50px 15px;
    }
    .container-fluid.how-it-work {
        padding-top: 50px;
        padding-bottom: 30px;
    }

    .quest-inner {
        min-height: 212px;
    }
    .have-quest .inner-how-it-work {
        max-width: 100%;
        padding: 0;
    }
.have-quest {
    padding: 50px 0;
}
    .sell .left-slider .slider {
        padding: 20px 0;
    }
    .how-it-works.sell #money_slide p {
        max-width: 220px !important;
    }
    .quest-inner {
        max-width: 100%;
        padding: 30px;
    }
    #footer .footer-bottom {
        text-align: center;
    }
    #footer .footer-bottom .footer-payment-icons {
        float: unset;
        text-align: center;
        display: inline-block;
    }
    #footer .footer-bottom .copyright {
        text-align: center;
    }
    .col-12.section-blog {
        /*padding: 0 20px;*/
        /*margin-bottom: 0 !important;*/
    }
    .col-md-12.shop-category-main {
        padding: 0 5px;
    }
    .col-md-12.txtdetail-section {
        padding: 0 20px;
    }
    .col-md-12.img-section {
        padding: 0 20px;
    }
    .section.new-arivals, .top-pick {
        padding: 0;
    }
    .top-pick {
        margin-bottom: 30px;
    }
    ul.shop-category li {
        width: 50%;
    }
    /*#money_slide p {
        max-width: 220px !important;
    }*/

    #money_slide p {
        max-width: 100% !important;
        padding: 0 5px !important;
    }

    .dispute .row .col-md-6:nth-child(1) {
        padding: 20px !important;
    }
    .dispute .row .col-md-6 .slider {
        padding: 20px 0 !important;
    }
.custmob-selltop a.viewall-btn {
    padding: 5px 12px;
}
}
@media (min-width: 400px) {
    .category-banners__heading {
        left: 2rem;
        top: 2rem;
    }
}

@media (max-width:375px){
.nav-mobile-header-container .mobile-logo {
    padding-right: 10px;
}  
.nav-mobile-header-container .mobile-cart a {
    padding: 10px 12px 10px 5px;
}
.nav-mobile-header-container .mobile-cart .notification {
    right: 4px;
}
.nav-mobile-header-container .mobile-logo .logo {
    max-width: 110px;
}
.mobile-heart {
    width: 35px;
}
    .wrapper-inner button.btn.btn-slider {
        width: 73%;
        margin: 5px 0;
        padding: 15px;
    }
    .wrapper-inner h1 {
        font-size: 31px;
    }
}

.mds-svg-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-right: 5px;
    top: -0.063rem!important;
}


.shopping-cart .item .cart-offer-item-quantity {
    display: table-cell;
    vertical-align: top;
    width: 100px;
    padding-left: 10px;
}
.product-add-to-cart-container .offer-number-spinner {
    width: 100px;
    margin-right: 15px;
    float: left;
    position: relative;
    margin-bottom: 10px;
}
.offer-number-spinner {
    width: 100px;
    height: 44px;
    border: 1px solid #e4e4e4;
    border-radius: 0.1875rem;
}

.offer-number-spinner input {
    height: 42px;
    line-height: 18px;
    padding: 12px 8px;
    border: 0 !important;
}

.offer-number-spinner button {
    font-size: 18px;
    line-height: 18px;
    padding: 12px 8px;
    text-align: center;
    border-radius: 0 !important;
}

.offer-number-spinner .btn-spinner-minus {
    border-right: 1px solid #e4e4e4;
}

.offer-number-spinner .btn-spinner-plus {
    border-left: 1px solid #e4e4e4;
}

.mobile-user .user-icon {
    padding-right: 0;
}
.mobile-user .user-icon img {
    vertical-align: initial;
}

/* ************ Modern Chat Interface Styles ************ */

/* Chat Messages Container */
#chat-messages-container {
    padding: 20px 15px;
    min-height: 200px;
}

/* Chat Message Base */
.chat-message {
    margin-bottom: 15px;
    clear: both;
    display: flex;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sent Messages (Right Side - Blue) */
.chat-message-sent {
    justify-content: flex-end;
}

.chat-message-sent .chat-bubble {
    background: #0084ff;
    color: #fff;
    border-radius: 18px 18px 4px 18px;
    max-width: 70%;
    padding: 10px 15px;
    position: relative;
}

.chat-message-sent .message-text {
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.4;
}

.chat-message-sent .message-time {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
    text-align: right;
}

/* Received Messages (Left Side - Gray) */
.chat-message-received {
    justify-content: flex-start;
}

.chat-message-received .chat-bubble {
    background: #f1f0f0;
    color: #000;
    border-radius: 18px 18px 18px 4px;
    max-width: 70%;
    padding: 10px 15px;
    position: relative;
}

.chat-message-received .message-text {
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.4;
}

.chat-message-received .message-time {
    display: block;
    font-size: 11px;
    color: #65676b;
    margin-top: 4px;
    text-align: left;
}

/* Chat Input Wrapper */
.chat-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #e4e4e4;
    border-radius: 50px;
    padding: 5px 5px 5px 20px;
    background: #fff;
    transition: all 0.3s ease;
}

.chat-input-wrapper:focus-within {
    border-color: #0084ff;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.1);
}

.chat-input-wrapper .chat-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 8px 10px;
    background: transparent;
}

.chat-input-wrapper .btn-send-message {
    background: #0084ff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-input-wrapper .btn-send-message:hover {
    background: #0073e6;
    transform: scale(1.05);
}

.chat-input-wrapper .btn-send-message:active {
    transform: scale(0.95);
}

.chat-input-wrapper .btn-send-message i {
    color: #fff;
    font-size: 16px;
}

/* Messages List Container */
.messages-list {
    max-height: 500px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Custom Scrollbar for Messages */
#message-custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

#message-custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#message-custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

#message-custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Message Reply Section */
.message-reply {
    border-top: 1px solid #e4e4e4;
    padding: 15px 20px;
    background: #fafafa;
}

/* Chat Error Alert */
.chat-error-alert {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 12px 15px;
    border-radius: 8px;
    margin: 10px 15px;
    display: none;
    animation: slideDown 0.3s ease-out;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    transition: opacity 0.3s ease-out;
}

.chat-error-alert.show {
    display: block;
}

.chat-error-alert:hover {
    background-color: #f5c6cb;
}

.chat-error-alert i {
    margin-right: 8px;
    font-size: 16px;
    vertical-align: middle;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Message Actions (Delete Icon) */
.message-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.message-actions .delete-conversation-link {
    color: #65676b;
    font-size: 18px;
    padding: 8px;
    transition: color 0.2s ease;
}

.message-actions .delete-conversation-link:hover {
    color: #e74c3c;
}

/* Messages Head Improvements */
.messages-head {
    border-bottom: 1px solid #e4e4e4;
    padding: 15px 20px;
    background: #fff;
}

.sender-head {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sender-head .left {
    flex-shrink: 0;
}

.sender-head .right {
    flex: 1;
}

.sender-head .username {
    font-size: 16px;
    font-weight: 600;
    color: #1c1e21;
    margin-bottom: 2px;
}

.sender-head .p-last-seen {
    margin-bottom: 4px;
}

.sender-head .subject {
    color: #65676b;
    font-size: 13px;
}

/* Messages Content Area */
.messages-content {
    background: #fff;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 300px);
    min-height: 400px;
}

.messages-content .messages-list {
    flex: 1;
    overflow-y: auto;
}

.messages-content .message-reply {
    flex-shrink: 0;
}

/* Mobile Back Button - Hidden on desktop and messages list */
.mobile-back-btn {
    display: none;
}

/* Hide back button on messages list view */
.messages-list-view .mobile-back-btn {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 991px) {
    /* Mobile: Hide sidebar when viewing a conversation */
    .conversation-view .col-message-sidebar {
        display: none !important;
    }

    /* Mobile: Show sidebar on messages list view */
    .messages-list-view .col-message-sidebar {
        display: block !important;
    }

    /* Mobile: Hide chat when on messages list */
    .messages-list-view .col-message-content {
        display: none !important;
    }

    /* Mobile: Show chat content full width when viewing conversation */
    .conversation-view .col-message-content {
        display: block !important;
        width: 100%;
        max-width: 100%;
    }

    /* Show back button on mobile in conversation view only */
    .conversation-view .mobile-back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-right: 10px;
        color: #1c1e21;
        font-size: 20px;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .conversation-view .mobile-back-btn:hover {
        color: #0084ff;
        transform: scale(1.1);
    }

    .conversation-view .mobile-back-btn i {
        display: block;
    }

    .chat-message-sent .chat-bubble,
    .chat-message-received .chat-bubble {
        max-width: 80%;
        padding: 8px 12px;
    }

    .chat-message {
        margin-bottom: 10px;
    }

    .chat-message-sent .message-text,
    .chat-message-received .message-text {
        font-size: 13px;
    }

    .chat-message-sent .message-time,
    .chat-message-received .message-time {
        font-size: 10px;
    }

    .messages-content {
        height: calc(100vh - 280px);
        min-height: 300px;
        max-height: 500px;
    }

    #chat-messages-container {
        padding: 12px 8px;
    }

    .message-reply {
        padding: 8px 12px;
    }

    .messages-head {
        padding: 8px 12px;
    }

    .sender-head .username {
        font-size: 15px;
    }

    .sender-head .subject {
        font-size: 12px;
    }

    .sender-head .left {
        margin-left: 0;
    }

    .sender-head .left .img-profile {
        width: 40px;
        height: 40px;
    }

    /* Make chat input wrapper more mobile-friendly */
    .chat-input-wrapper {
        padding: 5px 5px 5px 15px;
    }

    .chat-input-wrapper .chat-input {
        font-size: 15px;
        padding: 8px 8px;
    }

    .chat-input-wrapper .btn-send-message {
        width: 34px;
        height: 34px;
    }

    /* Mobile chat error alert */
    .chat-error-alert {
        margin: 8px 10px;
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* For tablets - show sidebar and content side by side */
@media (min-width: 768px) and (max-width: 991px) {
    .col-message-sidebar {
        display: block;
    }
}

/* Ensure conversation list items are touch-friendly on mobile */
@media (max-width: 991px) {
    .conversation-item {
        padding: 12px 10px;
    }

    .conversation-item .conversation-item-link {
        padding: 0;
    }

    .conversation-item .username {
        font-size: 15px;
    }

    .conversation-item .subject {
        font-size: 13px;
    }
}

/* Loading animation for messages */
.chat-message.loading {
    opacity: 0.5;
}

/* Profile Product Search */
.profile-product-search-container {
    margin-bottom: 25px;
    padding: 0 15px;
}

.profile-product-search {
    max-width: 500px;
    margin: 0 auto;
}

.profile-product-search .form-control {
    border-radius: 4px 0 0 4px;
    border-right: none;
    padding: 10px 15px;
    height: 45px;
}

.profile-product-search .input-group-text {
    background-color: #fff;
    border-left: none;
    border-radius: 0 4px 4px 0;
    padding: 10px 15px;
    cursor: pointer;
}

.profile-product-search .input-group-text i {
    color: #666;
    font-size: 16px;
}

.search-results-count {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
}

.product-search-item {
    transition: opacity 0.3s ease;
}

/* Toast Notifications Customization */
#toast-container {
    margin-top: 20px;
}

#toast-container > div {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    opacity: 0.95;
}

#toast-container > .toast-success {
    background-color: #51a351;
}

#toast-container > .toast-error {
    background-color: #bd362f;
}

#toast-container > .toast-warning {
    background-color: #f89406;
}

#toast-container > .toast-info {
    background-color: #2f96b4;
}

.toast-close-button {
    color: #ffffff;
    opacity: 0.8;
}

.toast-close-button:hover {
    opacity: 1;
}

.toast-title {
    font-weight: 600;
}

.toast-message {
    font-size: 14px;
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────
 * Phase 1 — product card meta line + discount badge + reduced-price
 * strikethrough. Kept small and self-contained so we can re-skin
 * them when the brand refresh lands in Phase 2.
 * ───────────────────────────────────────────────────────────────── */

.sfy-product-card-meta {
    margin: 2px 0 6px;
    font-size: 12px;
    line-height: 1.3;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sfy-product-card-meta i {
    font-size: 13px;
    line-height: 1;
    color: #6b7280;
}
.sfy-product-card-meta--status {
    color: #9ca3af;
    font-style: italic;
}
.sfy-product-card-meta--status i {
    color: #9ca3af;
}
.sfy-est-retail-wrap { white-space: nowrap; }
.sfy-discount-badge {
    background: #fee2e2;
    color: #b91c1c;
    font-weight: 700;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.sfy-price-was {
    color: #9ca3af;
    text-decoration: line-through;
    margin-right: 4px;
    font-size: 0.85em;
}

/* Product-index density (Peter 2026-09-03): the vendor stylesheet
 * uses a 30px bottom margin per card + 6/8px item-details padding
 * which pushes only ~2 rows above the fold. These overrides tighten
 * both without touching style-1.6.css so vendor updates stay
 * mergeable. */
.product-item {
    margin-bottom: 18px;
    /* 2026-09-05 Peter: rounded corners — the square-corner card
     * felt "boring" against the rest of the site's rounded UI. */
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ECE7DA;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -14px rgba(15,90,58,0.20);
    border-color: #C7DFCE;
}
.product-item .img-product-container {
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}
.product-item .item-details { padding: 10px 12px 12px; }
.product-item .item-details .product-title {
    font-size: 0.85rem;
    line-height: 1.2;
    min-height: 2.4em;
    max-height: 2.4em;
    margin-top: 2px;
}
.sfy-product-card-meta { margin: 1px 0 4px; }

/* Delete Account (settings tab) — small danger-styled card */
.sfy-danger-card {
    background: #fff;
    border: 1px solid #f3d0d0;
    border-left: 4px solid #C84A4A;
    border-radius: 4px;
    padding: 22px 24px;
}
.sfy-danger-card__title {
    color: #C84A4A;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px;
}
.sfy-danger-card__lead {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px;
}
.sfy-danger-card__ack {
    background: #fef8f8;
    border-radius: 3px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.sfy-danger-card__ack-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    color: #4b5563;
}
.sfy-danger-card__ack-label input[type="checkbox"] {
    margin-top: 3px;
}
.sfy-btn-danger {
    background: #C84A4A;
    border: 1px solid #C84A4A;
    color: #fff;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 3px;
    transition: background 0.15s;
}
.sfy-btn-danger:hover, .sfy-btn-danger:focus {
    background: #a83a3a;
    border-color: #a83a3a;
    color: #fff;
}
.sfy-nav-item-danger .nav-link {
    color: #C84A4A !important;
}
.sfy-nav-item-danger.active .nav-link {
    color: #fff !important;
    background: #C84A4A !important;
}

/* ─────────────────────────────────────────────────────────────────
 * Phase 1 — brand palette baseline
 *   Primary   Forest Green  #0F5A3A
 *   Hover     Dark Green    #0A442C
 *   Accent    Warm Gold     #C89A3D
 *   Light gold             #E8D3A4
 *   Main bg   Warm neutral  #FAF8F4
 *   Card bg   White         #FFFFFF
 *
 * The bulk of primary/accent color swaps happened via find-replace
 * against #f47107 (was orange) and #FF7F5A (was accent orange).
 * This block just adds the pieces that weren't in the old
 * palette: the page background, the darker hover state for the
 * primary CTA, and a couple of convenience classes.
 * ───────────────────────────────────────────────────────────────── */

body {
    background: #FAF8F4;
}

/* 2026-09-05 mobile audit (Peter): a couple of long Finnish
 * compound words + a few oversized inline images were escaping
 * the viewport on phones, forcing a horizontal scroll on the
 * whole page. These four rules make horizontal overflow
 * impossible without touching any specific selector, then let
 * the offending element itself scroll internally when needed
 * (tables, code blocks, wide diagrams).
 *
 * html/body no-scroll → kills every page-level x-overflow.
 * max-width:100% on media → images/videos/svgs never exceed
 *   their parent.
 * word-wrap: anywhere on generic text → long Finnish words
 *   (muuttopalveluita, sisustussuunnittelija) break instead
 *   of stretching the container.
 * table wrappers still need scroll — force any wide table
 *   to render inside an auto-scroll shell. */
@media (max-width: 767px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    img, video, svg, iframe { max-width: 100%; height: auto; }
    h1, h2, h3, h4, h5, p, li, span, strong, em, a, dd, dt, label {
        overflow-wrap: anywhere;
        word-wrap: break-word;
    }
    /* Native form controls (date/time/number pickers) have
     * intrinsic min widths that break narrow layouts. Cap them. */
    input, select, textarea { max-width: 100%; }
    /* Wide tables get horizontal scroll inside their container
     * rather than pushing the page. */
    .table-responsive, .sfy-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Hover state for every element that landed on the new primary
   forest-green after the swap. Buttons, badges, links — anything
   with #0F5A3A as an inline background darkens to #0A442C on
   hover. Elements styled through a class rule need their own
   :hover added at the definition site — this only covers the
   inline-style buttons that used to be inline #f47107. */
[style*="background: #0F5A3A"]:hover,
[style*="background:#0F5A3A"]:hover,
[style*="background-color: #0F5A3A"]:hover,
[style*="background-color:#0F5A3A"]:hover {
    background: #0A442C !important;
}

/* Primary button convenience class for new components that
   choose to opt in rather than inline the color. */
.sfy-btn-primary {
    background: #0F5A3A;
    border: 1px solid #0F5A3A;
    color: #fff;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 3px;
    transition: background 0.15s;
}
.sfy-btn-primary:hover, .sfy-btn-primary:focus {
    background: #0A442C;
    border-color: #0A442C;
    color: #fff;
}

/* Warm gold accent — for the "reduced price" badge, We-sell-for-you
   package chips, and other highlight moments. Not a CTA color. */
.sfy-accent-gold {
    background: #C89A3D;
    color: #fff;
}
.sfy-accent-gold--light {
    background: #E8D3A4;
    color: #7a5f20;
}

/* ═════════════════════════════════════════════════════════════════
 * Phase 2 — header + homepage + footer redesign
 *
 * All new selectors use the sfy- prefix so they don't collide with
 * the legacy .top-bar / .footer-* class names. The old CSS for
 * those still lives in style-1.6.css and will be superseded (not
 * removed — some admin pages may still reference the old chrome).
 * ═════════════════════════════════════════════════════════════════ */

/* ─── Trust ribbon (replaces old .top-bar) ─────────────────────── */

.sfy-trust-ribbon {
    background: #0A442C;
    color: #fff;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.3;
}
.sfy-trust-ribbon .container {
    padding-left: 15px;
    padding-right: 15px;
}
.sfy-trust-ribbon__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
}
.sfy-trust-ribbon__item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.sfy-trust-ribbon__icon {
    color: #C89A3D;
    font-size: 13px;
    line-height: 1;
}
.sfy-trust-ribbon__label {
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.02em;
}
/* Preserve legacy .top-bar (still shown on some admin pages) but
   don't let it take over the site chrome. */
.top-bar { display: none; }

@media (max-width: 767px) {
    .sfy-trust-ribbon__list {
        justify-content: flex-start;
        overflow-x: auto;
        gap: 16px;
        padding-bottom: 2px;
    }
}

/* ─── Header action row (language + user + cart + wishlist) ───── */

.sfy-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    margin: 0;
    padding: 0 0 0 12px; /* small buffer from the search bar edge */
    list-style: none;
    flex-wrap: nowrap;
    white-space: nowrap;
}
/* Also nudge the search bar's right edge in a touch so the two
 * rounded pills (search + avatar) don't visually merge into one
 * long white bar. Belt-and-suspenders with the pill margin above. */
.top-search-bar { margin-right: 12px; }
/* Narrower logo block (was 180px in Modesy's base). Peter wants the
 * logo footprint smaller so the search bar can grow into the freed
 * space. Keep the 15px right margin so it doesn't touch the search. */
.nav-top .nav-top-left .logo {
    width: 100px !important;
    margin-right: 15px !important;
}
.nav-top .nav-top-left .logo a img {
    max-width: 100px !important;
}
/* Common height for all top-row items so they align on the same
 * horizontal baseline: search input, avatar pill, cart, heart, and
 * Start selling. 44px is tall enough for comfortable touch targets
 * without towering over the logo. */
.top-search-bar.sfy-search-simple .input-search,
.sfy-header-user--rich .sfy-header-user__trigger,
.sfy-header-actions .nav-link,
.sfy-header-actions .cust-dropdwn .dropbtn {
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}
.sfy-header-actions .cust-dropdwn .dropbtn {
    padding: 0 20px !important;
    border-radius: 6px;
}
.sfy-header-actions .nav-link {
    padding: 0 10px !important;
}
/* Simplified search bar (no "All categories" pill on the left).
 * Kill Modesy's legacy table+float layout so the bar sits inline
 * with the logo in the flex parent (.row-align-items-center) —
 * previously it was floating/table-cell and dropping to its own row
 * on some breakpoints, leaving the search icon orphaned. */
.top-search-bar.sfy-search-simple {
    display: block !important;
    float: none !important;
    width: auto !important;
    flex: 1 1 auto;
    max-width: 520px;
    position: relative;
    margin: 0 16px 0 16px;
}
.top-search-bar.sfy-search-simple .form_search_main,
.top-search-bar.sfy-search-simple form {
    position: relative;
    display: block;
    margin: 0;
    width: 100%;
}
.top-search-bar.sfy-search-simple .input-search {
    border: 1px solid #e6e6e6 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    width: 80%;
    min-height: 42px;
    background: #fff;
    display: block;
}
.top-search-bar.sfy-search-simple .input-search:focus {
    border-color: #0F5A3A !important;
    outline: none;
}
.top-search-bar.sfy-search-simple .btn-search {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: 0 !important;
    padding: 8px 10px;
    color: #888;
    z-index: 2;
}
.top-search-bar.sfy-search-simple .btn-search i { color: #888 !important; }

/* Slim-header treatment for account-area pages (own profile, dashboard,
 * settings, orders, service-requests, etc.). Search bar + main nav are
 * hidden in markup; here we let the header actions cluster grow into
 * the freed space so it doesn't sit crammed on the right edge. */
.sfy-header--slim .nav-top-left { display: flex; align-items: center; }
.sfy-header--slim .top-search-bar { display: none !important; }
.sfy-header--slim .nav-main { display: none !important; }
/* On slim (account) pages, the sidebar CTAs already cover Sell +
 * Request Service, and cart/wishlist are secondary — hide the whole
 * cart / heart / Sell trio from the header so the top-right cluster
 * is just bell + chat + avatar-pill (matches the mockup). */
.sfy-header--slim .nav-item-cart,
.sfy-header--slim .li-main-nav-right,
.sfy-header--slim .sfy-header-actions .cust-dropdwn {
    display: none !important;
}
.sfy-header-actions .nav-item {
    margin: 0 2px;
    flex-shrink: 0;
}
.sfy-header-actions .nav-link {
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    color: #0F5A3A;
    background: transparent;
    border: none;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}
.sfy-header-actions .nav-link:hover,
.sfy-header-actions .nav-link:focus {
    color: #0A442C;
}
.sfy-header-actions .nav-link i {
    font-size: 17px;
    line-height: 1;
}
.sfy-header-actions .notification {
    background: #C84A4A;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    margin-left: 3px;
    vertical-align: top;
}
/* Small breathing gap from the search bar on the language chip's
 * left. Modesy's `.nav-top-right { padding-left: 0 !important }`
 * kills the Bootstrap column gutter, so we set this explicitly. */
.sfy-header-actions > li.sfy-header-lang,
.sfy-header-actions > li.language-dropdown {
    margin-left: 12px !important;
}
.sfy-header-lang .flag {
    width: 18px;
    height: auto;
    margin-right: 4px;
}
.sfy-header-lang__code {
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 12px;
}
.sfy-header-user .dropdown-menu {
    min-width: 220px;
    right: 0;
    left: auto;
    /* Force vertical stack — the flex/nowrap chain on the outer
     * .sfy-header-actions was leaking into the dropdown items and
     * rendering them as a horizontal row that spilled off-screen. */
    display: none;
    flex-direction: column !important;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #E8E5DD;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.sfy-header-user .dropdown-menu.show { display: block !important; }
.sfy-header-user .dropdown-menu > li {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}
.sfy-header-user .dropdown-menu > li > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    color: #222;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.3;
}
.sfy-header-user .dropdown-menu > li > a:hover,
.sfy-header-user .dropdown-menu > li > a:focus {
    background: #F5EFE1;
    color: #0F5A3A;
    text-decoration: none;
}
.sfy-header-user .dropdown-menu > li > a > i {
    color: #0F5A3A;
    font-size: 15px;
    line-height: 1;
    width: 18px;
    text-align: center;
}
.sfy-header-user .dropdown-menu > li > a.logout,
.sfy-header-user .dropdown-menu > li > a.logout > i { color: #C84A4A; }

/* Language switcher inside the profile dropdown — one row per
 * language, all styled identically. The active language gets a
 * small green check on the right so the user can see the current
 * selection without visual weight breaking the alignment. */
.sfy-header-user__lang-item {
    list-style: none;
}
.sfy-header-user__lang-item:first-of-type {
    border-top: 1px solid #F5EFE1;
    margin-top: 4px;
}
.sfy-header-user__lang-item > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 20px !important;
    font-size: 14px;
    color: #222;
    text-decoration: none;
    line-height: 1.2;
}
.sfy-header-user__lang-item > a:hover {
    background: #F5EFE1;
    color: #0F5A3A;
}
.sfy-header-user__lang-item.is-current > a {
    color: #0F5A3A;
    font-weight: 600;
    cursor: default;
}
.sfy-header-user__lang-item.is-current > a:hover {
    background: transparent;
}
.sfy-header-user__lang-flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
}
.sfy-header-user__lang-item > a > span { flex: 1; }
.sfy-header-user__lang-check {
    color: #0F5A3A;
    font-size: 12px;
    flex-shrink: 0;
}
/* Fallback border below the last language row so it separates from
 * the next core-nav section. */
.sfy-header-user__lang-item:last-of-type {
    border-bottom: 1px solid #F5EFE1;
    margin-bottom: 4px;
}
.sfy-header-icon-only .nav-link {
    padding: 8px 8px;
    position: relative;
}

/* Bell + chat icon buttons in the header cluster */
.sfy-header-bell .nav-link,
.sfy-header-chat .nav-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background 0.15s;
}
.sfy-header-bell .nav-link:hover,
.sfy-header-chat .nav-link:hover {
    background: #F5EFE1;
}
.sfy-header-bell .nav-link > i,
.sfy-header-chat .nav-link > i {
    font-size: 20px;
    color: #0F5A3A;
}
.sfy-header-bell .nav-link > svg.sfy-notif__bell {
    width: 21px;
    height: 21px;
    color: #0F5A3A;
    display: block;
}

/* Red count badge — bell and chat share this */
/* 2026-09-06 Peter: bell notification dropdown. Uses the
 * same click-outside/Escape toggle pattern as the About
 * menu. Only opens .sfy-notif__menu when .sfy-notif carries
 * .is-open on the <li>. */
.sfy-notif { position: relative; }
.sfy-notif__toggle { position: relative; cursor: pointer; }
.sfy-notif__menu {
    display: none;
    position: absolute;
    top: 100%; right: 0;
    z-index: 1200;
    margin-top: 8px;
    min-width: 340px; max-width: 400px;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
    overflow: hidden;
}
.sfy-notif.is-open .sfy-notif__menu { display: block; }
.sfy-notif__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: #FAF7EE;
    border-bottom: 1px solid #ECE7DA;
    font-size: 14px; color: #1a1a1a;
}
.sfy-notif__head-count {
    background: #0F5A3A; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
}
.sfy-notif__list { list-style: none; padding: 4px 0; margin: 0; max-height: 60vh; overflow-y: auto; }
.sfy-notif__item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px;
    color: #1a1a1a; text-decoration: none;
    border-bottom: 1px solid #F5F0E2;
}
.sfy-notif__list li:last-child .sfy-notif__item { border-bottom: 0; }
.sfy-notif__item:hover { background: #FAF7EE; text-decoration: none; color: #1a1a1a; }
.sfy-notif__icon {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #E9F0EA; color: #0F5A3A;
    font-size: 15px;
}
.sfy-notif__item--purchase .sfy-notif__icon { background: #DCEEFB; color: #2563EB; }
.sfy-notif__item--offer    .sfy-notif__icon { background: #FEF6E4; color: #C89A3D; }
.sfy-notif__item--reserved .sfy-notif__icon { background: #FDE3E3; color: #C84A4A; }
.sfy-notif__body { min-width: 0; }
.sfy-notif__body strong { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; line-height: 1.35; }
.sfy-notif__body span   { display: block; font-size: 12.5px; color: #5F6368; line-height: 1.4; }
.sfy-notif__body em     { display: block; font-size: 11.5px; color: #9CA3AF; font-style: normal; margin-top: 3px; }
.sfy-notif__empty {
    padding: 28px 16px; text-align: center; color: #6b7280;
}
.sfy-notif__empty i { font-size: 26px; color: #C7DFCE; display: block; margin-bottom: 8px; }
.sfy-notif__empty p { margin: 0; font-size: 13px; }
.sfy-notif__foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: #FAF7EE; border-top: 1px solid #ECE7DA;
    color: #0F5A3A; font-size: 13px; font-weight: 600;
    text-decoration: none;
}
.sfy-notif__foot:hover { background: #F5F0E2; text-decoration: none; color: #0F5A3A; }
.sfy-notif__foot i { font-size: 11px; }
/* Unread dot in the dropdown row */
.sfy-notif__item { position: relative; }
.sfy-notif__item.is-unread { background: #FBFAF4; }
.sfy-notif__dot {
    position: absolute; top: 16px; right: 16px;
    width: 8px; height: 8px; border-radius: 999px;
    background: #C84A4A;
}
@media (max-width: 480px) {
    .sfy-notif__menu {
        position: fixed;
        top: 60px; left: 8px; right: 8px;
        min-width: 0; max-width: none;
        margin-top: 0;
    }
}

/* /notifications full-page list */
.sfy-notif-page { padding: 20px 0 60px; }
.sfy-notif-page__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.sfy-notif-page__head h1 {
    font-size: 26px; font-weight: 800; color: #1a1a1a; margin: 0 0 4px;
}
.sfy-notif-page__head p {
    font-size: 13.5px; color: #5F6368; margin: 0;
}
.sfy-notif-page__list {
    list-style: none; padding: 0; margin: 0;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    overflow: hidden;
}
.sfy-notif-page__row { border-bottom: 1px solid #F5F0E2; }
.sfy-notif-page__row:last-child { border-bottom: 0; }
.sfy-notif-page__row.is-unread { background: #FBFAF4; }
.sfy-notif-page__link {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 20px;
    color: #1a1a1a; text-decoration: none;
    position: relative;
}
.sfy-notif-page__link:hover { background: #FAF7EE; color: #1a1a1a; text-decoration: none; }
.sfy-notif-page__body { flex: 1; min-width: 0; }
.sfy-notif-page__body strong { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.sfy-notif-page__body span   { display: block; font-size: 13px; color: #5F6368; line-height: 1.5; }
.sfy-notif-page__body em     { display: block; font-size: 12px; color: #9CA3AF; font-style: normal; margin-top: 6px; }
.sfy-notif-page__dot {
    position: absolute; top: 22px; right: 22px;
    width: 8px; height: 8px; border-radius: 999px; background: #C84A4A;
}
.sfy-notif-page__empty {
    background: #fff; border: 1px dashed #ECE7DA; border-radius: 12px;
    padding: 40px 20px; text-align: center;
}
.sfy-notif-page__empty i { font-size: 36px; color: #C7DFCE; display: block; margin-bottom: 12px; }
.sfy-notif-page__empty p { color: #5F6368; font-size: 14px; margin: 0; max-width: 420px; margin: 0 auto; }
.sfy-notif-page__pager {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; padding: 18px 0 0; font-size: 13px; color: #5F6368;
}
.sfy-notif-page__pager-link {
    background: #fff; border: 1px solid #ECE7DA; border-radius: 8px;
    padding: 6px 12px; color: #1a1a1a; text-decoration: none;
    font-weight: 600;
}
.sfy-notif-page__pager-link:hover { background: #FAF7EE; text-decoration: none; color: #1a1a1a; }
.sfy-notif-page__mark-all button { font-size: 12.5px; padding: 8px 14px; }

/* Notification preferences — Peter 2026-09-07 full tier. */
.sfy-notif-prefs__table {
    width: 100%;
    border-collapse: collapse;
}
.sfy-notif-prefs__table th {
    text-align: left;
    font-size: 12px; font-weight: 700; color: #5F6368;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 8px 12px 12px;
    border-bottom: 1px solid #ECE7DA;
}
.sfy-notif-prefs__table td {
    padding: 14px 12px;
    border-bottom: 1px solid #F5F0E2;
    font-size: 14px; color: #1a1a1a;
    vertical-align: middle;
}
.sfy-notif-prefs__table tr:last-child td { border-bottom: 0; }
.sfy-notif-prefs__col { text-align: center; width: 80px; }
.sfy-notif-prefs__label { display: block; line-height: 1.4; }

/* Toggle switch (used on prefs page + wherever) */
.sfy-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.sfy-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%; height: 100%;
    cursor: pointer;
    margin: 0;
}
.sfy-toggle__slider {
    width: 40px;
    height: 22px;
    background: #E5E1D3;
    border-radius: 999px;
    position: relative;
    transition: background 140ms ease;
}
.sfy-toggle__slider::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.16);
    transition: transform 140ms ease;
}
.sfy-toggle input:checked ~ .sfy-toggle__slider { background: #0F5A3A; }
.sfy-toggle input:checked ~ .sfy-toggle__slider::before { transform: translateX(18px); }
.sfy-toggle input:focus-visible ~ .sfy-toggle__slider {
    outline: 2px solid #C89A3D; outline-offset: 2px;
}
.sfy-toggle--inline { gap: 12px; }
.sfy-toggle__caption { font-size: 14px; color: #1a1a1a; font-weight: 500; }

@media (max-width: 560px) {
    .sfy-notif-prefs__col { width: 60px; }
    .sfy-notif-prefs__table th, .sfy-notif-prefs__table td { padding: 10px 6px; }
}

.sfy-header-badge {
    background: #C84A4A;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
    position: absolute;
    top: 2px;
    right: 2px;
    border: 2px solid #fff;
    letter-spacing: 0;
}
.sfy-header-badge--red { background: #C84A4A; }

/* Rich user trigger: avatar + name + chevron */
.sfy-header-user--rich .sfy-header-user__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    margin-left: 8px;
    /* Fixed width per Peter — the pill must not stretch/shrink with
     * the account-name length, otherwise the language chip on its
     * left drifts. Long names ellipsis via .sfy-header-user__name. */
    width: 190px;
    max-width: 190px;
    min-width: 190px;
    border: 1px solid #ECE7DA;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s;
    text-decoration: none;
    overflow: hidden;
}
.sfy-header-user--rich .sfy-header-user__trigger:hover {
    border-color: #0F5A3A;
    background: #F5EFE1;
}
.sfy-header-user__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #ECE7DA;
}
.sfy-header-user__name {
    line-height: 1;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Grow to fill the pill's remaining width, minus the avatar
     * (30px), the gap (8px), the chevron (~10px) and the right
     * padding (12px). Ellipsis kicks in for longer names. */
    flex: 1 1 auto;
    min-width: 0;
}
.sfy-header-user__chev {
    font-size: 10px;
    color: #8a8a8a;
    line-height: 1;
    transition: transform 0.15s;
}
/* Kill Bootstrap's default .dropdown-toggle::after triangle on the
 * avatar pill — we render our own icon-arrow-down chevron inside
 * the trigger, so the extra caret was duplicating it. */
.sfy-header-user--rich .sfy-header-user__trigger.dropdown-toggle::after {
    display: none;
}
.sfy-header-user--rich .show > .sfy-header-user__trigger .sfy-header-user__chev,
.sfy-header-user--rich .sfy-header-user__trigger[aria-expanded="true"] .sfy-header-user__chev {
    transform: rotate(180deg);
}
/* Hide the name on very narrow tablet widths — keep only the avatar
 * + chevron so the cluster stays on one line. When the name is
 * hidden the fixed width would leave a huge empty pill, so also
 * release the width so the pill hugs its remaining content. */
@media (max-width: 991px) {
    .sfy-header-user__name { display: none; }
    .sfy-header-user--rich .sfy-header-user__trigger {
        padding: 4px 8px 4px 4px;
        width: auto;
        min-width: 0;
        max-width: none;
    }
}
@media (max-width: 767px) {
    .sfy-header-bell, .sfy-header-chat { display: none; }
}

/* ─────────────────────────────────────────────────────────────
 * Service Requests page — 2026-09-04 pixel-perfect redesign.
 * Namespace: .sfy-sr. Sidebar column keeps the existing
 * .sfy-account-layout rules.
 * ─────────────────────────────────────────────────────────── */

.sfy-sr { padding: 4px 0 40px; }

/* Header row: title/lead on left, primary CTA + dropdown on right */
.sfy-sr__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin: 0 0 22px;
}
.sfy-sr__title {
    font-size: 34px; font-weight: 800; color: #1a1a1a;
    letter-spacing: -0.01em; margin: 0 0 6px;
}
.sfy-sr__lead { font-size: 14px; color: #5F6368; margin: 0; max-width: 640px; }

.sfy-sr__cta-wrap { position: relative; }
.sfy-sr__cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: #0F5A3A; color: #fff;
    padding: 12px 20px; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15,90,58,0.14);
}
.sfy-sr__cta:hover { background: #0a3f2a; color: #fff; text-decoration: none; }
.sfy-sr__cta-caret { font-size: 10px; margin-left: 2px; }
.sfy-sr__cta-menu {
    position: absolute; right: 0; top: 100%; margin-top: 8px;
    background: #fff; border: 1px solid #ECE7DA; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
    padding: 6px 0; min-width: 240px;
    display: none; z-index: 30;
}
.sfy-sr__cta-wrap.is-open .sfy-sr__cta-menu { display: block; }
.sfy-sr__cta-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; color: #1a1a1a; font-size: 14px;
    text-decoration: none;
}
.sfy-sr__cta-menu a:hover { background: #FAF7EE; }
.sfy-sr__svc-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 999px;
    background: #E9F0EA; color: #0F5A3A; flex-shrink: 0;
}
.sfy-sr__svc-mini svg { width: 14px; height: 14px; }
.sfy-sr__svc-mini--rose    { background: #FDE3E3; color: #C84A4A; }
.sfy-sr__svc-mini--sky     { background: #DCEEFB; color: #2563EB; }
.sfy-sr__svc-mini--amber   { background: #FEF6E4; color: #C89A3D; }
.sfy-sr__svc-mini--emerald { background: #E9F0EA; color: #0F5A3A; }

/* Filter rows */
.sfy-sr__filter {
    display: flex; align-items: center; gap: 20px;
    padding: 4px 0; margin-bottom: 4px;
}
.sfy-sr__filter-label {
    font-size: 13px; color: #5F6368; font-weight: 500;
    min-width: 60px;
}
.sfy-sr__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sfy-sr__pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: #fff; border: 1px solid #ECE7DA;
    color: #4B5563; font-size: 13px; font-weight: 500;
    text-decoration: none;
}
.sfy-sr__pill:hover { background: #FAF7EE; color: #1a1a1a; text-decoration: none; }
.sfy-sr__pill.is-active {
    background: #0F5A3A; color: #fff; border-color: #0F5A3A;
}
.sfy-sr__pill-icon {
    display: inline-flex; align-items: center; justify-content: center;
    color: #6b7280;
}
.sfy-sr__pill-icon svg { width: 14px; height: 14px; }
.sfy-sr__pill.is-active .sfy-sr__pill-icon { color: #fff; }

/* Row list */
.sfy-sr__list { list-style: none; padding: 0; margin: 24px 0 0; }
.sfy-sr__row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    margin-bottom: 10px;
}
.sfy-sr__row.is-highlight {
    background: #FFF9E6; border-color: #F0DFB0;
}
.sfy-sr__row-icon {
    width: 48px; height: 48px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: #E9F0EA; color: #0F5A3A;
}
.sfy-sr__row-icon svg { width: 22px; height: 22px; }
.sfy-sr__row-icon--rose    { background: #FDE3E3; color: #C84A4A; }
.sfy-sr__row-icon--sky     { background: #DCEEFB; color: #2563EB; }
.sfy-sr__row-icon--amber   { background: #FEF6E4; color: #C89A3D; }
.sfy-sr__row-icon--emerald { background: #E9F0EA; color: #0F5A3A; }

.sfy-sr__row-main { min-width: 0; }
.sfy-sr__row-title {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    color: #1a1a1a; margin-bottom: 4px;
}
.sfy-sr__row-title strong { font-size: 15px; font-weight: 700; }
.sfy-sr__row-num { font-size: 13px; color: #6b7280; font-weight: 500; }
.sfy-sr__row-date { font-size: 13px; color: #6b7280; }
.sfy-sr__row-dot { color: #C7CDD3; margin: 0 2px; }
.sfy-sr__row-meta {
    font-size: 13px; color: #6b7280;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}

.sfy-sr__row-status { min-width: 0; }
.sfy-sr__pill-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.sfy-sr__pill-status i { font-size: 11px; }
.sfy-sr__pill-status--pending { background: #FEF6E4; color: #7A5A00; }
.sfy-sr__pill-status--active  { background: #FEF6E4; color: #7A5A00; }
.sfy-sr__pill-status--ready   { background: #E9F0EA; color: #0F5A3A; }
.sfy-sr__pill-status--booked  { background: #DCEEFB; color: #1E4A9F; }
.sfy-sr__pill-status--hidden  { background: #E5E7EB; color: #4B5563; }
.sfy-sr__row-desc { display: block; font-size: 13px; color: #4B5563; line-height: 1.4; }

.sfy-sr__row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sfy-sr__row-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 8px;
    background: #fff; border: 1px solid #ECE7DA;
    color: #1a1a1a; font-size: 13px; font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.sfy-sr__row-cta:hover { background: #FAF7EE; color: #1a1a1a; text-decoration: none; }
.sfy-sr__row-cta.is-primary {
    background: #0F5A3A; color: #fff; border-color: #0F5A3A;
    box-shadow: 0 2px 8px rgba(15,90,58,0.16);
}
.sfy-sr__row-cta.is-primary:hover { background: #0a3f2a; color: #fff; }
.sfy-sr__row-cta .icon-arrow-right { font-size: 10px; }
.sfy-sr__row-kebab {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #6b7280; text-decoration: none;
}
.sfy-sr__row-kebab:hover { background: #F5F0E2; color: #1a1a1a; }
.sfy-sr__row-kebab i { font-size: 16px; transform: rotate(90deg); }

@media (max-width: 768px) {
    .sfy-sr__row {
        grid-template-columns: 44px 1fr;
        gap: 12px;
    }
    .sfy-sr__row-status,
    .sfy-sr__row-actions { grid-column: 1 / -1; }
    .sfy-sr__row-actions { justify-content: flex-end; }
    .sfy-sr__title { font-size: 26px; }
}

/* Empty state */
.sfy-sr__empty {
    background: #fff; border: 1px dashed #ECE7DA; border-radius: 12px;
    padding: 40px 20px; text-align: center; margin-top: 24px;
}
.sfy-sr__empty-icon {
    width: 48px; height: 48px; border-radius: 999px;
    background: #F5F0E2; color: #6b7280;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.sfy-sr__empty-icon svg { width: 22px; height: 22px; }
.sfy-sr__empty p { color: #5F6368; font-size: 14px; margin: 0 0 16px; }
.sfy-sr__empty-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: #0F5A3A; color: #fff;
    padding: 10px 18px; border-radius: 8px;
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.sfy-sr__empty-cta:hover { background: #0a3f2a; color: #fff; text-decoration: none; }

/* Closed-requests footer card */
.sfy-sr__closed-card {
    display: flex; align-items: center; gap: 16px;
    background: #FAF7EE; border: 1px solid #ECE7DA; border-radius: 12px;
    padding: 16px 20px; margin-top: 18px;
    color: #1a1a1a; text-decoration: none;
}
.sfy-sr__closed-card:hover { background: #F5F0E2; color: #1a1a1a; text-decoration: none; }
.sfy-sr__closed-icon {
    width: 44px; height: 44px; border-radius: 999px;
    background: #F0EBDA; color: #6b7280;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sfy-sr__closed-icon svg { width: 22px; height: 22px; }
.sfy-sr__closed-card > div { flex: 1; }
.sfy-sr__closed-card strong { display: block; font-size: 14px; color: #1a1a1a; margin-bottom: 2px; }
.sfy-sr__closed-card span { display: block; font-size: 13px; color: #5F6368; }
.sfy-sr__closed-link {
    color: #0F5A3A; font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.sfy-sr__closed-link .icon-arrow-right { font-size: 11px; }

/* ─────────────────────────────────────────────────────────────
 * Dashboard — 2026-09-04 pixel-perfect polish (Peter's Dashboard
 * screenshot). These rules layer ON TOP of the existing
 * .sfy-dash-* CSS to shift the visual language toward the new
 * design without needing a view rewrite. Only overrides where
 * the current layout clearly differs from the target.
 * ─────────────────────────────────────────────────────────── */

/* Greeting title — bigger, italic-serif treatment */
.sfy-dash-greet__title {
    font-size: 34px !important;
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    margin: 0 0 6px !important;
}
.sfy-dash-greet__sub {
    font-size: 14px !important;
    color: #5F6368 !important;
}
.sfy-dash-greet__cta {
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(15,90,58,0.14);
}
.sfy-dash-greet__cta.sfy-btn-secondary {
    background: #fff;
    border: 1px solid #ECE7DA !important;
    color: #1a1a1a !important;
    box-shadow: none;
}

/* Panel cards — a touch more padding + subtle shadow */
.sfy-dash-panel {
    padding: 20px 22px !important;
    border-radius: 12px !important;
    border: 1px solid #ECE7DA;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.sfy-dash-panel__head { margin-bottom: 14px !important; }
.sfy-dash-panel__title {
    font-size: 15px !important; font-weight: 700 !important;
    display: inline-flex; align-items: center; gap: 8px;
}
.sfy-dash-panel__title i {
    width: 28px; height: 28px; border-radius: 999px;
    background: #E9F0EA; color: #0F5A3A;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.sfy-dash-panel__link {
    color: #0F5A3A !important; font-weight: 600 !important;
    display: inline-flex; align-items: center; gap: 4px;
}
.sfy-dash-panel__link .icon-arrow-right { font-size: 10px; }

/* Active Requests + Purchases rows */
.sfy-dash-listing {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1px solid transparent;
    margin-bottom: 8px !important;
    transition: background 120ms;
}
.sfy-dash-listing:hover { background: #FAF7EE; }
.sfy-dash-listing--highlight {
    background: #FFF9E6 !important;
    border-color: #F0DFB0 !important;
}
.sfy-dash-listing__title {
    display: flex; align-items: center; gap: 6px;
    font-size: 14.5px !important; font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 2px !important;
}
.sfy-dash-listing__id {
    font-size: 13px !important; font-weight: 500 !important;
    color: #9CA3AF !important;
}
.sfy-dash-listing__status {
    display: block;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 2px;
}
.sfy-dash-listing__status--pending { color: #7A5A00 !important; }
.sfy-dash-listing__status--ready   { color: #0F5A3A !important; font-weight: 700 !important; }
.sfy-dash-listing__status--active  { color: #0F5A3A !important; }
.sfy-dash-listing__meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #6b7280;
}
.sfy-dash-listing__meta i { font-size: 11px; color: #9CA3AF; }
.sfy-dash-listing__cta.sfy-btn-secondary {
    background: #fff !important;
    border: 1px solid #ECE7DA !important;
    color: #1a1a1a !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex; align-items: center; gap: 4px;
}
.sfy-dash-listing__cta.sfy-btn-primary {
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 2px 8px rgba(15,90,58,0.16);
}
.sfy-dash-listing__cta::after {
    content: "›"; font-size: 14px; line-height: 1;
}

/* Service-list icon on Active Requests — color per service if
 * we can tell (Moving = emerald by default). */
.sfy-srv-list__icon {
    width: 44px !important; height: 44px !important;
    border-radius: 999px !important;
    background: #E9F0EA !important; color: #0F5A3A !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}

/* Purchases row — the Order # eyebrow above the product title */
.sfy-dash-listing__order {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #5F6368;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.sfy-dash-listing__thumb {
    width: 56px !important; height: 56px !important;
    border-radius: 10px !important;
    object-fit: cover;
}
.sfy-dash-listing__view-order {
    display: none !important;
}
/* Ready-to-complete alert card */
.sfy-dash-alert {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: #FEF6E4 !important;
    border: 1px solid #F0DFB0;
    margin-bottom: 10px !important;
}

/* Recent Activity — icon-per-item with time on right */
.sfy-dash-activity__item {
    padding: 10px 4px !important;
    display: grid !important;
    grid-template-columns: 32px 1fr auto !important;
    gap: 12px !important;
    align-items: center;
    border-bottom: 1px solid #F5F0E2;
}
.sfy-dash-activity__item:last-child { border-bottom: 0; }
.sfy-dash-activity__icon {
    width: 32px !important; height: 32px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    background: #E9F0EA; color: #0F5A3A;
    flex-shrink: 0;
}
.sfy-dash-activity__title {
    font-size: 13.5px !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.sfy-dash-activity__time {
    font-size: 12px !important;
    color: #9CA3AF !important;
    white-space: nowrap;
}

/* My Furniture empty state */
.sfy-dash-empty {
    padding: 32px 20px !important;
    text-align: center;
}
.sfy-dash-empty > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 999px;
    background: #F5F0E2; color: #9CA3AF;
    font-size: 22px; margin-bottom: 12px;
}
.sfy-dash-empty p {
    font-size: 14px; color: #5F6368; margin: 0 0 4px !important;
}
.sfy-dash-empty p:last-of-type {
    font-size: 12.5px; color: #9CA3AF;
    margin-bottom: 14px !important;
}
.sfy-dash-empty .sfy-btn-primary {
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 2px 8px rgba(15,90,58,0.16);
}
.sfy-dash-empty .sfy-btn-primary::after {
    content: "›"; font-size: 14px; line-height: 1;
}

/* Explore Services tiles — 4 across, colored icon badges */
.sfy-dash-section {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 20px 22px !important;
    margin-top: 16px !important;
}
.sfy-dash-section__title {
    font-size: 15px !important; font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 14px !important;
}
.sfy-dash-services {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}
@media (max-width: 768px) {
    .sfy-dash-services { grid-template-columns: repeat(2, 1fr) !important; }
}
.sfy-dash-service {
    padding: 14px !important;
    border-radius: 10px !important;
    border: 1px solid #ECE7DA !important;
    background: #fff !important;
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    text-decoration: none !important;
}
.sfy-dash-service:hover { background: #FAF7EE !important; }
.sfy-dash-service__icon {
    width: 40px !important; height: 40px !important;
    border-radius: 999px !important;
    background: #E9F0EA !important; color: #0F5A3A !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.sfy-dash-service__icon--sky   { background: #DCEEFB !important; color: #2563EB !important; }
.sfy-dash-service__icon--rose  { background: #FDE3E3 !important; color: #C84A4A !important; }
.sfy-dash-service__icon--amber { background: #FEF6E4 !important; color: #C89A3D !important; }
.sfy-dash-service__body {
    flex: 1; min-width: 0;
}
.sfy-dash-service__body strong {
    display: block; font-size: 14px; color: #1a1a1a;
    margin-bottom: 2px;
}
.sfy-dash-service__body span {
    display: block; font-size: 12px; color: #6b7280; line-height: 1.35;
}
.sfy-dash-service__chevron { color: #9CA3AF !important; font-size: 12px !important; }

/* Grid — enforce 2-col on desktop */
.sfy-dash-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}
@media (max-width: 768px) {
    .sfy-dash-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────
 * Categories slider — Peter's 2026-09-05 SEO block. Renders on
 * homepage + Marketplace so Google can crawl every category
 * from either entry point. Horizontal scroll on any screen too
 * narrow to fit them all; wraps to grid on very wide viewports.
 * ─────────────────────────────────────────────────────────── */
.sfy-cats-slider { padding: 40px 0 24px; }
.sfy-cats-slider__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 20px; margin-bottom: 20px;
}
.sfy-cats-slider__scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Hide the horizontal scrollbar chrome for a cleaner look;
     * still scrolls via touch/drag/keyboard. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sfy-cats-slider__scroller::-webkit-scrollbar { display: none; }
.sfy-cats-slider__list {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 4px 4px 12px;
    margin: 0;
    min-width: min-content;
}
.sfy-cats-slider__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.sfy-cats-slider__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 120px;
    text-decoration: none;
    color: #1a1a1a;
    transition: transform 120ms ease;
}
.sfy-cats-slider__card:hover {
    text-decoration: none;
    color: #1a1a1a;
    transform: translateY(-2px);
}
.sfy-cats-slider__photo {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background: #F5F0E2 center/cover no-repeat;
    border: 1px solid #ECE7DA;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: box-shadow 120ms ease, border-color 120ms ease;
}
.sfy-cats-slider__card:hover .sfy-cats-slider__photo {
    border-color: #C89A3D;
    box-shadow: 0 6px 14px rgba(200,154,61,0.18);
}
.sfy-cats-slider__photo-icon {
    font-size: 32px;
    color: #C89A3D;
}
.sfy-cats-slider__label {
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
    display: -webkit-box;
    /* Peter 2026-09-11: long Finnish compounds wrap at their seams —
       the partial inserts &shy; via sfy_soft_hyphenate(), giving
       "Katto-/valaisimet". Automatic hyphenation is off because it
       split mid-syllable ("Kattovalaisi-/met", "Sesonkisisus-/tus"),
       and overflow-wrap only breaks a word with no seam that still
       can't fit. 2 lines max; min-height keeps every tile aligned. */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    -webkit-hyphens: manual;
    hyphens: manual;
    min-height: 2.5em;
    padding: 0 2px;
}
@media (max-width: 767px) {
    .sfy-cats-slider__card { width: 96px; }
    .sfy-cats-slider__photo { width: 80px; height: 80px; }
    .sfy-cats-slider__label { font-size: 12.5px; }
    .sfy-cats-slider__head h2 { font-size: 20px; }
}

/* ─────────────────────────────────────────────────────────────
 * Moving How It Works — 2026-09-05 rewrite per Peter's meeting.
 * Card grid with alternating cream/white background and a
 * numbered circle badge that has the illustration glyph
 * inscribed INSIDE it. Replaces the earlier homepage-journey
 * treatment where adjacent steps read as one merged block.
 * ─────────────────────────────────────────────────────────── */
.sfy-mov-hiw { padding: 56px 0; }
.sfy-mov-hiw__title { margin: 0 0 28px; text-align: left; }
.sfy-mov-hiw__list {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sfy-mov-hiw__card {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 16px;
    padding: 24px 22px 22px;
    display: flex; flex-direction: column; gap: 8px;
    text-align: left;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.sfy-mov-hiw__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px rgba(15,90,58,0.16);
}
.sfy-mov-hiw__card--alt { background: #FAF7EE; }
.sfy-mov-hiw__badge {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 999px;
    background: #E9F0EA;
    display: flex; align-items: center; justify-content: center;
    margin: 0 0 8px;
    box-shadow: inset 0 0 0 2px #C7DFCE;
}
.sfy-mov-hiw__num {
    position: absolute;
    top: -6px; right: -6px;
    width: 26px; height: 26px;
    border-radius: 999px;
    background: #0F5A3A; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(15,90,58,0.24);
}
.sfy-mov-hiw__glyph {
    font-size: 26px;
    color: #0F5A3A;
    line-height: 1;
}
.sfy-mov-hiw__ctitle {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}
.sfy-mov-hiw__desc {
    font-size: 13.5px;
    color: #5F6368;
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 991px) {
    .sfy-mov-hiw__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .sfy-mov-hiw { padding: 36px 0; }
    .sfy-mov-hiw__list { grid-template-columns: 1fr; gap: 12px; }
    .sfy-mov-hiw__badge { width: 56px; height: 56px; }
    .sfy-mov-hiw__glyph { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────────────
 * Moving hero refinement — Peter 2026-09-05 meeting: hero on
 * /moving felt zoomed out compared to the homepage, and on
 * mobile it felt disconnected from the next section. This
 * override tightens padding + image aspect ratio so the hero
 * reads at the same visual weight as the homepage and lands
 * closer to the content that follows.
 * ─────────────────────────────────────────────────────────── */
.sfy-mov-hero { padding: 48px 0 72px; }
.sfy-mov-hero__grid { min-height: 480px; gap: 32px; }
.sfy-mov-hero__headline { font-size: 60px; }
.sfy-mov-hero__art-wrap {
    aspect-ratio: 4 / 3;
    max-height: 440px;
}
.sfy-mov-hero__copy { padding-bottom: 110px; }

@media (max-width: 991px) {
    .sfy-mov-hero { padding: 32px 0 40px; }
    .sfy-mov-hero__grid { gap: 20px; }
    .sfy-mov-hero__copy { padding-bottom: 0; }
    .sfy-mov-hero__headline { font-size: 40px; }
    /* 2026-09-06 Peter: natural-flow hero image — no forced
     * aspect ratio, image sizes to column. Same treatment as
     * How It Works page. */
    .sfy-mov-hero__trust { margin-top: 20px; }
}
@media (max-width: 575px) {
    .sfy-mov-hero { padding: 24px 0 28px; }
    .sfy-mov-hero__pill { margin-bottom: 18px; }
    .sfy-mov-hero__headline { font-size: 32px; margin-bottom: 16px; }
    .sfy-mov-hero__lead { margin-bottom: 22px; }
    .sfy-mov-hero__art { margin-top: 18px; text-align: center; }
    .sfy-mov-hero__trust { margin-top: 16px; padding: 14px 16px; }
    /* Tighten the gap between hero and next section on mobile —
     * Peter's screenshot showed noticeable disconnect. */
    .sfy-mov-hero + .sfy-mov-services,
    .sfy-mov-hero + section { padding-top: 24px; }
}

/* Visual separator between Moving Services and How It Works
 * (Peter 2026-09-04 nav follow-up). Splits the primary "product"
 * items from the "info/company" items — Buy | Sell | Moving
 * Services | ─ | How It Works | About▾. Rendered as a thin
 * vertical rule using ::after so no extra DOM node is needed. */
.sfy-nav-extra--sep-after {
    position: relative;
    margin-right: 18px !important;
    padding-right: 18px;
}
.sfy-nav-extra--sep-after::after {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 18px;
    background: #ECE7DA;
}
@media (max-width: 991px) {
    /* Collapsed nav on mobile — hide the separator so the stacked
     * items don't get an orphan vertical rule between them. */
    .sfy-nav-extra--sep-after::after { display: none; }
    .sfy-nav-extra--sep-after { padding-right: 0; margin-right: 0 !important; }
}

/* About dropdown in the top nav (Peter 2026-09-04 header spec).
 * Reuses Bootstrap's .dropdown-menu positioning so the caret /
 * hover / click behavior is consistent with the category tabs,
 * while a couple of overrides give it the light-card look from
 * the screenshot: white background, rounded corners, subtle
 * shadow, and green icons beside each link. */
.sfy-nav-about__caret {
    font-size: 9px;
    margin-left: 4px;
    vertical-align: middle;
}
/* 2026-09-06 Peter — nail the About dropdown positioning.
 * Two earlier issues: menu was full-viewport-wide (width
 * inheritance from .mega-menu .dropdown-menu) and after the
 * width was clamped, it was still anchoring to the .container
 * (~200px from left) because .sfy-nav-about wasn't a
 * positioned ancestor. Both !important so vendor CSS can't
 * override, and li.sfy-nav-about's position:relative is
 * hardened too. Menu opens RIGHT-aligned to the About link
 * (right:0 / left:auto) so it sits directly under the tab
 * and extends inward — safer for the rightmost nav item on
 * narrow screens. */
li.sfy-nav-about,
.sfy-nav-about { position: relative !important; }
.sfy-nav-about__menu {
    display: none;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important; left: auto !important;
    z-index: 1000;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    margin: 4px 0 0 0 !important;
    list-style: none;
    float: none !important;
}
.sfy-nav-about.is-open .sfy-nav-about__menu { display: block !important; }
.sfy-nav-about__menu > li > a svg {
    width: 16px; height: 16px; color: #0F5A3A; flex-shrink: 0;
}
.sfy-nav-about__menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: #222;
    font-size: 14px;
    text-decoration: none;
}
.sfy-nav-about__menu > li > a:hover,
.sfy-nav-about__menu > li > a:focus {
    background: #FAF7EE;
    color: #0F5A3A;
}
.sfy-nav-about__menu > li > a > i {
    font-size: 16px;
    color: #0F5A3A;
    width: 18px;
    text-align: center;
}

/* Nav-badge NEW (used on Moving Services item + Sell card) */
.sfy-nav-badge-new {
    display: inline-block;
    background: #C89A3D;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    padding: 3px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* ─── Homepage: shared section title + link ────────────────────── */

.sfy-section-title {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin: 0;
    line-height: 1.2;
}
.sfy-section-link {
    color: #0F5A3A;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sfy-section-link:hover {
    color: #0A442C;
    text-decoration: underline;
}
.sfy-section-link i {
    font-size: 12px;
}

/* ─── Homepage: hero ───────────────────────────────────────────── */

.sfy-hero {
    background: #FAF8F4;
    padding: 60px 0 50px;
}
.sfy-hero__headline {
    font-size: 52px;
    line-height: 1.1;
    font-weight: 800;
    color: #222;
    margin: 0 0 18px;
    letter-spacing: -0.02em;
}
.sfy-hero__accent { color: #C89A3D; }
.sfy-hero__lead {
    font-size: 17px;
    line-height: 1.55;
    color: #5F6368;
    margin: 0 0 28px;
}
.sfy-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    padding: 14px 26px;
}
.sfy-hero__art-placeholder {
    font-size: 120px;
    text-align: center;
    line-height: 1;
    padding: 40px 0;
    color: #C89A3D;
    filter: grayscale(20%);
}

/* Hero art — 2026-09-05 rework per Peter's meeting. Previous
 * treatment (fixed 360px height + 4/3 aspect + object-fit: cover
 * + hard-crop) made the image feel like a rectangle "placed on
 * the page" rather than part of it. Now mirrors the /about hero
 * treatment Peter liked: image flows at its natural aspect ratio,
 * bound only by column width, aligned to the right so it visually
 * anchors the copy on the left. */
.sfy-hero__art { text-align: right; }
.sfy-hero__art-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    /* Kept a subtle radius so the image reads as a hero art
     * asset, not a raw photo edge against the cream background. */
    border-radius: 12px;
}

/* Logo image sizing — the brand logo (assets/img/muuttomyynti-logo.jpg)
   is 1600×800, a 2:1 aspect ratio. Height-cap it so it fits the
   header row without dominating; width follows naturally. */
.sfy-logo-link {
    display: inline-block;
    line-height: 1;
}
.sfy-logo-link img {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 80px;
}
@media (max-width: 767px) {
    .sfy-logo-link img { max-width: 140px; max-height: 60px; }
}
@media (max-width: 767px) {
    .sfy-hero { padding: 40px 0 30px; }
    .sfy-hero__headline { font-size: 38px; }
    .sfy-hero__lead { font-size: 15px; }
}

/* ─── Homepage: trust strip (below hero) ───────────────────────── */

.sfy-trust-strip {
    background: #fff;
    border-top: 1px solid #E8E5DD;
    border-bottom: 1px solid #E8E5DD;
    padding: 18px 0;
}
.sfy-trust-strip__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.sfy-trust-strip__item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 220px;
    min-width: 0;
}
.sfy-trust-strip__icon {
    color: #0F5A3A;
    font-size: 26px;
    line-height: 1;
}
.sfy-trust-strip__item strong {
    display: block;
    font-size: 14px;
    color: #222;
    font-weight: 600;
    line-height: 1.2;
}
.sfy-trust-strip__item span {
    display: block;
    font-size: 12px;
    color: #5F6368;
    line-height: 1.3;
}
@media (max-width: 767px) {
    .sfy-trust-strip__list { overflow-x: auto; flex-wrap: nowrap; }
    .sfy-trust-strip__item { flex: 0 0 220px; }
}

/* ─── Homepage: 3 journey cards ────────────────────────────────── */

.sfy-journey {
    background: #FAF8F4;
    padding: 50px 0 42px;
    scroll-margin-top: 30px; /* leaves breathing room for the smooth-scroll target */
    position: relative;
}
.sfy-journey__row {
    margin-left: -12px;
    margin-right: -12px;
    position: relative;
}
/* Dashed arc-like connectors linking the 3 card icons on desktop.
 * Two segments: from card 1 icon → card 2 icon, card 2 → card 3.
 * Purely decorative; hidden on tablet/mobile where cards stack. */
.sfy-journey--centered .sfy-journey__row::before,
.sfy-journey--centered .sfy-journey__row::after {
    content: "";
    position: absolute;
    top: 68px;
    height: 20px;
    border-top: 2px dashed #D9C99A;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
.sfy-journey--centered .sfy-journey__row::before {
    left: 22%;
    width: 22%;
    border-top-color: #C89A3D;
    opacity: 0.55;
}
.sfy-journey--centered .sfy-journey__row::after {
    right: 22%;
    width: 22%;
    border-top-color: #0F5A3A;
    opacity: 0.55;
}
.sfy-journey__col {
    padding: 12px;
    display: flex;
    position: relative;
    z-index: 1;
}
.sfy-journey__card {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 14px;
    padding: 32px 24px 26px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: box-shadow 0.15s, transform 0.15s;
}
.sfy-journey__card:hover {
    box-shadow: 0 8px 22px rgba(15, 90, 58, 0.08);
    transform: translateY(-2px);
}
.sfy-journey__card--sell    { background: #FFFAF0; }
.sfy-journey__card--move    { background: #F0F7F3; }
.sfy-journey__icon-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #ECE7DA;
}
.sfy-journey__card--sell .sfy-journey__icon-wrap,
.sfy-journey__card--move .sfy-journey__icon-wrap {
    background: #fff;
}
.sfy-journey__icon-wrap--gold { }
.sfy-journey__icon {
    font-size: 26px;
    color: #0F5A3A;
    line-height: 1;
}
.sfy-journey__icon-wrap--gold .sfy-journey__icon { color: #C89A3D; }
.sfy-journey__title {
    font-family: inherit;
    font-size: 26px;
    font-weight: 700;
    color: #222;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.sfy-journey__desc {
    font-size: 14px;
    color: #5F6368;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 260px;
    flex: 1;
}
.sfy-journey__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    padding: 12px 28px;
    border-radius: 999px;
    min-width: 190px;
}
.sfy-journey__price {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: #4a4a4a;
    letter-spacing: 0.02em;
}
.sfy-journey__new-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    margin: 0;
}
@media (max-width: 991px) {
    .sfy-journey--centered .sfy-journey__row::before,
    .sfy-journey--centered .sfy-journey__row::after { display: none; }
}

/* ─── Homepage: Your Moving Journey (4 stages) ─────────────────── */

/* Icon-frame 4-step timeline. Each stage: large peach-ringed circle
 * with a green icon in the middle + a small green numbered badge in
 * the top-left. Dashed grey arrow between stages on desktop. */
.sfy-moving-journey {
    background: #F5EFE1;
    padding: 60px 0;
}
.sfy-moving-journey__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 34px;
    flex-wrap: wrap;
    gap: 12px;
}
.sfy-moving-journey__stages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    position: relative;
}
.sfy-moving-journey__stage {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    z-index: 1;
}
/* Dashed arrow connector on the right side of stages 1–3.
 * Sits at frame vertical center; hidden on the last item. */
.sfy-moving-journey__stage:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 42px;
    right: -6px;
    color: #C4B98F;
    font-size: 22px;
    letter-spacing: -0.02em;
    z-index: 0;
    /* Fake a dashed shaft with a border layered on top of the arrowhead */
    padding-left: 26px;
    background-image: linear-gradient(to right,
        transparent 0, transparent 4px,
        #C4B98F 4px, #C4B98F 8px,
        transparent 8px, transparent 12px,
        #C4B98F 12px, #C4B98F 16px,
        transparent 16px, transparent 20px,
        #C4B98F 20px, #C4B98F 24px,
        transparent 24px);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 26px 2px;
    line-height: 1;
}
.sfy-moving-journey__frame {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #FFF7E5;
    border: 2px solid #F0D9A1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 8px #fff;
}
.sfy-moving-journey__frame-icon {
    font-size: 34px;
    color: #0F5A3A;
    line-height: 1;
}
.sfy-moving-journey__num {
    position: absolute;
    top: -4px;
    left: -4px;
    background: #0F5A3A;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(15, 90, 58, 0.25);
    border: 3px solid #F5EFE1;
    z-index: 2;
}
.sfy-moving-journey__body {
    display: block;
    padding-right: 20px;
}
.sfy-moving-journey__stage strong {
    display: block;
    font-size: 16px;
    color: #222;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.sfy-moving-journey__stage .sfy-moving-journey__desc {
    display: block;
    font-size: 14px;
    color: #5F6368;
    line-height: 1.5;
}
@media (max-width: 991px) {
    .sfy-moving-journey__stages { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .sfy-moving-journey__stage:not(:last-child)::after { display: none; }
}
@media (max-width: 575px) {
    .sfy-moving-journey__stages { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
 * Homepage: Browse Marketplace — photo tile + white label bar
 * ═══════════════════════════════════════════════════════════════ */
.sfy-browse-marketplace {
    background: #fff;
    padding: 50px 0;
}
.sfy-browse-marketplace__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 26px;
    flex-wrap: wrap;
    gap: 12px;
}
.sfy-cat-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
}
.sfy-cat-card {
    background: transparent;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    color: #222;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s, transform 0.15s;
}
.sfy-cat-card:hover {
    box-shadow: 0 10px 22px rgba(15, 90, 58, 0.10);
    transform: translateY(-2px);
    text-decoration: none;
    color: #222;
}
.sfy-cat-card__photo {
    background: linear-gradient(135deg, #F5E4C5 0%, #EED0A5 100%);
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B08040;
}
.sfy-cat-card__photo-icon {
    font-size: 48px;
    opacity: 0.55;
    line-height: 1;
}
.sfy-cat-card__bar {
    background: #fff;
    padding: 14px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sfy-cat-card__icon {
    font-size: 16px;
    color: #0F5A3A;
    line-height: 1;
    flex-shrink: 0;
}
.sfy-cat-card__label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #222;
}
@media (max-width: 1199px) { .sfy-cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .sfy-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ═══════════════════════════════════════════════════════════════
 * Homepage: Why choose Muuttomyynti — beige panel, horizontal 4-up
 * ═══════════════════════════════════════════════════════════════ */
.sfy-why {
    background: #fff;
    padding: 50px 0;
}
.sfy-why--panel {
    background: #F5EFE1;
}
.sfy-why__title {
    margin-bottom: 34px;
    text-align: center;
    font-family: inherit;
    font-size: 34px;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.01em;
}
.sfy-why__row { margin-left: -10px; margin-right: -10px; }
.sfy-why__row > [class^="col-"] { padding: 10px; }
.sfy-why__card {
    background: #fff;
    border: 1px solid #ECE5D4;
    border-radius: 12px;
    padding: 22px 20px;
    height: 100%;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    transition: box-shadow 0.15s, transform 0.15s;
}
.sfy-why__card:hover {
    box-shadow: 0 6px 16px rgba(15, 90, 58, 0.08);
    transform: translateY(-2px);
}
.sfy-why__icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0F5A3A;
    border: 2px solid #0F5A3A;
    background: transparent;
}
.sfy-why__icon {
    font-size: 20px;
    color: #0F5A3A;
    line-height: 1;
}
.sfy-why__body { flex: 1; min-width: 0; }
.sfy-why__card strong {
    display: block;
    font-size: 16px;
    color: #222;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.sfy-why__card p {
    font-size: 13px;
    color: #5F6368;
    line-height: 1.5;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * Homepage: Moving Made Simple — 3 tiers + inline van illustration
 * ═══════════════════════════════════════════════════════════════ */
.sfy-moving-pricing {
    background: #fff;
    padding: 55px 0 60px;
}
.sfy-moving-pricing__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}
.sfy-moving-pricing__lead {
    font-size: 14px;
    color: #5F6368;
    margin: 6px 0 0;
}
.sfy-moving-pricing__row { margin-left: -12px; margin-right: -12px; }
.sfy-moving-pricing__row > [class^="col-"] { padding: 12px; }
.sfy-price-card {
    display: block;
    background: #FAF8F4;
    border: 1px solid #ECE5D4;
    border-radius: 14px;
    padding: 24px 24px 22px;
    text-decoration: none;
    color: #222;
    height: 100%;
    position: relative;
    transition: box-shadow 0.15s, transform 0.15s;
    /* NO overflow:hidden — the MOST POPULAR badge sits at top:-14px
     * and would get clipped. Van is bounded by explicit width instead. */
}
.sfy-price-card:hover {
    box-shadow: 0 8px 22px rgba(15, 90, 58, 0.10);
    transform: translateY(-2px);
    text-decoration: none;
    color: #222;
}
.sfy-price-card--popular {
    background: #fff;
    border: 2px solid #0F5A3A;
}
.sfy-price-card__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #0F5A3A;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 6px 16px;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(15, 90, 58, 0.25);
}
.sfy-price-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Reserve room on the right so the van doesn't crash into the
     * feature list on medium widths. */
    padding-right: 96px;
    position: relative;
    z-index: 1;
}
.sfy-price-card__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 2px;
    color: #222;
    letter-spacing: -0.01em;
}
.sfy-price-card__sub {
    font-size: 13px;
    color: #5F6368;
    margin: 0 0 10px;
}
.sfy-price-card__from {
    font-size: 12px;
    color: #4a4a4a;
    font-weight: 600;
    margin-bottom: 2px;
    letter-spacing: 0.02em;
}
.sfy-price-card__price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0 0 14px;
}
.sfy-price-card__amount {
    font-size: 32px;
    font-weight: 800;
    color: #222;
    line-height: 1;
    letter-spacing: -0.02em;
}
.sfy-price-card__per {
    font-size: 13px;
    color: #5F6368;
    font-weight: 500;
}
.sfy-price-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #4a4a4a;
    font-size: 13px;
    line-height: 1.8;
    font-weight: 500;
}
.sfy-price-card__features li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sfy-price-card__features i {
    color: #0F5A3A;
    font-size: 12px;
}
/* Van sits as a decoration pinned to the bottom-right corner. */
.sfy-price-card__van {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 120px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * Homepage: What our customers say (soft beige quote panel)
 * ═══════════════════════════════════════════════════════════════ */
.sfy-customer-stories {
    background: #F5EFE1;
    padding: 40px 0;
}
.sfy-customer-stories__left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 20px;
}
.sfy-customer-stories__quote-mark {
    color: #0F5A3A;
    font-family: inherit;
    font-size: 64px;
    line-height: 0.5;
    display: inline-block;
    margin-bottom: 4px;
}
.sfy-customer-stories__title {
    font-family: inherit;
    font-size: 30px;
    font-weight: 700;
    color: #222;
    margin: 0;
    letter-spacing: -0.01em;
}
.sfy-customer-stories__lead {
    font-size: 14px;
    color: #5F6368;
    margin: 4px 0 0;
    line-height: 1.5;
}
.sfy-customer-stories__right {
    position: relative;
    padding: 8px 20px 8px 0;
    text-align: left;
}
.sfy-customer-stories__soon-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
}
.sfy-customer-stories__soon-body {
    font-size: 14px;
    color: #5F6368;
    line-height: 1.55;
    margin: 0;
    max-width: 360px;
}
.sfy-customer-stories__sofa {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 160px;
    height: auto;
    opacity: 0.65;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
 * Homepage: stats + coverage bar
 * ═══════════════════════════════════════════════════════════════ */
.sfy-stats-bar {
    background: #fff;
    padding: 22px 0;
    border-top: 1px solid #ECE5D4;
}
.sfy-stats-bar__row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.sfy-stats-bar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #4a4a4a;
}
.sfy-stats-bar__item > i {
    font-size: 22px;
    color: #0F5A3A;
    line-height: 1;
}
.sfy-stats-bar__item div {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.sfy-stats-bar__item strong {
    font-size: 18px;
    color: #222;
    font-weight: 800;
}
.sfy-stats-bar__item span {
    font-size: 13px;
    color: #5F6368;
}
.sfy-stats-bar__item--city {
    color: #222;
    font-weight: 600;
    font-size: 14px;
}
.sfy-stats-bar__item--city i {
    color: #0F5A3A;
    font-size: 16px;
}
@media (max-width: 991px) {
    .sfy-price-card__content { padding-right: 0; padding-bottom: 90px; }
    .sfy-price-card__van { right: 16px; bottom: 12px; width: 130px; }
    .sfy-customer-stories__sofa { display: none; }
    .sfy-customer-stories__left { padding-right: 0; padding-bottom: 20px; }
    .sfy-stats-bar__row { justify-content: flex-start; gap: 18px 26px; }
}

/* ─── Homepage: legacy product section (kept intact) ───────────── */

.sfy-legacy-products {
    background: #fff;
    padding: 40px 0;
}
.sfy-legacy-products__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

/* ═════════════════════════════════════════════════════════════════
 * Phase 2 — footer redesign
 * ═════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════
 * Footer — pixel-perfect rebuild per sample
 * ═════════════════════════════════════════════════════════════════ */
.sfy-footer {
    background: #FAF8F4;
    color: #5F6368;
    font-size: 13px;
    line-height: 1.55;
    margin-top: 60px;
}

/* ─── 1. Trust ribbon (light beige rounded panel) ───────────────── */
.sfy-footer-trust {
    background: #FAF8F4;
    padding: 30px 0 24px;
}
.sfy-footer-trust > .container > .sfy-footer-trust__list,
.sfy-footer-trust__list {
    background: #F5EFE1;
    border-radius: 14px;
    padding: 22px 30px;
    list-style: none;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.sfy-footer-trust__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1 1 220px;
    min-width: 0;
    padding-right: 12px;
    border-right: 1px solid #E5D9BE;
}
.sfy-footer-trust__list li:last-child { border-right: 0; padding-right: 0; }
.sfy-footer-trust__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: #0F5A3A;
    margin-top: 2px;
}
.sfy-footer-trust__list strong {
    display: block;
    font-size: 14px;
    color: #222;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}
.sfy-footer-trust__list span {
    display: block;
    font-size: 12.5px;
    color: #6b6b6b;
    line-height: 1.4;
}

/* ─── 2. Tagline divider row (line — badge — text — line) ───────── */
.sfy-footer-tagline-row {
    padding: 20px 0 22px;
}
.sfy-footer-tagline-row__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: center;
}
.sfy-footer-tagline-row__line {
    flex: 1;
    height: 1px;
    background: #E5DEC9;
    display: block;
    max-width: 320px;
}
.sfy-footer-tagline-row__badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F5EFE1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfy-footer-tagline-row__badge svg { width: 30px; height: 30px; }
.sfy-footer-tagline-row__text {
    margin: 0;
    color: #222;
    font-size: 15px;
    line-height: 1.4;
    flex-shrink: 0;
}
.sfy-footer-tagline-row__text strong { color: #0F5A3A; font-weight: 700; }
@media (max-width: 767px) {
    .sfy-footer-tagline-row__inner { flex-direction: column; gap: 12px; }
    .sfy-footer-tagline-row__line { display: none; }
    .sfy-footer-tagline-row__text { text-align: center; font-size: 14px; }
}

/* ─── 3. Main grid — brand block + 4 link columns ───────────────── */
.sfy-footer-main { padding: 20px 0 40px; }
.sfy-footer-brand__logo img {
    max-width: 220px;
    max-height: 60px;
    width: auto;
    display: block;
    margin-bottom: 8px;
}
.sfy-footer-brand__tagline {
    color: #C89A3D;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 20px;
    letter-spacing: 0.01em;
}
.sfy-footer-brand__socials {
    display: flex;
    gap: 10px;
}
.sfy-footer-social {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F5EFE1;
    color: #0F5A3A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.sfy-footer-social:hover {
    background: #0F5A3A;
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
.sfy-footer-social:hover svg path { fill: #fff; }
.sfy-footer-col__title {
    color: #222;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
}
.sfy-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sfy-footer-col li { margin-bottom: 10px; }
.sfy-footer-col a {
    color: #4a4a4a;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.sfy-footer-col a > i {
    color: #C89A3D;
    font-size: 10px;
    line-height: 1;
}
.sfy-footer-col a:hover { color: #0F5A3A; text-decoration: none; }
.sfy-footer-col a:hover > i { color: #0F5A3A; }

/* ─── 4. Dark green bottom bar ──────────────────────────────────── */
.sfy-footer-bottom {
    background: #0C3A2A;
    color: rgba(255, 255, 255, 0.9);
    padding: 24px 0;
}
.sfy-footer-bottom__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.sfy-footer-bottom__left { display: flex; flex-direction: column; gap: 14px; }
.sfy-footer-bottom__line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #fff;
}
.sfy-footer-bottom__icon {
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: 2px;
}
/* SVG variant for icons that aren't in the font (icon-lock) —
 * needs explicit sizing since font-size doesn't apply. */
svg.sfy-footer-bottom__icon { width: 18px; height: 18px; }
.sfy-footer-bottom__area-line {
    display: block;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    line-height: 1.4;
}
.sfy-footer-bottom__area-line--gold { color: #E8D3A4; margin-top: 2px; font-weight: 500; }
.sfy-footer-bottom__copy {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.4;
}
.sfy-footer-bottom__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 2px 0;
    max-width: 460px;
}

/* Payment badges */
.sfy-footer-bottom__payments {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.sfy-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: #fff;
    color: #222;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    height: 30px;
    min-width: 44px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.sfy-pay--visa { color: #1A1F71; font-style: italic; letter-spacing: 0.05em; font-size: 13px; }
.sfy-pay--mc {
    position: relative;
    min-width: 44px;
    background: #fff;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.sfy-pay__mc-a, .sfy-pay__mc-b {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}
.sfy-pay__mc-a { background: #EB001B; margin-right: -6px; }
.sfy-pay__mc-b { background: #F79E1B; opacity: 0.85; }
.sfy-pay--apple { color: #000; font-size: 12px; }
.sfy-pay--apple svg { margin-right: -2px; }
.sfy-pay--google { color: #5F6368; font-size: 12px; font-weight: 600; }
.sfy-pay--mobile { background: #5A78FF; color: #fff; font-size: 11px; }
.sfy-pay--klarna { background: #FFB3C7; color: #17120F; font-size: 12px; }

@media (max-width: 991px) {
    .sfy-footer-trust__list li { border-right: 0; padding-right: 0; }
    .sfy-footer-bottom__row { flex-direction: column; align-items: flex-start; }
    .sfy-footer-bottom__payments { align-self: stretch; justify-content: flex-start; }
}

/* Smooth-scroll for anchor links (hero "Choose your journey" → #sfy-journey). */
html { scroll-behavior: smooth; }

/* ═════════════════════════════════════════════════════════════════
 * Phase 3 — /moving page + /how-it-works + /buyer-protection +
 *           /safety-and-trust
 * ═════════════════════════════════════════════════════════════════ */

/* ─── Shared content-page hero ─────────────────────────────────── */
.sfy-content-hero {
    background: #FAF8F4;
    padding: 50px 0 40px;
}
.sfy-content-hero__title {
    font-size: 40px;
    font-weight: 800;
    color: #222;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.sfy-content-hero__lead {
    font-size: 16px;
    line-height: 1.6;
    color: #5F6368;
    margin: 0;
    max-width: 680px;
}
@media (max-width: 767px) {
    .sfy-content-hero { padding: 30px 0 22px; }
    .sfy-content-hero__title { font-size: 30px; }
}

/* ─── Outline button (companion to sfy-btn-primary) ────────────── */
.sfy-btn-outline {
    background: transparent;
    border: 1px solid #0F5A3A;
    color: #0F5A3A;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 3px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.sfy-btn-outline:hover, .sfy-btn-outline:focus {
    background: #0F5A3A;
    color: #fff;
    text-decoration: none;
}

/* ─── /moving page ─────────────────────────────────────────────── */

.sfy-moving-hero {
    background: #FAF8F4;
    padding: 50px 0 40px;
}
.sfy-moving-hero__headline {
    font-size: 44px;
    font-weight: 800;
    color: #222;
    line-height: 1.1;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
.sfy-moving-hero__lead {
    font-size: 16px;
    color: #5F6368;
    line-height: 1.55;
    margin: 0 0 24px;
    max-width: 560px;
}
.sfy-moving-hero__cta { display: inline-flex; align-items: center; gap: 8px; }
.sfy-moving-hero__art-placeholder {
    font-size: 120px;
    text-align: center;
    color: #C89A3D;
}

.sfy-moving-packages {
    background: #fff;
    padding: 50px 0;
}
.sfy-moving-packages__title { text-align: center; margin-bottom: 6px; }
.sfy-moving-packages__lead {
    text-align: center;
    color: #5F6368;
    font-size: 14px;
    margin: 0 0 28px;
}
.sfy-moving-pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.sfy-moving-pkg-card {
    background: #FAF8F4;
    border: 1px solid #E8E5DD;
    border-radius: 8px;
    padding: 26px 22px;
    text-decoration: none;
    color: #222;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
    transition: box-shadow 0.15s, transform 0.15s;
}
.sfy-moving-pkg-card:hover {
    box-shadow: 0 6px 16px rgba(15, 90, 58, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
    color: #222;
}
.sfy-moving-pkg-card--popular {
    border-color: #0F5A3A;
    border-width: 2px;
    background: #F0F7F3;
}
.sfy-moving-pkg-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #C89A3D;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
}
.sfy-moving-pkg-card__badge--soft {
    position: static;
    transform: none;
    background: #E8D3A4;
    color: #7a5f20;
    margin-right: 6px;
}
.sfy-moving-pkg-card__icon {
    background: #E8F1EC;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F5A3A;
    font-size: 20px;
    margin-bottom: 6px;
}
.sfy-moving-pkg-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 2px;
}
.sfy-moving-pkg-card__sub {
    font-size: 13px;
    color: #5F6368;
    margin: 0 0 10px;
}
.sfy-moving-pkg-card__price {
    font-size: 17px;
    font-weight: 700;
    color: #0F5A3A;
    margin: 0 0 16px;
}
.sfy-moving-pkg-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 10px 16px;
    margin-top: auto;
}
.sfy-moving-packages__soon {
    text-align: center;
    color: #5F6368;
    font-size: 13px;
    margin: 26px 0 0;
}
@media (max-width: 991px) { .sfy-moving-pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sfy-moving-pkg-grid { grid-template-columns: 1fr; } }

.sfy-moving-included {
    background: #FAF8F4;
    padding: 40px 0;
}
.sfy-moving-included__title { text-align: center; margin-bottom: 24px; }
.sfy-moving-included__list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 30px;
    font-size: 14px;
    color: #222;
}
.sfy-moving-included__list li { display: flex; align-items: center; gap: 8px; }
.sfy-moving-included__list i { color: #0F5A3A; font-weight: 700; }
@media (max-width: 575px) { .sfy-moving-included__list { grid-template-columns: 1fr; } }

.sfy-moving-how {
    background: #fff;
    padding: 40px 0;
}
.sfy-moving-how__title { text-align: center; margin-bottom: 24px; }
.sfy-moving-how__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.sfy-moving-how__steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FAF8F4;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
}
.sfy-moving-how__num {
    background: #0F5A3A;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
@media (max-width: 991px) { .sfy-moving-how__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sfy-moving-how__steps { grid-template-columns: 1fr; } }

.sfy-moving-request {
    background: #FAF8F4;
    padding: 50px 0 60px;
    scroll-margin-top: 30px;
}
.sfy-moving-request__card {
    background: #fff;
    border: 1px solid #E8E5DD;
    border-radius: 10px;
    padding: 32px;
    max-width: 900px;
    margin: 0 auto;
}
.sfy-moving-request__lead {
    color: #5F6368;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0 26px;
}
.sfy-moving-form .form-group {
    margin-bottom: 16px;
}
.sfy-moving-form .control-label {
    font-size: 13px;
    color: #222;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}
.sfy-moving-form .form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E8E5DD;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    color: #222;
}
.sfy-moving-form .form-input:focus {
    outline: none;
    border-color: #0F5A3A;
    box-shadow: 0 0 0 2px rgba(15, 90, 58, 0.15);
}
.sfy-moving-form__inline-check label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #222;
    margin: 0;
    cursor: pointer;
}
.sfy-moving-form__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}
.sfy-moving-form__radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F5F4EF;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
}
.sfy-moving-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    padding: 14px 26px;
}

/* ─── /how-it-works stages ─────────────────────────────────────── */

.sfy-hiw-stages {
    background: #fff;
    padding: 50px 0;
}
.sfy-hiw-stage {
    display: flex;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid #E8E5DD;
}
.sfy-hiw-stage:last-child { border-bottom: 0; }
.sfy-hiw-stage__num {
    background: #0F5A3A;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}
.sfy-hiw-stage__title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin: 0 0 12px;
}
.sfy-hiw-stage__list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    color: #5F6368;
    font-size: 14px;
    line-height: 1.9;
}
.sfy-hiw-stage__list li::before {
    content: "› ";
    color: #C89A3D;
    margin-right: 4px;
}

.sfy-hiw-trust {
    background: #FAF8F4;
    padding: 50px 0;
}
.sfy-hiw-trust__card {
    background: #fff;
    border-radius: 8px;
    padding: 22px 18px;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.sfy-hiw-trust__card i {
    font-size: 26px;
    color: #0F5A3A;
    margin-bottom: 4px;
}
.sfy-hiw-trust__card strong {
    font-size: 14px;
    color: #222;
    font-weight: 700;
}
.sfy-hiw-trust__card p {
    font-size: 13px;
    color: #5F6368;
    line-height: 1.45;
    margin: 0;
}

.sfy-hiw-cta {
    background: #fff;
    padding: 50px 0;
}
.sfy-hiw-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px 20px;
}

/* ─── /buyer-protection ────────────────────────────────────────── */

.sfy-bp-steps {
    background: #fff;
    padding: 50px 0;
}
.sfy-bp-steps__title { text-align: center; margin-bottom: 6px; }
.sfy-bp-steps__lead {
    text-align: center;
    color: #5F6368;
    font-size: 14px;
    margin: 0 0 28px;
}
.sfy-bp-steps__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
}
.sfy-bp-step {
    background: #FAF8F4;
    border-radius: 8px;
    padding: 18px 14px;
    text-align: center;
}
.sfy-bp-step__num {
    background: #0F5A3A;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}
.sfy-bp-step strong {
    display: block;
    font-size: 13px;
    color: #222;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.3;
}
.sfy-bp-step p {
    font-size: 12px;
    color: #5F6368;
    line-height: 1.4;
    margin: 0;
}
@media (max-width: 1199px) { .sfy-bp-steps__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .sfy-bp-steps__grid { grid-template-columns: repeat(2, 1fr); } }

.sfy-bp-why {
    background: #FAF8F4;
    padding: 50px 0;
}
.sfy-bp-why__title { text-align: center; margin-bottom: 24px; }
.sfy-bp-why__row > [class^="col-"] { padding: 10px; }
.sfy-bp-why__card {
    background: #fff;
    border-radius: 8px;
    padding: 24px 20px;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.sfy-bp-why__card i {
    font-size: 28px;
    color: #0F5A3A;
    margin-bottom: 4px;
}
.sfy-bp-why__card strong {
    font-size: 15px;
    color: #222;
    font-weight: 700;
}
.sfy-bp-why__card p {
    font-size: 13px;
    color: #5F6368;
    line-height: 1.5;
    margin: 0;
}

.sfy-bp-covered {
    background: #fff;
    padding: 50px 0;
}
.sfy-bp-covered__card {
    padding: 26px;
    border-radius: 8px;
    height: 100%;
}
.sfy-bp-covered__card--yes { background: #E8F1EC; border: 1px solid #b7d8c4; }
.sfy-bp-covered__card--no  { background: #FEF3F3; border: 1px solid #f3d0d0; }
.sfy-bp-covered__title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin: 0 0 14px;
}
.sfy-bp-covered__card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #5F6368;
    font-size: 14px;
    line-height: 1.8;
}
.sfy-bp-covered__note {
    color: #8B8B8B;
    font-size: 12px;
    text-align: center;
    margin: 20px 0 0;
}

.sfy-bp-tips {
    background: #FAF8F4;
    padding: 40px 0;
}
.sfy-bp-tips__title { text-align: center; margin-bottom: 22px; }
.sfy-bp-tip {
    text-align: center;
    padding: 16px 10px;
}
.sfy-bp-tip i {
    display: block;
    font-size: 26px;
    color: #0F5A3A;
    margin-bottom: 8px;
}
.sfy-bp-tip p {
    color: #5F6368;
    font-size: 13px;
    margin: 0;
}

.sfy-bp-cta {
    background: #fff;
    padding: 50px 0;
}
.sfy-bp-cta__card {
    background: #F0F7F3;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.sfy-bp-cta__card h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #222;
}
.sfy-bp-cta__card p {
    color: #5F6368;
    font-size: 14px;
    margin: 0;
}
.sfy-bp-cta__buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── /safety-and-trust ────────────────────────────────────────── */

.sfy-st-topics {
    background: #fff;
    padding: 50px 0;
}
.sfy-st-topics__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.sfy-st-topic {
    background: #FAF8F4;
    border-radius: 8px;
    padding: 22px 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sfy-st-topic__num {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #0F5A3A;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.sfy-st-topic__icon {
    background: #E8F1EC;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F5A3A;
    font-size: 20px;
    margin-bottom: 4px;
}
.sfy-st-topic h3 {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin: 0;
}
.sfy-st-topic p {
    font-size: 13px;
    color: #5F6368;
    line-height: 1.45;
    margin: 0 0 4px;
}
.sfy-st-topic ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #5F6368;
    font-size: 12px;
    line-height: 1.6;
}
.sfy-st-topic__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #0F5A3A;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    margin-top: 6px;
}
.sfy-st-topic__link:hover { color: #0A442C; text-decoration: underline; }
@media (max-width: 1199px) { .sfy-st-topics__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .sfy-st-topics__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .sfy-st-topics__grid { grid-template-columns: 1fr; } }

.sfy-st-build {
    background: #FAF8F4;
    padding: 50px 0;
}
.sfy-st-build__title { text-align: center; margin-bottom: 24px; }
.sfy-st-build__card {
    background: #fff;
    border-radius: 8px;
    padding: 22px 18px;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.sfy-st-build__card i {
    font-size: 26px;
    color: #0F5A3A;
    margin-bottom: 4px;
}
.sfy-st-build__card strong {
    font-size: 14px;
    color: #222;
    font-weight: 700;
}
.sfy-st-build__card p {
    font-size: 13px;
    color: #5F6368;
    line-height: 1.45;
    margin: 0;
}

/* ═════════════════════════════════════════════════════════════════
 * Phase 4 — mobile bottom nav + legal page
 * ═════════════════════════════════════════════════════════════════ */

/* ─── Mobile bottom nav ────────────────────────────────────────── */

.sfy-mobile-bottom-nav {
    display: none;
}
@media (max-width: 767px) {
    .sfy-mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #ECE7DA;
        z-index: 1050;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
        padding: 0 0 max(4px, env(safe-area-inset-bottom));
        align-items: stretch;
    }
    /* Push page content up so the last-viewport content isn't hidden
       under the fixed bar. Uses the same env() as the nav so the
       spacing tracks the actual bar height on notched devices. */
    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Suppress our legacy header's own scroll-up button so it doesn't
       collide with the bottom nav. */
    .scrollup {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
/* Every tab is a FIXED 60px tall column with two rows:
 *   - Icon area: 30px tall, centered
 *   - Label area: 18px tall, single line, centered
 * All labels sit at the same baseline no matter what the icon is,
 * and the raised Sell circle can extend upward without shifting
 * anything. */
.sfy-mobile-bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    height: 60px;
    display: grid;
    grid-template-rows: 30px 18px;
    align-items: center;
    justify-items: center;
    padding: 6px 2px 4px;
    color: #8a8a8a;
    text-decoration: none;
    position: relative;
    background: transparent;
    transition: color 0.15s;
}
/* Icons render via icon-font ::before glyphs — every glyph has its
 * own em-box padding, so 'align-items: center' with line-height 1
 * doesn't visually center them consistently (search's magnifier
 * sits higher than the map pin, etc.). Force a full 30px block with
 * text-align + line-height matching the box height so every glyph
 * center-aligns on the same baseline regardless of its intrinsic
 * metrics. */
.sfy-mobile-bottom-nav__item > i {
    grid-row: 1;
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 22px;
    text-align: center;
    color: inherit;
}
.sfy-mobile-bottom-nav__item > span {
    grid-row: 2;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    color: inherit;
}
.sfy-mobile-bottom-nav__item:hover,
.sfy-mobile-bottom-nav__item:focus {
    color: #0F5A3A;
    text-decoration: none;
    background: transparent;
}
.sfy-mobile-bottom-nav__item.is-active { color: #0F5A3A; background: transparent; }
.sfy-mobile-bottom-nav__item.is-active > span { font-weight: 700; }
/* Green 3px stripe at the very top of the active tab */
.sfy-mobile-bottom-nav__item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 3px;
    background: #0F5A3A;
    border-radius: 0 0 3px 3px;
}
/* Primary "Sell" slot — filled green circle icon in the icon row.
 * Same 30px row as other tabs; the circle just fills it and lifts
 * a touch with a shadow so it reads as a raised action button. */
.sfy-mobile-bottom-nav__item--primary > i {
    background: #0F5A3A;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    margin-top: -10px; /* raise above the icon row so it visually pops */
    box-shadow: 0 3px 8px rgba(15, 90, 58, 0.30);
}
.sfy-mobile-bottom-nav__item--primary > span {
    color: #0F5A3A;
    font-weight: 700;
}
/* Primary slot never gets the active-state underline stripe. */
.sfy-mobile-bottom-nav__item--primary.is-active::before { display: none; }
.sfy-mobile-bottom-nav__badge {
    /* Pinned to the top-right of the Moving tab so it can never
     * force the label to wrap or push adjacent tabs. */
    position: absolute;
    top: 4px;
    right: 4px;
    background: #C89A3D;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ─── Legal pages (/terms-of-service, /privacy-policy) ────────── */

.sfy-legal-body {
    background: #fff;
    padding: 40px 0 60px;
}
.sfy-legal-body__wrap {
    max-width: 780px;
    margin: 0 auto;
    color: #5F6368;
    font-size: 15px;
    line-height: 1.65;
}
.sfy-legal-body__wrap p { margin: 0 0 14px; }
.sfy-legal-body__wrap h2,
.sfy-legal-body__wrap h3 {
    color: #222;
    margin: 26px 0 10px;
    font-weight: 700;
}
.sfy-legal-body__wrap h2 { font-size: 20px; }
.sfy-legal-body__wrap h3 { font-size: 17px; }
.sfy-legal-body__wrap ul,
.sfy-legal-body__wrap ol {
    padding-left: 20px;
    margin: 0 0 14px;
}
.sfy-legal-body__wrap li {
    margin-bottom: 6px;
}
.sfy-legal-body__wrap strong { color: #222; }
.sfy-legal-body__wrap a {
    color: #0F5A3A;
    text-decoration: underline;
}

/* ═════════════════════════════════════════════════════════════════
 * Account sidebar (Marketplace UX §2)
 *
 * Nested navigation tree for every logged-in account page.
 * Rendered from partials/_account_sidebar.php with slot flags.
 * ═════════════════════════════════════════════════════════════════ */

.sfy-account-nav {
    background: #fff;
    border: 1px solid #E8E5DD;
    border-radius: 8px;
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.4;
    color: #222;
    max-width: 300px;
}
.sfy-account-nav__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 14px;
    border-bottom: 1px solid #E8E5DD;
    margin-bottom: 8px;
}
.sfy-account-nav__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.sfy-account-nav__name {
    font-weight: 700;
    color: #222;
    font-size: 14px;
    line-height: 1.2;
    word-break: break-word;
}
.sfy-account-nav__email {
    color: #8B8B8B;
    font-size: 12px;
    line-height: 1.3;
    word-break: break-word;
}
.sfy-account-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Single-level items (My Profile / Earnings / Messages / Settings / Logout) */
.sfy-account-nav__item > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #222;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.sfy-account-nav__item > a:hover {
    background: #FAF8F4;
    color: #0F5A3A;
    text-decoration: none;
}
.sfy-account-nav__item > a i {
    width: 18px;
    text-align: center;
    color: #6b7280;
    font-size: 15px;
}
.sfy-account-nav__item.is-active > a {
    background: #F0F7F3;
    color: #0F5A3A;
    border-left-color: #0F5A3A;
    font-weight: 600;
}
.sfy-account-nav__item.is-active > a i {
    color: #0F5A3A;
}
.sfy-account-nav__item--logout {
    border-top: 1px solid #E8E5DD;
    margin-top: 8px;
    padding-top: 4px;
}
.sfy-account-nav__item--logout > a {
    color: #C84A4A;
}
.sfy-account-nav__item--logout > a i {
    color: #C84A4A;
}

/* Expandable groups (My Listings / We Sell For You / Saved / Purchases / Selling / Moving) */
.sfy-account-nav__group {
    padding: 4px 0;
    border-top: 1px solid #F5F4EF;
}
.sfy-account-nav__group:first-of-type { border-top: 0; }
.sfy-account-nav__group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-weight: 700;
    color: #222;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    /* Reset native <button> chrome so the title looks like a nav row. */
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    line-height: 1.3;
    transition: background 0.12s;
}
.sfy-account-nav__group-title:hover { background: #F5EFE1; }
.sfy-account-nav__group-title:focus-visible {
    outline: 2px solid #0F5A3A;
    outline-offset: -2px;
}
.sfy-account-nav__group-title i {
    width: 18px;
    text-align: center;
    color: #0F5A3A;
    font-size: 15px;
    flex-shrink: 0;
}
.sfy-account-nav__group-title > span:first-of-type,
.sfy-account-nav__group-title > span:not(.sfy-account-nav__chevron) { flex: 1; }
/* Chevron indicator on the right — rotates 90° when the group opens. */
.sfy-account-nav__chevron {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    color: #8a8a8a;
    transition: transform 0.18s ease;
    margin-left: 8px;
    flex-shrink: 0;
    transform: rotate(0deg);
}
.sfy-account-nav__group.is-open .sfy-account-nav__chevron { transform: rotate(90deg); }
/* Collapsible sub-list. Server marks the active group with .is-open;
 * JS toggles it on click. Uses max-height so the transition animates
 * without needing JS-set pixel heights. */
.sfy-account-nav__sub {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
}
.sfy-account-nav__group.is-open > .sfy-account-nav__sub {
    max-height: 800px;
    margin: 0 0 4px;
}
.sfy-account-nav__sub > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 16px 6px 44px;
    color: #5F6368;
    font-size: 13px;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sfy-account-nav__sub > li > a:hover {
    background: #FAF8F4;
    color: #0F5A3A;
    text-decoration: none;
}
.sfy-account-nav__sub > li.is-active > a {
    background: #F0F7F3;
    color: #0F5A3A;
    border-left-color: #0F5A3A;
    font-weight: 600;
}
.sfy-account-nav__count {
    color: #8B8B8B;
    font-size: 12px;
    font-weight: 500;
}

/* Sub-groups (My Quotes, My Moves inside Moving Services) */
.sfy-account-nav__sub-group {
    padding: 4px 0 2px;
}
.sfy-account-nav__sub-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 16px 4px 44px;
    color: #5F6368;
    font-size: 13px;
    font-weight: 600;
}
.sfy-account-nav__sub-sub {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sfy-account-nav__sub-sub > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 16px 4px 60px;
    color: #6b7280;
    font-size: 12px;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s;
}
.sfy-account-nav__sub-sub > li > a:hover {
    background: #FAF8F4;
    color: #0F5A3A;
    text-decoration: none;
}

/* "Coming Soon" chip on disabled links */
.sfy-account-nav__disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.sfy-account-nav__disabled:hover {
    background: transparent !important;
    color: inherit !important;
}
.sfy-account-nav__soon {
    background: #F5F4EF;
    color: #8B8B8B;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 2px;
    margin-left: 6px;
}

/* On mobile the sidebar takes full width and drops the max-width */
@media (max-width: 767px) {
    .sfy-account-nav {
        max-width: none;
        margin-bottom: 20px;
    }
}

/* Sub-tab rows (Settings / Earnings) below the main sidebar —
   keep them but give a small top margin so they don't collide
   visually with the big account nav above. */
.sfy-settings-subtabs,
.sfy-earnings-subtabs {
    margin-top: 18px;
}

/* ─────────────────────────────────────────────────────────────
 * Settings page — 2026-09-04 rebuild (Peter's spec).
 *
 * 3-column shell:
 *   .sfy-set-layout > sidebar (already styled elsewhere)
 *                  > .sfy-set-inner > sub-nav card + content
 *
 * Sub-nav card: .sfy-settings-nav (extends .sfy-settings-subtabs)
 * Content: .sfy-set-page (title + lead + cards)
 * ─────────────────────────────────────────────────────────── */

.sfy-set-inner { margin: 0; }
.sfy-set-page__title {
    font-size: 26px; font-weight: 800; color: #1a1a1a;
    margin: 4px 0 4px;
}
.sfy-set-page__lead {
    font-size: 14px; color: #6b7280; margin: 0 0 18px;
}

/* Settings sub-nav card */
.sfy-settings-nav {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 14px 12px 8px;
    margin-top: 0;
}
.sfy-settings-nav__title {
    font-size: 22px; font-weight: 800; color: #1a1a1a;
    margin: 4px 6px 12px;
}
.sfy-settings-nav__list { list-style: none; padding: 0; margin: 0; }
.sfy-settings-nav__list .nav-item { display: block; margin: 0 0 2px; }
.sfy-settings-nav__list .nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    color: #4B5563; font-size: 14px; font-weight: 500;
    text-decoration: none;
}
.sfy-settings-nav__list .nav-link:hover {
    background: #FAF7EE; color: #1a1a1a; text-decoration: none;
}
.sfy-settings-nav__list .nav-item.active .nav-link {
    background: #E9F0EA; color: #0F5A3A;
    box-shadow: inset 3px 0 0 #0F5A3A;
}
.sfy-settings-nav__icon {
    font-size: 16px; color: #6b7280; width: 18px; text-align: center;
    /* 2026-09-06 Peter: some rows use inline <svg> when the icon
     * font is missing the glyph (bell, lock). Size the SVGs to
     * the same footprint as the font icons so rows align. */
    display: inline-flex; align-items: center; justify-content: center;
    height: 18px; flex-shrink: 0;
}
svg.sfy-settings-nav__icon { width: 16px; height: 16px; }
.sfy-settings-nav__list .nav-item.active .sfy-settings-nav__icon { color: #0F5A3A; }
.sfy-settings-nav__danger .nav-link { color: #C84A4A; }
.sfy-settings-nav__danger .sfy-settings-nav__icon { color: #C84A4A; }
.sfy-settings-nav__danger.active .nav-link,
.sfy-settings-nav__danger .nav-link:hover {
    background: #FDECEC; color: #C84A4A;
    box-shadow: inset 3px 0 0 #C84A4A;
}

/* Need-help card */
.sfy-settings-help {
    margin-top: 14px;
    background: #FAF7EE;
    border: 1px solid #ECE7DA;
    border-radius: 10px;
    padding: 16px;
    text-align: left;
    position: relative;
}
.sfy-settings-help__icon {
    width: 28px; height: 28px;
    border-radius: 999px;
    background: #F0EBDA;
    color: #C89A3D;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
}
.sfy-settings-help__icon svg { width: 16px; height: 16px; }
.sfy-settings-help strong { display: block; font-size: 14px; color: #1a1a1a; margin-bottom: 4px; }
.sfy-settings-help p { font-size: 12.5px; color: #6b7280; line-height: 1.5; margin: 0 0 10px; }
.sfy-settings-help__link {
    display: inline-flex; align-items: center; gap: 4px;
    color: #0F5A3A; font-size: 13px; font-weight: 600;
    text-decoration: none;
}
.sfy-settings-help__link:hover { text-decoration: underline; color: #0F5A3A; }
.sfy-settings-help__link .icon-arrow-right { font-size: 10px; }

/* Content cards */
.sfy-set-card {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 16px;
}
.sfy-set-card__head { margin-bottom: 16px; }
.sfy-set-card__title { font-size: 17px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.sfy-set-card__lead  { font-size: 13.5px; color: #6b7280; margin: 0; }

/* Profile summary card — head with avatar + name + 2x2 grid */
.sfy-set-profile__head { display: flex; align-items: flex-start; gap: 20px; }
.sfy-set-profile__avatar {
    flex-shrink: 0;
    width: 72px; height: 72px; border-radius: 999px;
    background: #F2F0E7; overflow: hidden;
}
.sfy-set-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sfy-set-profile__body { flex: 1; min-width: 0; }
.sfy-set-profile__name {
    display: flex; align-items: center; gap: 6px;
    font-size: 18px; font-weight: 700; color: #1a1a1a;
    margin: 4px 0 14px;
}
.sfy-set-profile__badge { color: #0F5A3A; font-size: 16px; }
.sfy-set-profile__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
    margin: 0;
}
@media (max-width: 560px) { .sfy-set-profile__grid { grid-template-columns: 1fr; } }
.sfy-set-profile__field dt {
    font-size: 12px; color: #6b7280; font-weight: 500; margin-bottom: 2px;
}
.sfy-set-profile__field dd {
    font-size: 13.5px; color: #1a1a1a; font-weight: 600; margin: 0;
    display: flex; align-items: center; gap: 6px;
}
.sfy-set-profile__online { color: #0F5A3A; }

.sfy-set-verified-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: #E9F0EA; color: #0F5A3A;
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    letter-spacing: 0.02em;
}
.sfy-set-verified-pill i { font-size: 11px; }

/* Form fields */
.sfy-set-form { margin-top: 4px; }
.sfy-set-field { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: start; padding: 14px 0; border-top: 1px solid #F0EDE1; }
.sfy-set-field:first-of-type { border-top: 0; padding-top: 4px; }
@media (max-width: 560px) { .sfy-set-field { grid-template-columns: 1fr; gap: 6px; } }
.sfy-set-field__label { font-size: 13.5px; color: #4B5563; font-weight: 600; margin: 8px 0 0; }
.sfy-set-field__body { min-width: 0; }
.sfy-set-field__body .form-control {
    border: 1px solid #ECE7DA; border-radius: 8px;
    padding: 10px 14px; font-size: 14px;
    background: #FDFCF8; color: #1a1a1a; width: 100%;
}
.sfy-set-field__body .form-control:focus {
    background: #fff; border-color: #0F5A3A;
    box-shadow: 0 0 0 3px rgba(15,90,58,0.10);
    outline: none;
}
.sfy-set-input-wrap { position: relative; }
.sfy-set-verified-pill--inline {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
}
.sfy-set-resend-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: #F0EBDA; color: #7A5A00; border: 0;
    padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.sfy-set-resend-btn:hover { background: #E5DFC7; }

/* Profile photo row */
.sfy-set-photo { display: flex; align-items: center; gap: 16px; padding-top: 4px; }
.sfy-set-photo__avatar {
    width: 60px; height: 60px; border-radius: 999px; overflow: hidden;
    background: #F2F0E7; flex-shrink: 0;
}
.sfy-set-photo__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sfy-set-photo__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sfy-set-photo__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    background: #fff; border: 1px solid #ECE7DA;
    font-size: 13px; font-weight: 600; color: #1a1a1a;
    cursor: pointer; margin: 0;
}
.sfy-set-photo__btn:hover { background: #FAF7EE; }
.sfy-set-photo__btn input[type="file"] { display: none; }
.sfy-set-photo__hint { font-size: 12px; color: #8a8a8a; }
.sfy-set-photo__info { font-size: 12px; color: #0F5A3A; font-weight: 600; }

/* Save button */
.sfy-set-actions { padding-top: 14px; margin-top: 6px; border-top: 1px solid #F0EDE1; }
.sfy-set-save-btn {
    background: #0F5A3A; color: #fff; border: 0;
    padding: 10px 22px; border-radius: 8px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
}
.sfy-set-save-btn:hover { background: #0a3f2a; }

/* ═════════════════════════════════════════════════════════════════
 * RESPONSIVE + RELIABILITY HARDENING PASS
 *
 * One consolidated block covering every sfy-* component's
 * mobile / tablet behavior. Fixes gaps found in the earlier
 * per-section media queries and adds several missing bits:
 *   - the header action row on mobile
 *   - the hero headline scaling
 *   - the pricing 3-column stack on tablet
 *   - the footer grid stack
 *   - never allow horizontal page scroll
 *   - safe-area bottom for iPhone notch on the mobile bottom nav
 * ═════════════════════════════════════════════════════════════════ */

/* Global guard: never let the page scroll horizontally regardless
   of a runaway float or oversized inline image. */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Ensure the container has sensible side padding on very narrow
   viewports so text isn't glued to the screen edge. */
@media (max-width: 575px) {
    .container { padding-left: 15px; padding-right: 15px; }
}

/* ─── Trust ribbon (top of site) ───────────────────────────────── */
@media (max-width: 767px) {
    /* Already scrollable at 767, but the current 6px vertical
       padding + 12px font can crowd. Tighten labels + let icons
       fall back visibly if the icon font missed a glyph. */
    .sfy-trust-ribbon {
        padding: 5px 0;
    }
    .sfy-trust-ribbon__list {
        padding: 0 6px 4px;
        gap: 14px;
    }
    .sfy-trust-ribbon__label {
        font-size: 11px;
    }
}

/* ─── Header — main action row ─────────────────────────────────── */
@media (max-width: 991px) {
    /* Between 768 and 991, everything needs to fit on ONE row —
       PDF §4: language + user + cart + wishlist + Start selling
       inline. Tighten paddings + gaps + button sizing so the row
       stays single-line without wrapping. Overflow is not the
       goal (would cause horizontal scroll); instead everything
       just gets slightly smaller here. */
    .sfy-header-actions {
        flex-wrap: nowrap;
        gap: 0;
        white-space: nowrap;
    }
    .sfy-header-actions > li { flex-shrink: 0; }
    .sfy-header-actions .nav-link { padding: 6px 6px; }
    .sfy-header-actions .nav-link i { font-size: 16px; }
    .sfy-header-lang .flag { width: 15px; margin-right: 2px; }
    .sfy-header-lang__code { font-size: 11px; }
    /* Compress the Start selling pill so it fits alongside the icons */
    .sfy-header-actions .cust-dropdwn .dropbtn {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 32px;
    }
    .sfy-header-actions .cust-dropdwn { margin-left: 4px; }
}
@media (max-width: 767px) {
    /* The whole desktop main-menu block is already replaced with
       .nav-mobile-header on mobile, so this only matters for the
       narrow tablet range 601–767. Preserve the row but stack tight. */
    .main-menu .nav-top-right ul.sfy-header-actions {
        justify-content: flex-end;
    }
}

/* ─── Hero headline scaling ────────────────────────────────────── */
@media (max-width: 991px) {
    .sfy-hero__headline { font-size: 44px; }
}
@media (max-width: 767px) {
    /* PDF page 21 mobile mockup — hero image stays visible on
       mobile, sitting BELOW the headline copy at full width. */
    .sfy-hero { padding: 24px 0 20px; }
    .sfy-hero__headline { font-size: 42px; line-height: 1.05; letter-spacing: -0.01em; }
    .sfy-hero__lead { font-size: 14px; margin-bottom: 18px; }
    .sfy-hero__cta { font-size: 14px; padding: 12px 20px; }
    .sfy-hero__art-placeholder { display: none; }
    /* Unhide the illustrated art on mobile (was d-none d-md-block).
       The illustration is important context; PDF shows it prominently. */
    .sfy-hero__art { display: block !important; margin-top: 20px; }
    .sfy-hero__art-img { max-width: 100%; height: 220px; border-radius: 10px; }
}

/* ─── Trust strip below hero ───────────────────────────────────── */
@media (max-width: 991px) {
    .sfy-trust-strip__list { gap: 12px 16px; }
    .sfy-trust-strip__item { flex-basis: 45%; }
}
@media (max-width: 767px) {
    /* PDF page 21: 4 items in a horizontal-scroll strip with subtle
       > separators between them. Tighter item + chevron between. */
    .sfy-trust-strip { padding: 10px 0; border-bottom: 1px solid #E8E5DD; }
    .sfy-trust-strip__list { padding: 0 6px 4px; gap: 0; }
    .sfy-trust-strip__item {
        flex: 0 0 auto;
        min-width: 160px;
        padding-right: 14px;
        border-right: 1px solid #E8E5DD;
        margin-right: 14px;
    }
    .sfy-trust-strip__item:last-child { border-right: 0; margin-right: 0; }
    .sfy-trust-strip__icon { font-size: 20px; }
    .sfy-trust-strip__item strong { font-size: 12px; }
    .sfy-trust-strip__item span { font-size: 10px; }
}

/* ─── Journey cards on the homepage ────────────────────────────── */
@media (max-width: 767px) {
    /* PDF page 21: journey cards render as HORIZONTAL bars on
       mobile — icon on the left, title + subtitle + (price) in the
       middle, green square arrow button on the right. Full-width,
       stacked. NEW badge sits inline with the Moving services title. */
    .sfy-journey { padding: 20px 0; }
    .sfy-journey__row { margin: 0; }
    .sfy-journey__col { padding: 5px 0; width: 100%; max-width: 100%; flex: 0 0 100%; }

    /* Undo desktop centering — mobile is a left-aligned horizontal bar */
    .sfy-journey__card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon title cta"
            "icon desc  cta"
            "icon price cta";
        align-items: center;
        column-gap: 14px;
        row-gap: 2px;
        padding: 14px 14px;
        min-height: 88px;
        text-align: left;
        position: relative;
        border-radius: 12px;
    }
    .sfy-journey__icon-wrap {
        grid-area: icon;
        align-self: center;
        margin: 0 4px 0 0;
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    .sfy-journey__icon { font-size: 22px; }
    .sfy-journey__title {
        grid-area: title;
        font-size: 18px;
        margin: 0;
        align-self: end;
        text-align: left;
        line-height: 1.2;
    }
    .sfy-journey__desc {
        grid-area: desc;
        font-size: 12.5px;
        line-height: 1.35;
        margin: 0;
        max-width: none;
        flex: 0;
        align-self: center;
        text-align: left;
    }
    /* Price only present on Moving services card. Occupies its own row
       below desc, still inside the middle column. */
    .sfy-journey__price {
        grid-area: price;
        margin: 2px 0 0;
        font-size: 13px;
        font-weight: 700;
        color: #222;
        align-self: start;
        text-align: left;
    }
    .sfy-journey__cta {
        grid-area: cta;
        align-self: center;
        padding: 0;
        width: 48px;
        height: 48px;
        min-width: 0;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        font-size: 0;
        flex-shrink: 0;
    }
    .sfy-journey__cta i {
        font-size: 18px;
        line-height: 1;
    }
    /* NEW badge inline with the Moving services title — flow with the
       H3 text instead of pinning to the card corner. */
    .sfy-journey__card--move .sfy-journey__title {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .sfy-journey__new-badge {
        position: static;
        top: auto;
        right: auto;
    }
}

/* ─── Homepage: Moving Made Simple pricing ─────────────────────── */
/* Stack on tablet as well as mobile so the 3 cards don't crush
   into an unreadable 260px each. */
@media (max-width: 991px) {
    .sfy-moving-pricing__row > [class^="col-"] { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 767px) {
    .sfy-moving-pricing { padding: 34px 0 40px; }
    .sfy-moving-pricing__head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .sfy-price-card { padding: 22px 18px; }
    .sfy-price-card__amount { font-size: 28px; }
}

/* ─── Section titles + section-link ────────────────────────────── */
@media (max-width: 767px) {
    .sfy-section-title { font-size: 20px; }
    .sfy-section-link { font-size: 13px; }
    .sfy-moving-journey__head,
    .sfy-browse-marketplace__head,
    .sfy-legacy-products__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 18px;
    }
    .sfy-why { padding: 28px 0; }
    /* Compact Why cards on mobile — horizontal layout with icon on
       the left, title + desc stacked in the middle. Was rendering
       as tall centered blocks (~200px each). Uses grid-areas so
       the icon spans both rows next to title + desc. */
    .sfy-why__row > [class^="col-"] { padding: 6px 12px; }
    .sfy-why__card {
        display: grid;
        grid-template-columns: 48px 1fr;
        grid-template-areas:
            "icon title"
            "icon desc";
        column-gap: 14px;
        row-gap: 2px;
        align-items: center;
        text-align: left;
        padding: 14px 16px;
        min-height: 0;
    }
    .sfy-why__icon {
        grid-area: icon;
        align-self: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #F0F7F3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin: 0;
    }
    .sfy-why__card strong {
        grid-area: title;
        align-self: end;
        font-size: 15px;
        margin: 0;
        display: block;
    }
    .sfy-why__card p {
        grid-area: desc;
        align-self: start;
        font-size: 12px;
        line-height: 1.35;
    }
    .sfy-why__title { margin-bottom: 20px; font-size: 20px; }

    /* ─── Mobile header cleanup ────────────────────────────────
     * PDF page 21 mockup: [☰] [logo] [🛒 ♡] — clean, 4 items.
     * The legacy Modesy header packs in a Sell button + user
     * profile dropdown that duplicate what the mobile bottom
     * nav already provides. Hide those here (CSS only, doesn't
     * touch the template) and reorder so hamburger goes right.
     */
    .nav-mobile-header .mobile-user.custmob-selltop { display: none !important; }
    .nav-mobile-header ul.mobile-user { display: none !important; }
    .nav-mobile-header .mobile-search { display: none !important; }

    .nav-mobile-header-container {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 8px 12px;
        gap: 8px;
    }
    /* Logo first (left) */
    .nav-mobile-header .mobile-logo {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
    .nav-mobile-header .mobile-logo img {
        height: 34px;
        width: auto;
        max-width: 200px;
    }
    /* Cart + heart right of logo */
    .nav-mobile-header .mobile-cart { order: 2; margin: 0 4px; }
    .nav-mobile-header .mobile-heart { order: 3; margin: 0 4px; }
    /* Hamburger on the far right */
    .nav-mobile-header .menu-icon { order: 4; margin-left: 4px; }
    .nav-mobile-header .menu-icon a,
    .nav-mobile-header .mobile-cart a,
    .nav-mobile-header .mobile-heart a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: #222;
        font-size: 20px;
    }
    .nav-mobile-header .menu-icon a:hover,
    .nav-mobile-header .mobile-cart a:hover,
    .nav-mobile-header .mobile-heart a:hover {
        color: #0F5A3A;
    }
    /* Cart badge stays small in the corner of the icon */
    .nav-mobile-header .mobile-cart .notification {
        top: 4px;
        right: 4px;
        font-size: 9px;
        min-width: 14px;
        height: 14px;
        line-height: 14px;
    }
}

/* ═════════════════════════════════════════════════════════════════
 * /about-us — new page matching the redesign system
 * ═════════════════════════════════════════════════════════════════ */

/* ─── 1. Hero ──────────────────────────────────────────────────── */
.sfy-about-hero {
    background: #FAF8F4;
    /* 2026-09-07 Peter: same tightening as the HIW hero so
     * the mission section below peeks in above the fold. */
    padding: 30px 0 24px;
}
.sfy-about-hero__title {
    font-size: 42px;
    font-weight: 800;
    color: #0F5A3A;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 12px;
}
.sfy-about-hero__lead {
    font-size: 15px;
    color: #5F6368;
    line-height: 1.55;
    margin: 0;
    max-width: 520px;
}
.sfy-about-hero__art { text-align: right; }
.sfy-about-hero__art-img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 320px;
    width: auto;
    margin-left: auto;
}
@media (max-width: 767px) {
    .sfy-about-hero { padding: 20px 0 16px; }
    .sfy-about-hero__title { font-size: 28px; margin-bottom: 10px; }
    .sfy-about-hero__lead { font-size: 14px; }
    .sfy-about-hero__art { margin-top: 14px; text-align: center; }
    .sfy-about-hero__art-img { max-height: 240px; }
}

/* ─── 2. Our mission ───────────────────────────────────────────── */
.sfy-about-mission {
    background: #fff;
    padding: 50px 0;
    text-align: center;
}
.sfy-about-mission__title {
    display: block;
    margin: 0 auto 16px;
}
.sfy-about-mission__body {
    font-size: 16px;
    color: #5F6368;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 720px;
}
@media (max-width: 767px) {
    .sfy-about-mission { padding: 30px 0; }
    .sfy-about-mission__body { font-size: 14px; line-height: 1.6; }
}

/* ─── 3. What we do (3 service cards) ──────────────────────────── */
.sfy-about-services {
    background: #FAF8F4;
    padding: 50px 0;
}
.sfy-about-services__head { text-align: center; margin-bottom: 30px; }
.sfy-about-services__sub {
    font-size: 14px;
    color: #5F6368;
    margin: 6px 0 0;
}
.sfy-about-services__row > [class^="col-"] { padding: 12px; }
.sfy-about-service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    border-radius: 12px;
    background: #F0F7F3;
    text-decoration: none;
    color: #222;
    height: 100%;
    transition: box-shadow 0.15s, transform 0.15s;
}
.sfy-about-service:hover {
    box-shadow: 0 6px 20px rgba(15, 90, 58, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: #222;
}
.sfy-about-service--sell { background: #FFFAF0; }
.sfy-about-service__icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F5A3A;
    font-size: 22px;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.sfy-about-service__icon-wrap--gold { color: #C89A3D; }
.sfy-about-service h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #222;
}
.sfy-about-service p {
    font-size: 14px;
    color: #5F6368;
    line-height: 1.55;
    margin: 0 0 18px;
    flex: 1;
}
.sfy-about-service__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0F5A3A;
    font-weight: 600;
    font-size: 14px;
}
.sfy-about-service--sell .sfy-about-service__link { color: #C89A3D; }

/* ─── 4. Our values ────────────────────────────────────────────── */
.sfy-about-values {
    background: #fff;
    padding: 50px 0;
}
.sfy-about-values__title { text-align: center; margin-bottom: 30px; }
.sfy-about-values__row > [class^="col-"] { padding: 12px; }
.sfy-about-value {
    text-align: center;
    padding: 24px 18px;
    background: #FAF8F4;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.sfy-about-value__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F0F7F3;
    color: #0F5A3A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 6px;
}
.sfy-about-value__icon--gold {
    background: #F5EAD1;
    color: #C89A3D;
}
.sfy-about-value strong {
    font-size: 16px;
    color: #222;
    font-weight: 700;
}
.sfy-about-value p {
    font-size: 13px;
    color: #5F6368;
    line-height: 1.5;
    margin: 0;
}

/* ─── 5. Where we serve ────────────────────────────────────────── */
.sfy-about-area {
    background: #F5F4EF;
    padding: 50px 0;
}
.sfy-about-area__kicker {
    display: inline-block;
    background: #E8D3A4;
    color: #7a5f20;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 12px;
}
.sfy-about-area__title {
    display: block;
    margin: 0 0 14px;
}
.sfy-about-area__body {
    font-size: 16px;
    color: #5F6368;
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}
.sfy-about-area__cities {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.sfy-about-area__cities li {
    background: #fff;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.sfy-about-area__cities i { color: #0F5A3A; font-size: 18px; }
@media (max-width: 767px) {
    .sfy-about-area { padding: 30px 0; }
    .sfy-about-area__cities { margin-top: 20px; }
}

/* ─── 6. Final CTA row ─────────────────────────────────────────── */
.sfy-about-cta {
    background: #fff;
    padding: 50px 0;
}
.sfy-about-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px 20px;
}
@media (max-width: 767px) {
    .sfy-about-cta { padding: 30px 0; }
    .sfy-about-cta .row > .col-12 { margin-bottom: 8px; }
    .sfy-moving-journey { padding: 34px 0; }
    .sfy-browse-marketplace { padding: 28px 0 34px; }
}

/* Hide legacy "back to top" green arrow — Peter's redesign has no
 * scroll-to-top affordance. Kept in DOM so the jQuery toggle in the
 * footer stays inert but doesn't error. */
.scrollup { display: none !important; }

/* ─── Footer stack ─────────────────────────────────────────────── */
@media (max-width: 991px) {
    .sfy-footer-main .row { row-gap: 24px; }
}
@media (max-width: 767px) {
    .sfy-footer { margin-top: 34px; }
    .sfy-footer-main { padding: 30px 0 20px; }
    .sfy-footer-brand { text-align: center; margin-bottom: 20px; }
    .sfy-footer-brand__logo img { margin: 0 auto 10px; }
    .sfy-footer-brand__socials { justify-content: center; }
    .sfy-footer-trust__list { gap: 16px; }
    .sfy-footer-trust__list li { flex: 1 1 45%; }
    .sfy-footer-bottom__row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .sfy-footer-bottom__payments { justify-content: flex-start; }
}
@media (max-width: 575px) {
    .sfy-footer-trust__list li { flex: 1 1 100%; }
    .sfy-footer-col { text-align: center; }
    .sfy-footer-col a::before { display: none; }
}

/* ─── /moving page — quote form + hero ─────────────────────────── */
@media (max-width: 991px) {
    .sfy-moving-hero__headline { font-size: 36px; }
    .sfy-moving-hero__art-placeholder { font-size: 90px; }
}
@media (max-width: 767px) {
    .sfy-moving-hero { padding: 30px 0 24px; }
    .sfy-moving-hero__headline { font-size: 28px; }
    .sfy-moving-hero__lead { font-size: 14px; }
    .sfy-moving-hero__cta { font-size: 14px; padding: 12px 20px; }
    .sfy-moving-request { padding: 32px 0 40px; }
    .sfy-moving-request__card { padding: 22px 16px; border-radius: 6px; }
    .sfy-moving-form .form-input { font-size: 14px; padding: 10px 10px; }
    .sfy-moving-form__radios { gap: 8px; }
    .sfy-moving-form__radio { flex: 1 1 45%; justify-content: center; text-align: center; padding: 10px 8px; }
    .sfy-moving-form__submit { width: 100%; justify-content: center; padding: 14px 20px; }
}

/* ─── /how-it-works, /buyer-protection, /safety-and-trust ──────── */
@media (max-width: 767px) {
    .sfy-content-hero { padding: 30px 0 22px; }
    .sfy-content-hero__title { font-size: 26px; }
    .sfy-content-hero__lead { font-size: 14px; }

    .sfy-hiw-stages { padding: 28px 0; }
    .sfy-hiw-stage { flex-direction: column; gap: 12px; padding: 20px 0; }
    .sfy-hiw-stage__num { width: 34px; height: 34px; font-size: 15px; }
    .sfy-hiw-stage__title { font-size: 18px; margin-bottom: 8px; }
    .sfy-hiw-stage__list { font-size: 13px; line-height: 1.7; }
    .sfy-hiw-cta { padding: 28px 0; }
    .sfy-hiw-cta__btn { margin-bottom: 10px; }

    .sfy-bp-steps { padding: 28px 0; }
    .sfy-bp-why { padding: 28px 0; }
    .sfy-bp-covered { padding: 28px 0; }
    .sfy-bp-covered__card { padding: 20px; margin-bottom: 12px; }
    .sfy-bp-cta__card { flex-direction: column; text-align: center; padding: 24px 20px; }
    .sfy-bp-cta__card h3 { font-size: 18px; }
    .sfy-bp-cta__buttons { justify-content: center; width: 100%; }
    .sfy-bp-cta__buttons > * { flex: 1 1 45%; text-align: center; justify-content: center; }

    .sfy-st-topics { padding: 30px 0; }
    .sfy-st-build { padding: 30px 0; }
    .sfy-st-topic { padding: 18px 16px; }
    .sfy-st-topic h3 { padding-right: 34px; /* leave room for the .sfy-st-topic__num circle */ }
}

/* ─── Legal pages (/terms-of-service, /privacy-policy) ─────────── */
@media (max-width: 767px) {
    .sfy-legal-body { padding: 30px 0 40px; }
    .sfy-legal-body__wrap { font-size: 14px; }
}

/* ─── Mobile bottom nav — iOS safe area + Sell button size ─────── */
@media (max-width: 767px) {
    /* If the Sell slot's raised circle looks too tight next to
       adjacent labels, ensure the label wraps cleanly rather than
       clipping. */
    .sfy-mobile-bottom-nav__item span { font-size: 10px; }
}

/* ─── Account sidebar on mobile ────────────────────────────────── */
@media (max-width: 767px) {
    /* Collapsible via <details> would be nicer but adds JS —
       for now keep it visible and full-width, just tighten
       padding so it doesn't take half the screen. */
    .sfy-account-nav { padding: 8px 0; }
    .sfy-account-nav__group-title { font-size: 14px; padding: 8px 14px 4px; }
    .sfy-account-nav__sub > li > a { padding: 6px 14px 6px 38px; }
    .sfy-account-nav__item > a { padding: 10px 14px; }
    .sfy-account-nav__sub-title { padding: 4px 14px 4px 38px; }
    .sfy-account-nav__sub-sub > li > a { padding: 4px 14px 4px 54px; }
}

/* ─── Sfy primary button — ensure it stays tap-friendly ────────── */
@media (max-width: 767px) {
    .sfy-btn-primary,
    .sfy-btn-outline {
        min-height: 44px; /* iOS/Android tap target minimum */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ─── Long emails / usernames — never blow out the sidebar user box */
.sfy-account-nav__name,
.sfy-account-nav__email {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ─── Reliability: images inside content blocks never overflow ── */
.sfy-content-hero img,
.sfy-hero img,
.sfy-moving-hero img,
.sfy-hiw-stages img,
.sfy-legal-body__wrap img,
.sfy-journey__card img,
.sfy-price-card img,
.sfy-cat-card img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ═════════════════════════════════════════════════════════════════
 * Main nav — one clean row, "Marketplace ▾" dropdown
 * ═════════════════════════════════════════════════════════════════ */

.sfy-main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.sfy-main-nav .nav-item .nav-link {
    color: #222;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}
.sfy-main-nav .nav-item .nav-link:hover,
.sfy-main-nav .nav-item .nav-link:focus {
    color: #0F5A3A;
    text-decoration: none;
}
.sfy-main-nav .nav-item.dropdown .nav-link i.icon-arrow-down {
    font-size: 10px;
    margin-left: 4px;
}
.sfy-main-nav__marketplace .dropdown-menu {
    /* Bootstrap has its own .dropdown-menu rules; override only what
       we need. The parent still has position:absolute from Bootstrap. */
    padding: 12px 0;
    min-width: 240px;
    border: 1px solid #E8E5DD;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.sfy-marketplace-dropdown__head {
    padding: 4px 16px 10px;
    border-bottom: 1px solid #E8E5DD;
    margin-bottom: 6px;
}
.sfy-marketplace-dropdown__view-all {
    color: #0F5A3A;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sfy-marketplace-dropdown__view-all:hover {
    color: #0A442C;
}
.sfy-marketplace-dropdown__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 360px;
    overflow-y: auto;
}
.sfy-marketplace-dropdown__list li a {
    display: block;
    padding: 8px 16px;
    color: #222;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.12s;
}
.sfy-marketplace-dropdown__list li a:hover {
    background: #FAF8F4;
    color: #0F5A3A;
    text-decoration: none;
}

/* NEW badge inside the nav item — keep tight to the label */
.sfy-nav-moving .nav-link .sfy-nav-badge-new {
    margin-left: 4px;
}

/* ═════════════════════════════════════════════════════════════════
 * Header — "Start selling" button positioning fix.
 *
 * Peter, screenshot 2026-07-17: the green pill was rendering as a
 * dominant 16px-padded block that overlapped the cart + wishlist
 * icons vertically. The legacy .cust-dropdwn .dropbtn was too big
 * to sit inline with the small icon-only actions.
 *
 * These rules ONLY apply when the .cust-dropdwn is inside the new
 * .sfy-header-actions row (they don't affect the mobile Sell CTA
 * or any other placement of .cust-dropdwn on the site).
 * ═════════════════════════════════════════════════════════════════ */

.sfy-header-actions .cust-dropdwn {
    display: flex;
    align-items: center;
    margin: 0 0 0 6px;
    padding: 0;
}
.sfy-header-actions .cust-dropdwn .dropdown {
    display: flex;
    align-items: center;
    line-height: 1;
}
.sfy-header-actions .cust-dropdwn .dropbtn {
    background: #0F5A3A;
    color: #fff !important;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border: none;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    height: auto;
    min-height: 36px;
    transition: background 0.15s;
}
.sfy-header-actions .cust-dropdwn .dropbtn:hover,
.sfy-header-actions .cust-dropdwn .dropbtn:focus {
    background: #0A442C;
    color: #fff !important;
    text-decoration: none;
}
/* Legacy dropdown-content behavior (Sell On Your Own / We Sell For You
   sub-links) — both are commented out in the template, so we hide the
   empty container to prevent any accidental positioning ghost. */
.sfy-header-actions .cust-dropdwn .dropdown-content { display: none !important; }

/*
 * Search-type pill — was labeled "Product" per the Modesy default,
 * now reads "All categories" per PDF §4. Tightened width so the
 * new (longer) label doesn't crowd the input beside it.
 */
.top-search-bar .sfy-search-select .btn.dropdown-toggle {
    /* Roomier button + inline caret. Finnish label 'Kaikki
     * kategoriat' is longer than 'All categories' and the Bootstrap
     * ::after caret was wrapping onto its own row below the text. */
    min-width: 150px;
    max-width: 190px;
    padding: 8px 32px 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #222;
    background: #F5F4EF;
    border: 1px solid #E8E5DD;
    border-right: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
.top-search-bar .sfy-search-select .btn.dropdown-toggle::after {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    border-top-color: #5F6368;
}
.top-search-bar .sfy-search-select .dropdown-menu {
    min-width: 160px;
}

/* ═════════════════════════════════════════════════════════════════
 * /how-it-works — full page rebuild matching PDF mockup
 * ═════════════════════════════════════════════════════════════════ */

/* ─── 1. Hero ──────────────────────────────────────────────────── */
.sfy-hiw-hero {
    background: #FAF8F4;
    /* 2026-09-07 Peter: tightened so the next section (How
     * Muuttomyynti Works) peeks above the fold. */
    padding: 30px 0 24px;
}
.sfy-hiw-hero__title {
    font-size: 42px;
    font-weight: 800;
    color: #0F5A3A;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 12px;
}
.sfy-hiw-hero__lead {
    font-size: 15px;
    color: #5F6368;
    line-height: 1.55;
    margin: 0;
    max-width: 520px;
}
.sfy-hiw-hero__art { text-align: right; }
.sfy-hiw-hero__art-img {
    display: block;
    max-width: 100%;
    height: auto;
    /* Cap so an aspect-heavy image doesn't stretch the row
     * and push the next section off screen. */
    max-height: 320px;
    width: auto;
    margin-left: auto;
}
@media (max-width: 767px) {
    .sfy-hiw-hero { padding: 20px 0 16px; }
    .sfy-hiw-hero__title { font-size: 30px; margin-bottom: 10px; }
    .sfy-hiw-hero__lead { font-size: 14px; }
    .sfy-hiw-hero__art { margin-top: 14px; text-align: center; }
    .sfy-hiw-hero__art-img { max-height: 240px; }
}

/* ─── 2. Horizontal 4-stage timeline ───────────────────────────── */
/* Aligned visually with the homepage journey timeline: same beige
 * panel, peach icon frame with an inset white ring, small green
 * numbered badge, and a dashed shaft + arrowhead connector. Layout
 * stays centered per the how-it-works page's more spacious feel. */
.sfy-hiw-timeline {
    background: #F5EFE1;
    padding: 60px 0;
}
.sfy-hiw-timeline__head { text-align: center; margin-bottom: 40px; }
.sfy-hiw-timeline__title {
    display: block;
    margin-bottom: 6px;
    font-family: inherit;
    font-size: 30px;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.01em;
}
.sfy-hiw-timeline__sub {
    font-size: 14px;
    color: #5F6368;
    margin: 0;
}
.sfy-hiw-timeline__stages {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    text-align: center;
    position: relative;
}
.sfy-hiw-timeline__stage {
    position: relative;
    padding: 0 8px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}
.sfy-hiw-timeline__icon-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #FFF7E5;
    border: 2px solid #F0D9A1;
    box-shadow: inset 0 0 0 8px #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F5A3A;
    font-size: 34px;
    margin: 0 auto 20px;
}
.sfy-hiw-timeline__num {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0F5A3A;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 90, 58, 0.25);
    border: 3px solid #F5EFE1;
    z-index: 2;
}
.sfy-hiw-timeline__stage-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.sfy-hiw-timeline__stage-desc {
    font-size: 13.5px;
    color: #5F6368;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 240px;
}
/* Dashed shaft + arrowhead between stages. Sits at icon vertical
 * center; matches the homepage journey timeline connector. */
.sfy-hiw-timeline__arrow {
    position: absolute;
    top: 42px;
    right: -6px;
    color: #C4B98F;
    font-size: 22px;
    line-height: 1;
    padding-left: 26px;
    background-image: linear-gradient(to right,
        transparent 0, transparent 4px,
        #C4B98F 4px, #C4B98F 8px,
        transparent 8px, transparent 12px,
        #C4B98F 12px, #C4B98F 16px,
        transparent 16px, transparent 20px,
        #C4B98F 20px, #C4B98F 24px,
        transparent 24px);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 26px 2px;
    border: none;
    width: auto;
    z-index: 0;
}
.sfy-hiw-timeline__arrow i { display: none; }
.sfy-hiw-timeline__arrow::before {
    content: "→";
    display: inline-block;
    line-height: 1;
}
@media (max-width: 991px) {
    .sfy-hiw-timeline__stages { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
    .sfy-hiw-timeline__arrow { display: none; }
}
@media (max-width: 575px) {
    .sfy-hiw-timeline__stages { grid-template-columns: 1fr; }
    .sfy-hiw-timeline { padding: 40px 0; }
}

/* ─── 3. Trust bar ─────────────────────────────────────────────── */
.sfy-hiw-trustbar {
    background: #F5F4EF;
    padding: 24px 0;
}
.sfy-hiw-trustbar__row > [class^="col-"] { padding: 10px 12px; }
.sfy-hiw-trustbar__item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.sfy-hiw-trustbar__item i {
    color: #0F5A3A;
    font-size: 26px;
    margin-bottom: 4px;
}
.sfy-hiw-trustbar__item strong {
    font-size: 14px;
    color: #222;
    font-weight: 700;
}
.sfy-hiw-trustbar__item p {
    font-size: 12px;
    color: #5F6368;
    line-height: 1.45;
    margin: 0;
    max-width: 220px;
}

/* ─── 4. "Ready to get started?" service cards ─────────────────── */
.sfy-hiw-ready {
    background: #fff;
    padding: 55px 0 45px;
}
.sfy-hiw-ready__head { text-align: center; margin-bottom: 30px; }
.sfy-hiw-ready__title {
    font-family: inherit;
    font-size: 34px;
    font-weight: 700;
    color: #222;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.sfy-hiw-ready__sub {
    font-size: 14px;
    color: #5F6368;
    margin: 0;
}
.sfy-hiw-ready__row > [class^="col-"] { padding: 12px; }
.sfy-hiw-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 24px 0;
    border-radius: 14px;
    background: #EDEBE4;
    text-decoration: none;
    color: #222;
    height: 100%;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;
}
.sfy-hiw-service:hover {
    box-shadow: 0 10px 26px rgba(15, 90, 58, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: #222;
}
.sfy-hiw-service--buy  { background: #EDEBE4; }
.sfy-hiw-service--sell { background: #FBEEDA; }
.sfy-hiw-service--move { background: #E8E9EC; }
.sfy-hiw-service__icon-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F5A3A;
    font-size: 28px;
    margin-bottom: 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.sfy-hiw-service__icon-wrap--gold { color: #C89A3D; }
.sfy-hiw-service__title {
    font-family: inherit;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #222;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.sfy-hiw-service__desc {
    font-size: 14px;
    color: #5F6368;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 260px;
}
.sfy-hiw-service__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    padding: 12px 26px;
    border-radius: 999px;
    min-width: 190px;
    margin-bottom: 18px;
}
/* Scene illustration fills the bottom of the card. Small negative
 * horizontal margins let it bleed into the padding for a fuller
 * scene, and the card's overflow:hidden keeps rounded corners. */
.sfy-hiw-service__art {
    display: block;
    width: calc(100% + 48px);
    height: auto;
    margin: 0 -24px -1px;
    align-self: stretch;
}
@media (max-width: 767px) {
    .sfy-hiw-ready__title { font-size: 26px; }
    .sfy-hiw-service { padding: 26px 20px 0; }
    .sfy-hiw-service__title { font-size: 22px; }
    .sfy-hiw-service__art { width: calc(100% + 40px); margin: 0 -20px -1px; }
}

/* ─── 5. Detail workflows (3 timeline columns) ─────────────────── */
.sfy-hiw-details {
    background: #FAF8F4;
    padding: 40px 0 50px;
}
.sfy-hiw-details__row > [class^="col-"] { padding: 12px; }
.sfy-hiw-detail {
    background: #EDEBE4;
    border-radius: 14px;
    padding: 30px 28px 24px;
    height: 100%;
    position: relative;
}
.sfy-hiw-detail--buy  { background: #EDEBE4; }
.sfy-hiw-detail--sell { background: #FBEEDA; }
.sfy-hiw-detail--move { background: #E8E9EC; }
.sfy-hiw-detail__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sfy-hiw-detail__head i {
    color: #0F5A3A;
    font-size: 22px;
    line-height: 1;
}
.sfy-hiw-detail--sell .sfy-hiw-detail__head i { color: #C89A3D; }
.sfy-hiw-detail--move .sfy-hiw-detail__head i { color: #0F5A3A; }
.sfy-hiw-detail__head h3 {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin: 0;
    letter-spacing: -0.01em;
}
.sfy-hiw-detail__lead {
    font-size: 14px;
    color: #5F6368;
    line-height: 1.5;
    margin: 0 0 20px;
}
/* Dashed vertical timeline connector runs down through the middle
 * of each column's numbered badges. Color varies per variant so the
 * connector reads as part of that service's palette. */
.sfy-hiw-detail__steps {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    position: relative;
}
.sfy-hiw-detail__steps::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 20px;
    bottom: 20px;
    width: 0;
    border-left: 2px dashed #C4B98F;
    z-index: 0;
}
.sfy-hiw-detail--sell .sfy-hiw-detail__steps::before { border-left-color: #D9A05B; }
.sfy-hiw-detail--move .sfy-hiw-detail__steps::before { border-left-color: #7C8DA0; }
.sfy-hiw-detail__steps li {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border: none;
    position: relative;
    z-index: 1;
}
.sfy-hiw-detail__steps li:first-child { padding-top: 0; }
.sfy-hiw-detail__steps li:last-child { padding-bottom: 0; }
/* Badge: 30px green filled circle. Ring in the card bg color so the
 * dashed connector visually breaks around each badge. */
.sfy-hiw-detail__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0F5A3A;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: 0 0 0 3px #EDEBE4;
}
.sfy-hiw-detail--sell .sfy-hiw-detail__num { box-shadow: 0 0 0 3px #FBEEDA; }
.sfy-hiw-detail--move .sfy-hiw-detail__num { box-shadow: 0 0 0 3px #E8E9EC; }
.sfy-hiw-detail__steps li strong {
    display: block;
    font-size: 14px;
    color: #222;
    font-weight: 700;
    margin-bottom: 3px;
    line-height: 1.3;
}
.sfy-hiw-detail__steps li span:not(.sfy-hiw-detail__num) {
    display: block;
    font-size: 13px;
    color: #5F6368;
    line-height: 1.45;
}
.sfy-hiw-detail__back {
    color: #0F5A3A;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}
.sfy-hiw-detail--sell .sfy-hiw-detail__back { color: #C89A3D; }
.sfy-hiw-detail--move .sfy-hiw-detail__back { color: #4A6A8A; }
.sfy-hiw-detail__back:hover { opacity: 0.8; text-decoration: none; }

/* ─── 6. FAQ block ─────────────────────────────────────────────── */
.sfy-hiw-faq {
    background: #fff;
    padding: 50px 0;
}
.sfy-hiw-faq__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 12px;
}
.sfy-hiw-faq__row > [class^="col-"] { padding: 6px 12px; }
.sfy-hiw-faq__item {
    background: #FAF8F4;
    border: 1px solid #E8E5DD;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 8px;
}
.sfy-hiw-faq__item summary {
    padding: 14px 16px;
    font-size: 14px;
    color: #222;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    list-style: none;
}
.sfy-hiw-faq__item summary::-webkit-details-marker { display: none; }
.sfy-hiw-faq__item summary i { color: #0F5A3A; font-size: 12px; transition: transform 0.15s; }
.sfy-hiw-faq__item[open] summary i { transform: rotate(180deg); }
.sfy-hiw-faq__answer {
    padding: 4px 16px 14px;
    font-size: 13px;
    color: #5F6368;
    line-height: 1.55;
}

/* ─── 7. Stats bar ─────────────────────────────────────────────── */
.sfy-hiw-stats {
    background: #F5F4EF;
    padding: 20px 0;
    border-top: 1px solid #E8E5DD;
}
.sfy-hiw-stats__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    justify-content: space-between;
}
.sfy-hiw-stats__stat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #5F6368;
}
.sfy-hiw-stats__stat i {
    color: #0F5A3A;
    font-size: 20px;
}
.sfy-hiw-stats__stat strong {
    color: #222;
    font-size: 18px;
    font-weight: 700;
    margin-right: 4px;
}
.sfy-hiw-stats__city {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #222;
    font-size: 13px;
    font-weight: 500;
}
.sfy-hiw-stats__city i { color: #0F5A3A; font-size: 14px; }
@media (max-width: 767px) {
    .sfy-hiw-stats__row { justify-content: center; text-align: center; }
}

/* ═════════════════════════════════════════════════════════════════
 * /products — Marketplace landing hero + curated strips
 * ═════════════════════════════════════════════════════════════════ */

/* ─── 1. Hero panel ─────────────────────────────────────────────── */
.sfy-mp-hero {
    padding: 24px 0 0;
}
.sfy-mp-hero__panel {
    background: #F5EFE1;
    border-radius: 18px;
    padding: 44px 44px 40px;
    overflow: hidden;
}
.sfy-mp-hero__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b6b6b;
    margin-bottom: 14px;
}
.sfy-mp-hero__crumbs a {
    color: #6b6b6b;
    text-decoration: none;
}
.sfy-mp-hero__crumbs a:hover { color: #0F5A3A; }
.sfy-mp-hero__crumb-active { color: #0F5A3A; font-weight: 600; }
.sfy-mp-hero__title {
    /* 2026-09-05 Peter: dropped Playfair Display; inherits the
     * site base font (Inter / system-ui) so this page reads with
     * the same visual voice as the homepage. */
    font-size: 56px;
    font-weight: 800;
    color: #0F5A3A;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 14px;
}
.sfy-mp-hero__lead {
    font-size: 16px;
    color: #4a4a4a;
    line-height: 1.5;
    margin: 0 0 24px;
    max-width: 420px;
}
.sfy-mp-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 26px;
}
.sfy-mp-hero__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}
.sfy-mp-hero__stats li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sfy-mp-hero__stats li > i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    color: #0F5A3A;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #0F5A3A;
    flex-shrink: 0;
}
.sfy-mp-hero__stats strong {
    display: block;
    font-size: 14px;
    color: #222;
    font-weight: 700;
    line-height: 1.1;
}
.sfy-mp-hero__stats span {
    display: block;
    font-size: 12px;
    color: #6b6b6b;
    margin-top: 1px;
}
.sfy-mp-hero__art { text-align: right; }
.sfy-mp-hero__art-img {
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    margin-left: auto;
}
@media (max-width: 991px) {
    .sfy-mp-hero__panel { padding: 30px 24px 26px; }
    .sfy-mp-hero__title { font-size: 40px; }
    .sfy-mp-hero__art { margin-top: 20px; }
    .sfy-mp-hero__art-img { height: 240px; }
}
@media (max-width: 767px) {
    .sfy-mp-hero { padding: 14px 0 0; }
    .sfy-mp-hero__panel { border-radius: 12px; padding: 24px 18px; }
    .sfy-mp-hero__title { font-size: 32px; }
    .sfy-mp-hero__lead { font-size: 14px; }
    .sfy-mp-hero__stats { gap: 14px 22px; }
    .sfy-mp-hero__art-img { height: 180px; }
}

/* ─── 2. Shop by category ───────────────────────────────────────── */
.sfy-mp-categories {
    background: #fff;
    padding: 40px 0 30px;
}
.sfy-mp-categories__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.sfy-mp-categories__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
}
.sfy-mp-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #222;
    gap: 8px;
    transition: transform 0.15s;
}
.sfy-mp-cat:hover {
    transform: translateY(-3px);
    text-decoration: none;
    color: #0F5A3A;
}
.sfy-mp-cat__circle {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #F5EFE1;
    background-size: cover;
    background-position: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}
.sfy-mp-cat__label {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
}
.sfy-mp-cat__count {
    font-size: 13px;
    color: #6b6b6b;
    line-height: 1.2;
}
@media (max-width: 991px) {
    .sfy-mp-categories__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575px) {
    .sfy-mp-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .sfy-mp-cat__circle { width: 80px; height: 80px; }
}

/* ─── 3 & 4. Curated strips (New arrivals + Popular this week) ──── */
.sfy-mp-strip {
    background: #FAF6EC;
    padding: 34px 0;
    margin-top: 22px;
    border-radius: 0;
}
.sfy-mp-strip__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.sfy-mp-strip__grid {
    display: grid;
    gap: 16px;
}
/* 2026-09-05 Peter: drop 6-across (was too dense on 12-14"
 * laptops) and 5-across (asymmetric) → 4-across for both
 * strips. Product cards get more breathing room + read better.
 * Kept the --six / --five modifier class names so the view
 * doesn't need to churn every strip container. */
.sfy-mp-strip__grid--six,
.sfy-mp-strip__grid--five { grid-template-columns: repeat(4, 1fr); }
/* Modesy's own product-item styles inside our strip: normalize to a
 * clean white card with rounded corners and subtle shadow so the row
 * reads as a curated strip, not the default catalog grid. */
.sfy-mp-strip .product-item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s, transform 0.15s;
}
.sfy-mp-strip .product-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.sfy-mp-strip .product-item .item-details {
    padding: 12px 14px 14px;
}
.sfy-mp-strip .product-item .product-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #222;
}
.sfy-mp-strip .product-item .product-title a { color: #222; }
@media (max-width: 1199px) {
    .sfy-mp-strip__grid--six,
    .sfy-mp-strip__grid--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .sfy-mp-strip__grid--six,
    .sfy-mp-strip__grid--five { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ─── 5. "All items" heading above the standard grid ────────────── */
.sfy-mp-all-head {
    margin: 40px auto 4px;
    padding-top: 8px;
}
.sfy-mp-all-head .sfy-section-title {
    font-family: inherit;
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 0;
}

/* ═════════════════════════════════════════════════════════════════
 * /moving-request — customer wizard (V1 Moving Workflow, Phase A)
 * ═════════════════════════════════════════════════════════════════ */
.sfy-mw {
    max-width: 780px;
    margin: 40px auto 60px;
    padding: 32px 34px;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.sfy-mw__head { text-align: center; margin-bottom: 26px; }
.sfy-mw__service-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E9F0EA;
    color: #0F5A3A;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 14px;
}
.sfy-mw__service-pill strong { font-weight: 700; }
.sfy-mw__title {
    font-family: inherit;
    font-size: 32px;
    color: #0F5A3A;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.sfy-mw__lead {
    color: #5F6368;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 22px;
}
.sfy-mw__progress {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    counter-reset: step;
    position: relative;
}
.sfy-mw__progress::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: #ECE7DA;
    z-index: 0;
}
.sfy-mw__progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
    flex: 1;
}
.sfy-mw__progress-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ECE7DA;
    color: #8a8a8a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sfy-mw__progress-label {
    font-size: 12px;
    color: #8a8a8a;
    font-weight: 600;
}
.sfy-mw__progress-step.is-active .sfy-mw__progress-num {
    background: #0F5A3A;
    border-color: #0F5A3A;
    color: #fff;
}
.sfy-mw__progress-step.is-active .sfy-mw__progress-label { color: #0F5A3A; }
.sfy-mw__progress-step.is-complete .sfy-mw__progress-num {
    background: #E6F1EA;
    border-color: #0F5A3A;
    color: #0F5A3A;
}
.sfy-mw__progress-step.is-complete .sfy-mw__progress-label { color: #4a4a4a; }

/* Step body — only .is-active is visible */
.sfy-mw__step { display: none; padding-top: 8px; }
.sfy-mw__step.is-active { display: block; }
.sfy-mw__step-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin: 0 0 18px;
}
.sfy-mw__row { display: flex; gap: 14px; }
.sfy-mw__row--2col > .sfy-mw__field { flex: 1; min-width: 0; }
.sfy-mw__field { margin-bottom: 16px; }
.sfy-mw__field label,
.sfy-mw__label-block {
    display: block;
    font-size: 13px;
    color: #222;
    font-weight: 600;
    margin-bottom: 6px;
}
.sfy-mw__req { color: #C84A4A; margin-left: 3px; }
.sfy-mw__optional {
    color: #8a8a8a;
    font-weight: 500;
    font-size: 12px;
    margin-left: 6px;
}
.sfy-mw__field input[type="text"],
.sfy-mw__field input[type="email"],
.sfy-mw__field input[type="tel"],
.sfy-mw__field input[type="date"],
.sfy-mw__field textarea,
.sfy-mw__field select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ECE7DA;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
    background: #FDFCF8;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.sfy-mw__field input:focus,
.sfy-mw__field textarea:focus,
.sfy-mw__field select:focus {
    border-color: #0F5A3A;
    background: #fff;
    outline: none;
}
.sfy-mw__field textarea { resize: vertical; min-height: 90px; }
.sfy-mw__field input[type="file"] {
    padding: 10px 8px;
    background: #FAF8F4;
    border: 1px dashed #ECE7DA;
    border-radius: 8px;
    font-size: 13px;
}
.sfy-mw__help {
    font-size: 12px;
    color: #8a8a8a;
    margin: 6px 0 0;
}

/* Radio pair — pill style yes/no */
.sfy-mw__radio-row { display: flex; gap: 8px; }
.sfy-mw__radio {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #ECE7DA;
    border-radius: 8px;
    background: #FDFCF8;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: #4a4a4a;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.sfy-mw__radio input { position: absolute; opacity: 0; pointer-events: none; }
.sfy-mw__radio:has(input:checked) {
    border-color: #0F5A3A;
    background: #E6F1EA;
    color: #0F5A3A;
    font-weight: 700;
}

/* Nav (back / continue / submit) */
.sfy-mw__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #F5EFE1;
    gap: 12px;
}
.sfy-mw__nav > button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
}
.sfy-mw__back {
    background: #fff;
    border: 1px solid #ECE7DA !important;
    color: #4a4a4a;
}
.sfy-mw__back:hover { background: #F5EFE1; border-color: #0F5A3A !important; color: #0F5A3A; }
.sfy-mw__next,
.sfy-mw__submit {
    background: #0F5A3A;
    color: #fff;
}
.sfy-mw__next:hover, .sfy-mw__submit:hover { background: #0A442C; }

@media (max-width: 640px) {
    .sfy-mw { padding: 24px 20px; margin: 20px 0 40px; border-radius: 12px; }
    .sfy-mw__title { font-size: 24px; }
    .sfy-mw__progress-label { display: none; }
    .sfy-mw__row { flex-direction: column; }
    .sfy-mw__nav { flex-direction: column-reverse; align-items: stretch; }
    .sfy-mw__nav > button { justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════════
 * /partner/dashboard — V1 Moving Workflow, Phase B
 * ═════════════════════════════════════════════════════════════════ */
.sfy-pd { max-width: 900px; margin: 40px auto 60px; }
.sfy-pd__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.sfy-pd__title {
    font-family: inherit;
    font-size: 30px;
    color: #0F5A3A;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.sfy-pd__company {
    font-size: 14px;
    color: #5F6368;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sfy-pd__verified {
    color: #0F5A3A;
    background: #E6F1EA;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.sfy-pd__areas {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 60%;
}
.sfy-pd__areas-label {
    font-size: 12px;
    color: #8a8a8a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-right: 4px;
}
.sfy-pd__chip {
    background: #F5EFE1;
    color: #7a5f20;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.sfy-pd__notice {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    background: #FBEEDA;
    border: 1px solid #E8D3A4;
    border-radius: 12px;
    margin-bottom: 20px;
}
.sfy-pd__notice > i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #C89A3D;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfy-pd__notice strong {
    display: block;
    color: #7a5f20;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
}
.sfy-pd__notice p {
    margin: 0;
    color: #7a5f20;
    font-size: 13.5px;
    line-height: 1.45;
}
.sfy-pd__empty {
    text-align: center;
    padding: 40px 24px;
    color: #8a8a8a;
}
.sfy-pd__empty > i {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #F0F7F3;
    color: #0F5A3A;
    font-size: 24px;
    margin: 0 auto 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sfy-pd__empty p { max-width: 460px; margin: 8px auto 0; font-size: 14px; line-height: 1.5; }

.sfy-pd__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sfy-pd__card {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.sfy-pd__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.sfy-pd__card-badge {
    background: #E6F1EA;
    color: #0F5A3A;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 4px;
}
.sfy-pd__card-id {
    color: #8a8a8a;
    font-size: 13px;
    font-weight: 500;
    margin-left: -4px;
}
.sfy-pd__card-status {
    color: #C89A3D;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}
.sfy-pd__card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.sfy-pd__row {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 13.5px;
}
.sfy-pd__label {
    color: #8a8a8a;
    min-width: 100px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
}
.sfy-pd__val { color: #222; flex: 1; }
.sfy-pd__val--muted { color: #5F6368; }
.sfy-pd__pill {
    background: #F5EFE1;
    color: #7a5f20;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
}
.sfy-pd__card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #F5EFE1;
    gap: 12px;
    flex-wrap: wrap;
}
.sfy-pd__meta { font-size: 12px; color: #8a8a8a; }
.sfy-pd__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.sfy-pd__phaseC-note {
    margin-top: 22px;
    padding: 14px 18px;
    background: #F0F7F3;
    border-left: 3px solid #0F5A3A;
    border-radius: 6px;
    font-size: 13px;
    color: #4a4a4a;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .sfy-pd__head { flex-direction: column; }
    .sfy-pd__areas { max-width: 100%; justify-content: flex-start; }
    .sfy-pd__label { min-width: 82px; font-size: 12px; }
    .sfy-pd__card-foot { flex-direction: column; align-items: stretch; }
    .sfy-pd__cta { justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════════
 * /partner/offer/new/{id} — Offer Builder (V1, Phase C.1)
 * ═════════════════════════════════════════════════════════════════ */
.sfy-ob { max-width: 820px; margin: 30px auto 60px; }
.sfy-ob__head { margin-bottom: 22px; }
.sfy-ob__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5F6368;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.15s;
}
.sfy-ob__back:hover { color: #0F5A3A; }
.sfy-ob__title {
    font-family: inherit;
    font-size: 30px;
    color: #0F5A3A;
    margin: 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.sfy-ob__req-id {
    color: #8a8a8a;
    font-size: 16px;
    font-family: inherit;
    font-weight: 400;
}

.sfy-ob__error {
    background: #FDECEC;
    border: 1px solid #F5C4C4;
    color: #B23A3A;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 13.5px;
}

.sfy-ob__section {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.sfy-ob__section--summary { background: #FAF8F4; }
.sfy-ob__section--preview { background: #F0F7F3; border-color: #C7DCC9; }
.sfy-ob__sec-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.sfy-ob__sec-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0F5A3A;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.sfy-ob__optional {
    background: #F5EFE1;
    color: #7a5f20;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 6px;
}
.sfy-ob__help {
    font-size: 13px;
    color: #5F6368;
    line-height: 1.5;
    margin: -6px 0 12px;
}

/* Summary rows (Section 1) */
.sfy-ob__summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sfy-ob__summary-row {
    display: flex;
    gap: 12px;
    font-size: 14px;
}
.sfy-ob__summary-label {
    color: #8a8a8a;
    min-width: 120px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
}
.sfy-ob__summary-val { color: #222; flex: 1; }
.sfy-ob__pill {
    background: #F5EFE1;
    color: #7a5f20;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
}

/* Radio tiles (Sections 2, 3) */
.sfy-ob__radio-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.sfy-ob__radio-tiles--3 { grid-template-columns: repeat(3, 1fr); }
.sfy-ob__radio-tile {
    display: block;
    padding: 14px 16px;
    background: #FDFCF8;
    border: 1.5px solid #ECE7DA;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.sfy-ob__radio-tile > input { position: absolute; opacity: 0; pointer-events: none; }
.sfy-ob__radio-tile:has(input:checked) {
    border-color: #0F5A3A;
    background: #E6F1EA;
}
.sfy-ob__radio-tile-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    margin-bottom: 2px;
}
.sfy-ob__radio-tile:has(input:checked) .sfy-ob__radio-tile-title { color: #0F5A3A; }
.sfy-ob__radio-tile-desc {
    display: block;
    font-size: 12.5px;
    color: #5F6368;
    line-height: 1.4;
}
.sfy-ob__radio-tile--compact { text-align: center; padding: 12px 10px; }
.sfy-ob__radio-tile--compact .sfy-ob__radio-tile-title { margin: 0; }

.sfy-ob__field { margin-bottom: 12px; }
.sfy-ob__field label {
    display: block;
    font-size: 13px;
    color: #222;
    font-weight: 600;
    margin-bottom: 6px;
}
.sfy-ob__field input[type="text"],
.sfy-ob__field input[type="number"],
.sfy-ob__field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ECE7DA;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
    background: #FDFCF8;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.sfy-ob__field input:focus,
.sfy-ob__field textarea:focus {
    border-color: #0F5A3A;
    background: #fff;
    outline: none;
}
.sfy-ob__field textarea { resize: vertical; min-height: 90px; }

.sfy-ob__row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.sfy-ob__range-pair {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sfy-ob__range-pair input {
    width: 100%;
}
.sfy-ob__range-pair span { color: #8a8a8a; }

/* Team size buttons (Section 5) */
.sfy-ob__team {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.sfy-ob__team-btn {
    width: 56px;
    height: 56px;
    border: 1.5px solid #ECE7DA;
    border-radius: 12px;
    background: #FDFCF8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    color: #4a4a4a;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    position: relative;
}
.sfy-ob__team-btn > input { position: absolute; opacity: 0; pointer-events: none; }
.sfy-ob__team-btn:has(input:checked) {
    background: #0F5A3A;
    border-color: #0F5A3A;
    color: #fff;
}

/* Checkbox grid (Section 6) */
.sfy-ob__checkboxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.sfy-ob__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #FDFCF8;
    border: 1.5px solid #ECE7DA;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    color: #4a4a4a;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.sfy-ob__checkbox:has(input:checked) {
    background: #E6F1EA;
    border-color: #0F5A3A;
    color: #0F5A3A;
    font-weight: 700;
}
.sfy-ob__checkbox > input { accent-color: #0F5A3A; }

/* Submit / cancel actions */
.sfy-ob__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
}
.sfy-ob__actions > * {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 640px) {
    .sfy-ob__section { padding: 18px 16px; }
    .sfy-ob__radio-tiles, .sfy-ob__radio-tiles--3 { grid-template-columns: 1fr; }
    .sfy-ob__row-3 { grid-template-columns: 1fr; }
    .sfy-ob__checkboxes { grid-template-columns: 1fr; }
    .sfy-ob__actions { flex-direction: column; }
    .sfy-ob__actions > * { justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════════
 * /service-requests/{id} — customer offer comparison (V1, Phase C.2)
 * ═════════════════════════════════════════════════════════════════ */
.sfy-srv-list__link {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
    width: 100%;
}
.sfy-srv-list__link:hover { color: inherit; text-decoration: none; }
.sfy-srv-list__link:hover .sfy-srv-list__body strong { color: #0F5A3A; }

.sfy-srd__error, .sfy-srd__success {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 14px;
}
.sfy-srd__error   { background: #FDECEC; color: #B23A3A; border: 1px solid #F5C4C4; }
.sfy-srd__success { background: #E6F1EA; color: #0F5A3A; border: 1px solid #C7DCC9; }

.sfy-srd-summary { margin-bottom: 20px; }
.sfy-srd-summary__status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    background: #F5EFE1;
    color: #7a5f20;
}
.sfy-srd-summary__status--quotes_received,
.sfy-srd-summary__status--offer_selected,
.sfy-srd-summary__status--booked,
.sfy-srd-summary__status--completed {
    background: #E6F1EA;
    color: #0F5A3A;
}
.sfy-srd-summary__status--cancelled { background: #ECECEC; color: #8a8a8a; }
.sfy-srd-summary__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sfy-srd-summary__row {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: #222;
}
.sfy-srd-summary__label {
    color: #8a8a8a;
    min-width: 120px;
    font-size: 13px;
    font-weight: 600;
}
.sfy-srd-summary__pill {
    background: #F5EFE1;
    color: #7a5f20;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
}

/* Offers grid + card */
.sfy-srd-offers__head { margin-bottom: 14px; }
.sfy-srd-offers__title {
    font-family: inherit;
    font-size: 22px;
    color: #222;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.sfy-srd-offers__count {
    color: #8a8a8a;
    font-family: inherit;
    font-size: 15px;
    margin-left: 6px;
    font-weight: 400;
}
.sfy-srd-offers__hint {
    color: #5F6368;
    font-size: 13.5px;
    margin: 0 0 12px;
    line-height: 1.5;
}
.sfy-srd-offers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

/* 2026-09-05 Peter: group headings between Recommended and
 * Other offers on the offer-comparison page. */
.sfy-srd-offers__group-head {
    margin: 20px 0 12px;
}
.sfy-srd-offers__group-head h4 {
    font-size: 20px;
    font-weight: 800;
    color: #0F3D24;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}
.sfy-srd-offers__group-count {
    color: #6b7280;
    font-weight: 500;
    font-size: 15px;
    margin-left: 4px;
}
.sfy-srd-offers__group-head p {
    color: #5F6368;
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0;
}
/* Recommended = 2-col grid on desktop so the BEST MATCH sits
 * next to the top RECOMMENDED and the pair below it is a 2x2. */
.sfy-srd-offers--recommended {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 767px) {
    .sfy-srd-offers--recommended { grid-template-columns: 1fr; }
}
/* Other = full-width rows for a lighter visual weight. */
.sfy-srd-offers--other {
    grid-template-columns: 1fr;
}
.sfy-srd-offer {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sfy-srd-offer--accepted {
    border: 2px solid #0F5A3A;
    background: #F0F7F3;
}
.sfy-srd-offer__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.sfy-srd-offer__company {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sfy-srd-offer__company > strong {
    font-size: 15px;
    color: #222;
    font-weight: 700;
}
.sfy-srd-offer__verified {
    color: #0F5A3A;
    background: #E6F1EA;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.sfy-srd-offer__rating {
    color: #C89A3D;
    font-size: 12.5px;
    font-weight: 700;
}
.sfy-srd-offer__rating-count { color: #8a8a8a; font-weight: 500; }
.sfy-srd-offer__price {
    text-align: right;
    font-size: 22px;
    font-weight: 800;
    color: #0F5A3A;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.sfy-srd-offer__estimate {
    display: block;
    font-size: 11px;
    color: #5F6368;
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 2px;
}
.sfy-srd-offer__meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #4a4a4a;
}
.sfy-srd-offer__meta > li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sfy-srd-offer__meta > li > i { color: #0F5A3A; font-size: 13px; }
.sfy-srd-offer__extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}
.sfy-srd-offer__extras-label {
    color: #8a8a8a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}
.sfy-srd-offer__chip {
    background: #F5EFE1;
    color: #7a5f20;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
}
.sfy-srd-offer__msg {
    color: #4a4a4a;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
    padding: 10px 12px;
    background: #FDFCF8;
    border-left: 3px solid #ECE7DA;
    border-radius: 4px;
}
.sfy-srd-offer__foot {
    margin-top: auto;
    padding-top: 6px;
}
.sfy-srd-offer__accept {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

/* Accepted card */
.sfy-srd-accepted {
    background: #F0F7F3;
    border: 1px solid #C7DCC9;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.sfy-srd-accepted__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.sfy-srd-accepted__mark {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #0F5A3A;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0F5A3A;
    flex-shrink: 0;
}
.sfy-srd-accepted__head strong {
    display: block;
    font-size: 15px;
    color: #0F5A3A;
    font-weight: 700;
    margin-bottom: 3px;
}
.sfy-srd-accepted__head p {
    margin: 0;
    color: #4a4a4a;
    font-size: 13.5px;
    line-height: 1.5;
}

.sfy-srd-empty {
    text-align: center;
    padding: 40px 24px;
    color: #8a8a8a;
}
.sfy-srd-empty > i {
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #F0F7F3;
    color: #0F5A3A;
    font-size: 22px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.sfy-srd-empty p { max-width: 480px; margin: 8px auto 0; font-size: 14px; line-height: 1.5; }

@media (max-width: 640px) {
    .sfy-srd-offer__head { flex-direction: column; align-items: flex-start; }
    .sfy-srd-offer__price { text-align: left; }
}

/* ═════════════════════════════════════════════════════════════════
 * Booking detail (customer + partner) — Phase D
 * ═════════════════════════════════════════════════════════════════ */
.sfy-bk { max-width: 960px; margin: 30px auto 60px; }

/* 2026-09-05 Peter: reorder the booking-detail page so Timeline
 * and Messages sit near the top ("more relevant for an active
 * booking"). Uses CSS `order` — the DOM markup stays exactly as
 * it is (so every conditional section still shows/hides as
 * before), only the visual order shifts.
 *
 * Priority:
 *   -100  header (Back/Title/Status)
 *   -80   pending change-orders (customer needs to act)
 *   -70   Timeline
 *   -60   Messages
 *      0  everything else (payment card, balance card, banners,
 *         cross-sell, review CTAs, dispute, etc.) — natural
 *         source order.
 */
.sfy-bk {
    display: flex;
    flex-direction: column;
}
.sfy-bk > .sfy-bk__head            { order: -100; }
.sfy-bk > .sfy-bk-co-approve       { order: -80;  }
.sfy-bk > .sfy-bk-panel:has(.sfy-bk-timeline) { order: -70; }
.sfy-bk > .sfy-bk-panel.sfy-bmsg   { order: -60; }
/* Fallback: browsers without :has() still render everything —
 * source order just falls back to Timeline appearing after
 * Payment card. That's the pre-2026-09-05 behavior, not a bug. */
.sfy-bk__head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.sfy-bk__back {
    color: #5F6368;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-basis: 100%;
    margin-bottom: 4px;
}
.sfy-bk__back:hover { color: #0F5A3A; }
.sfy-bk__title {
    font-family: inherit;
    font-size: 30px;
    color: #0F5A3A;
    margin: 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.sfy-bk__id { color: #8a8a8a; font-size: 16px; font-family: inherit; font-weight: 400; }
.sfy-bk__status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border-radius: 999px;
    background: #F5EFE1;
    color: #7a5f20;
    margin-left: auto;
}
.sfy-bk__status--scheduled  { background: #E3EEF7; color: #3B7BB3; }
.sfy-bk__status--on_the_way,
.sfy-bk__status--arrived,
.sfy-bk__status--loading,
.sfy-bk__status--in_transit { background: #FBEEDA; color: #7a5f20; }
.sfy-bk__status--completed  { background: #E6F1EA; color: #0F5A3A; }
.sfy-bk__status--cancelled  { background: #ECECEC; color: #8a8a8a; }

.sfy-bk-panel {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.sfy-bk-panel__title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.sfy-bk-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.sfy-bk-two > .sfy-bk-panel { margin-bottom: 0; }
@media (max-width: 767px) {
    .sfy-bk-two { grid-template-columns: 1fr; }
}

.sfy-bk-row {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #F5EFE1;
    align-items: baseline;
    font-size: 13.5px;
}
.sfy-bk-row:last-child { border-bottom: 0; }
.sfy-bk-row__label {
    color: #8a8a8a;
    min-width: 130px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
}
.sfy-bk-row__val { color: #222; flex: 1; }
.sfy-bk-row__val--price {
    color: #0F5A3A;
    font-weight: 800;
    font-size: 17px;
}
.sfy-bk-row__val--chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.sfy-bk-row__chip {
    background: #F5EFE1;
    color: #7a5f20;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
}
.sfy-bk-row__vehicle-plate { color: #5F6368; font-size: 12.5px; }
.sfy-bk-row--full {
    display: block;
    padding-top: 12px;
    border-top: 1px solid #F5EFE1;
    margin-top: 8px;
    border-bottom: 0;
}
.sfy-bk-msg {
    background: #FDFCF8;
    border-left: 3px solid #0F5A3A;
    padding: 10px 12px;
    border-radius: 4px;
    margin: 0;
    color: #4a4a4a;
    font-size: 13.5px;
    line-height: 1.5;
}
.sfy-bk-msg--customer { border-left-color: #C89A3D; }

/* Timeline */
/* 2026-09-07 Peter: horizontal timeline. The old vertical
 * stack took the entire visible area of the booking page and
 * pushed the chat below the fold. Flipping to horizontal so
 * the four steps sit in a row, the connector line runs
 * left-to-right through the dots, and the messages panel
 * (which floats to just below) is visible without scroll. */
.sfy-bk-timeline {
    list-style: none;
    padding: 8px 0 4px;
    margin: 0 0 10px;
    display: flex;
    flex-direction: row;
    gap: 0;
    position: relative;
    align-items: flex-start;
}
.sfy-bk-timeline::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 20px;           /* aligned with dot center */
    height: 2px;
    background: #ECE7DA;
    z-index: 0;
}
.sfy-bk-timeline__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
}
@media (max-width: 575px) {
    /* Very narrow phones — stack 2×2 so labels don't get
     * squeezed. Line-connector hides when wrapped. */
    .sfy-bk-timeline { flex-wrap: wrap; }
    .sfy-bk-timeline::before { display: none; }
    .sfy-bk-timeline__step { flex-basis: 50%; padding: 6px 0; }
}
.sfy-bk-timeline__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ECE7DA;
    flex-shrink: 0;
    position: relative;
}
.sfy-bk-timeline__step.is-reached .sfy-bk-timeline__dot {
    background: #E6F1EA;
    border-color: #0F5A3A;
}
.sfy-bk-timeline__step.is-current .sfy-bk-timeline__dot {
    background: #0F5A3A;
    border-color: #0F5A3A;
    box-shadow: 0 0 0 4px rgba(15, 90, 58, 0.18);
}
.sfy-bk-timeline__body {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    align-items: center;      /* horizontal layout — center under dot */
    text-align: center;
    max-width: 100%;
    padding: 0 4px;
}
.sfy-bk-timeline__body > strong {
    color: #8a8a8a;
    font-size: 13px;          /* was 14 — tighter for horizontal row */
    font-weight: 600;
    overflow-wrap: anywhere;
}
.sfy-bk-timeline__step.is-reached .sfy-bk-timeline__body > strong { color: #222; }
.sfy-bk-timeline__step.is-current .sfy-bk-timeline__body > strong { color: #0F5A3A; font-weight: 800; }
.sfy-bk-timeline__stamp {
    color: #8a8a8a;
    font-size: 12px;
    margin-top: 2px;
}
.sfy-bk-timeline__advance {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #F5EFE1;
    margin-top: 10px;
}
.sfy-bk-timeline__advance > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

/* Partner dashboard section titles + booking card variant */
.sfy-pd__section-title {
    font-family: inherit;
    font-size: 20px;
    color: #222;
    margin: 22px 0 12px;
    letter-spacing: -0.01em;
    font-weight: 700;
}
.sfy-pd__section-title:first-child { margin-top: 0; }
.sfy-pd__list--bookings { margin-bottom: 4px; }
.sfy-pd__card--booking { border-left: 3px solid #0F5A3A; }
.sfy-pd__card-badge--booking { background: #F0F7F3; color: #0F5A3A; }
.sfy-pd__card-status--scheduled  { color: #3B7BB3; }
.sfy-pd__card-status--on_the_way,
.sfy-pd__card-status--arrived,
.sfy-pd__card-status--loading,
.sfy-pd__card-status--in_transit { color: #C89A3D; }
.sfy-pd__card-status--completed  { color: #0F5A3A; }

/* Accepted-offer CTA on customer request detail */
.sfy-srd-accepted__cta {
    margin-left: auto;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    align-self: center;
}

/* ═════════════════════════════════════════════════════════════════
 * Booking confirmation + review (Phase E.2)
 * ═════════════════════════════════════════════════════════════════ */
.sfy-bk-confirm {
    background: #E6F1EA;
    border: 1px solid #C7DCC9;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.sfy-bk-confirm__body { flex: 1; min-width: 220px; }
.sfy-bk-confirm__body strong {
    display: block;
    color: #0F5A3A;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
}
.sfy-bk-confirm__body p {
    margin: 0;
    color: #4a4a4a;
    font-size: 13.5px;
    line-height: 1.5;
}
.sfy-bk-confirm > form > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

/* Review form panel */
.sfy-bk-review {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.sfy-bk-review__lead {
    color: #5F6368;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 14px;
}
.sfy-bk-review__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Star picker — 2026-09-03 rewrite. The previous rules stacked
 * conflicting :hover + :has(input:checked) selectors that fought
 * each other, so the widget felt "sticky": clicking a star didn't
 * light it, hover would keep the old highlight, etc. JS now owns
 * both hover-preview and confirmed-selection, and CSS only reads
 * two classes: .is-lit (hover preview) and .is-picked (selected). */
.sfy-bk-review__stars {
    display: flex;
    gap: 4px;
}
.sfy-bk-review__star {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 30px;
    line-height: 1;
    color: #ECE7DA;
    cursor: pointer;
    transition: color 100ms;
    user-select: none;
}
.sfy-bk-review__star > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.sfy-bk-review__star.is-picked,
.sfy-bk-review__star.is-lit,
.sfy-bk-review__star.is-filled {
    color: #C89A3D;
}

.sfy-bk-review__field { display: flex; flex-direction: column; }
.sfy-bk-review__field label {
    font-size: 13px;
    color: #222;
    font-weight: 600;
    margin-bottom: 6px;
}
.sfy-bk-review__field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ECE7DA;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
    background: #FDFCF8;
    font-family: inherit;
    resize: vertical;
    min-height: 90px;
}
.sfy-bk-review__field textarea:focus {
    border-color: #0F5A3A;
    background: #fff;
    outline: none;
}
.sfy-bk-review__actions {
    display: flex;
    justify-content: flex-end;
}
.sfy-bk-review__actions > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

/* Read-only review card */
.sfy-bk-review--done { background: #FDFCF8; }
.sfy-bk-review__done-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}
.sfy-bk-review__done-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 20px;
    color: #ECE7DA;
    line-height: 1;
}
.sfy-bk-review__done-stars > .is-filled { color: #C89A3D; }
.sfy-bk-review__done-rating {
    font-weight: 800;
    font-size: 15px;
    color: #222;
}
.sfy-bk-review__done-when {
    color: #8a8a8a;
    font-size: 12.5px;
    margin-left: auto;
}
.sfy-bk-review__done-comment {
    margin: 0;
    color: #4a4a4a;
    font-size: 13.5px;
    line-height: 1.55;
    padding: 10px 12px;
    background: #FAF8F4;
    border-left: 3px solid #C89A3D;
    border-radius: 4px;
}

/* ═════════════════════════════════════════════════════════════════
 * Booking cross-sell tiles (Phase E.3)
 * ═════════════════════════════════════════════════════════════════ */
.sfy-bk-xsell {
    background: #F5EFE1;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 18px;
}
.sfy-bk-xsell__head { margin-bottom: 14px; }
.sfy-bk-xsell__title {
    font-family: inherit;
    font-size: 22px;
    color: #0F5A3A;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.sfy-bk-xsell__lead {
    color: #5F6368;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}
.sfy-bk-xsell__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.sfy-bk-xsell__tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 10px;
    text-decoration: none;
    color: #222;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
    position: relative;
}
.sfy-bk-xsell__tile:hover {
    border-color: #0F5A3A;
    box-shadow: 0 4px 14px rgba(15, 90, 58, 0.08);
    transform: translateY(-2px);
    text-decoration: none;
    color: #222;
}
.sfy-bk-xsell__tile--soon { opacity: 0.72; }
.sfy-bk-xsell__tile--soon:hover {
    border-color: #ECE7DA;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}
.sfy-bk-xsell__tile--soon::after {
    content: attr(title);
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C89A3D;
}
.sfy-bk-xsell__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F0F7F3;
    color: #0F5A3A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
}
.sfy-bk-xsell__icon > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}
.sfy-bk-xsell__icon--sky   { background: #E3EEF7; color: #3B7BB3; }
.sfy-bk-xsell__icon--rose  { background: #FDE3E3; color: #C84A4A; }
.sfy-bk-xsell__icon--amber { background: #FBEEDA; color: #C89A3D; }
.sfy-bk-xsell__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.sfy-bk-xsell__body strong {
    font-size: 14px;
    color: #222;
    font-weight: 700;
    margin-bottom: 2px;
}
.sfy-bk-xsell__body span {
    font-size: 12.5px;
    color: #5F6368;
    line-height: 1.4;
}
.sfy-bk-xsell__chev {
    color: #C89A3D;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.sfy-bk-xsell__tile:hover .sfy-bk-xsell__chev { transform: translateX(3px); }
@media (max-width: 767px) {
    .sfy-bk-xsell__grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════
 * Mobile account nav — hamburger + slide-out drawer + bottom tabs.
 * ═════════════════════════════════════════════════════════════════ */

/* Mobile-header hamburger (inside Modesy's .menu-icon slot) —
 * inherits size/position from the Modesy .menu-icon rules; only
 * needs the visual icon color to match our brand. */
.sfy-mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F5A3A;
    font-size: 22px;
    text-decoration: none;
    line-height: 1;
}
.sfy-mobile-menu-btn:hover { color: #0A442C; }

/* Desktop-only hamburger inside the main-menu (rendered on slim
 * pages via PHP). Hidden on desktop AND mobile — Modesy's mobile
 * header handles the mobile case via .sfy-mobile-menu-btn above. */
.sfy-drawer-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 8px;
    margin-right: 6px;
    transition: background 0.15s;
}
.sfy-drawer-toggle:hover { background: #F5EFE1; }
.sfy-drawer-toggle > span {
    display: block;
    width: 22px;
    height: 2px;
    background: #0F5A3A;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
@media (max-width: 767px) {
    .sfy-drawer-toggle { display: inline-flex; }
}

/* Close (×) button inside the drawer — mobile only */
.sfy-account-nav__close {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    color: #5F6368;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.sfy-account-nav__close:hover { background: #F5EFE1; color: #0F5A3A; }
.sfy-account-nav__close > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

/* Backdrop — hidden on desktop, absolute + fade in on mobile drawer-open */
.sfy-account-drawer__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 20, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 1099;
}

/* Mobile drawer treatment (≤767px) */
@media (max-width: 767px) {
    /* Collapse the sidebar column's footprint — the <aside> pops out
     * via position:fixed, so its parent col shouldn't reserve space. */
    .sfy-account-layout > [class^="col-"]:first-child,
    .sfy-account-layout > .col-md-4:first-child {
        padding: 0;
        min-height: 0;
    }

    .sfy-account-nav.sfy-account-nav--flat {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        z-index: 1100;
        background: #fff;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }
    .sfy-account-nav.sfy-account-nav--flat.is-open { transform: translateX(0); }

    .sfy-account-nav__close { display: inline-flex; }
    /* Nudge the brand block down so it doesn't collide with the close button */
    .sfy-account-nav--flat .sfy-account-nav__brand { padding-top: 44px; }

    .sfy-account-drawer__backdrop { display: block; }
    .sfy-account-drawer__backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Body-lock: no scroll while drawer is open */
    body.sfy-drawer-open {
        overflow: hidden;
        touch-action: none;
    }

    /* Give the main content room for the bottom nav */
    .sfy-account-layout__main { padding-bottom: 84px; }
}

/* Bottom tab bar — 4 tabs, fixed to viewport bottom, mobile only */
.sfy-account-bnav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #ECE7DA;
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
    z-index: 1050;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
.sfy-account-bnav__tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    text-decoration: none;
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    transition: color 0.15s;
    /* z-index isolation — each tab owns exactly its own click area
     * so a stray shadow / pseudo-element from a neighbour can't
     * catch a tap meant for this tab. Was causing Messages taps
     * to fall through to the Account button next to it. */
    position: relative;
    z-index: 1;
    isolation: isolate;
}
.sfy-account-bnav__tab > i {
    font-size: 20px;
    line-height: 1;
    color: inherit;
}
.sfy-account-bnav__tab:hover { color: #0F5A3A; text-decoration: none; }
.sfy-account-bnav__tab.is-active { color: #0F5A3A; }
.sfy-account-bnav__tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30%;
    right: 30%;
    height: 3px;
    background: #0F5A3A;
    border-radius: 0 0 3px 3px;
}
.sfy-account-bnav__dot {
    position: absolute;
    top: 4px;
    right: 20%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C84A4A;
    border: 2px solid #fff;
}
/* Drawer-open tab is a <button> — strip default button chrome so it
 * matches the sibling <a> tabs pixel-for-pixel. */
.sfy-account-bnav__tab--drawer {
    background: transparent;
    border: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    /* Re-apply the layout the <a> tabs inherit from .sfy-account-bnav__tab */
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    transition: color 0.15s;
    position: relative;
    z-index: 1;
    isolation: isolate;
}
.sfy-account-bnav__tab--drawer:hover { color: #0F5A3A; }
.sfy-account-bnav__tab--drawer > i {
    font-size: 20px;
    line-height: 1;
    color: inherit;
}
@media (max-width: 767px) {
    .sfy-account-bnav { display: flex; }
}

/* Our own site-wide mobile bottom nav is .sfy-mobile-bottom-nav.
 * On account pages the .sfy-account-bnav takes over — hide the
 * public one so we don't stack two bottom bars. */
@media (max-width: 767px) {
    body:has(.sfy-account-bnav) .sfy-mobile-bottom-nav { display: none !important; }
    body.sfy-drawer-open .sfy-mobile-bottom-nav { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════════
 * Mobile dashboard responsive pass — no more horizontal overflow
 * ═════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Belt-and-suspenders: whatever pushes past viewport gets clipped
     * instead of blowing out the whole page's horizontal scroll. */
    html, body { overflow-x: hidden; }
    .sfy-account-layout__main { overflow-x: hidden; min-width: 0; }

    /* Greeting row: stack the CTA pair under the copy so the buttons
     * always fit at full width. */
    .sfy-dash-greet {
        flex-direction: column;
        align-items: stretch;
        padding: 18px 0 16px;
        gap: 14px;
    }
    .sfy-dash-greet__title { font-size: 24px; }
    .sfy-dash-greet__ctas { flex-direction: column; }
    .sfy-dash-greet__cta { justify-content: center; padding: 12px 16px; }

    /* Panels: less inner padding and NO more space than the viewport. */
    .sfy-dash-panel {
        padding: 16px 14px;
        border-radius: 12px;
        max-width: 100%;
    }
    .sfy-dash-panel__head {
        margin-bottom: 12px;
        align-items: flex-start;
        column-gap: 8px;
        row-gap: 4px;
    }
    .sfy-dash-panel__title {
        font-size: 15px;
        min-width: 0;
        flex: 1;
    }
    .sfy-dash-panel__title i {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    .sfy-dash-panel__link {
        font-size: 12px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    .sfy-dash-panel__link > i { display: none; }

    /* Listing rows: smaller thumb, tighter gap, allow the CTA to sit
     * under the body when the row is too narrow. */
    .sfy-dash-listing {
        gap: 10px;
        padding: 10px;
        flex-wrap: wrap;
    }
    .sfy-dash-listing__thumb {
        width: 52px;
        height: 52px;
        border-radius: 6px;
    }
    .sfy-dash-listing__body {
        flex: 1 1 60%;
        min-width: 0;
    }
    .sfy-dash-listing__title {
        font-size: 13.5px;
        line-height: 1.25;
    }
    .sfy-dash-listing__status,
    .sfy-dash-listing__meta { font-size: 11.5px; }
    .sfy-dash-listing__cta,
    .sfy-dash-listing__cta.sfy-btn-primary,
    .sfy-dash-listing__cta.sfy-btn-secondary {
        padding: 7px 12px;
        font-size: 12.5px;
        border-radius: 6px;
        flex-shrink: 0;
        max-width: 100%;
    }
    /* Ready-to-Complete alert stays on one row but tightened up */
    .sfy-dash-alert {
        padding: 10px 12px;
        gap: 10px;
    }
    .sfy-dash-alert > i { width: 28px; height: 28px; font-size: 13px; }
    .sfy-dash-alert__body strong { font-size: 13px; }
    .sfy-dash-alert__body span { font-size: 11.5px; }
    .sfy-dash-alert__count { width: 22px; height: 22px; font-size: 11px; }

    /* 'Coming soon' badge on Cleaning / Delivery / Removal rows —
     * pill can't force the row to overflow anymore. */
    .sfy-dash-listing__soon-badge {
        font-size: 9px;
        padding: 4px 8px;
        letter-spacing: 0.06em;
    }
    /* Icon holder on empty/soon rows */
    .sfy-srv-list__icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    /* Service Requests item icon lookups on the dashboard's Active
     * Requests card share this shell — mirror the sizing there too. */
    .sfy-srv-panel { padding: 16px 14px; }

    /* Recent Activity feed — tighter row */
    .sfy-dash-activity__item { padding: 8px 0; gap: 10px; }
    .sfy-dash-activity__icon { width: 30px; height: 30px; font-size: 13px; }
    .sfy-dash-activity__title { font-size: 13px; }
    .sfy-dash-activity__time { font-size: 11px; }

    /* Explore services — tighten cards */
    .sfy-dash-services { gap: 10px; }
    .sfy-dash-service { padding: 12px; gap: 10px; }
    .sfy-dash-service__icon { width: 34px; height: 34px; font-size: 14px; }
    .sfy-dash-service__body strong { font-size: 13px; }
    .sfy-dash-service__body span { font-size: 11.5px; }
    .sfy-dash-service__chevron { display: none; }
}

/* ═════════════════════════════════════════════════════════════════
 * Messages page inside the account layout
 * ─────────────────────────────────────────────────────────────────
 * The messages view already has its own conversation-list sidebar
 * (`.col-message-sidebar`) + chat pane. When embedded inside the
 * account layout's main column, we don't need Modesy's outer
 * breadcrumb + h1 (the account layout provides them), and we want
 * the conversation-list column to keep decent breathing room on
 * mobile so both columns don't cram together.
 * ═════════════════════════════════════════════════════════════════ */
.row-col-messages.sfy-msg-wrapped {
    margin-left: 0;
    margin-right: 0;
}
.row-col-messages.sfy-msg-wrapped > [class^="col-"] {
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 991.98px) {
    /* Mobile: bnav sits at the bottom, so add space so the chat form
       isn't hidden behind it. */
    .row-col-messages.sfy-msg-wrapped { padding-bottom: 84px; }
}

/* ═════════════════════════════════════════════════════════════════
 * Settings > Account summary panel
 * ─────────────────────────────────────────────────────────────────
 * Sits at the top of Settings > Account and surfaces the
 * profile-at-a-glance info (avatar, name, member since, last seen,
 * email, location) that used to live on the public profile header.
 * Cleaner than making users hunt through the edit form.
 * ═════════════════════════════════════════════════════════════════ */
.sfy-acct-summary {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px;
    margin-bottom: 22px;
    background: #FAF6EA;
    border: 1px solid #ECE7DA;
    border-radius: 14px;
}
.sfy-acct-summary__avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.sfy-acct-summary__body { flex: 1; min-width: 0; }
.sfy-acct-summary__name {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sfy-acct-summary__name .icon-verified { color: #C89A3D; font-size: 16px; }
.sfy-acct-summary__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
}
.sfy-acct-summary__meta > li {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sfy-acct-summary__label {
    font-size: 11px;
    font-weight: 700;
    color: #8a8a8a;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sfy-acct-summary__value {
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sfy-acct-summary__value--online { color: #0F5A3A; font-weight: 600; }
.sfy-acct-summary__edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #0F5A3A;
    color: #fff;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.sfy-acct-summary__edit:hover {
    background: #0A442C;
    color: #fff;
    text-decoration: none;
}
.sfy-acct-summary__edit i { font-size: 12px; }

.sfy-acct-edit-heading {
    margin: 4px 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    padding-bottom: 8px;
    border-bottom: 1px solid #ECE7DA;
}

@media (max-width: 575px) {
    .sfy-acct-summary {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 18px;
        gap: 14px;
    }
    .sfy-acct-summary__avatar img { width: 84px; height: 84px; }
    .sfy-acct-summary__name { justify-content: center; font-size: 18px; }
    .sfy-acct-summary__meta {
        grid-template-columns: 1fr;
        gap: 8px 0;
        text-align: left;
    }
}

/* ═════════════════════════════════════════════════════════════════
 * Profile empty state
 * ─────────────────────────────────────────────────────────────────
 * Renders when the profile has no active listings — otherwise the
 * page can look blank on the owner's own view (header suppressed +
 * empty product grid).
 * ═════════════════════════════════════════════════════════════════ */
.sfy-profile-empty {
    text-align: center;
    padding: 36px 20px 40px;
    background: #FAF6EA;
    border: 1px dashed #E4D9B8;
    border-radius: 14px;
    margin: 20px 0;
}
.sfy-profile-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ECE7DA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F5A3A;
    font-size: 20px;
    margin-bottom: 12px;
}
.sfy-profile-empty__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}
.sfy-profile-empty__sub {
    margin: 0 0 16px;
    color: #5F6368;
    font-size: 14px;
}
.sfy-profile-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #0F5A3A;
    color: #fff;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.sfy-profile-empty__cta:hover {
    background: #0A442C;
    color: #fff;
    text-decoration: none;
}
.sfy-profile-empty__cta i { font-size: 12px; }

/* ═════════════════════════════════════════════════════════════════
 * Purchases top bar — PURCHASES card (left) + status filters (right)
 * ─────────────────────────────────────────────────────────────────
 * Sits at the top of the page when ?ctx=purchases or ?ctx=my_furniture
 * is set. Two panels side-by-side on desktop, stacked on mobile.
 * ═════════════════════════════════════════════════════════════════ */
.sfy-purchases-topbar { margin: 0 0 16px; }
.sfy-purchases-topbar > .col-12 > .sfy-ctx-tabs {
    margin: 0;
    height: 100%;
}
.sfy-purchases-topbar > .col-12 > .sfy-order-subtabs.sfy-order-filters {
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
}
/* Row 2 status pills row: let them wrap onto a second line inside
 * the col-md-7 slot if all five don't fit, instead of scrolling
 * off-screen sideways. */
.sfy-purchases-topbar .sfy-order-subtabs.sfy-order-filters > .nav {
    flex-wrap: wrap;
    overflow-x: visible;
}
@media (max-width: 767px) {
    /* Mobile: the row already stacks (col-12) so both panels take
     * full width; add a small gap between them. */
    .sfy-purchases-topbar > .col-12 + .col-12 { margin-top: 12px; }
    .sfy-purchases-topbar .sfy-order-subtabs.sfy-order-filters > .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

/* ═════════════════════════════════════════════════════════════════
 * Horizontal status-filter row on the my_orders / my_offers pages
 * ─────────────────────────────────────────────────────────────────
 * Rendered at the top of the page (below the context tab bar) when
 * ?ctx=purchases or ?ctx=my_furniture is set. Replaces the vertical
 * left-sidebar list of status filters with a scrollable pill row
 * so the order table gets the full column width below.
 * ═════════════════════════════════════════════════════════════════ */
.sfy-order-subtabs.sfy-order-filters {
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    border: 0;
}
.sfy-order-subtabs.sfy-order-filters > .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
    margin: 0;
    list-style: none;
}
/* Only scroll horizontally on very narrow mobile — otherwise wrap so
 * every filter is visible without the user having to swipe. */
@media (max-width: 480px) {
    .sfy-order-subtabs.sfy-order-filters > .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
}
.sfy-order-subtabs.sfy-order-filters > .nav::-webkit-scrollbar {
    display: none;
}
.sfy-order-subtabs.sfy-order-filters .nav-item {
    flex-shrink: 0;
    list-style: none;
    /* Kill Modesy's `.profile-tabs .nav .nav-item { width: 100% }`
     * which was forcing each pill to fill the row and stack them
     * into a vertical column instead of a horizontal row. */
    width: auto !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}
.sfy-order-subtabs.sfy-order-filters .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #F7F4EC;
    color: #4a4a4a;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sfy-order-subtabs.sfy-order-filters .nav-link:hover {
    background: #ECE5D2;
    color: #0F5A3A;
    text-decoration: none;
}
.sfy-order-subtabs.sfy-order-filters .nav-item.active .nav-link {
    background: #0F5A3A;
    color: #fff;
    font-weight: 600;
}
.sfy-order-subtabs.sfy-order-filters .nav-item.active .nav-link:hover {
    background: #0A442C;
}

/* ═════════════════════════════════════════════════════════════════
 * M2 — Payment status card + partner payouts panel
 * ═════════════════════════════════════════════════════════════════ */
.sfy-bk-pay {
    background: #FAF6EA;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 18px;
}
.sfy-bk-pay__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.sfy-bk-pay__head .sfy-bk-panel__title { margin: 0; }
.sfy-bk-pay__body {
    color: #5F6368;
    font-size: 14px;
    margin: 0 0 12px;
    line-height: 1.5;
}
.sfy-bk-pay__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 13.5px;
}
.sfy-bk-pay__meta dt {
    color: #8a8a8a;
    font-weight: 500;
}
.sfy-bk-pay__meta dd {
    margin: 0;
    color: #222;
}

/* Invoice link on the payment card — Peter 2026-09-07. */
.sfy-bk-pay__invoice {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #ECE7DA;
}
.sfy-bk-pay__invoice-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #C9A961;
    color: #7a5b1c;
    background: #FDF9EE;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s;
}
.sfy-bk-pay__invoice-btn:hover {
    background: #F5EED4;
    color: #6a4c15;
    text-decoration: none;
}
.sfy-bk-pay__invoice-btn i {
    font-size: 15px;
}

/* Settlement Info — payout method picker.
   Peter 2026-09-07: wrap the PayPal/IBAN/SWIFT pills into a
   clearly-labeled card so it no longer competes with the top
   tab strip. Matches the visual weight of Revenue/Settlements. */
.sfy-payout-method {
    background: #FAF6EC;
    border: 1px solid #ECE7DA;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 18px 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.sfy-payout-method__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6a6a6a;
    font-weight: 600;
    flex: 0 0 auto;
}
.sfy-payout-method__pills {
    margin: 0 !important;
    padding: 0;
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: transparent;
    border: none;
}
.sfy-payout-method__pills .nav-link {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    color: #6a6a6a;
    background: #fff;
    border: 1px solid #E4DDCA;
    line-height: 1.4;
}
.sfy-payout-method__pills .nav-link.active {
    background: #C9A961;
    color: #fff;
    border-color: #C9A961;
}
.sfy-payout-method__pills .nav-link:hover:not(.active) {
    background: #F5EED4;
    color: #6a4c15;
    border-color: #C9A961;
}
@media (max-width: 640px) {
    .sfy-payout-method { flex-direction: column; align-items: stretch; }
    .sfy-payout-method__pills { justify-content: center; }
}

/* Partner dashboard — payouts list. Reuses .sfy-pd__list pattern. */
.sfy-pd__list--payouts .sfy-pd__list-amount {
    font-weight: 700;
    color: #0F5A3A;
    font-size: 15px;
    white-space: nowrap;
    margin-left: 12px;
}
.sfy-pd__list--payouts .sfy-pd__list-amount--muted {
    color: #8a8a8a;
    font-weight: 500;
}
.sfy-pd__recent-payouts {
    margin-top: 6px;
    font-size: 13.5px;
}
.sfy-pd__recent-payouts summary {
    cursor: pointer;
    color: #5F6368;
    padding: 6px 0;
}

/* ═════════════════════════════════════════════════════════════════
 * Recommender v1 — Best Match / Strong Match badges on the offer
 * comparison grid + the "See other offers" collapse.
 * ═════════════════════════════════════════════════════════════════ */
.sfy-srd-offer {
    position: relative;
}
.sfy-srd-offer__match {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    position: absolute;
    top: -10px;
    left: 16px;
    line-height: 1.2;
    z-index: 1;
}
.sfy-srd-offer__match--best {
    background: #0F5A3A;
    color: #fff;
    box-shadow: 0 2px 8px rgba(15, 90, 58, 0.25);
}
.sfy-srd-offer__match--strong {
    background: #F5EFE1;
    color: #0F5A3A;
    border: 1px solid #E4D9B8;
}
.sfy-srd-offer--best {
    border: 2px solid #0F5A3A;
    box-shadow: 0 4px 16px rgba(15, 90, 58, 0.08);
}
.sfy-srd-offer__chip--new {
    background: #EAF3EE;
    color: #0F5A3A;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

/* "See other offers" collapse */
.sfy-srd-offers__more {
    margin: 12px 0 20px;
}
.sfy-srd-offers__more > summary {
    cursor: pointer;
    padding: 10px 16px;
    border: 1px dashed #ECE7DA;
    border-radius: 10px;
    color: #5F6368;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    list-style: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.sfy-srd-offers__more > summary::-webkit-details-marker { display: none; }
.sfy-srd-offers__more-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #EAF3EE;
    color: #0F5A3A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.sfy-srd-offers__more > summary i { transition: transform .2s ease; }
.sfy-srd-offers__more[open] > summary i { transform: rotate(180deg); }
.sfy-srd-offers__more[open] > summary {
    margin-bottom: 12px;
    background: #F7F4EC;
    color: #0F5A3A;
}
.sfy-srd-offers--extra {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Recommender v1.2 — partner-proposed date pill on offer cards */
.sfy-srd-offer__date { display: inline-flex; align-items: center; gap: 6px; }
.sfy-srd-offer__date-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.sfy-srd-offer__date--match .sfy-srd-offer__date-tag {
    background: #E6F1EA;
    color: #0F5A3A;
}
.sfy-srd-offer__date--close .sfy-srd-offer__date-tag {
    background: #FDF7E7;
    color: #C89A3D;
}

/* ═════════════════════════════════════════════════════════════════
 * Buyer Protection — new spec §13 sections
 * ═════════════════════════════════════════════════════════════════ */
.sfy-bp-request,
.sfy-bp-seller-types,
.sfy-bp-dispute {
    padding: 48px 0;
    background: #fff;
}
.sfy-bp-request:nth-of-type(even),
.sfy-bp-seller-types { background: #FAF6EA; }
.sfy-bp-request__lead,
.sfy-bp-dispute__lead {
    text-align: center;
    color: #5F6368;
    font-size: 15px;
    max-width: 700px;
    margin: 0 auto 28px;
}
.sfy-bp-request__list {
    counter-reset: bp-req;
    list-style: none;
    padding: 0;
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}
.sfy-bp-request__list > li {
    padding: 16px 18px 16px 60px;
    background: #FAF6EA;
    border-radius: 12px;
    position: relative;
    line-height: 1.55;
}
.sfy-bp-request__list > li::before {
    counter-increment: bp-req;
    content: counter(bp-req);
    position: absolute;
    left: 16px; top: 16px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #0F5A3A;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.sfy-bp-request__list > li > strong { display: block; margin-bottom: 4px; color: #1a1a1a; }

.sfy-bp-seller-types__card,
.sfy-bp-dispute__card {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 14px;
    padding: 22px;
    height: 100%;
}
.sfy-bp-seller-types__card h3,
.sfy-bp-dispute__card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #0F5A3A;
}
.sfy-bp-dispute__card ol,
.sfy-bp-dispute__card ul {
    padding-left: 20px;
    margin: 0;
    line-height: 1.7;
}

.sfy-bp-help {
    padding: 40px 0;
    background: #F5EFE1;
}
.sfy-bp-help__card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    flex-wrap: wrap;
}
.sfy-bp-help__body h3 { margin: 0 0 6px; }
.sfy-bp-help__body p { margin: 0; color: #5F6368; }
.sfy-bp-help__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ═════════════════════════════════════════════════════════════════
 * Safety & Trust — spec §14 additions (prohibited items, off-
 * platform payments, report a problem, account suspension).
 * ═════════════════════════════════════════════════════════════════ */
.sfy-st-topic--warn {
    background: #FFF8F0;
    border-color: #F4E4CD;
}
.sfy-st-topic--warn .sfy-st-topic__icon {
    background: #FDECEC;
    color: #C84A4A;
}
.sfy-st-topic--warn .sfy-st-topic__num { color: #C84A4A; }

.sfy-st-relationship {
    padding: 40px 0;
    background: #FAF6EA;
}
.sfy-st-relationship__card {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}
.sfy-st-relationship__card h3 { margin: 0 0 10px; color: #0F5A3A; }
.sfy-st-relationship__card p { margin: 0 0 18px; color: #5F6368; }

/* ═════════════════════════════════════════════════════════════════
 * P2 — Dispute status card + report CTA on booking detail
 * ═════════════════════════════════════════════════════════════════ */
.sfy-bk-disp {
    background: #FFF7F5;
    border: 1px solid #F2C7BF;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 18px;
}
.sfy-bk-disp__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.sfy-bk-disp__head .sfy-bk-panel__title { margin: 0; color: #A63A2A; }
.sfy-bk-disp__body {
    color: #5F6368;
    font-size: 14px;
    margin: 0 0 12px;
    line-height: 1.5;
}
.sfy-bk-disp__outcome {
    background: #fff;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
}
.sfy-bk-disp__notes {
    margin: 8px 0 0;
    color: #5F6368;
}

/* Bottom-of-panel report link — deliberately understated so it's
 * a last resort, not a primary action. */
.sfy-bk-disp-cta {
    text-align: center;
    margin: 24px 0 12px;
}
.sfy-bk-disp-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8a8a8a;
    font-size: 13px;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px dashed #ECE7DA;
    background: transparent;
    transition: color 0.15s, border-color 0.15s;
}
.sfy-bk-disp-cta__link:hover {
    color: #C84A4A;
    border-color: #F2C7BF;
    background: #FFF7F5;
    text-decoration: none;
}
.sfy-bk-disp-cta__link i { font-size: 11px; }

/* Dispute form page */
.sfy-bk-dispute {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 14px;
    padding: 28px;
    margin: 20px 0;
}
.sfy-bk-dispute__title {
    margin: 0 0 8px;
    font-size: 22px;
    color: #1a1a1a;
}
.sfy-bk-dispute__lead {
    margin: 0 0 20px;
    color: #5F6368;
    line-height: 1.5;
}
.sfy-bk-dispute__field {
    margin-bottom: 20px;
}
.sfy-bk-dispute__field > label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1a1a;
}
.sfy-bk-dispute__field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ECE7DA;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.sfy-bk-dispute__reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sfy-bk-dispute__reason {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #FAF6EA;
    border-radius: 8px;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}
.sfy-bk-dispute__reason input[type="radio"] { margin: 0; }
.sfy-bk-dispute__reason input:checked ~ span { font-weight: 600; color: #0F5A3A; }
.sfy-bk-dispute__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sfy-bk-dispute__cancel {
    color: #8a8a8a;
    font-size: 14px;
    text-decoration: none;
}
.sfy-bk-dispute__cancel:hover { color: #0F5A3A; text-decoration: underline; }

/* Hourly settlement — partner CTA, form, and summary card */
.sfy-bk-stl-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #FFF7E0;
    border: 1px solid #F1D982;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 16px 0;
}
.sfy-bk-stl-cta__body { flex: 1; min-width: 220px; }
.sfy-bk-stl-cta__body strong {
    display: block;
    font-size: 15px;
    color: #7A4E00;
    margin-bottom: 4px;
}
.sfy-bk-stl-cta__body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5F6368;
}

.sfy-bk-stl { max-width: 780px; margin: 0 auto; }
.sfy-bk-stl__intro {
    color: #5F6368;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}
.sfy-bk-stl__summary .sfy-bk-stl__meta,
.sfy-bk-stl__preview-meta,
.sfy-bk-stl-card__meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    margin: 0;
}
.sfy-bk-stl__meta dt,
.sfy-bk-stl__preview-meta dt,
.sfy-bk-stl-card__meta dt {
    color: #5F6368;
    font-weight: 400;
}
.sfy-bk-stl__meta dd,
.sfy-bk-stl__preview-meta dd,
.sfy-bk-stl-card__meta dd {
    text-align: right;
    color: #1a1a1a;
    margin: 0;
}
.sfy-bk-stl-card__final-dt,
.sfy-bk-stl-card__final-dd {
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px dashed #ECE7DA;
    font-size: 16px;
    color: #0F5A3A;
}
.sfy-bk-stl__preview {
    background: #F5FBF3;
    border: 1px solid #C8E5C1;
}
.sfy-bk-stl__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    margin: 20px 0;
}
.sfy-bk-stl-card__notes {
    margin: 14px 0 0;
    color: #5F6368;
    font-size: 13px;
    line-height: 1.5;
}
.sfy-bk-stl-card__bank {
    margin-top: 14px;
    padding: 12px 14px;
    background: #FFF7E0;
    border: 1px solid #F1D982;
    border-radius: 8px;
    color: #7A4E00;
    font-size: 13px;
    line-height: 1.5;
}
.sfy-bk-stl-card__paid {
    margin-top: 12px;
    color: #0F5A3A;
    font-size: 13px;
}

/* Change orders — customer approval, partner propose, history */
.sfy-bk-co-approve {
    background: #EAF4FF;
    border: 1px solid #BCD4EF;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 16px 0;
}
.sfy-bk-co-approve__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}
.sfy-bk-co-approve__head strong {
    color: #14477A;
    font-size: 15px;
}
.sfy-bk-co-approve__amount {
    font-size: 20px;
    font-weight: 700;
    color: #14477A;
}
.sfy-bk-co-approve__desc {
    margin: 0 0 4px;
    font-size: 15px;
    color: #1a1a1a;
    font-weight: 500;
}
.sfy-bk-co-approve__lead {
    margin: 0 0 14px;
    font-size: 13px;
    color: #5F6368;
    line-height: 1.5;
}
.sfy-bk-co-approve__form textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #BCD4EF;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
}
.sfy-bk-co-approve__actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.sfy-bk-co-propose {
    background: #FAFAFA;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 12px 18px;
    margin: 16px 0;
}
.sfy-bk-co-propose__summary {
    cursor: pointer;
    font-weight: 600;
    color: #0F5A3A;
    padding: 8px 0;
    outline: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sfy-bk-co-propose__summary::-webkit-details-marker { display: none; }
.sfy-bk-co-propose__summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #0F5A3A;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: transform 120ms ease;
}
.sfy-bk-co-propose[open] .sfy-bk-co-propose__summary::before { content: '−'; }
.sfy-bk-co-propose__body {
    padding-top: 12px;
    border-top: 1px dashed #ECE7DA;
    margin-top: 10px;
}
.sfy-bk-co-propose__intro {
    color: #5F6368;
    font-size: 13px;
    margin: 0 0 12px;
    line-height: 1.5;
}
.sfy-bk-co-propose__cta-wrap { display: flex; flex-direction: column; }
.sfy-bk-co-propose__submit { align-self: stretch; }

.sfy-bk-co-history { margin: 20px 0; }
.sfy-bk-co-history__total {
    font-size: 13px;
    color: #0F5A3A;
}
.sfy-bk-co-history__list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.sfy-bk-co-history__item {
    padding: 12px 0;
    border-bottom: 1px solid #F0EBDF;
}
.sfy-bk-co-history__item:last-child { border-bottom: 0; }
.sfy-bk-co-history__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}
.sfy-bk-co-history__desc {
    font-weight: 500;
    color: #1a1a1a;
}
.sfy-bk-co-history__amount {
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
}
.sfy-bk-co-history__meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: #8a8a8a;
    font-size: 12px;
}
.sfy-bk-co-history__notes {
    flex-basis: 100%;
    color: #5F6368;
    font-style: italic;
    font-size: 13px;
}
.sfy-bk-co-history__item--rejected .sfy-bk-co-history__desc,
.sfy-bk-co-history__item--rejected .sfy-bk-co-history__amount {
    text-decoration: line-through;
    color: #8a8a8a;
}

/* Booking chat — customer ⇄ partner thread on booking detail */
.sfy-bmsg { margin: 20px 0; }
.sfy-bmsg__lead {
    color: #5F6368;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
}
.sfy-bmsg__thread {
    max-height: 480px;
    overflow-y: auto;
    padding: 6px 4px 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sfy-bmsg__empty {
    color: #8A8A8A;
    font-style: italic;
    padding: 20px;
    text-align: center;
}
.sfy-bmsg__bubble {
    max-width: 72%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
}
.sfy-bmsg__bubble--them {
    background: #F5F1E5;
    border-color: #ECE7DA;
    align-self: flex-start;
    border-top-left-radius: 4px;
}
.sfy-bmsg__bubble--me {
    background: #E9F0EA;
    border-color: #C7DDCE;
    align-self: flex-end;
    border-top-right-radius: 4px;
}
.sfy-bmsg__bubble--admin {
    background: #FFF3D9;
    border-color: #F1D982;
    align-self: center;
    max-width: 82%;
}
.sfy-bmsg__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    font-size: 12px;
    margin-bottom: 4px;
}
.sfy-bmsg__meta strong { color: #1a1a1a; font-weight: 700; }
.sfy-bmsg__time { color: #8A8A8A; font-size: 11px; }
.sfy-bmsg__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #1a1a1a;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.sfy-bmsg__form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    border-top: 1px dashed #ECE7DA;
    padding-top: 14px;
}
.sfy-bmsg__input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ECE7DA;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 44px;
}
.sfy-bmsg__input:focus {
    outline: none;
    border-color: #0F5A3A;
    box-shadow: 0 0 0 3px rgba(15, 90, 58, .08);
}
.sfy-bmsg__send {
    padding: 12px 22px;
    font-weight: 600;
    white-space: nowrap;
}

/* Messages inbox on partner dashboard */
.sfy-pd-msg__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sfy-pd-msg__title-link { color: inherit; text-decoration: none; }
.sfy-pd-msg__title-link:hover { color: #0F5A3A; text-decoration: none; }
.sfy-pd-msg__seeall {
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    color: #0F5A3A;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sfy-pd-msg__seeall:hover { color: #0C4A30; text-decoration: none; }

/* Full messages inbox at /partner/messages */
.sfy-pmsg { max-width: 860px; margin: 0 auto; padding: 20px 0; }
.sfy-pmsg__head { margin-bottom: 24px; }
.sfy-pmsg__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5F6368;
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 8px;
}
.sfy-pmsg__back:hover { color: #0F5A3A; text-decoration: none; }
.sfy-pmsg__title {
    font-size: 28px;
    color: #1a1a1a;
    font-weight: 700;
    margin: 4px 0 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sfy-pmsg__lead { color: #5F6368; font-size: 14px; margin: 0; }
.sfy-pmsg__empty {
    background: #FAF7EE;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    color: #5F6368;
    font-size: 14px;
}
.sfy-pmsg__list .sfy-pd-msg__body { padding-right: 60px; }

/* Partner filter tabs (bookings) */
.sfy-partner-tabs {
    display: inline-flex;
    gap: 4px;
    background: #F5F1E5;
    border-radius: 10px;
    padding: 4px;
    margin-top: 14px;
}
.sfy-partner-tabs__tab {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #5F6368;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.sfy-partner-tabs__tab:hover { color: #1a1a1a; text-decoration: none; background: rgba(0,0,0,.04); }
.sfy-partner-tabs__tab.is-active {
    background: #fff;
    color: #0F5A3A;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.sfy-partner-tabs__count {
    background: #0F5A3A !important;
    color: #fff !important;
    padding: 2px 10px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    vertical-align: middle;
    margin-left: 8px;
}

/* Partner profile page */
.sfy-partner-profile { }
.sfy-pf__card {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 16px;
}
.sfy-pf__card--stats { background: #F5FBF3; border-color: #C8E5C1; }
.sfy-pf__section-title {
    font-size: 13px;
    font-weight: 600;
    color: #8A8A8A;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 14px;
}
.sfy-pf__dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px 24px;
    margin: 0;
    font-size: 14px;
}
.sfy-pf__dl dt { color: #5F6368; font-weight: 500; }
.sfy-pf__dl dd { margin: 0; color: #1a1a1a; }
.sfy-pf__dl dd .sfy-pd__pill { margin-right: 6px; margin-bottom: 4px; }
.sfy-pf__note {
    background: #FFF8E5;
    border: 1px solid #F1D982;
    border-radius: 10px;
    padding: 16px 20px;
    color: #7A4E00;
    font-size: 13px;
    margin-top: 8px;
}
.sfy-pf__note strong { display: block; margin-bottom: 4px; color: #5A3800; }
.sfy-pf__note p { margin: 0; line-height: 1.5; color: #5F6368; }

/* =====================================================================
   Moving request — thanks / confirmation page
   ===================================================================== */
.sfy-mrq-thanks {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 0;
    text-align: center;
}
.sfy-mrq-thanks__badge {
    width: 84px; height: 84px; margin: 0 auto 24px;
    background: #E9F0EA; color: #0F5A3A;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.sfy-mrq-thanks__title {
    font-size: 30px; font-weight: 700; color: #1a1a1a;
    margin: 0 0 12px; line-height: 1.15;
}
.sfy-mrq-thanks__lead {
    font-size: 16px; line-height: 1.55; color: #5F6368;
    max-width: 540px; margin: 0 auto 32px;
}

.sfy-mrq-thanks__timeline {
    list-style: none !important; padding: 0; margin: 0 0 32px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    text-align: left;
}
.sfy-mrq-thanks__timeline-item {
    background: #fff; border: 1px solid #ECE7DA; border-radius: 12px;
    padding: 16px; display: flex; gap: 12px; align-items: flex-start;
    list-style: none !important;
}
/* Kill iOS Safari's default ol markers — the parent's list-style:none
   isn't enough on some mobile browsers when the li is a flex container. */
.sfy-mrq-thanks__timeline-item::marker { content: '' !important; }
.sfy-mrq-thanks__timeline-item.is-done { background: #E9F0EA; border-color: #C2E1CB; }
.sfy-mrq-thanks__step {
    width: 32px; height: 32px; border-radius: 50%;
    background: #F0EBDE; color: #5F6368;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.sfy-mrq-thanks__timeline-item.is-done .sfy-mrq-thanks__step {
    background: #0F5A3A; color: #fff;
}
.sfy-mrq-thanks__timeline strong {
    display: block; font-size: 14px; color: #1a1a1a; margin-bottom: 2px;
}
.sfy-mrq-thanks__timeline span {
    display: block; font-size: 12px; color: #5F6368; line-height: 1.4;
}

.sfy-mrq-thanks__recap {
    background: #FAF7EE; border: 1px solid #ECE7DA; border-radius: 12px;
    padding: 24px 28px; margin: 0 0 24px; text-align: left;
}
.sfy-mrq-thanks__recap h2 {
    font-size: 15px; font-weight: 700; color: #1a1a1a;
    margin: 0 0 14px; text-transform: uppercase; letter-spacing: .04em;
    color: #5F6368;
}
.sfy-mrq-thanks__recap dl {
    display: grid; grid-template-columns: 140px 1fr; gap: 10px 20px;
    margin: 0; font-size: 14px;
}
.sfy-mrq-thanks__recap dt { color: #5F6368; font-weight: 500; }
.sfy-mrq-thanks__recap dd { margin: 0; color: #1a1a1a; }

.sfy-mrq-thanks__inbox {
    display: flex; align-items: flex-start; gap: 14px;
    background: #EAF4FF; border: 1px solid #BCD4EF; border-radius: 12px;
    padding: 16px 20px; margin: 0 0 32px; text-align: left;
}
.sfy-mrq-thanks__inbox > svg { color: #14477A; flex-shrink: 0; margin-top: 2px; }
.sfy-mrq-thanks__inbox strong {
    display: block; color: #14477A; font-size: 14px; margin-bottom: 4px;
}
.sfy-mrq-thanks__inbox p { margin: 0; color: #5F6368; font-size: 13px; line-height: 1.5; }

.sfy-mrq-thanks__ctas {
    display: flex; justify-content: center; gap: 12px; margin-bottom: 24px;
}
.sfy-mrq-thanks__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px; font-size: 15px; font-weight: 600;
    border-radius: 10px; text-decoration: none;
}
.sfy-mrq-thanks__cta:hover { text-decoration: none; }

.sfy-mrq-thanks__choice {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-bottom: 24px; text-align: left;
}
.sfy-mrq-thanks__choice-card {
    background: #fff; border: 1px solid #ECE7DA; border-radius: 12px;
    padding: 22px 24px;
    display: flex; flex-direction: column;
}
.sfy-mrq-thanks__choice-card h3 {
    margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #1a1a1a;
}
.sfy-mrq-thanks__choice-card p {
    margin: 0 0 20px; color: #5F6368; font-size: 13px; line-height: 1.5;
    flex: 1;
}
.sfy-mrq-thanks__choice-card .sfy-mrq-thanks__cta {
    align-self: flex-start;
}

.sfy-mrq-thanks__link {
    background: #FFF7E0; border: 1px solid #F1D982; border-radius: 10px;
    padding: 14px 16px; text-align: left;
}
.sfy-mrq-thanks__link label {
    display: block; font-size: 12px; font-weight: 600; color: #7A4E00;
    margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em;
}
.sfy-mrq-thanks__link input {
    width: 100%; padding: 10px 12px; border: 1px solid #E5DBC1; border-radius: 8px;
    background: #fff; font-family: inherit; font-size: 12px; color: #1a1a1a;
}
.sfy-mrq-thanks__link p {
    margin: 8px 0 0; font-size: 12px; color: #5F6368;
}

/* Guest banner shown at the top of /service-requests/track/:token */
.sfy-mrq-guest-banner {
    display: flex; align-items: center; gap: 20px;
    background: #FFF3D9; border: 1px solid #F1D982; border-radius: 12px;
    padding: 14px 20px; margin: 20px 0;
}
.sfy-mrq-guest-banner__body { flex: 1; }
.sfy-mrq-guest-banner__body strong {
    display: block; color: #7A4E00; font-size: 14px; margin-bottom: 2px;
}
.sfy-mrq-guest-banner__body span {
    color: #5F6368; font-size: 13px;
}
.sfy-mrq-guest-banner__cta {
    padding: 10px 18px; font-size: 13px; font-weight: 600; white-space: nowrap;
}

@media (max-width: 767px) {
    .sfy-mrq-thanks__timeline { grid-template-columns: 1fr; }
    .sfy-mrq-thanks__choice   { grid-template-columns: 1fr; }
    .sfy-mrq-thanks__recap dl { grid-template-columns: 1fr; gap: 4px; }
    .sfy-mrq-thanks__recap dt { margin-top: 10px; }
    .sfy-mrq-guest-banner { flex-direction: column; align-items: stretch; }
}
.sfy-pd__pill--muted { background: #ECE7DA !important; color: #5F6368 !important; }
.sfy-pd__pill--verified { background: #E9F0EA !important; color: #0F5A3A !important; }
.sfy-pd__pill--pending  { background: #FFF3D9 !important; color: #7A4E00 !important; }
.sfy-pd__pill--suspended{ background: #FEE9E5 !important; color: #B0350B !important; }

@media (max-width: 767px) {
    .sfy-pf__dl { grid-template-columns: 1fr; gap: 4px 0; }
    .sfy-pf__dl dt { margin-top: 10px; }
}
.sfy-pd-msg__total-badge {
    background: #B0350B;
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.sfy-pd-msg__list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sfy-pd-msg__item {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 10px;
    transition: box-shadow 160ms ease, border-color 160ms ease;
}
.sfy-pd-msg__item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .05); border-color: #DDD3B8; }
.sfy-pd-msg__item.is-unread {
    background: #FFF8F3;
    border-color: #F1CFB3;
}
.sfy-pd-msg__link {
    display: block;
    position: relative;
    padding: 14px 20px;
    text-decoration: none;
    color: inherit;
}
.sfy-pd-msg__link:hover { text-decoration: none; color: inherit; }
.sfy-pd-msg__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}
.sfy-pd-msg__head strong {
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 700;
}
.sfy-pd-msg__head small { color: #8A8A8A; font-size: 11px; }
.sfy-pd-msg__body {
    color: #5F6368;
    font-size: 13px;
    line-height: 1.4;
    padding-right: 50px;
}
.sfy-pd-msg__author { color: #1a1a1a; font-weight: 600; margin-right: 6px; }
.sfy-pd-msg__preview { color: #5F6368; }
.sfy-pd-msg__unread-badge {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: #B0350B;
    color: #fff;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* Unread-messages badge on partner-dashboard booking card */
.sfy-pd__card-msgbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FDECEC;
    color: #B0350B;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-left: auto;
}
.sfy-pd__card-msgbadge:hover { background: #F9D9D9; color: #7C230A; text-decoration: none; }

@media (max-width: 575px) {
    .sfy-bmsg__bubble { max-width: 92%; }
    .sfy-bmsg__form { flex-direction: column; align-items: stretch; }
    .sfy-bmsg__send { align-self: flex-end; }
}

/* =====================================================================
   Moving landing page v2 — full redesign per client mockup
   ===================================================================== */

/* Flash banner shown after a moving-request submission — success or error */
.sfy-mov-flash {
    padding: 14px 0;
    border-bottom: 1px solid transparent;
}
.sfy-mov-flash--success { background: #E8F4EC; border-bottom-color: #C2E1CB; }
.sfy-mov-flash--error   { background: #FEE9E5; border-bottom-color: #F6C5BE; }
.sfy-mov-flash .container {
    display: flex;
    align-items: center;
    gap: 16px;
}
.sfy-mov-flash__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sfy-mov-flash--success .sfy-mov-flash__icon { color: #0F5A3A; }
.sfy-mov-flash--error   .sfy-mov-flash__icon { color: #B0350B; }
.sfy-mov-flash__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sfy-mov-flash__body strong { font-size: 15px; color: #1a1a1a; font-weight: 700; }
.sfy-mov-flash__body span   { font-size: 13px; color: #5F6368; line-height: 1.45; }
.sfy-mov-flash__close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #8a8a8a;
    cursor: pointer;
    padding: 4px 8px;
}
.sfy-mov-flash__close:hover { color: #1a1a1a; }


.sfy-mov-section__title {
    text-align: center;
    font-size: 28px;
    color: #1a1a1a;
    margin: 0 0 32px;
    font-weight: 700;
}

/* Hero */
.sfy-mov-hero {
    background: linear-gradient(180deg, #FAF7EE 0%, #FFFDF7 100%);
    padding: 64px 0 100px;
    position: relative;
    overflow: hidden;
}
.sfy-mov-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 40px;
    align-items: start;
    min-height: 560px;
    padding-top: 20px;
}
.sfy-mov-hero__copy { padding-right: 10px; }
.sfy-mov-hero__pill {
    display: inline-block;
    background: #E9F0EA;
    color: #0F5A3A;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 28px;
}
.sfy-mov-hero__headline {
    font-size: 68px;
    line-height: 1.05;
    color: #0A0A0A;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}
.sfy-mov-hero__lead {
    color: #5F6368;
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 36px;
    max-width: 520px;
}
.sfy-mov-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.sfy-mov-hero__cta-primary,
.sfy-mov-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.sfy-mov-hero__cta-primary { background: #0F5A3A; color: #fff; border: none; }
.sfy-mov-hero__cta-primary:hover { background: #0C4A30; color: #fff; text-decoration: none; }
.sfy-mov-hero__cta-arrow { margin-left: 4px; }
.sfy-mov-hero__cta-secondary {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #E5E1D3;
}
.sfy-mov-hero__cta-secondary:hover { background: #FAF7EE; text-decoration: none; color: #1a1a1a; }

/* Hero image */
.sfy-mov-hero__art { position: relative; }
.sfy-mov-hero__art-wrap {
    width: 100%;
    /* 2026-09-06 Peter: match the How It Works hero treatment
     * everywhere — natural aspect flow, no forced ratio, no
     * hard-crop background, no border radius. Image just
     * sits in its column at its own aspect. */
    text-align: right;
}
.sfy-mov-hero__art-wrap.is-empty {
    /* Placeholder still needs a defined size when no image
     * has been dropped in yet — keep the aspect trick only
     * for the empty state. */
    aspect-ratio: 5 / 4;
    max-height: 480px;
    border-radius: 20px;
    overflow: hidden;
    background: #EFE7D3;
}
.sfy-mov-hero__art-wrap.is-empty {
    background:
        linear-gradient(135deg, #EFE7D3 0%, #E5DBC1 100%);
    position: relative;
}
.sfy-mov-hero__art-wrap.is-empty::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23967A3E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 30h56v42H8z'/><path d='M64 45h20l16 15v12H64'/><circle cx='34' cy='84' r='10'/><circle cx='84' cy='84' r='10'/></svg>")
        center/110px no-repeat;
    opacity: .45;
}
.sfy-mov-hero__art-wrap img {
    /* 2026-09-06 Peter: swapped fixed-height + cover-crop +
     * transform-scale for the same natural-flow treatment
     * How It Works uses. Image renders at its own aspect,
     * bound only by column width, right-aligned so it
     * anchors the copy on the left. */
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
}

/* Floating trust card — sits at the bottom of the hero, overlapping
   the image on the right. Card starts flush with the copy column and
   extends into the image area. margin-top of -70px pulls it up into
   the image's bottom; padding-bottom on the copy column keeps it
   away from the CTAs above. */
.sfy-mov-hero__trust {
    list-style: none;
    padding: 22px 28px;
    margin: -70px 0 0;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px -20px rgba(15, 90, 58, .18),
                0 4px 16px rgba(0, 0, 0, .05);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 66%;
    position: relative;
    z-index: 3;
}
/* Push copy content up so the trust card lands below the CTAs, not on them */
.sfy-mov-hero__copy { padding-bottom: 140px; padding-right: 10px; }
.sfy-mov-hero__trust li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    line-height: 1.35;
}
.sfy-mov-hero__trust .sfy-mov-i {
    color: #0F5A3A;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.sfy-mov-hero__trust strong {
    display: block;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 700;
}
.sfy-mov-hero__trust span {
    display: block;
    color: #8A8A8A;
    font-size: 12px;
    font-weight: 400;
    margin-top: 2px;
}

/* Inline SVG icon sizing */
.sfy-mov-i {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.sfy-mov-svc-card__badge .sfy-mov-i { width: 26px; height: 26px; }
.sfy-mov-hero__cta-primary .sfy-mov-i,
.sfy-mov-hero__cta-secondary .sfy-mov-i { width: 18px; height: 18px; }
.sfy-mov-hero__trust .sfy-mov-i,
.sfy-mov-trust__badges .sfy-mov-i,
.sfy-mov-why__list .sfy-mov-i { width: 20px; height: 20px; }
.sfy-mov-faq__item summary .sfy-mov-i { width: 18px; height: 18px; }
.sfy-mov-quick__cta .sfy-mov-i,
.sfy-mov-cta__cta .sfy-mov-i { width: 18px; height: 18px; }
.sfy-mov-quick__promise .sfy-mov-i { width: 16px; height: 16px; }
.sfy-mov-svc-card__arrow .sfy-mov-i { width: 20px; height: 20px; }

/* Services grid */
.sfy-mov-services { padding: 60px 0; background: #fff; }
.sfy-mov-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.sfy-mov-svc-card {
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 16px;
    padding: 24px 20px 28px;
    position: relative;
    text-decoration: none;
    color: #1a1a1a;
    transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
    display: flex;
    flex-direction: column;
}
.sfy-mov-svc-card:hover {
    box-shadow: 0 12px 30px rgba(15, 90, 58, .1);
    transform: translateY(-2px);
    border-color: #C7D8CE;
    text-decoration: none;
    color: #1a1a1a;
}
.sfy-mov-svc-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #E9EFEA;
    color: #0F5A3A;
    font-size: 22px;
    margin-bottom: 16px;
}
.sfy-mov-svc-card--delivery .sfy-mov-svc-card__badge { background: #E4EEF7; color: #14477A; }
.sfy-mov-svc-card--cleaning .sfy-mov-svc-card__badge { background: #FBEEE1; color: #7A4E00; }
.sfy-mov-svc-card--removal  .sfy-mov-svc-card__badge { background: #EBF3E4; color: #446F1C; }
.sfy-mov-svc-card h3 {
    font-size: 17px;
    margin: 0 0 6px;
    font-weight: 600;
}
.sfy-mov-svc-card p {
    margin: 0;
    font-size: 13px;
    color: #5F6368;
    line-height: 1.45;
    flex: 1;
}
.sfy-mov-svc-card__arrow {
    margin-top: 20px;
    color: #0F5A3A;
    font-size: 18px;
}

/* Quick-start form */
.sfy-mov-quick { padding: 20px 0 60px; }
.sfy-mov-quick__box {
    background: #F4EEDE;
    border-radius: 20px;
    padding: 32px 32px 28px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: stretch;
}
.sfy-mov-quick__intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}
.sfy-mov-quick__intro-copy h3 {
    font-size: 22px;
    margin: 0;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.2;
}
.sfy-mov-quick__intro-copy p {
    margin: 12px 0 0;
    font-size: 13px;
    color: #5F6368;
    line-height: 1.5;
    max-width: 240px;
}
.sfy-mov-quick__illust {
    align-self: flex-start;
    width: 220px;
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    background: transparent;
    border-radius: 0;
    object-fit: contain;
}
.sfy-mov-quick__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}
.sfy-mov-quick__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sfy-mov-quick__grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}
.sfy-mov-quick__grid .form-control {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #E5DDC6;
    font-size: 14px;
    background: #fff;
    color: #5F6368;
    height: auto;
}
.sfy-mov-quick__grid .form-control:focus {
    border-color: #0F5A3A;
    box-shadow: 0 0 0 3px rgba(15, 90, 58, .08);
    outline: none;
}
.sfy-mov-quick__foot {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
}
.sfy-mov-quick__cta {
    background: #0F5A3A !important;
    color: #fff !important;
    padding: 18px 32px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    width: 100%;
}
.sfy-mov-quick__cta:hover { background: #0C4A30 !important; }
.sfy-mov-quick__promise {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #5F6368;
    white-space: nowrap;
}
.sfy-mov-quick__promise .sfy-mov-i { color: #0F5A3A; }

/* Trust bar */
.sfy-mov-trust { padding: 8px 0 40px; }
.sfy-mov-trust__box {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
    align-items: center;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 16px;
    padding: 24px 28px;
}
.sfy-mov-trust__rating h4 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}
.sfy-mov-trust__stars {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sfy-mov-trust__stars > span {
    color: #E4A73B;
    font-size: 18px;
    letter-spacing: 2px;
}
.sfy-mov-trust__stars strong { font-size: 16px; color: #1a1a1a; }
.sfy-mov-trust__stars small { font-size: 13px; color: #8a8a8a; }
.sfy-mov-trust__badges {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sfy-mov-trust__badges li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.35;
}
.sfy-mov-trust__badges i { color: #0F5A3A; font-size: 18px; }
.sfy-mov-trust__badges strong { display: block; color: #1a1a1a; font-size: 12px; font-weight: 600; }
.sfy-mov-trust__badges span { display: block; color: #8a8a8a; font-size: 11px; }

/* Steps */
.sfy-mov-steps { padding: 40px 0 60px; }
.sfy-mov-steps__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
    counter-reset: mov-step;
}
.sfy-mov-step {
    text-align: left;
    padding: 0 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.sfy-mov-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0F5A3A;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.sfy-mov-step h3 {
    font-size: 15px;
    color: #1a1a1a;
    margin: 4px 0 0;
    font-weight: 700;
}
.sfy-mov-step p {
    font-size: 13px;
    color: #5F6368;
    line-height: 1.5;
    margin: 0 0 8px;
}
.sfy-mov-step__illust {
    width: 68px;
    height: 68px;
    color: #0F5A3A;
    margin-top: 6px;
}
/* Arrow between steps */
.sfy-mov-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 8px;
    right: -24px;
    width: 18px;
    height: 18px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A9A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>")
        center/contain no-repeat;
}

/* Why */
.sfy-mov-why { padding: 0 0 60px; }
.sfy-mov-why__box {
    background: #F4EFDE;
    border-radius: 16px;
    padding: 32px 36px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: center;
}
.sfy-mov-why__head {
    margin: 0;
    font-size: 20px;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.25;
}
.sfy-mov-why__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.sfy-mov-why__list li {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 22px;
    border-left: 1px solid #E4D9BA;
    min-height: 48px;
}
.sfy-mov-why__list li:first-child { border-left: none; padding-left: 0; }
.sfy-mov-why__list .sfy-mov-i {
    color: #0F5A3A;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.sfy-mov-why__list strong { display: block; color: #1a1a1a; font-size: 14px; font-weight: 700; }
.sfy-mov-why__list span { display: block; color: #5F6368; font-size: 12px; margin-top: 2px; }

/* FAQ */
.sfy-mov-faq { padding: 20px 0 60px; }
.sfy-mov-faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}
.sfy-mov-faq__item {
    background: #fff;
    border: 1px solid #EEE9DC;
    border-radius: 12px;
    padding: 18px 22px;
    transition: box-shadow 160ms ease, border-color 160ms ease;
}
.sfy-mov-faq__item[open] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
    border-color: #DDD3B8;
}
.sfy-mov-faq__item summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    list-style: none;
    outline: none;
}
.sfy-mov-faq__item summary::-webkit-details-marker { display: none; }
.sfy-mov-faq__item summary .sfy-mov-i {
    color: #0F5A3A;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.sfy-mov-faq__chev {
    margin-left: auto;
    width: 20px;
    height: 20px;
    color: #8A8A8A;
    transition: transform 200ms ease, color 200ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sfy-mov-faq__item[open] .sfy-mov-faq__chev { transform: rotate(180deg); color: #0F5A3A; }
.sfy-mov-faq__item p {
    margin: 14px 0 4px;
    color: #5F6368;
    font-size: 13px;
    line-height: 1.55;
}

/* Bottom CTA banner */
.sfy-mov-cta { padding: 0 0 60px; }
.sfy-mov-cta__box {
    background: #0F5A3A;
    border-radius: 20px;
    padding: 28px 40px;
    display: grid;
    /* 2026-09-12 Peter: the illustration hides itself (onerror) when the
       file is missing, and with implicit placement the copy and the button
       each slid one column left — the heading was squeezed into 220px and
       the button stretched across the box, reading as an overlap. Pin each
       child to its own column and let the first one collapse to 0 when the
       image isn't there. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    overflow: hidden;
}
/* Desktop only — the ≤991px rule below collapses the box to a single
   column. Keeping these placements active in the 768–991px range creates
   implicit second/third tracks, squeezing long translations (notably the
   Finnish heading) and stretching the CTA across the banner. */
@media (min-width: 992px) {
    .sfy-mov-cta__illust { grid-column: 1; }
    .sfy-mov-cta__copy   { grid-column: 2; }
    .sfy-mov-cta__cta    { grid-column: 3; justify-self: end; }
}
.sfy-mov-cta__illust {
    width: 100%;
    max-width: 220px;
    height: auto;
    background: transparent;
    object-fit: contain;
    display: block;
}
.sfy-mov-cta__copy h3 {
    color: #fff;
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    max-width: 380px;
}
.sfy-mov-cta__copy p {
    color: rgba(255, 255, 255, .82);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    max-width: 380px;
}
.sfy-mov-cta__cta {
    background: #fff !important;
    color: #0F5A3A !important;
    padding: 16px 30px;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    border-radius: 10px;
    text-decoration: none;
}
.sfy-mov-cta__cta:hover { background: #FAF7EE !important; color: #0F5A3A !important; text-decoration: none; }

/* ── Responsive stacking ── */
@media (max-width: 1199px) {
    .sfy-mov-hero__headline { font-size: 56px; }
    .sfy-mov-hero__trust { max-width: 78%; }
}
@media (max-width: 991px) {
    .sfy-mov-hero { padding-bottom: 60px; }
    .sfy-mov-hero__grid { grid-template-columns: 1fr; min-height: auto; gap: 30px; }
    .sfy-mov-hero__headline { font-size: 44px; }
    .sfy-mov-hero__copy { padding-right: 0; order: 1; }
    .sfy-mov-hero__art { order: 2; }
    .sfy-mov-hero__trust {
        margin: 24px 0 0;
        max-width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }
    .sfy-mov-svc-grid { grid-template-columns: repeat(2, 1fr); }
    .sfy-mov-quick__box { grid-template-columns: 1fr; }
    .sfy-mov-quick__grid { grid-template-columns: repeat(2, 1fr); }
    .sfy-mov-trust__box { grid-template-columns: 1fr; }
    .sfy-mov-trust__badges { grid-template-columns: repeat(2, 1fr); }
    .sfy-mov-steps__list { grid-template-columns: repeat(2, 1fr); }
    .sfy-mov-steps__list::before { display: none; }
    .sfy-mov-why__box { grid-template-columns: 1fr; }
    .sfy-mov-why__list { grid-template-columns: repeat(2, 1fr); }
    .sfy-mov-faq__grid { grid-template-columns: 1fr; }
    .sfy-mov-cta__box { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .sfy-mov-cta__illust { max-width: 110px; }
}
@media (max-width: 575px) {
    .sfy-mov-hero { padding: 40px 0 44px; }
    .sfy-mov-hero__headline { font-size: 34px; }
    .sfy-mov-hero__lead { font-size: 15px; }
    .sfy-mov-hero__trust { grid-template-columns: 1fr; padding: 18px; }
    .sfy-mov-section__title { font-size: 22px; }
    /* 2026-09-05 Peter: keep services 2-per-row on phone so all
     * 4 tiles fit in a single viewport (was 1-column, forcing
     * scroll to see all of them). Tighter card padding + smaller
     * badge so each tile still reads at 375px screen widths. */
    .sfy-mov-svc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .sfy-mov-svc-card { padding: 16px 14px 18px; border-radius: 14px; }
    .sfy-mov-svc-card__badge { width: 40px; height: 40px; margin-bottom: 12px; font-size: 18px; }
    .sfy-mov-svc-card h3 { font-size: 14px; }
    .sfy-mov-svc-card p { font-size: 12.5px; line-height: 1.4; }
    .sfy-mov-quick__grid { grid-template-columns: 1fr; }
    .sfy-mov-trust__badges { grid-template-columns: 1fr 1fr; }
    .sfy-mov-steps__list { grid-template-columns: 1fr; }
    .sfy-mov-why__list { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────
   /moving mobile fixes (Finnish long-word overflow + tight box)
   Screenshot showed the quick-start heading "Saa muuttotarjouksia
   minuuteissa" cut off past the right edge, plus the beige box
   padding leaving too little room for the date input on ~375-475px
   phones. Fixes: word-wrap all headings, shrink box padding, and
   force every child (inputs incl. native date) to respect the box.
   ────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
    /* Prevent any single-page section from causing horizontal scroll —
       the hero has overflow:hidden already but other sections don't. */
    .sfy-mov-hero,
    .sfy-mov-services,
    .sfy-mov-quick,
    .sfy-mov-trust,
    .sfy-mov-steps,
    .sfy-mov-why,
    .sfy-mov-cta,
    .sfy-mov-faq { overflow-x: clip; }

    /* Long Finnish/Swedish compound words (muuttotarjouksia,
       muuttopäivä, huonekalujen…) must not push the container wider
       than the viewport. 2026-09-11: wrap at word boundaries only —
       hyphens:auto split words mid-syllable on iOS ("minuut-/teissa",
       "si-/nut"). overflow-wrap still breaks a word that can't fit. */
    .sfy-mov-hero__headline,
    .sfy-mov-hero__lead,
    .sfy-mov-quick__intro-copy h3,
    .sfy-mov-quick__intro-copy p,
    .sfy-mov-section__title,
    .sfy-mov-svc-card h3,
    .sfy-mov-svc-card p,
    .sfy-mov-quick__grid label span {
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: manual;
        hyphens: manual;
    }

    /* Quick-start card was 32px side padding + 40px gap grid — too
       fat for a 375-475px viewport. Tighten so inputs breathe. */
    .sfy-mov-quick__box {
        padding: 22px 18px 20px;
        gap: 20px;
        /* CRITICAL: grid items default to min-width: auto which
           prevents them shrinking below their intrinsic content
           width. Long Finnish words (muuttotarjouksia, postinumero)
           and native <input type="date"> then force the whole box
           wider than the viewport — Peter's screenshot shows the
           heading + beige box cut off past the right edge because
           of this. Zero the min-width on every grid track and on
           the direct children so nothing can push the box wider. */
        min-width: 0;
        max-width: 100%;
    }
    .sfy-mov-quick__box > * { min-width: 0; }
    .sfy-mov-quick__intro,
    .sfy-mov-quick__intro-copy,
    .sfy-mov-quick__form { min-width: 0; max-width: 100%; }
    .sfy-mov-quick__intro { min-height: 0; }
    .sfy-mov-quick__intro-copy p { max-width: none; }
    .sfy-mov-quick__illust { display: none; }
    .sfy-mov-quick__form { gap: 16px; }
    .sfy-mov-quick__grid { gap: 12px; min-width: 0; }

    /* Native date input on iOS ignores width:100% unless we also
       zero its min-width. Force everything under the grid to
       shrink into the cell. */
    .sfy-mov-quick__grid label { min-width: 0; }
    .sfy-mov-quick__grid .form-control {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* 2026-09-11 Peter: iOS Safari still sized the empty date field
       from its native control and ran it past the card edge. Resetting
       the appearance lets width:100% win; min-height matches the
       postcode inputs so the empty field doesn't collapse. */
    .sfy-mov-quick__grid input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        min-height: 50px;
        text-align: left;
    }
    .sfy-mov-quick__grid input[type="date"]::-webkit-date-and-time-value { text-align: left; }

    /* Continue button and "Free to compare…" line stack; the line may
       wrap instead of running off the card (was nowrap in a 2-col row). */
    .sfy-mov-quick__foot { grid-template-columns: 1fr; gap: 12px; }
    .sfy-mov-quick__promise { white-space: normal; justify-content: center; text-align: center; }
}
/* Belt-and-suspenders: never let the moving page scroll horizontally,
   even if one nested rule sneaks over. Scoped to <body> pages that
   include a hero so we don't affect the admin. */
body:has(.sfy-mov-hero) { overflow-x: hidden; }

/* Partner capability strip on customer offer card */
.sfy-srd-offer__capability {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ECE7DA;
    font-size: 13px;
    color: #5F6368;
}
.sfy-srd-offer__cap-item { white-space: nowrap; }
.sfy-srd-offer__cap-label {
    color: #8a8a8a;
    font-weight: 500;
    margin-right: 4px;
}

/* =====================================================================
   Partner Dashboard v2 — pixel-perfect redesign
   ===================================================================== */
.sfy-pdash-shell {
    --sfy-pdash-brand: #1B7A47;
    --sfy-pdash-brand-dark: #0F5A3A;
    --sfy-pdash-brand-light: #E9F0EA;
    --sfy-pdash-side-bg: #FDF9EB;
    --sfy-pdash-page-bg: #F9F6EC;
    --sfy-pdash-card-bg: #FFFFFF;
    --sfy-pdash-border: #ECE7DA;
    --sfy-pdash-divider: #F0EBDE;
    --sfy-pdash-text: #1a1a1a;
    --sfy-pdash-text-sec: #5F6368;
    --sfy-pdash-muted: #8A8A8A;
    --sfy-pdash-blue: #3B82F6;
    --sfy-pdash-blue-bg: #DBEAFE;
    --sfy-pdash-orange: #F59E0B;
    --sfy-pdash-orange-bg: #FEF3C7;
    --sfy-pdash-red: #DC2626;
    --sfy-pdash-teal-bg: #CCFBF1;
    --sfy-pdash-teal: #0F766E;
    background: var(--sfy-pdash-page-bg);
    padding: 0 !important;
    max-width: 100%;
}
.sfy-pdash-shell { overflow-x: hidden; }
.sfy-pdash-shell > .row { min-height: 100vh; margin: 0; flex-wrap: nowrap; }
.sfy-pdash-shell__side { width: 260px; flex: 0 0 260px; max-width: 260px; padding: 0 !important; }
.sfy-pdash-shell__main {
    padding: 40px 44px;
    background: var(--sfy-pdash-page-bg);
    min-width: 0;
    flex: 1 1 auto;
}
/* Column gutter — scoped to .sfy-pdash-shell so we don't override
 * Bootstrap's global .no-gutters behaviour elsewhere. */
.sfy-pdash-shell .no-gutters > .col,
.sfy-pdash-shell .no-gutters > [class*="col-"] {
    padding-right: 24px;
    padding-left: 24px;
}
/* Sidebar overrides so the aisle stays flush to the viewport edge —
 * padding lives on the aside element itself, not the column. */
.sfy-pdash-shell__side { padding-left: 0 !important; padding-right: 0 !important; }
/* Kill any margins/padding the site wrapper adds so the shell is edge-to-edge */
#wrapper:has(.sfy-pdash-shell) { padding: 0 !important; margin: 0 !important; }
body:has(.sfy-pdash-shell) { background: var(--sfy-pdash-page-bg); margin: 0; }

/* ── Sidebar ── */
.sfy-pdash-nav {
    background: var(--sfy-pdash-side-bg);
    border-right: 1px solid var(--sfy-pdash-border);
    padding: 32px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    min-height: 100vh;
    width: 260px;
}
.sfy-pdash-nav__close {
    display: none;
    background: transparent; border: none; padding: 6px; align-self: flex-end;
    color: var(--sfy-pdash-text-sec); cursor: pointer;
}
.sfy-pdash-nav__brand {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 8px 22px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sfy-pdash-divider);
    text-decoration: none;
}
.sfy-pdash-nav__brand:hover { text-decoration: none; }
.sfy-pdash-nav__logo {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--sfy-pdash-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sfy-pdash-nav__brand-name { font-size: 17px; font-weight: 700; color: var(--sfy-pdash-text); line-height: 1.15; }
.sfy-pdash-nav__brand-tag { font-size: 11px; color: var(--sfy-pdash-text-sec); }

.sfy-pdash-nav__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sfy-pdash-nav__item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 8px;
    font-size: 14px; font-weight: 500;
    color: var(--sfy-pdash-text-sec);
    text-decoration: none;
    transition: background 120ms, color 120ms;
}
.sfy-pdash-nav__item:hover { background: rgba(0,0,0,.03); color: var(--sfy-pdash-text); text-decoration: none; }
.sfy-pdash-nav__item.is-active {
    background: var(--sfy-pdash-brand-light);
    color: var(--sfy-pdash-brand-dark);
    font-weight: 600;
}
.sfy-pdash-nav__count {
    margin-left: auto; color: var(--sfy-pdash-muted);
    font-size: 12px; font-weight: 400;
}

.sfy-pdash-ps {
    background: var(--sfy-pdash-card-bg);
    border: 1px solid var(--sfy-pdash-border);
    border-radius: 12px;
    padding: 16px;
}
.sfy-pdash-ps__head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; font-weight: 600; margin-bottom: 8px;
    color: var(--sfy-pdash-text);
}
.sfy-pdash-ps__pct { color: var(--sfy-pdash-brand-dark); font-size: 14px; }
.sfy-pdash-ps__bar { height: 6px; background: #F0EBDE; border-radius: 999px; overflow: hidden; }
.sfy-pdash-ps__bar-fill { height: 100%; background: var(--sfy-pdash-brand); border-radius: 999px; transition: width 300ms ease; }
.sfy-pdash-ps__text { font-size: 12px; color: var(--sfy-pdash-text-sec); margin: 10px 0 12px; line-height: 1.45; }
.sfy-pdash-ps__cta {
    display: block; width: 100%; text-align: center;
    padding: 8px; border: 1px solid var(--sfy-pdash-brand-dark); border-radius: 8px;
    background: transparent; color: var(--sfy-pdash-brand-dark);
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.sfy-pdash-ps__cta:hover { background: var(--sfy-pdash-brand-light); text-decoration: none; }

.sfy-pdash-nav__logout {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px 4px; color: var(--sfy-pdash-red); font-weight: 500;
    border-top: 1px solid var(--sfy-pdash-divider); text-decoration: none;
    margin-top: 4px;
}
.sfy-pdash-nav__logout:hover { color: #B91C1C; text-decoration: none; }

/* ── Top bar ── */
.sfy-pdash-topbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 36px; gap: 24px;
}
.sfy-pdash-topbar__greet h1 {
    margin: 0 0 6px; font-size: 28px; font-weight: 700; color: var(--sfy-pdash-text);
    line-height: 1.2;
}
.sfy-pdash-topbar__greet p {
    margin: 0; color: var(--sfy-pdash-text-sec); font-size: 14px;
}
.sfy-pdash-topbar__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.sfy-pdash-tb__btn {
    position: relative; width: 44px; height: 44px; border-radius: 50%;
    background: var(--sfy-pdash-card-bg); border: 1px solid var(--sfy-pdash-border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sfy-pdash-text-sec); cursor: pointer;
}
.sfy-pdash-tb__btn:hover { color: var(--sfy-pdash-text); }
.sfy-pdash-tb__profile {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 6px; border-radius: 999px;
    background: var(--sfy-pdash-card-bg); border: 1px solid var(--sfy-pdash-border);
    text-decoration: none;
}
.sfy-pdash-tb__profile:hover { text-decoration: none; }
.sfy-pdash-tb__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--sfy-pdash-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.sfy-pdash-tb__ident { display: flex; flex-direction: column; }
.sfy-pdash-tb__name { font-size: 14px; font-weight: 700; color: var(--sfy-pdash-text); line-height: 1.2; }
.sfy-pdash-tb__sub { font-size: 11px; color: var(--sfy-pdash-text-sec); }

/* Profile dropdown — native <details> + <summary> so it needs no JS.
   The summary IS the pill; the panel below is absolutely positioned so
   the topbar height doesn't jump when the menu opens. */
.sfy-pdash-tb__menu { position: relative; }
.sfy-pdash-tb__menu > summary {
    list-style: none;
    cursor: pointer;
}
.sfy-pdash-tb__menu > summary::-webkit-details-marker { display: none; }
.sfy-pdash-tb__chev {
    color: var(--sfy-pdash-muted);
    transition: transform 160ms ease;
    flex-shrink: 0;
}
.sfy-pdash-tb__menu[open] .sfy-pdash-tb__chev { transform: rotate(180deg); }
.sfy-pdash-tb__menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--sfy-pdash-card-bg);
    border: 1px solid var(--sfy-pdash-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
    padding: 6px;
    z-index: 100;
}
.sfy-pdash-tb__menu-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--sfy-pdash-text);
    font-size: 14px;
    text-decoration: none;
    transition: background 100ms;
}
.sfy-pdash-tb__menu-panel a:hover {
    background: var(--sfy-pdash-brand-light);
    color: var(--sfy-pdash-text);
    text-decoration: none;
}
.sfy-pdash-tb__menu-panel a.sfy-pdash-tb__menu-danger {
    color: var(--sfy-pdash-red);
    border-top: 1px solid var(--sfy-pdash-divider);
    border-radius: 0 0 8px 8px;
    margin-top: 4px;
    padding-top: 12px;
}
.sfy-pdash-tb__menu-panel a.sfy-pdash-tb__menu-danger:hover {
    background: #FEE2E2;
    color: #B91C1C;
}

/* ── KPI cards ── */
.sfy-pdash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}
.sfy-pdash-kpi {
    background: var(--sfy-pdash-card-bg); border: 1px solid var(--sfy-pdash-border);
    border-radius: 14px; padding: 22px 24px;
    text-decoration: none; color: inherit;
    transition: box-shadow 160ms, border-color 160ms;
    min-width: 0;
}
.sfy-pdash-kpi:hover { box-shadow: 0 6px 16px rgba(0,0,0,.05); border-color: #D9D4C4; text-decoration: none; color: inherit; }
.sfy-pdash-kpi__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sfy-pdash-kpi__icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sfy-pdash-kpi__icon--green { background: var(--sfy-pdash-brand-light); color: var(--sfy-pdash-brand-dark); }
.sfy-pdash-kpi__icon--blue  { background: var(--sfy-pdash-blue-bg);  color: var(--sfy-pdash-blue); }
.sfy-pdash-kpi__icon--orange{ background: var(--sfy-pdash-orange-bg);color: var(--sfy-pdash-orange); }
.sfy-pdash-kpi__label { font-size: 13px; font-weight: 600; color: var(--sfy-pdash-text-sec); }
.sfy-pdash-kpi__value { font-size: 30px; font-weight: 700; color: var(--sfy-pdash-text); line-height: 1.1; margin-bottom: 4px; }
.sfy-pdash-kpi__sub { font-size: 12px; color: var(--sfy-pdash-muted); margin-bottom: 12px; }
.sfy-pdash-kpi__link { font-size: 13px; color: var(--sfy-pdash-brand-dark); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }

/* ── Split rows ── */
.sfy-pdash-split { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 28px; align-items: start; }
.sfy-pdash-split--earnings > div:first-child { min-height: 1px; }

.sfy-pdash-card {
    background: var(--sfy-pdash-card-bg); border: 1px solid var(--sfy-pdash-border);
    border-radius: 14px; padding: 24px 26px;
}
.sfy-pdash-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sfy-pdash-card__title {
    font-size: 17px; font-weight: 700; color: var(--sfy-pdash-text);
    display: inline-flex; align-items: center; gap: 10px;
}
.sfy-pdash-card__count {
    background: #F0EBDE; color: var(--sfy-pdash-text-sec);
    padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.sfy-pdash-card__viewall {
    font-size: 13px; color: var(--sfy-pdash-brand-dark); font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
}
.sfy-pdash-card__viewall:hover { color: var(--sfy-pdash-brand); text-decoration: none; }
.sfy-pdash-card__footlink {
    display: block; text-align: center; padding: 12px 0 0; margin-top: 12px;
    border-top: 1px solid var(--sfy-pdash-divider);
    color: var(--sfy-pdash-brand-dark); font-size: 13px; font-weight: 500;
    text-decoration: none;
}
.sfy-pdash-card__footlink:hover { color: var(--sfy-pdash-brand); text-decoration: none; }

.sfy-pdash-empty {
    padding: 24px; text-align: center;
    color: var(--sfy-pdash-text-sec); font-size: 14px; line-height: 1.5;
}
.sfy-pdash-empty-panel {
    background: var(--sfy-pdash-card-bg); border: 1px solid var(--sfy-pdash-border);
    border-radius: 14px; padding: 32px; text-align: center;
}
.sfy-pdash-empty-panel h2 { margin: 0 0 8px; font-size: 20px; color: var(--sfy-pdash-text); }
.sfy-pdash-empty-panel p  { margin: 0; color: var(--sfy-pdash-text-sec); }

/* Quote Requests list */
.sfy-pdash-qr { display: flex; flex-direction: column; }
.sfy-pdash-qr__row {
    display: grid; grid-template-columns: 110px 1fr 130px 140px;
    gap: 18px; align-items: center;
    padding: 16px 0; border-bottom: 1px solid var(--sfy-pdash-divider);
}
.sfy-pdash-qr__row:last-child { border-bottom: 0; }
.sfy-pdash-qr__status {
    padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
    text-align: center; white-space: nowrap; display: inline-block;
}
.sfy-pdash-qr__status--new      { background: var(--sfy-pdash-brand-light); color: var(--sfy-pdash-brand-dark); }
.sfy-pdash-qr__status--sent     { background: var(--sfy-pdash-blue-bg);  color: var(--sfy-pdash-blue); }
.sfy-pdash-qr__status--accepted { background: var(--sfy-pdash-teal-bg);  color: var(--sfy-pdash-teal); }
.sfy-pdash-qr__status--expired  { background: #F3F4F6;                   color: #6B7280; }

.sfy-pdash-qr__body { min-width: 0; }
.sfy-pdash-qr__cust { font-weight: 600; font-size: 14px; color: var(--sfy-pdash-text); }
.sfy-pdash-qr__route {
    color: var(--sfy-pdash-text-sec); font-size: 13px; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sfy-pdash-qr__meta {
    display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px;
    color: var(--sfy-pdash-muted); font-size: 12px;
}
.sfy-pdash-qr__meta span { display: inline-flex; align-items: center; gap: 4px; }

.sfy-pdash-qr__time { color: var(--sfy-pdash-muted); font-size: 12px; }
.sfy-pdash-qr__time strong {
    display: block; color: var(--sfy-pdash-text); font-size: 13px;
    font-weight: 500; margin-bottom: 2px;
}
.sfy-pdash-qr__btn {
    padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
    text-align: center; display: inline-block; width: 100%;
    text-decoration: none;
}
.sfy-pdash-qr__btn--primary { background: var(--sfy-pdash-brand-dark); color: #fff; border: 1px solid var(--sfy-pdash-brand-dark); }
.sfy-pdash-qr__btn--primary:hover { background: var(--sfy-pdash-brand); text-decoration: none; color: #fff; }
.sfy-pdash-qr__btn--outline { background: transparent; color: var(--sfy-pdash-brand-dark); border: 1px solid var(--sfy-pdash-brand-dark); }
.sfy-pdash-qr__btn--outline:hover { background: var(--sfy-pdash-brand-light); text-decoration: none; color: var(--sfy-pdash-brand-dark); }

/* Today's Bookings */
.sfy-pdash-tb { display: flex; flex-direction: column; }
.sfy-pdash-tb__row {
    display: grid; grid-template-columns: 60px 1fr auto 18px;
    gap: 12px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--sfy-pdash-divider);
    text-decoration: none; color: inherit;
}
.sfy-pdash-tb__row:last-child { border-bottom: 0; }
.sfy-pdash-tb__row:hover { text-decoration: none; color: inherit; }
.sfy-pdash-tb__time strong { display: block; font-size: 13px; font-weight: 600; color: var(--sfy-pdash-text); }
.sfy-pdash-tb__time small  { display: block; font-size: 12px; color: var(--sfy-pdash-muted); }
.sfy-pdash-tb__cust { font-weight: 600; font-size: 13px; color: var(--sfy-pdash-text); }
.sfy-pdash-tb__route { font-size: 12px; color: var(--sfy-pdash-text-sec); }
.sfy-pdash-tb__prop  { font-size: 12px; color: var(--sfy-pdash-muted); }
.sfy-pdash-tb__status {
    padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
    white-space: nowrap;
}
.sfy-pdash-tb__status--progress  { background: var(--sfy-pdash-brand-light); color: var(--sfy-pdash-brand-dark); }
.sfy-pdash-tb__status--traveling { background: var(--sfy-pdash-blue-bg);  color: var(--sfy-pdash-blue); }
.sfy-pdash-tb__status--scheduled { background: #F0EBDE;                   color: var(--sfy-pdash-text-sec); }

.sfy-pdash-tb__foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--sfy-pdash-divider);
    font-size: 13px;
}
.sfy-pdash-tb__foot > span { color: var(--sfy-pdash-muted); display: inline-flex; align-items: center; gap: 6px; }

/* Earnings Overview */
.sfy-pdash-earn__body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    align-items: center; padding: 8px 0;
}
.sfy-pdash-earn__lbl { font-size: 13px; color: var(--sfy-pdash-text-sec); margin-bottom: 4px; }
.sfy-pdash-earn__val { font-size: 26px; font-weight: 700; color: var(--sfy-pdash-text); line-height: 1; }
.sfy-pdash-earn__trend { font-size: 12px; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.sfy-pdash-earn__trend--up   { color: var(--sfy-pdash-brand); }
.sfy-pdash-earn__trend--down { color: var(--sfy-pdash-red); }
.sfy-pdash-earn__chart {
    height: 80px; display: flex; align-items: flex-end; gap: 6px;
    padding: 0 4px;
}
.sfy-pdash-earn__bar {
    flex: 1; background: var(--sfy-pdash-brand); border-radius: 4px 4px 0 0;
    min-width: 8px; opacity: .9;
}
.sfy-pdash-earn__foot {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--sfy-pdash-divider);
    font-size: 12px;
}
.sfy-pdash-earn__foot-lbl { color: var(--sfy-pdash-text-sec); }
.sfy-pdash-earn__foot-val { font-weight: 700; color: var(--sfy-pdash-text); font-size: 14px; margin-top: 2px; }

/* Action cards */
.sfy-pdash-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.sfy-pdash-action {
    background: var(--sfy-pdash-card-bg); border: 1px solid var(--sfy-pdash-border);
    border-radius: 12px; padding: 16px 18px;
    display: grid; grid-template-columns: 44px 1fr 18px; gap: 12px; align-items: center;
    transition: box-shadow 160ms, border-color 160ms;
    text-decoration: none; color: inherit;
}
.sfy-pdash-action:hover { box-shadow: 0 6px 16px rgba(0,0,0,.05); border-color: #D9D4C4; text-decoration: none; color: inherit; }
.sfy-pdash-action__icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--sfy-pdash-brand-light); color: var(--sfy-pdash-brand-dark);
    display: inline-flex; align-items: center; justify-content: center;
}
.sfy-pdash-action__title { font-size: 13px; font-weight: 700; color: var(--sfy-pdash-text); line-height: 1.2; }
.sfy-pdash-action__sub   { font-size: 11px; color: var(--sfy-pdash-text-sec); margin-top: 2px; line-height: 1.35; }

/* Simple table used on Payments page */
.sfy-pdash-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sfy-pdash-table th {
    text-align: left; font-size: 12px; font-weight: 600;
    color: var(--sfy-pdash-muted); text-transform: uppercase; letter-spacing: .04em;
    padding: 8px 12px; border-bottom: 1px solid var(--sfy-pdash-divider);
}
.sfy-pdash-table td {
    padding: 12px; border-bottom: 1px solid var(--sfy-pdash-divider);
    color: var(--sfy-pdash-text);
}
.sfy-pdash-table tr:last-child td { border-bottom: 0; }

/* Reviews list */
.sfy-pdash-reviews { display: flex; flex-direction: column; gap: 16px; }
.sfy-pdash-review {
    padding: 16px 18px; background: #FCF9EF;
    border: 1px solid var(--sfy-pdash-border); border-radius: 12px;
}
.sfy-pdash-review__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sfy-pdash-review__stars { font-size: 16px; color: #E4E4E4; letter-spacing: 2px; }
.sfy-pdash-review__stars .is-filled { color: #F5B301; }
.sfy-pdash-review__when { font-size: 12px; color: var(--sfy-pdash-muted); }
.sfy-pdash-review__body { margin: 0 0 8px; color: var(--sfy-pdash-text); line-height: 1.5; }
.sfy-pdash-review__meta { font-size: 12px; color: var(--sfy-pdash-text-sec); }

/* ── Responsive ── */
/* auto-fit on .sfy-pdash-kpis + .sfy-pdash-actions handles KPI/action
   wrapping automatically, so the only explicit break is the split
   (Quote Requests / Today's Bookings) that needs to stack on narrower
   viewports where the two-column arrangement would squeeze both. */
@media (max-width: 1199px) {
    .sfy-pdash-split { grid-template-columns: 1fr; }
    .sfy-pdash-split--earnings > div:first-child { display: none; }
}
@media (max-width: 767px) {
    .sfy-pdash-shell__side { width: 100%; flex: 0 0 100%; max-width: 100%; }
    .sfy-pdash-nav { min-height: auto; }
    .sfy-pdash-shell__main { padding: 20px; }
    .sfy-pdash-topbar { flex-direction: column; align-items: stretch; }
    .sfy-pdash-topbar__greet h1 { font-size: 22px; }
    .sfy-pdash-qr__row { grid-template-columns: 1fr; gap: 8px; }
    .sfy-pdash-qr__row > * { align-self: stretch; }
    .sfy-pdash-qr__btn { width: auto; }
    .sfy-pdash-tb__row { grid-template-columns: 50px 1fr auto; }
    .sfy-pdash-tb__row > svg { display: none; }
    .sfy-pdash-earn__body { grid-template-columns: 1fr; }
    .sfy-pdash-earn__chart { height: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Service request form (shared)
   Used by /delivery, /cleaning, /removal — the moving wizard has its
   own richer .sfy-mw__ system.
   ═══════════════════════════════════════════════════════════════════ */
.sfy-svc-form {
    background: #F7F5EE;
    padding: 60px 24px;
    min-height: calc(100vh - 200px);
}
.sfy-svc-form__container {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
    padding: 40px 36px;
}
.sfy-svc-form__header { margin-bottom: 28px; }
.sfy-svc-form__header h1 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.sfy-svc-form__header p {
    margin: 0;
    color: #5F6368;
    font-size: 15px;
    line-height: 1.55;
}
.sfy-svc-form__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sfy-svc-form__row {
    display: grid;
    gap: 16px;
}
.sfy-svc-form__row--2col {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px) {
    .sfy-svc-form__row--2col { grid-template-columns: 1fr; }
    .sfy-svc-form__container { padding: 28px 20px; }
    .sfy-svc-form { padding: 32px 16px; }
    .sfy-svc-form__header h1 { font-size: 22px; }
}
.sfy-svc-form__field { display: flex; flex-direction: column; gap: 6px; }
.sfy-svc-form__field label {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: 0;
}
.sfy-svc-form__req { color: #E53935; margin-left: 2px; }
.sfy-svc-form__field input[type="text"],
.sfy-svc-form__field input[type="tel"],
.sfy-svc-form__field input[type="email"],
.sfy-svc-form__field input[type="date"],
.sfy-svc-form__field select,
.sfy-svc-form__field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dfdcd0;
    border-radius: 6px;
    font-size: 14px;
    color: #1a1a1a;
    background: #fff;
    font-family: inherit;
    transition: border-color 160ms, box-shadow 160ms;
}
.sfy-svc-form__field input:focus,
.sfy-svc-form__field select:focus,
.sfy-svc-form__field textarea:focus {
    outline: none;
    border-color: #0F5A3A;
    box-shadow: 0 0 0 3px rgba(15, 90, 58, 0.12);
}
.sfy-svc-form__field textarea { resize: vertical; min-height: 80px; }
.sfy-svc-form__actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.sfy-svc-form__actions .sfy-btn-primary {
    background: #0F5A3A;
    color: #fff;
    border: 0;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms;
}
.sfy-svc-form__actions .sfy-btn-primary:hover { background: #0A4529; }
.sfy-svc-form__flash {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}
.sfy-svc-form__flash--err {
    background: #FEE4E2;
    border: 1px solid #F9B4AE;
    color: #7A271A;
}
.sfy-svc-form__flash--ok {
    background: #DCFCE7;
    border: 1px solid #86EFAC;
    color: #14532D;
}

/* Homepage service grid — reuses .sfy-mov-services layout from /moving
   but adds a head row with the "See all moving options" link. */
.sfy-mov-services--home { background: #F7F5EE; }
.sfy-mov-services--home .sfy-mov-services__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.sfy-mov-services--home .sfy-mov-services__head .sfy-mov-section__title { margin: 0; }
.sfy-mov-services--home .sfy-section-link {
    color: #0F5A3A; font-weight: 600; text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
}
.sfy-mov-services--home .sfy-section-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   Mobile menu — matches the desktop redesign (Buy / Sell /
   Moving Services / How It Works / About). Peter 2026-09-09.
   ───────────────────────────────────────────────────────────── */
.sfy-mb-nav-primary > .nav-link {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
}
.sfy-mb-nav-primary > .nav-link .sfy-nav-badge-new {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    background: #C9A961;
    border-radius: 4px;
    vertical-align: middle;
}
.sfy-mb-nav-secondary > .nav-link {
    color: #6a6a6a;
    font-size: 14px;
    padding: 12px 18px;
}

/* About collapsible group */
.sfy-mb-about__caret {
    transition: transform .18s ease;
    font-size: 14px;
    opacity: 0.7;
}
.sfy-mb-about.is-open .sfy-mb-about__caret {
    transform: rotate(180deg);
}
.sfy-mb-about__menu {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px;
    background: #FAF6EC;
}
.sfy-mb-about__menu > li > .nav-link {
    padding: 10px 18px 10px 34px;
    font-size: 14px;
    color: #2a2a2a;
}

/* Mobile search bar — full-width input, no scope dropdown */
.sfy-mb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.sfy-mb-search form {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.sfy-mb-search__input {
    flex: 1 1 auto;
    border: none;
    box-shadow: none;
    padding: 8px 6px;
    font-size: 14px;
    background: transparent;
}
.sfy-mb-search__input:focus {
    outline: none;
    box-shadow: none;
}
.sfy-mb-search__btn {
    flex: 0 0 auto;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: #6a6a6a;
    font-size: 16px;
}
.sfy-mb-search__btn:hover { color: #C9A961; }

/* ═════════════════════════════════════════════════════════════════
 * 2026-09-11 Peter — phone responsive pass: search bar, dashboard,
 * service requests, settings. Appended last so it wins over the
 * Modesy base and earlier redesign rules.
 * ═════════════════════════════════════════════════════════════════ */

/* Mobile search: Modesy's .top-search-bar .input-search forces a grey
 * border (!important) and .mobile-search-form .btn-search pins the icon
 * at top:-5px / 48px — a box inside the pill with the icon in the
 * corner. One border (the pill), icon centred. 16px text stops iOS
 * Safari zooming the page when the field is focused. */
.top-search-bar.sfy-mb-search { padding: 4px 4px 4px 14px; }
.top-search-bar.sfy-mb-search .sfy-mb-search__input {
    border: 0 !important;
    border-radius: 0;
    height: 40px;
    min-height: 40px;
    padding: 8px 4px;
    font-size: 16px;
    background: transparent;
}
.top-search-bar.sfy-mb-search .sfy-mb-search__btn {
    position: static;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* The icon itself is position:absolute; top:6px from the old mobile
 * header styles — with the button now static it anchored to the pill
 * and sat in the top-right corner. Keep it in the button's flow. */
.top-search-bar.sfy-mb-search .sfy-mb-search__btn i {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    display: block;
}

/* Dashboard section titles asked for "Playfair Display", which the site
 * never loads, so phones fell back to Times. Use the site font. */
.sfy-dash-section__title { font-family: inherit; }

@media (max-width: 767px) {
    /* Explore Services: keep 2 per row, but minmax(0,1fr) so a long
     * Finnish word can't widen a column past the card, and put the icon
     * above the text so the words get the full tile width. */
    .sfy-dash-services { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sfy-dash-service { flex-direction: column; align-items: flex-start; gap: 8px !important; }
    .sfy-dash-service__body { width: 100%; }
    .sfy-dash-service__body strong,
    .sfy-dash-service__body span { overflow-wrap: break-word; }

    /* Service requests: the header wraps on phones so the button sits
     * left, and the right-anchored 240px menu ran off the left edge. */
    .sfy-sr__cta-menu { left: 0; right: auto; max-width: calc(100vw - 30px); }
}

/* Settings sub-nav: Modesy gives <i> icons margin-right:8px but not the
 * inline <svg> ones, so Notifications / Password rows sat 8px left. */
.profile-tabs.sfy-settings-nav .nav .nav-item .nav-link .sfy-settings-nav__icon {
    margin-right: 0;
    width: 18px;
}

/* Need-help card: inside the nav card on desktop, below the page content
 * on phones so the account fields aren't pushed down. */
.sfy-settings-help--after-nav { display: none; }
@media (max-width: 767px) {
    .sfy-settings-help--in-nav { display: none; }
    .sfy-settings-help--after-nav { display: block; margin: 0 0 16px; }
    /* Flatten the sub-nav column so its two cards become items of the
     * .sfy-set-inner flex row, then order them nav → content → help. */
    .sfy-set-inner > [class*="col-md-5"] { display: contents; }
    .sfy-set-inner > [class*="col-md-5"] > .sfy-settings-nav,
    .sfy-set-inner > [class*="col-md-5"] > .sfy-settings-help--after-nav {
        flex: 0 0 calc(100% - 30px);
        max-width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
    }
    .sfy-set-inner > [class*="col-md-5"] > .sfy-settings-nav { margin-bottom: 16px; }
    .sfy-set-inner > [class*="col-md-7"] { order: 1; }
    .sfy-set-inner > [class*="col-md-5"] > .sfy-settings-help--after-nav { order: 2; }
}

/* Account card: the "Verified" pill stayed on the email's line and ran
 * past the card edge. Let it wrap under a long address. */
.sfy-set-profile__field dd { flex-wrap: wrap; row-gap: 4px; overflow-wrap: anywhere; }
@media (max-width: 480px) {
    .sfy-set-profile__head { gap: 14px; }
    .sfy-set-profile__avatar { width: 56px; height: 56px; }
}

/* ═════════════════════════════════════════════════════════════════
 * 2026-09-11 Peter — one status style across the account area.
 * Orders and Offers reuse the Service Requests pill row
 * (partials/_status_filter) and status badges (sfy_*_status_pill).
 * ═════════════════════════════════════════════════════════════════ */
.sfy-status-filter { margin: 0 0 18px; }
/* Badges sit inline in table cells and detail rows — no list-card gap. */
.profile-tab-content .sfy-sr__pill-status,
.order-details-container .sfy-sr__pill-status { margin: 0; vertical-align: middle; }
.order-details-container .order-row-item .sfy-sr__pill-status + .btn-view-invoice { margin-left: 10px; }
/* View Invoice: brand outline button instead of Modesy's teal btn-info. */
.order-details-container .btn-view-invoice.btn-info {
    background: #fff !important;
    color: #0F5A3A !important;
    border: 1px solid #0F5A3A !important;
    border-radius: 8px;
    font-weight: 600;
}
.order-details-container .btn-view-invoice.btn-info:hover { background: #E9F0EA !important; }
/* Orders / Offers rows reuse .sfy-sr__row. Their row icons are icon-font
 * glyphs (Service Requests uses inline SVG), and an order shows two
 * badges — order status + payment — side by side. */
.sfy-sr__row-icon i,
.sfy-sr__empty-icon i { font-size: 20px; line-height: 1; }
.sfy-order-row__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sfy-order-row__status .sfy-sr__pill-status { margin: 0; }

/* ═════════════════════════════════════════════════════════════════
 * Public seller profile: full-bleed Helsinki cover, flat identity row and
 * full-width product gallery. Owner/account profile pages are unaffected.
 * ═════════════════════════════════════════════════════════════════ */
#wrapper.sfy-public-profile { padding-top: 0 !important; background: #FAF8F4; }
.sfy-public-profile__cover {
    width: 100%;
    height: 160px;
    background:
        linear-gradient(180deg, rgba(10, 68, 44, 0.02), rgba(10, 68, 44, 0.12)),
        #DCE7E2 url('../img/profile/helsinki-profile-cover.png') center 52% / cover no-repeat;
}
.sfy-public-profile .nav-breadcrumb { margin-top: 18px; margin-bottom: 18px; }
.sfy-public-profile .profile-page-top {
    float: none;
    margin: 0 0 24px;
}
.sfy-pp { margin: 0; }
.sfy-pp__card {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 0 0 24px;
    background: transparent;
    border-bottom: 1px solid #E4DED0;
}
.sfy-pp__avatar { flex-shrink: 0; margin: 0; }
.sfy-pp__avatar img {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    background: #F2F0E7;
    border: 3px solid #fff;
    box-shadow: 0 3px 12px rgba(15, 43, 31, 0.10);
}
.sfy-pp__body { flex: 1; min-width: 0; padding-top: 0; }
.sfy-pp__name {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 8px;
    font-size: 30px; font-weight: 800; color: #1a1a1a;
    letter-spacing: -0.01em;
}
.sfy-pp__name-badge { color: #2F9BD6; font-size: 20px; }
.sfy-pp__pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: #E9F0EA; color: #0F5A3A;
    font-size: 12.5px; font-weight: 700;
}
.sfy-pp__pill i { font-size: 12px; }
.sfy-pp__meta {
    list-style: none; padding: 0; margin: 14px 0 0;
    display: flex; flex-wrap: wrap; gap: 8px 26px;
    font-size: 14px; color: #5F6368;
}
.sfy-pp__meta > li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.sfy-pp__meta i { color: #8a8a8a; font-size: 14px; }
.sfy-pp__meta > li.is-online { color: #0F5A3A; font-weight: 600; }
.sfy-pp__meta > li.is-online i { color: #0F5A3A; }
.sfy-pp__meta--contact { margin-top: 8px; }
.sfy-pp__about {
    margin: 14px 0 0; max-width: 680px;
    font-size: 14px; line-height: 1.6; color: #4B5563;
}
.sfy-pp__rating { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7280; }
.sfy-pp__actions { margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sfy-pp__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 4px;
    background: #0F5A3A; border: 1px solid #0F5A3A; color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.sfy-pp__cta:hover { background: #0A442C; border-color: #0A442C; color: #fff; }
.sfy-pp__social ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }
.sfy-pp__social a {
    width: 34px; height: 34px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #F5F0E2; color: #5F6368; text-decoration: none;
}
.sfy-pp__social a:hover { background: #E9F0EA; color: #0F5A3A; }

/* "Items for sale" head + sort */
.sfy-public-profile__listings { width: 100%; padding: 0 0 46px; }
.sfy-public-profile__listings .profile-tab-content { min-height: 0; margin-bottom: 20px; }
.sfy-pp-items {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin: 0 0 18px;
}
.sfy-pp-items__title { margin: 0; font-size: 26px; font-weight: 800; color: #1a1a1a; }
.sfy-pp-items__count { margin: 4px 0 0; font-size: 14px; color: #6b7280; }
.sfy-pp-items__sort select {
    appearance: none; -webkit-appearance: none;
    padding: 10px 38px 10px 14px; border-radius: 10px;
    border: 1px solid #ECE7DA; background: #fff;
    font-size: 14px; color: #1a1a1a; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
    background-position: calc(100% - 20px) 51%, calc(100% - 14px) 51%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.sfy-pp-items__sort select:focus { border-color: #0F5A3A; outline: none; box-shadow: 0 0 0 3px rgba(15, 90, 58, 0.10); }

/* Account breadcrumbs remain useful navigation on phones and tablets.
   The legacy theme hides every breadcrumb below 992px, so opt the shared
   account breadcrumb back in and let long translated labels wrap. */
@media (max-width: 992px) {
    .nav-breadcrumb.sfy-account-crumb {
        display: block !important;
        padding-bottom: 12px;
    }
    .nav-breadcrumb.sfy-account-crumb .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        padding: 4px 0;
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .sfy-public-profile__cover { height: 112px; background-position: 62% 50%; }
    .sfy-public-profile .nav-breadcrumb { margin-top: 13px; margin-bottom: 14px; }
    .sfy-pp__card { flex-direction: column; gap: 12px; padding: 0 0 20px; text-align: left; }
    .sfy-pp__avatar { margin: 0; }
    .sfy-pp__avatar img { width: 88px; height: 88px; }
    .sfy-pp__body { padding-top: 0; }
    .sfy-pp__name { font-size: 24px; }
    .sfy-pp__meta { gap: 6px 18px; font-size: 13px; }
    .sfy-pp__actions { gap: 12px; }
    .sfy-pp__cta { width: 100%; justify-content: center; }
    .sfy-pp-items__title { font-size: 21px; }
    .sfy-pp-items__sort { width: 100%; }
    .sfy-pp-items__sort select { width: 100%; }
}

/* ═════════════════════════════════════════════════════════════════
 * 2026-09-16 Peter — My Furniture sub-tabs (Active / Pending / Hidden /
 * Drafts) now also render in the main column under the My Furniture tab
 * bar. Modesy's .profile-tabs rules stack items full-width (a sidebar
 * list); in the main column they read as a horizontal pill row, same
 * look as the other account filters. The sidebar usage is untouched.
 * ═════════════════════════════════════════════════════════════════ */
.col-md-9 > .profile-tabs.sfy-mf-subtabs {
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    border: 0;
}
.col-md-9 > .profile-tabs.sfy-mf-subtabs > .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.col-md-9 > .profile-tabs.sfy-mf-subtabs .nav .nav-item {
    width: auto !important;
    margin: 0 !important;
}
.col-md-9 > .profile-tabs.sfy-mf-subtabs .nav .nav-item .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ECE7DA;
    color: #4B5563;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.col-md-9 > .profile-tabs.sfy-mf-subtabs .nav .nav-item .nav-link:hover {
    background: #FAF7EE;
    color: #1a1a1a;
}
.col-md-9 > .profile-tabs.sfy-mf-subtabs .nav .nav-item.active .nav-link {
    background: #0F5A3A;
    border-color: #0F5A3A;
    color: #fff;
}
.col-md-9 > .profile-tabs.sfy-mf-subtabs .nav .nav-item .nav-link .count {
    float: none;
    opacity: 0.75;
}

/* 2026-09-16 Peter — a customer's booking now renders inside the dashboard
 * layout. The standalone page centred .sfy-bk with a 30px top margin; in the
 * main column it sits flush under the breadcrumb like other account pages. */
.sfy-account-layout__main > .sfy-bk {
    max-width: none;
    margin: 0 0 60px;
}