/* =========================================
   XMART Storefront — shared public/commerce
   design tokens and components.

   Loaded ONLY by the storefront layout chain
   (Template::layouts.frontend), never by the
   customer portal. See Phase 0 footer-isolation
   note: keep this file isolated the same way.

   Phase 1A.1 note: the Service Categories /
   Actions sidebar lives in layouts/side_bar.blade.php,
   which is also used by Cart, Product Configuration
   and Register Domain. It is styled here (selectors
   only, no markup touched) as shared navigational
   chrome, matching the same treatment given to the
   header/footer elsewhere. Everything else in this
   file is scoped to classes that only exist on the
   category/product-card markup.
========================================= */

:root {
    --xmart-store-navy: hsl(var(--dark));
    --xmart-store-accent: hsl(var(--base));
    --xmart-store-accent-strong: hsl(var(--base-700));
    --xmart-store-accent-tint: hsl(var(--base-50));
    --xmart-store-text: hsl(var(--heading));
    --xmart-store-muted: hsl(var(--body));
    --xmart-store-border: hsl(var(--border));
    --xmart-store-border-strong: hsl(220 14% 86%);
    --xmart-store-surface: hsl(var(--white));
    --xmart-store-surface-alt: hsl(var(--light));
    --xmart-store-radius: 14px;
    --xmart-store-radius-sm: 10px;
    --xmart-store-shadow: 0 8px 24px -14px rgba(15, 23, 42, 0.28);
    --xmart-store-shadow-hover: 0 24px 44px -18px rgba(15, 23, 42, 0.32);
}

/* Category / listing page heading -------------------------------- */

.xmart-store-page-head {
    position: relative;
    padding: 4px 0 20px 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--xmart-store-border);
}

.xmart-store-page-head::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    bottom: 24px;
    width: 4px;
    border-radius: 999px;
    background: var(--xmart-store-accent);
}

.xmart-store-page-head h3 {
    margin: 0;
    color: var(--xmart-store-navy);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.xmart-store-page-head p {
    margin: 8px 0 0;
    color: var(--xmart-store-muted);
    max-width: 68ch;
    font-size: 15px;
    line-height: 1.6;
}

/* Product grid ------------------------------------------------------ */
/* .justify-content-center was removed in Blade so incomplete rows
   (a lone 4th card, or a single-product category) sit naturally at
   the start of the row instead of floating centered under nothing. */

.xmart-store-grid {
    align-items: stretch;
}

/* Server Product Card --------------------------------------------- */

.xmart-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.xmart-product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--xmart-store-shadow-hover);
    border-color: hsl(var(--base-300));
}

.xmart-product-card--featured {
    border-color: hsl(var(--base-400));
    box-shadow: var(--xmart-store-shadow), 0 0 0 1px hsl(var(--base-100));
}

.xmart-product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 26px;
}

.xmart-product-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    margin-bottom: 14px;
}

.xmart-product-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--xmart-store-accent);
    color: hsl(var(--white));
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.xmart-product-card__badge .la {
    font-size: 12px;
}

