/* ========================================================================== Funeraire 360 — B2C "Gentle Companion" Theme Activated when Source Serif 4 headings, Source Sans 3 body, 16px base. Warm cream background, generous whitespace, grief-appropriate design. ========================================================================== */ /* ======================================================================== Theme Token Mapping ======================================================================== */ body.platform-b2c { --color-primary: var(--b2c-primary); --color-primary-light: var(--b2c-primary-light); --color-primary-dark: var(--b2c-primary-dark); --color-secondary: var(--b2c-secondary); --color-secondary-light: var(--b2c-secondary-light); --color-accent: var(--b2c-accent); --color-accent-light: var(--b2c-accent-light); --color-bg: var(--b2c-bg); --color-surface: var(--b2c-surface); --color-surface-alt: var(--b2c-surface-alt); --color-border: var(--b2c-border); --color-border-light: var(--b2c-border-light); --color-text: var(--b2c-text); --color-text-muted: var(--b2c-text-muted); --color-text-inverse: var(--b2c-text-inverse); --color-error: var(--b2c-alert); --color-error-light: var(--b2c-alert-light); --color-error-dark: var(--b2c-alert-dark); --color-success: var(--b2c-success); --color-success-light: var(--b2c-success-light); --color-success-dark: var(--b2c-success-dark); --color-warning: var(--b2c-warning); --color-warning-light: var(--b2c-warning-light); --font-family: var(--b2c-font-body); --font-family-heading: var(--b2c-font-heading); --font-size-base: var(--b2c-font-size-base); --line-height-base: var(--b2c-line-height-base); --shadow-focus: 0 0 0 3px rgba(107, 140, 174, 0.25); font-family: var(--b2c-font-body); font-size: var(--b2c-font-size-base); line-height: var(--b2c-line-height-base); /* NEVER pure white — warm cream */ background-color: #FAF8F5; color: var(--b2c-text); } /* ======================================================================== Typography — Serif Headings ======================================================================== */ body.platform-b2c h1, body.platform-b2c h2, body.platform-b2c h3, body.platform-b2c h4, body.platform-b2c .h1, body.platform-b2c .h2, body.platform-b2c .h3, body.platform-b2c .h4 { font-family: var(--b2c-font-heading); color: var(--b2c-text); letter-spacing: -0.01em; } body.platform-b2c h1, body.platform-b2c .h1 { font-size: var(--text-3xl); font-weight: var(--font-weight-semibold); } body.platform-b2c h2, body.platform-b2c .h2 { font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); } body.platform-b2c h3, body.platform-b2c .h3 { font-size: var(--text-xl); font-weight: var(--font-weight-medium); } body.platform-b2c p { line-height: var(--b2c-line-height-base); color: var(--b2c-text); } /* ======================================================================== Generous Whitespace (24px+ between sections) ======================================================================== */ body.platform-b2c .section { margin-bottom: var(--space-8); } body.platform-b2c .card-body { padding: var(--space-6) var(--space-6); } body.platform-b2c .card-header { padding: var(--space-4) var(--space-6); } body.platform-b2c .page-content { padding: var(--space-6) var(--space-4); } body.platform-b2c .mobile-content { padding: var(--space-6) var(--space-4); padding-bottom: calc(var(--space-8) + 56px + env(safe-area-inset-bottom, 0)); } body.platform-b2c .form-group { margin-bottom: var(--space-5); } /* ======================================================================== Soft Rounded Corners (12px) ======================================================================== */ body.platform-b2c .card { border-radius: var(--radius-lg); border-color: var(--b2c-border-light); box-shadow: 0 2px 8px rgba(61, 56, 51, 0.04); } body.platform-b2c .card:hover { box-shadow: 0 4px 12px rgba(61, 56, 51, 0.06); } body.platform-b2c .btn { border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); min-height: 44px; font-size: var(--text-base); } body.platform-b2c .btn-sm { padding: var(--space-2) var(--space-4); min-height: 36px; font-size: var(--text-sm); } body.platform-b2c .input, body.platform-b2c .select, body.platform-b2c .textarea { border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); min-height: 44px; border-color: var(--b2c-border); font-size: var(--text-base); } body.platform-b2c .badge, body.platform-b2c .tag { border-radius: var(--radius-lg); } body.platform-b2c .modal { border-radius: var(--radius-xl); } body.platform-b2c .search-bar-input { border-radius: var(--radius-xl); min-height: 44px; font-size: var(--text-base); } /* ======================================================================== Gentle Hover States & Smooth Transitions (200-400ms) ======================================================================== */ body.platform-b2c .btn { transition: all 250ms ease; } body.platform-b2c .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(61, 56, 51, 0.08); } body.platform-b2c .btn:active { transform: translateY(0); box-shadow: none; } body.platform-b2c .card--clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(61, 56, 51, 0.08); transition: all 300ms ease; } body.platform-b2c a { transition: color 250ms ease; } body.platform-b2c .tab-bar-item { transition: all 200ms ease; } /* ======================================================================== Button Styles — B2C Soft ======================================================================== */ body.platform-b2c .btn-primary { background-color: var(--b2c-primary); border-color: var(--b2c-primary); color: #FFFFFF; } body.platform-b2c .btn-primary:hover { background-color: var(--b2c-primary-dark); border-color: var(--b2c-primary-dark); } body.platform-b2c .btn-secondary { background-color: var(--b2c-surface); border-color: var(--b2c-border); color: var(--b2c-text); } body.platform-b2c .btn-secondary:hover { background-color: var(--b2c-surface-alt); border-color: var(--b2c-primary); color: var(--b2c-primary); } body.platform-b2c .btn-accent { background-color: var(--b2c-accent); border-color: var(--b2c-accent); color: #FFFFFF; } body.platform-b2c .btn-accent:hover { background-color: var(--b2c-accent-dark); border-color: var(--b2c-accent-dark); } body.platform-b2c .btn-ghost { color: var(--b2c-text-muted); } body.platform-b2c .btn-ghost:hover { background-color: var(--b2c-surface-alt); color: var(--b2c-text); } /* ======================================================================== Bottom Tab Bar — B2C Mobile ======================================================================== */ body.platform-b2c .tab-bar { background-color: #FFFFFF; border-top: 1px solid var(--b2c-border-light); box-shadow: 0 -2px 8px rgba(61, 56, 51, 0.04); } body.platform-b2c .tab-bar-item { color: var(--b2c-text-muted); font-size: 11px; padding: var(--space-2) var(--space-1); } body.platform-b2c .tab-bar-item--active { color: var(--b2c-primary); } body.platform-b2c .tab-bar-icon { width: 24px; height: 24px; } /* Active tab indicator dot */ body.platform-b2c .tab-bar-item--active::after { content: ""; display: block; width: 4px; height: 4px; background-color: var(--b2c-primary); border-radius: var(--radius-full); margin-top: 2px; } /* ======================================================================== Memorial Wall — Masonry Grid ======================================================================== */ body.platform-b2c .memorial-wall { columns: 2; column-gap: var(--space-3); padding: var(--space-4); } @media (min-width: 480px) { body.platform-b2c .memorial-wall { columns: 3; } } body.platform-b2c .memorial-item { break-inside: avoid; margin-bottom: var(--space-3); background-color: #FFFFFF; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 6px rgba(61, 56, 51, 0.04); transition: transform 300ms ease, box-shadow 300ms ease; } body.platform-b2c .memorial-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(61, 56, 51, 0.08); } body.platform-b2c .memorial-item-image { width: 100%; aspect-ratio: auto; object-fit: cover; } body.platform-b2c .memorial-item-content { padding: var(--space-3) var(--space-3); } body.platform-b2c .memorial-item-text { font-family: var(--b2c-font-heading); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--b2c-text); font-style: italic; } body.platform-b2c .memorial-item-author { font-size: var(--text-xs); color: var(--b2c-text-muted); margin-top: var(--space-2); } body.platform-b2c .memorial-item-date { font-size: var(--text-xs); color: var(--b2c-text-muted); } /* ======================================================================== Reaction Buttons (Candle, Heart, Flower, Prayer) ======================================================================== */ .reaction-buttons { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; } .reaction-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--b2c-border-light); border-radius: var(--radius-lg); background-color: #FFFFFF; cursor: pointer; transition: all 300ms ease; min-width: 60px; } .reaction-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(61, 56, 51, 0.06); } .reaction-btn:active { transform: scale(0.95); } .reaction-btn-icon { font-size: 20px; line-height: 1; transition: transform 300ms ease; } .reaction-btn:hover .reaction-btn-icon { transform: scale(1.15); } .reaction-btn-count { font-size: var(--text-xs); color: var(--b2c-text-muted); font-weight: var(--font-weight-medium); } /* Candle */ .reaction-btn--candle.active, .reaction-btn--candle:hover { background-color: var(--b2c-candle-glow); border-color: var(--b2c-candle); } .reaction-btn--candle.active { box-shadow: 0 0 12px var(--b2c-candle-glow); } /* Heart */ .reaction-btn--heart.active, .reaction-btn--heart:hover { background-color: var(--b2c-heart-light); border-color: var(--b2c-heart); } /* Flower */ .reaction-btn--flower.active, .reaction-btn--flower:hover { background-color: var(--b2c-flower-light); border-color: var(--b2c-flower); } /* Prayer */ .reaction-btn--prayer.active, .reaction-btn--prayer:hover { background-color: var(--b2c-prayer-light); border-color: var(--b2c-prayer); } /* Reaction animation on click */ @keyframes reactionPulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .reaction-btn.active .reaction-btn-icon { animation: reactionPulse 400ms ease; } /* ======================================================================== Checklist Progress Bar (3-stage) ======================================================================== */ .checklist-progress { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); } .checklist-stages { display: flex; align-items: center; gap: 0; position: relative; } .checklist-stage { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; z-index: 1; } .checklist-stage-dot { width: 32px; height: 32px; border-radius: var(--radius-full); border: 3px solid var(--b2c-border); background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--b2c-text-muted); transition: all 400ms ease; } .checklist-stage--completed .checklist-stage-dot { border-color: var(--b2c-success); background-color: var(--b2c-success); color: #FFFFFF; } .checklist-stage--current .checklist-stage-dot { border-color: var(--b2c-primary); background-color: var(--b2c-primary); color: #FFFFFF; box-shadow: 0 0 0 4px rgba(107, 140, 174, 0.2); } .checklist-stage-label { font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--b2c-text-muted); margin-top: var(--space-2); text-align: center; white-space: nowrap; } .checklist-stage--completed .checklist-stage-label, .checklist-stage--current .checklist-stage-label { color: var(--b2c-text); } /* Connector line between stages */ .checklist-connector { flex: 1; height: 3px; background-color: var(--b2c-border); position: relative; top: -12px; align-self: flex-start; margin-top: 16px; transition: background-color 400ms ease; } .checklist-connector--completed { background-color: var(--b2c-success); } /* Stage detail checklist */ .checklist-items { display: flex; flex-direction: column; gap: var(--space-3); } .checklist-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background-color: #FFFFFF; border: 1px solid var(--b2c-border-light); border-radius: var(--radius-lg); transition: all 250ms ease; } .checklist-item:hover { border-color: var(--b2c-primary-light); } .checklist-item--completed { opacity: 0.7; } .checklist-item-check { width: 22px; height: 22px; border-radius: var(--radius-full); border: 2px solid var(--b2c-border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: all 300ms ease; } .checklist-item--completed .checklist-item-check { border-color: var(--b2c-success); background-color: var(--b2c-success); color: #FFFFFF; } .checklist-item-content { flex: 1; min-width: 0; } .checklist-item-title { font-size: var(--text-base); font-weight: var(--font-weight-medium); color: var(--b2c-text); } .checklist-item--completed .checklist-item-title { text-decoration: line-through; color: var(--b2c-text-muted); } .checklist-item-description { font-size: var(--text-sm); color: var(--b2c-text-muted); margin-top: var(--space-1); line-height: var(--leading-relaxed); } /* ======================================================================== Mobile Header — B2C ======================================================================== */ body.platform-b2c .mobile-header { background-color: #FFFFFF; border-bottom-color: var(--b2c-border-light); box-shadow: 0 1px 4px rgba(61, 56, 51, 0.03); } body.platform-b2c .mobile-header-title { font-family: var(--b2c-font-heading); font-weight: var(--font-weight-semibold); } /* ======================================================================== B2C Card Overrides — Warmer ======================================================================== */ body.platform-b2c .card { background-color: #FFFFFF; border-color: var(--b2c-border-light); } body.platform-b2c .card-footer { background-color: var(--b2c-surface-alt); } /* ======================================================================== Deceased Profile Card ======================================================================== */ body.platform-b2c .deceased-profile { text-align: center; padding: var(--space-8) var(--space-6); } body.platform-b2c .deceased-photo { width: 120px; height: 120px; border-radius: var(--radius-full); object-fit: cover; margin: 0 auto var(--space-4); border: 4px solid #FFFFFF; box-shadow: 0 4px 12px rgba(61, 56, 51, 0.1); } body.platform-b2c .deceased-name { font-family: var(--b2c-font-heading); font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); color: var(--b2c-text); margin-bottom: var(--space-2); } body.platform-b2c .deceased-dates { font-size: var(--text-base); color: var(--b2c-text-muted); margin-bottom: var(--space-4); } body.platform-b2c .deceased-epitaph { font-family: var(--b2c-font-heading); font-style: italic; font-size: var(--text-lg); color: var(--b2c-text-muted); line-height: var(--leading-relaxed); max-width: 400px; margin: 0 auto; } /* ======================================================================== Ceremony Details ======================================================================== */ body.platform-b2c .ceremony-card { background: linear-gradient(135deg, var(--b2c-surface-alt) 0%, #FFFFFF 100%); border: 1px solid var(--b2c-border-light); border-radius: var(--radius-lg); padding: var(--space-5); transition: all 300ms ease; } body.platform-b2c .ceremony-card-icon { width: 40px; height: 40px; color: var(--b2c-primary); margin-bottom: var(--space-3); } body.platform-b2c .ceremony-card-title { font-family: var(--b2c-font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--b2c-text); margin-bottom: var(--space-2); } body.platform-b2c .ceremony-card-detail { font-size: var(--text-sm); color: var(--b2c-text-muted); line-height: var(--leading-relaxed); } body.platform-b2c .ceremony-card-detail strong { color: var(--b2c-text); } /* ======================================================================== Message / Condolence Form ======================================================================== */ body.platform-b2c .condolence-form .textarea { min-height: 120px; font-family: var(--b2c-font-body); line-height: var(--leading-relaxed); } body.platform-b2c .condolence-form .textarea::placeholder { font-style: italic; color: var(--b2c-text-muted); opacity: 0.6; } body.platform-b2c .condolence-item { padding: var(--space-4); border-bottom: 1px solid var(--b2c-border-light); } body.platform-b2c .condolence-item:last-child { border-bottom: none; } body.platform-b2c .condolence-author { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); color: var(--b2c-text); } body.platform-b2c .condolence-text { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--b2c-text); margin-top: var(--space-2); font-style: italic; } body.platform-b2c .condolence-date { font-size: var(--text-xs); color: var(--b2c-text-muted); margin-top: var(--space-2); } /* ======================================================================== Flower / Donation Selection ======================================================================== */ body.platform-b2c .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } body.platform-b2c .product-card { background-color: #FFFFFF; border: 2px solid var(--b2c-border-light); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: all 300ms ease; } body.platform-b2c .product-card:hover { border-color: var(--b2c-primary-light); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(61, 56, 51, 0.06); } body.platform-b2c .product-card--selected { border-color: var(--b2c-primary); box-shadow: 0 0 0 3px rgba(107, 140, 174, 0.15); } body.platform-b2c .product-card-image { width: 100%; aspect-ratio: 1; object-fit: cover; } body.platform-b2c .product-card-info { padding: var(--space-3); } body.platform-b2c .product-card-name { font-family: var(--b2c-font-heading); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--b2c-text); } body.platform-b2c .product-card-price { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--b2c-accent-dark); margin-top: var(--space-1); } /* ======================================================================== B2C Form Focus States — Softer ======================================================================== */ body.platform-b2c .input:focus, body.platform-b2c .select:focus, body.platform-b2c .textarea:focus { border-color: var(--b2c-primary); box-shadow: 0 0 0 3px rgba(107, 140, 174, 0.15); } /* ======================================================================== B2C Progress Bar — Softer colors ======================================================================== */ body.platform-b2c .progress-bar { background-color: var(--b2c-surface-alt); height: 10px; border-radius: var(--radius-full); } body.platform-b2c .progress-fill { background-color: var(--b2c-primary); } body.platform-b2c .progress-fill--success { background-color: var(--b2c-success); } /* ======================================================================== Empty State — B2C (gentler messaging) ======================================================================== */ body.platform-b2c .empty-state { padding: var(--space-16) var(--space-6); } body.platform-b2c .empty-state-icon { opacity: 0.3; } body.platform-b2c .empty-state-title { font-family: var(--b2c-font-heading); font-size: var(--text-xl); } body.platform-b2c .empty-state-description { font-size: var(--text-base); line-height: var(--leading-relaxed); } /* ======================================================================== Notification / Alert — B2C Soft ======================================================================== */ body.platform-b2c .alert { border-radius: var(--radius-lg); border: none; box-shadow: 0 2px 6px rgba(61, 56, 51, 0.04); } body.platform-b2c .toast { border-radius: var(--radius-lg); border: none; box-shadow: 0 4px 16px rgba(61, 56, 51, 0.1); } /* ======================================================================== Candle Animation (for memorial pages) ======================================================================== */ @keyframes candleFlicker { 0%, 100% { opacity: 1; transform: scale(1); } 25% { opacity: 0.9; transform: scale(1.02); } 50% { opacity: 1; transform: scale(0.98); } 75% { opacity: 0.95; transform: scale(1.01); } } body.platform-b2c .candle-glow { animation: candleFlicker 3s ease-in-out infinite; color: var(--b2c-candle); } body.platform-b2c .candle-count { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--b2c-candle); text-align: center; text-shadow: 0 0 20px var(--b2c-candle-glow); } body.platform-b2c .candle-label { font-size: var(--text-sm); color: var(--b2c-text-muted); text-align: center; margin-top: var(--space-1); } /* ======================================================================== Background patterns (subtle) ======================================================================== */ body.platform-b2c .bg-pattern-dots { background-image: radial-gradient(var(--b2c-border-light) 1px, transparent 1px); background-size: 24px 24px; } body.platform-b2c .bg-gradient-warm { background: linear-gradient(180deg, var(--b2c-bg) 0%, var(--b2c-surface-alt) 100%); } /* ======================================================================== B2C Layout Shell — Header, Content, Tab Bar, More Drawer ======================================================================== */ .b2c-app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; max-width: 480px; margin: 0 auto; background-color: #FAF8F5; position: relative; } /* --- Header --- */ .b2c-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; background-color: #FFFFFF; border-bottom: 1px solid var(--b2c-border-light, #F0EBE3); min-height: 56px; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(61, 56, 51, 0.03); } .b2c-header__title { font-family: 'Source Serif 4', 'Georgia', serif; font-size: 18px; font-weight: 600; color: #3D3A36; flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; line-height: 1.3; } /* Back button */ .b2c-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; background: none; border: none; cursor: pointer; color: #3D3A36; border-radius: 50%; transition: background 0.2s ease; padding: 0; } .b2c-back:hover { background: rgba(61, 58, 54, 0.06); } .b2c-back--spacer { width: 36px; height: 36px; flex-shrink: 0; } /* Notification bell */ .b2c-notif { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; background: none; border: none; cursor: pointer; color: #3D3A36; border-radius: 50%; transition: background 0.2s ease; padding: 0; position: relative; } .b2c-notif:hover { background: rgba(61, 58, 54, 0.06); } .b2c-notif--spacer { width: 36px; height: 36px; flex-shrink: 0; } .b2c-notif__badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 10px; font-weight: 700; color: #FFFFFF; background-color: #C46A6A; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #FFFFFF; line-height: 1; } /* --- Main content area --- */ .b2c-content { flex: 1; padding: 16px; padding-bottom: calc(16px + 56px + env(safe-area-inset-bottom, 0)); overflow-y: auto; } /* --- Bottom tab bar --- */ .b2c-tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: stretch; justify-content: space-around; background-color: #FFFFFF; border-top: 1px solid var(--b2c-border-light, #F0EBE3); z-index: 100; padding-bottom: env(safe-area-inset-bottom, 0); height: calc(56px + env(safe-area-inset-bottom, 0)); max-width: 480px; margin: 0 auto; box-shadow: 0 -2px 8px rgba(61, 56, 51, 0.04); } .b2c-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; padding: 6px 2px; color: #8B8680; font-size: 10px; font-weight: 500; background: none; border: none; cursor: pointer; transition: color 0.2s ease; } .b2c-tabbar__item:hover { color: #C4956A; } .b2c-tabbar__item--active { color: #C4956A; font-weight: 600; } .b2c-tabbar__icon { width: 22px; height: 22px; flex-shrink: 0; } .b2c-tabbar__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* --- "More" drawer --- */ .b2c-more-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 200; } .b2c-more-drawer { position: fixed; bottom: 0; left: 0; right: 0; background: #FFFFFF; border-radius: 20px 20px 0 0; z-index: 201; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0)); max-height: 70vh; overflow-y: auto; box-shadow: 0 -4px 24px rgba(61, 56, 51, 0.12); } .b2c-more__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .b2c-more__title { font-family: 'Source Serif 4', 'Georgia', serif; font-size: 18px; font-weight: 600; color: #3D3A36; } .b2c-more__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; cursor: pointer; color: #8B8680; border-radius: 50%; transition: background 0.2s ease; } .b2c-more__close:hover { background: rgba(61, 58, 54, 0.06); } .b2c-more__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; } .b2c-more__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; text-decoration: none; color: #3D3A36; border-radius: 12px; transition: background 0.2s ease; } .b2c-more__item:hover { background: rgba(196, 149, 106, 0.06); } .b2c-more__icon { width: 24px; height: 24px; color: #C4956A; } .b2c-more__label { font-size: 11px; font-weight: 500; text-align: center; line-height: 1.2; }