/**
 * File: /shared/css/page-section.css
 * Purpose: Shared content-page container, headers, dividers, and outline buttons.
 *
 * Used by cart, checkout, receipt, contact, and similar storefront pages
 * that wrap content in `.container.page-section`.
 *
 * Brand-specific visual values are supplied through CSS custom properties.
 *
 * Dependencies:
 * - /shared/css/tokens.css
 * - /brand/{brand}/css/tokens.css
 *
 * This file must not contain:
 * - Hard-coded brand-specific colors
 * - Page-specific business logic styling
 */


/* ==========================================
   PAGE SECTION CONTAINER
   ========================================== */

.page-section {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;

    background-color: var(--color-surface);
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}


/* ==========================================
   SECTION HEADER
   ========================================== */

.section-header {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 1.75rem;
}

.section-header i {
    margin-left: 10px;
}


/* ==========================================
   DIVIDER
   ========================================== */

.divider {
    border: 0;
    border-top: 2px solid var(--brand-accent, var(--color-border));
    opacity: 0.8;
    margin: 1rem 0;
}


/* ==========================================
   OUTLINE BUTTON
   ========================================== */

.custom-outline-btn {
    border: 2px solid var(--brand-accent, var(--color-border));
    color: var(--color-text-secondary);
    background: transparent;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.custom-outline-btn:hover {
    background-color: var(--brand-accent, var(--color-border));
    color: var(--color-text);
}

.shopping-cart-header .keep-shopping {
    margin-right: 10px;
}


/* ==========================================
   PAGE ACTIONS
   ========================================== */

/*
 * Cart and checkout primary actions stay full-width on
 * smaller screens (Bootstrap .w-100) and match the product
 * card CTA width on desktop.
 */
.page-section button.checkout {
    display: block;
    width: 100%;
}

@media (min-width: 1025px) {
    .page-section button.checkout {
        width: 33.333% !important;
        max-width: 33.333%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ==========================================
   MAIN CONTAINER SPACING
   ========================================== */

main.container {
    margin-top: 40px;
    margin-bottom: 60px;
}


/* ==========================================
   SMALL DEVICES
   ========================================== */

@media (max-width: 576px) {
    .page-section {
        padding: 20px;
    }
}