.xmart-product-card__stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--xmart-store-surface-alt);
    color: var(--xmart-store-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.xmart-product-card__name {
    margin: 0 0 12px;
    color: var(--xmart-store-navy);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.xmart-product-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 22px;
    color: var(--xmart-store-muted);
    font-size: 14.5px;
    line-height: 1.65;
}

.xmart-product-card__price {
    padding: 18px 0;
    margin-top: auto;
    border-top: 1px dashed var(--xmart-store-border-strong);
    border-bottom: 1px dashed var(--xmart-store-border-strong);
}

.xmart-product-card__price-label {
    display: block;
    margin-bottom: 4px;
    color: var(--xmart-store-accent-strong);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.xmart-product-card__price-amount {
    color: var(--xmart-store-navy);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.xmart-product-card__price-unit {
    color: var(--xmart-store-muted);
    font-size: 13px;
    font-weight: 500;
}

.xmart-product-card__price-cycle {
    margin-top: 3px;
    color: var(--xmart-store-text);
    font-size: 13.5px;
    font-weight: 600;
}

.xmart-product-card__price-setup {
    margin-top: 5px;
    color: var(--xmart-store-muted);
    font-size: 12.5px;
}

.xmart-product-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: var(--xmart-store-radius-sm);
    background: var(--xmart-store-accent);
    color: hsl(var(--white));
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.xmart-product-card__cta:hover,
.xmart-product-card__cta:focus-visible {
    background: var(--xmart-store-accent-strong);
    color: hsl(var(--white));
    transform: translateY(-1px);
}

.xmart-product-card__cta:focus-visible {
    outline: 2px solid var(--xmart-store-accent-strong);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px hsl(var(--base-100));
}

/* Service Categories / Actions sidebar ------------------------------
   Shared chrome from layouts/side_bar.blade.php — restyled here via
   its existing classes/IDs only (no Blade markup changed). Also
   renders on Cart, Product Configuration and Register Domain, which
   share this same layout file; treated as design-system polish
   (borders/spacing/typography/active-state), not a content redesign
   of those pages. */

.collapable-sidebar__inner nav#categoryMenu,
.collapable-sidebar__inner nav#actionMenu {
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
    overflow: hidden;
}

.collapable-sidebar__inner nav#categoryMenu > span,
.collapable-sidebar__inner nav#actionMenu > span {
    background: var(--xmart-store-navy);
    color: hsl(var(--white));
    border-bottom: none;
    padding: 13px 16px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.collapable-sidebar__inner .list-group-flush {
    padding: 6px;
}

.collapable-sidebar__inner .list-group-item-action {
    border: none;
    border-radius: var(--xmart-store-radius-sm);
    margin-bottom: 2px;
    padding: 10px 12px;
    color: var(--xmart-store-text);
    font-size: 14px;
    font-weight: 600;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.collapable-sidebar__inner .list-group-item-action:hover {
    background: var(--xmart-store-surface-alt);
}

.collapable-sidebar__inner .list-group-item-action.bg--base {
    background: var(--xmart-store-surface-alt) !important;
    border-left-color: var(--xmart-store-accent);
    color: var(--xmart-store-navy) !important;
    font-weight: 700;
}

/* Product Configuration page (Phase 1B) ------------------------------ */

.xmart-config-header {
    padding: 24px 26px;
    margin-bottom: 4px;
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
}

.xmart-config-header__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.xmart-config-header__category {
    display: block;
    margin-bottom: 4px;
    color: var(--xmart-store-accent-strong);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.xmart-config-header__name {
    margin: 0;
    color: var(--xmart-store-navy);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.xmart-config-header__price {
    text-align: right;
    flex-shrink: 0;
}

.xmart-config-header__price-label {
    display: block;
    color: var(--xmart-store-muted);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.xmart-config-header__price-amount {
    color: var(--xmart-store-navy);
    font-size: 26px;
    font-weight: 800;
}

.xmart-config-header__price-unit {
    color: var(--xmart-store-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.xmart-config-header__stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--xmart-store-surface-alt);
    color: var(--xmart-store-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.xmart-config-header__description {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--xmart-store-border);
    color: var(--xmart-store-text);
    font-size: 14.5px;
    line-height: 1.7;
}

.xmart-config-header__description :is(h2, h3, h4) {
    color: var(--xmart-store-navy);
    font-size: 16px;
    font-weight: 700;
}

.xmart-config-section {
    padding: 22px 24px;
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
}

.xmart-config-section__title {
    margin: 0 0 16px;
    color: var(--xmart-store-navy);
    font-size: 16px;
    font-weight: 800;
}

.xmart-config-section .form-group label:not(.visually-hidden) {
    color: var(--xmart-store-text);
    font-size: 13.5px;
    font-weight: 700;
}

.xmart-field-hint {
    color: var(--xmart-store-muted);
    font-size: 12px;
}

/* Native <select> is hidden only after JS successfully mirrors it as
   pills — kept fully in the DOM/tab order until then, so a JS failure
   leaves the original working control visible. */
.xmart-native-select--enhanced {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.xmart-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.xmart-pill-group:empty {
    display: none;
}

.xmart-pill {
    padding: 10px 16px;
    background: var(--xmart-store-surface);
    border: 1.5px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius-sm);
    color: var(--xmart-store-text);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    max-width: 100%;
    overflow-wrap: break-word;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.xmart-pill:hover {
    border-color: hsl(var(--base-300));
}

.xmart-pill:focus-visible {
    outline: 2px solid var(--xmart-store-accent-strong);
    outline-offset: 2px;
}

.xmart-pill.is-selected {
    background: var(--xmart-store-navy);
    border-color: var(--xmart-store-navy);
    color: hsl(var(--white));
}

.xmart-pill.is-selected::before {
    content: "\2713";
    margin-right: 6px;
    font-weight: 700;
}

.server-config-notice {
    border-radius: var(--xmart-store-radius-sm);
}

/* Order Summary -------------------------------------------------------- */

.xmart-config-summary {
    display: flex;
    flex-direction: column;
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
    overflow: hidden;
}

.xmart-config-summary__title {
    display: block;
    padding: 14px 20px;
    background: var(--xmart-store-navy);
    color: hsl(var(--white));
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.xmart-config-summary__body {
    padding: 20px;
    color: var(--xmart-store-text);
    font-size: 14px;
}

.xmart-config-summary__body .border-top {
    border-color: var(--xmart-store-border) !important;
}

.xmart-config-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.xmart-config-summary__total-label {
    color: var(--xmart-store-navy);
    font-size: 15px;
    font-weight: 800;
}

.xmart-config-summary__total-amount {
    color: var(--xmart-store-accent-strong);
    font-size: 22px;
    font-weight: 800;
}

.xmart-config-summary__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 20px 20px;
    padding: 14px 18px;
    border: none;
    border-radius: var(--xmart-store-radius-sm);
    background: var(--xmart-store-accent);
    color: hsl(var(--white));
    font-size: 15.5px;
    font-weight: 700;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.xmart-config-summary__cta:hover,
.xmart-config-summary__cta:focus-visible {
    background: var(--xmart-store-accent-strong);
    transform: translateY(-1px);
}

.xmart-config-summary__cta:focus-visible {
    outline: 2px solid var(--xmart-store-accent-strong);
    outline-offset: 3px;
}

@media (min-width: 992px) {
    .xmart-config-summary {
        position: sticky;
        top: 20px;
    }
}

/* Shopping Cart (Phase 1C) --------------------------------------------- */

.xmart-cart-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.xmart-cart-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--xmart-store-radius-sm);
    background: var(--xmart-store-navy);
    color: hsl(var(--white));
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.xmart-cart-empty-btn:hover,
.xmart-cart-empty-btn:focus-visible {
    background: var(--xmart-store-accent-strong);
    color: hsl(var(--white));
}

.xmart-cart-item {
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
    margin-bottom: 18px;
    overflow: hidden;
}

.xmart-cart-item__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--xmart-store-border);
}

.xmart-cart-item__category {
    display: block;
    margin-bottom: 4px;
    color: var(--xmart-store-accent-strong);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.xmart-cart-item__name {
    margin: 0;
    color: var(--xmart-store-navy);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
}

.xmart-cart-item__cycle {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--xmart-store-surface-alt);
    color: var(--xmart-store-text);
    font-size: 11.5px;
    font-weight: 700;
}

.xmart-cart-item__pricing {
    text-align: right;
    flex-shrink: 0;
}

.xmart-cart-item__price {
    color: var(--xmart-store-navy);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.xmart-cart-item__price-row {
    margin-top: 4px;
    color: var(--xmart-store-muted);
    font-size: 12.5px;
}

.xmart-cart-item__total {
    margin-top: 6px;
    color: var(--xmart-store-accent-strong);
    font-size: 13px;
    font-weight: 700;
}

.xmart-cart-item__body {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.xmart-cart-item__body:empty {
    display: none;
}

.xmart-cart-options__title,
.xmart-cart-server-info__title {
    display: block;
    margin-bottom: 8px;
    color: var(--xmart-store-navy);
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.xmart-cart-options__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.xmart-cart-options__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 8px 12px;
    background: var(--xmart-store-surface-alt);
    border-radius: var(--xmart-store-radius-sm);
    font-size: 13px;
}

.xmart-cart-options__name {
    color: var(--xmart-store-muted);
    font-weight: 600;
}

.xmart-cart-options__name::after {
    content: ":";
}

.xmart-cart-options__value {
    color: var(--xmart-store-text);
    font-weight: 700;
    overflow-wrap: break-word;
}

.xmart-cart-options__price {
    margin-left: auto;
    color: var(--xmart-store-accent-strong);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

.xmart-cart-server-info__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.xmart-cart-server-info__item {
    padding: 8px 12px;
    background: var(--xmart-store-surface-alt);
    border-radius: var(--xmart-store-radius-sm);
    min-width: 0;
}

.xmart-cart-server-info__label {
    display: block;
    color: var(--xmart-store-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.xmart-cart-server-info__value {
    display: block;
    margin-top: 2px;
    color: var(--xmart-store-text);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: break-word;
    font-family: Consolas, Monaco, monospace;
}

.xmart-cart-item__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    background: var(--xmart-store-surface-alt);
    border-top: 1px solid var(--xmart-store-border);
}

.xmart-cart-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: var(--xmart-store-radius-sm);
    border: 1.5px solid var(--xmart-store-border-strong);
    background: var(--xmart-store-surface);
    color: var(--xmart-store-navy);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.xmart-cart-edit:hover,
.xmart-cart-edit:focus-visible {
    border-color: var(--xmart-store-accent);
    color: var(--xmart-store-accent-strong);
}

.xmart-cart-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: var(--xmart-store-radius-sm);
    border: 1.5px solid transparent;
    color: hsl(var(--danger));
    background: transparent;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.xmart-cart-remove:hover,
.xmart-cart-remove:focus-visible {
    background: hsl(0 85% 97%);
    border-color: hsl(0 70% 85%);
    color: hsl(0 70% 45%);
}

/* Empty state ------------------------------------------------------ */

.xmart-cart-empty {
    padding: 56px 24px;
    text-align: center;
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
}

.xmart-cart-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: var(--xmart-store-surface-alt);
    color: var(--xmart-store-accent-strong);
    font-size: 24px;
}

.xmart-cart-empty__message {
    margin: 0 0 20px;
    color: var(--xmart-store-muted);
    font-size: 15px;
}

.xmart-cart-empty__cta {
    display: inline-flex;
    width: auto;
    margin-top: 0;
    padding-left: 26px;
    padding-right: 26px;
}

/* Coupon ------------------------------------------------------------ */

.xmart-cart-coupon {
    padding: 18px 20px;
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
}

.xmart-cart-coupon__form {
    display: flex;
    gap: 8px;
}

.xmart-cart-coupon__form .form-control {
    flex: 1;
}

.xmart-cart-coupon__form button {
    flex-shrink: 0;
}

.xmart-cart-coupon__applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: hsl(var(--base-50));
    border: 1px solid hsl(var(--base-200));
    border-radius: var(--xmart-store-radius-sm);
}

.xmart-cart-coupon__applied-code {
    color: var(--xmart-store-navy);
    font-size: 13px;
    font-weight: 800;
}

.xmart-cart-coupon__applied-discount {
    color: var(--xmart-store-accent-strong);
    font-size: 12.5px;
    font-weight: 700;
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 991px) {
    .xmart-product-card__body {
        padding: 24px 22px;
    }

    .xmart-product-card__price-amount {
        font-size: 30px;
    }

    .xmart-store-page-head h3 {
        font-size: 23px;
    }

    .xmart-config-header__top {
        flex-direction: column;
    }

    .xmart-config-header__price {
        text-align: left;
    }

    .xmart-cart-item__header {
        flex-direction: column;
    }

    .xmart-cart-item__pricing {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .xmart-config-header,
    .xmart-config-section {
        padding: 18px;
    }

    .xmart-config-header__name {
        font-size: 20px;
    }

    .xmart-pill {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }

    .xmart-cart-item__header,
    .xmart-cart-item__body,
    .xmart-cart-item__footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .xmart-cart-server-info__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xmart-cart-options__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .xmart-cart-options__price {
        margin-left: 0;
    }

    .xmart-cart-item__footer {
        justify-content: space-between;
    }

    .xmart-cart-coupon__form {
        flex-direction: column;
    }
}

@media (max-width: 575px) {
    .xmart-cart-server-info__grid {
        grid-template-columns: 1fr;
    }
}

/* Server Information fields (Phase 1B) --------------------------------- */

.server-config-notice {
    margin-bottom: 18px;
    border: 1px solid hsl(var(--base-100));
    border-radius: var(--xmart-store-radius-sm);
    font-size: 14px;
}

.server-field-btn {
    min-width: 44px;
    border: 1px solid var(--xmart-store-border-strong);
    background: var(--xmart-store-surface);
    color: var(--xmart-store-navy);
}

.server-field-btn:hover,
.server-field-btn:focus {
    border-color: var(--xmart-store-accent);
    background: var(--xmart-store-accent);
    color: hsl(var(--white));
}

.server-field-btn:focus-visible {
    outline: 2px solid var(--xmart-store-accent-strong);
    outline-offset: 2px;
}

#password {
    font-family: Consolas, Monaco, monospace;
    letter-spacing: 0.4px;
}

.input-group > .server-field-btn:last-child {
    border-top-right-radius: var(--xmart-store-radius-sm);
    border-bottom-right-radius: var(--xmart-store-radius-sm);
}

@media (max-width: 767px) {
    .collapable-sidebar__inner nav#categoryMenu,
    .collapable-sidebar__inner nav#actionMenu {
        box-shadow: none;
    }
}

@media (max-width: 575px) {
    .xmart-product-card__body {
        padding: 20px;
    }

    .xmart-product-card__name {
        font-size: 19px;
    }

    .xmart-product-card__price-amount {
        font-size: 26px;
    }

    .xmart-product-card__cta {
        padding: 14px 16px;
        font-size: 14.5px;
    }

    .xmart-store-page-head {
        padding-left: 14px;
    }

    .xmart-store-page-head h3 {
        font-size: 21px;
    }
}

/* =========================================
   Public Header & Footer (Phase 2A)

   header.blade.php is only ever rendered via
   layouts/frontend.blade.php, which is the sole
   loader of this stylesheet — safe to style freely.

   footer.blade.php is ALSO rendered by
   layouts/master.blade.php and
   layouts/master_side_bar.blade.php (payment
   gateway, KYC, domain-contact, deposit-history
   pages), neither of which load this stylesheet.
   The footer markup therefore keeps `bg-dark-two`
   plus Bootstrap's own text-white / text-white-50 /
   list-unstyled / text-decoration-none utilities as
   a self-contained, always-available baseline; every
   rule below is additive polish layered on top when
   this stylesheet IS present, never load-bearing for
   legibility on its own.
========================================= */

/* Header ---------------------------------------------------------------- */

.xmart-public-header {
    background: var(--xmart-store-navy);
}

.xmart-public-header .header-bottom {
    padding: 20px 0;
}

@media (min-width: 1200px) {
    .xmart-public-header .header-bottom {
        padding: 24px 0;
    }
}

.xmart-public-header__bar {
    display: flex;
    flex-wrap: wrap;
}

.xmart-public-header__logo img {
    max-width: 175px;
    max-height: 42px;
}

@media (max-width: 1199px) {
    .xmart-public-header__logo img {
        max-height: 36px;
    }
}

.xmart-public-header__menu li a {
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (min-width: 1200px) {
    .xmart-public-header__menu > li > a {
        padding: 10px 14px;
        border-radius: var(--xmart-store-radius-sm);
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .xmart-public-header__menu > li > a:hover,
    .xmart-public-header__menu > li > a.active {
        background: hsl(0 0% 100% / 0.08);
        color: hsl(var(--white));
    }

    .xmart-public-header__menu .sub-menu {
        border-radius: var(--xmart-store-radius);
        border: 1px solid hsl(0 0% 100% / 0.08);
        box-shadow: var(--xmart-store-shadow-hover);
    }

    .xmart-public-header__menu .sub-menu li a {
        border-radius: var(--xmart-store-radius-sm);
    }

    .xmart-public-header__menu .sub-menu li a:hover {
        background: var(--xmart-store-accent);
        padding-left: 15px;
    }
}

.xmart-public-header__account {
    align-items: center;
}

.xmart-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px !important;
    border-radius: var(--xmart-store-radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.xmart-header-pill--primary {
    background: var(--xmart-store-accent);
    color: hsl(var(--white)) !important;
}

.xmart-header-pill--primary:hover,
.xmart-header-pill--primary:focus-visible {
    background: var(--xmart-store-accent-strong);
    color: hsl(var(--white)) !important;
    transform: translateY(-1px);
}

.xmart-header-pill--ghost {
    border: 1.5px solid hsl(0 0% 100% / 0.28);
    color: hsl(var(--white)) !important;
}

.xmart-header-pill--ghost:hover,
.xmart-header-pill--ghost:focus-visible {
    border-color: hsl(0 0% 100% / 0.55);
    background: hsl(0 0% 100% / 0.08);
    color: hsl(var(--white)) !important;
}

.xmart-header-pill:focus-visible {
    outline: 2px solid hsl(var(--white));
    outline-offset: 2px;
}

.xmart-public-header__actions {
    gap: 6px;
}

.xmart-header-cart .add-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border-radius: 999px;
    background: hsl(0 0% 100% / 0.08);
    border-color: transparent;
    font-size: 16px;
}

.xmart-header-cart .add-cart:hover,
.xmart-header-cart .add-cart:focus-visible {
    background: var(--xmart-store-accent);
    border-color: var(--xmart-store-accent);
}

.xmart-header-cart .add-cart:focus-visible {
    outline: 2px solid hsl(var(--white));
    outline-offset: 2px;
}

.xmart-header-cart .add-cart span {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--xmart-store-accent);
    color: hsl(var(--white));
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    border: 2px solid var(--xmart-store-navy);
}

@media (max-width: 1199px) {
    .xmart-public-header__account {
        margin-top: 6px;
    }

    .xmart-header-pill {
        display: inline-flex;
    }
}

/* Footer ------------------------------------------------------------------ */

.xmart-public-footer {
    padding: 48px 0 0;
}

.xmart-public-footer__logo img {
    max-height: 38px;
}

.xmart-public-footer__desc {
    max-width: 42ch;
    font-size: 13.5px;
    line-height: 1.7;
}

.xmart-public-footer__heading {
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.xmart-public-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.xmart-public-footer__links a {
    font-size: 13.5px;
    transition: color 0.15s ease;
}

.xmart-public-footer__links a:hover,
.xmart-public-footer__links a:focus-visible {
    color: hsl(var(--white)) !important;
}

.xmart-public-footer__bottom {
    margin-top: 40px;
    padding: 18px 0;
    border-top: 1px solid hsl(0 0% 100% / 0.1);
    text-align: center;
    font-size: 12.5px;
}

@media (max-width: 767px) {
    .xmart-public-footer {
        padding-top: 36px;
    }

    .xmart-public-footer__grid {
        text-align: center;
    }

    .xmart-public-footer__links {
        gap: 8px;
    }

    .xmart-public-footer__bottom {
        margin-top: 28px;
    }
}

/* Subscribe widget (existing functional newsletter signup) --------------- */

.subscribe-btn {
    box-shadow: var(--xmart-store-shadow-hover);
}

.subscribe-box {
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow-hover);
}

/* =========================================
   Homepage (Phase 2B)

   Sections: Hero, Service Categories, Featured
   Servers, Domain Search strip — all rendered
   only via sections/*.blade.php through
   home.blade.php, loaded by the same
   layouts/frontend.blade.php stack as the rest
   of this file.

   Replaces the old ad-hoc .service-card /
   .service-title rules that previously lived
   inline in sections/service.blade.php.
========================================= */

/* Shared section heading (Service / Featured) -------------------------- */

.xmart-section-head {
    max-width: 640px;
    margin: 0 auto 40px;
}

.xmart-section-head h1,
.xmart-section-head h2 {
    margin: 0;
    color: var(--xmart-store-navy);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.xmart-section-head p {
    margin: 10px 0 0;
    color: var(--xmart-store-muted);
    font-size: 15.5px;
    line-height: 1.65;
}

/* Hero ------------------------------------------------------------------ */

.xmart-hero {
    padding: 64px 0;
    background: linear-gradient(180deg, hsl(var(--light)) 0%, hsl(var(--white)) 100%);
    border-bottom: 1px solid var(--xmart-store-border);
}

.xmart-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: var(--xmart-store-accent-tint);
    color: var(--xmart-store-accent-strong);
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.xmart-hero__title {
    margin: 0 0 18px;
    color: var(--xmart-store-navy);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.xmart-hero__subtitle {
    margin: 0 0 30px;
    max-width: 52ch;
    color: var(--xmart-store-muted);
    font-size: 17px;
    line-height: 1.7;
}

.xmart-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.xmart-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: var(--xmart-store-radius-sm);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.xmart-hero__cta--primary {
    background: var(--xmart-store-accent);
    color: hsl(var(--white));
}

.xmart-hero__cta--primary:hover,
.xmart-hero__cta--primary:focus-visible {
    background: var(--xmart-store-accent-strong);
    color: hsl(var(--white));
    transform: translateY(-1px);
}

.xmart-hero__cta--secondary {
    border-color: var(--xmart-store-border-strong);
    background: var(--xmart-store-surface);
    color: var(--xmart-store-navy);
}

.xmart-hero__cta--secondary:hover,
.xmart-hero__cta--secondary:focus-visible {
    border-color: var(--xmart-store-accent);
    color: var(--xmart-store-accent-strong);
    transform: translateY(-1px);
}

.xmart-hero__cta:focus-visible {
    outline: 2px solid var(--xmart-store-accent-strong);
    outline-offset: 2px;
}

/* Hero visual (abstract, decorative — no fabricated data) --------------- */

.xmart-hero__visual {
    display: flex;
    justify-content: center;
}

.xmart-hero__panel {
    width: 100%;
    max-width: 420px;
    padding: 26px;
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow-hover);
}

.xmart-hero__panel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px dashed var(--xmart-store-border-strong);
    color: var(--xmart-store-text);
    font-size: 14.5px;
    font-weight: 600;
}

.xmart-hero__panel-row:last-of-type {
    border-bottom: none;
}

.xmart-hero__panel-row .la {
    font-size: 18px;
    color: var(--xmart-store-accent-strong);
}

.xmart-hero__panel-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--xmart-store-accent);
    flex-shrink: 0;
}

.xmart-hero__panel-os {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--xmart-store-border);
}

.xmart-hero__os-label {
    display: block;
    margin-bottom: 10px;
    color: var(--xmart-store-muted);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.xmart-hero__os-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.xmart-hero__os-chip {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--xmart-store-surface-alt);
    color: var(--xmart-store-text);
    font-size: 12px;
    font-weight: 600;
}

/* Service Categories ------------------------------------------------------ */

.xmart-category-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 26px;
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.xmart-category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--xmart-store-shadow-hover);
    border-color: hsl(var(--base-300));
}

.xmart-category-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: var(--xmart-store-radius-sm);
    background: var(--xmart-store-accent-tint);
    color: var(--xmart-store-accent-strong);
    font-size: 22px;
}

.xmart-category-card__name {
    margin: 0 0 10px;
    color: var(--xmart-store-navy);
    font-size: 19px;
    font-weight: 800;
}

.xmart-category-card__desc {
    flex: 1;
    margin: 0 0 22px;
    color: var(--xmart-store-muted);
    font-size: 14.5px;
    line-height: 1.65;
}

.xmart-category-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--xmart-store-accent-strong);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
}

