/* ---------- Page Width Unifier ---------- */

/* ============================================================
   Page Width Unifier — STYLES
   Keep page/component styles in logical sections below.
   ============================================================ */

/* =========================================================
   APEMART.LK — CONSISTENT DESKTOP PAGE WIDTH
   Uses the Recently Viewed page as the visual width reference.
   Does not change page functionality or mobile layout.
========================================================= */

:root{--apemart-page-width:1280px;--apemart-page-gutter:24px}

/* Main page shells */
.saved-page,
.recent-page,
.offers-page,
.promotions-page,
.promotion-page,
.categories-page,
.search-page,
.seller-hub,
.seller-profile-page,
.chat-page,
.messages-page,
.error-page{
    width:100%;
    max-width:var(--apemart-page-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box;
}

/* Inner wrappers that were narrower than the common page width */
.saved-page{padding-left:var(--apemart-page-gutter);padding-right:var(--apemart-page-gutter)}
.recent-wrap{max-width:var(--apemart-page-width) !important}
.promotions-container{max-width:var(--apemart-page-width) !important}
.seller-hub{max-width:var(--apemart-page-width) !important}
.seller-profile-page{max-width:var(--apemart-page-width) !important}

/* Pages whose main content is a dedicated section */
.profile-section,
.profile-cover{max-width:var(--apemart-page-width) !important}
.profile-card{max-width:1180px !important}
.contact-section{max-width:var(--apemart-page-width) !important}
.edit-profile-section,
.edit-profile-card{max-width:1100px !important}
.edit-ad-section{max-width:var(--apemart-page-width) !important}
.hero{max-width:var(--apemart-page-width) !important}
.ad-type-box{max-width:var(--apemart-page-width) !important}

/* Collection pages: keep the same common width and gutters */
.collection-page{max-width:var(--apemart-page-width) !important}

/* Advertisement details: use the wider desktop shell already supported by the page */
.ad-details-container{max-width:1180px !important}

/* Notifications/settings-style content */
.notifications-container{max-width:var(--apemart-page-width) !important}
main > .categories{max-width:var(--apemart-page-width) !important}

/* Do not let the common width create a horizontal overflow */
@media(max-width:1328px){
    .saved-page,.recent-page,.offers-page,.promotions-page,.promotion-page,
    .categories-page,.search-page,.seller-hub,.seller-profile-page,.chat-page,
    .messages-page,.error-page,.collection-page,.profile-section,.contact-section,
    .edit-ad-section,.hero{max-width:100% !important}
}

@media(max-width:700px){
    :root{--apemart-page-gutter:14px}
    .saved-page{padding-left:var(--apemart-page-gutter);padding-right:var(--apemart-page-gutter)}
    .profile-card{max-width:100% !important}
    .edit-profile-section,.edit-profile-card{max-width:100% !important}
    .ad-details-container{max-width:calc(100% - 16px) !important}
}