.xmart-category-card__cta .la {
    transition: transform 0.15s ease;
}

.xmart-category-card__cta:hover,
.xmart-category-card__cta:focus-visible {
    color: var(--xmart-store-accent);
}

.xmart-category-card__cta:hover .la,
.xmart-category-card__cta:focus-visible .la {
    transform: translateX(3px);
}

/* Featured Servers — sparse-data grid (Phase 2B.1) ---------------------- */
/* py-5 moved off the Blade wrapper into here so the 1–2 product state can
   use a slightly more restrained vertical rhythm without touching the
   3+ product (normal grid) case. */

.xmart-featured-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.xmart-featured-section--compact {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* 1–2 featured products: center the card(s) as a group instead of
   letting them sit flush-left in an otherwise-empty 3-column row.
   Column widths (col-xl-4 / col-md-6) are untouched, so card width
   matches the normal 3+ product grid exactly — only the row's
   justify-content changes. */

.xmart-featured-grid--center {
    justify-content: center;
}

/* Domain Search strip (secondary, below the server funnel) --------------- */

.xmart-domain-strip__heading {
    margin: 0 0 12px;
    color: var(--xmart-store-navy);
    font-size: 24px;
    font-weight: 800;
}

.xmart-domain-strip__text {
    margin: 0 0 10px;
    color: var(--xmart-store-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

.xmart-domain-strip__note {
    margin: 0;
    color: var(--xmart-store-muted);
    font-size: 13.5px;
}

/* Responsive (Homepage) ---------------------------------------------------- */

@media (max-width: 991px) {
    .xmart-hero {
        padding: 48px 0;
    }

    .xmart-hero__title {
        font-size: 34px;
    }

    .xmart-hero__visual {
        margin-top: 8px;
    }

    .xmart-section-head h1,
    .xmart-section-head h2 {
        font-size: 26px;
    }
}

@media (max-width: 767px) {
    .xmart-hero__title {
        font-size: 28px;
    }

    .xmart-hero__subtitle {
        font-size: 15.5px;
    }

    .xmart-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .xmart-hero__cta {
        text-align: center;
    }

    .xmart-domain-strip__heading {
        font-size: 21px;
    }
}

@media (max-width: 440px) {
    .xmart-hero {
        padding: 36px 0;
    }

    .xmart-hero__title {
        font-size: 24px;
    }

    .xmart-hero__panel {
        padding: 20px;
    }

    .xmart-section-head h1,
    .xmart-section-head h2 {
        font-size: 22px;
    }
}

/* =========================================
   FAQ + Announcements (Phase 2C)

   Rendered via sections/faq.blade.php,
   sections/blog.blade.php and
   blog_details.blade.php — all through the
   same layouts/frontend.blade.php stack that
   loads this file. Reuses the --xmart-store-*
   tokens and .xmart-section-head heading
   treatment already defined above; no existing
   rule in this file was changed to add these.
========================================= */

/* FAQ ---------------------------------------------------------------- */

.xmart-faq-list {
    max-width: 780px;
    margin: 0 auto;
}

.xmart-faq-item {
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.xmart-faq-item:not(:last-child) {
    margin-bottom: 16px;
}

.xmart-faq-item--open {
    border-color: hsl(var(--base-300));
    box-shadow: var(--xmart-store-shadow-hover);
}

.xmart-faq-item__heading {
    margin: 0;
}

.xmart-faq-item__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 22px;
    border: none;
    background: transparent;
    color: var(--xmart-store-navy);
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.xmart-faq-item__trigger:focus-visible {
    outline: 2px solid var(--xmart-store-accent-strong);
    outline-offset: -2px;
    border-radius: var(--xmart-store-radius);
}

.xmart-faq-item__icon {
    flex-shrink: 0;
    color: var(--xmart-store-accent-strong);
    font-size: 14px;
    transition: transform 0.2s ease;
}

.xmart-faq-item--open .xmart-faq-item__icon {
    transform: rotate(135deg);
}

.xmart-faq-item__panel {
    padding: 0 22px 20px;
    color: var(--xmart-store-muted);
    font-size: 14.5px;
    line-height: 1.7;
}

.xmart-faq-item__panel p {
    margin: 0;
}

/* Announcements — index ------------------------------------------------ */

.xmart-announcement-list {
    max-width: 820px;
    margin: 0 auto;
}

.xmart-announcement-card {
    padding: 26px 28px;
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.xmart-announcement-card:not(:last-child) {
    margin-bottom: 20px;
}

.xmart-announcement-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--xmart-store-shadow-hover);
    border-color: hsl(var(--base-300));
}

.xmart-announcement-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--xmart-store-muted);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.xmart-announcement-card__title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
}

.xmart-announcement-card__title a {
    color: var(--xmart-store-navy);
    text-decoration: none;
}

.xmart-announcement-card__title a:hover,
.xmart-announcement-card__title a:focus-visible {
    color: var(--xmart-store-accent-strong);
}

.xmart-announcement-card__excerpt {
    margin: 0 0 18px;
    color: var(--xmart-store-muted);
    font-size: 14.5px;
    line-height: 1.7;
}

.xmart-announcement-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--xmart-store-accent-strong);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
}

.xmart-announcement-card__cta .la {
    transition: transform 0.15s ease;
}

.xmart-announcement-card__cta:hover,
.xmart-announcement-card__cta:focus-visible {
    color: var(--xmart-store-accent);
}

.xmart-announcement-card__cta:hover .la,
.xmart-announcement-card__cta:focus-visible .la {
    transform: translateX(3px);
}

/* Announcements — detail ------------------------------------------------ */

.xmart-announcement-detail__card {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px;
    background: var(--xmart-store-surface);
    border: 1px solid var(--xmart-store-border-strong);
    border-radius: var(--xmart-store-radius);
    box-shadow: var(--xmart-store-shadow);
}

.xmart-announcement-detail__title {
    margin: 6px 0 22px;
    color: var(--xmart-store-navy);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
}

.xmart-announcement-detail__prose {
    color: var(--xmart-store-text);
    font-size: 15.5px;
    line-height: 1.75;
    overflow-x: auto;
}

.xmart-announcement-detail__prose p {
    margin: 0 0 16px;
}

.xmart-announcement-detail__prose h1,
.xmart-announcement-detail__prose h2,
.xmart-announcement-detail__prose h3,
.xmart-announcement-detail__prose h4 {
    margin: 24px 0 12px;
    color: var(--xmart-store-navy);
    font-weight: 800;
}

.xmart-announcement-detail__prose ul,
.xmart-announcement-detail__prose ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.xmart-announcement-detail__prose li {
    margin-bottom: 6px;
}

.xmart-announcement-detail__prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--xmart-store-radius-sm);
}

.xmart-announcement-detail__prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.xmart-announcement-detail__prose table td,
.xmart-announcement-detail__prose table th {
    padding: 8px 12px;
    border: 1px solid var(--xmart-store-border-strong);
}

.xmart-announcement-detail__comments {
    margin: 28px 0;
    padding-top: 28px;
    border-top: 1px solid var(--xmart-store-border);
}

.xmart-announcement-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--xmart-store-accent-strong);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
}

.xmart-announcement-detail__back:hover,
.xmart-announcement-detail__back:focus-visible {
    color: var(--xmart-store-accent);
}

/* Responsive (FAQ + Announcements) --------------------------------------- */

@media (max-width: 767px) {
    .xmart-faq-item__trigger {
        padding: 16px 18px;
        font-size: 15px;
    }

    .xmart-faq-item__panel {
        padding: 0 18px 16px;
    }

    .xmart-announcement-card {
        padding: 20px;
    }

    .xmart-announcement-card__title {
        font-size: 18px;
    }

    .xmart-announcement-detail__card {
        padding: 22px;
    }

    .xmart-announcement-detail__title {
        font-size: 22px;
    }
}