/*
 * ph- component library. Self-sufficient rules (base + every state) for
 * each component — nothing here depends on Bootstrap's own base classes
 * existing, since the whole point is these can be used on pages that no
 * longer load Bootstrap at all. Pairs with ph-ui-kit.js for the
 * JS-driven components (modal/collapse/dropdown/popover/toast), which only
 * ever toggles a "show" class or aria attribute — all visual/motion state
 * lives here.
 */

/* =====================================================================
   Buttons
   ===================================================================== */
.ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ph-space-2);
    padding: 10px 20px;
    border-radius: var(--ph-radius-md);
    border: 1px solid transparent;
    font-family: var(--ph-font-sans);
    font-size: var(--ph-fs-base);
    font-weight: var(--ph-fw-semibold);
    line-height: var(--ph-lh-tight);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
    user-select: none;
}

.ph-btn:active { transform: translateY(1px); }
.ph-btn:disabled,
.ph-btn.disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.ph-btn-primary {
    background: var(--ph-color-primary-600);
    color: var(--ph-color-contrast);
}
.ph-btn-primary:hover  { background: var(--ph-color-primary-700); color: var(--ph-color-contrast); }
.ph-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ph-color-primary-200); }

.ph-btn-secondary {
    background: var(--ph-color-surface);
    border-color: var(--ph-color-primary-600);
    color: var(--ph-color-primary-600);
}
.ph-btn-secondary:hover { background: var(--ph-color-primary-50); }

.ph-btn-ghost {
    background: transparent;
    color: var(--ph-color-text);
}
.ph-btn-ghost:hover { background: var(--ph-gray-100); }

.ph-btn-danger {
    background: var(--ph-color-danger);
    color: var(--ph-color-contrast);
}
.ph-btn-danger:hover { filter: brightness(0.92); color: var(--ph-color-contrast); }

.ph-btn-whatsapp {
    background: var(--ph-color-whatsapp);
    color: var(--ph-color-contrast);
}
.ph-btn-whatsapp:hover { filter: brightness(0.95); color: var(--ph-color-contrast); }

.ph-btn-sm { padding: 6px 14px; font-size: var(--ph-fs-sm); border-radius: var(--ph-radius-sm); }
.ph-btn-lg { padding: 14px 28px; font-size: var(--ph-fs-md); }
.ph-btn-block { width: 100%; }
.ph-btn-pill { border-radius: var(--ph-radius-pill); }

/* =====================================================================
   Cards
   ===================================================================== */
.ph-card {
    background: var(--ph-color-surface);
    border: 1px solid var(--ph-color-border);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-sm);
    overflow: hidden;
}

.ph-card-hover {
    transition: transform .15s ease, box-shadow .15s ease;
}
.ph-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--ph-shadow-md);
}

.ph-card-img-top {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.ph-card-body {
    padding: var(--ph-space-5);
}

.ph-card-title {
    font-size: var(--ph-fs-lg);
    font-weight: var(--ph-fw-bold);
    color: var(--ph-color-text);
    margin: 0 0 var(--ph-space-2);
}

.ph-card-text {
    color: var(--ph-color-text-muted);
    line-height: var(--ph-lh-relaxed);
    margin: 0;
}

.ph-card-footer {
    padding: var(--ph-space-4) var(--ph-space-5);
    border-top: 1px solid var(--ph-color-border);
    background: var(--ph-gray-50);
}

.ph-card-header {
    padding: var(--ph-space-4) var(--ph-space-5);
    border-bottom: 1px solid var(--ph-color-border);
    font-weight: var(--ph-fw-semibold);
}

/* =====================================================================
   Forms
   ===================================================================== */
.ph-form-group { margin-bottom: var(--ph-space-4); }

.ph-form-label {
    display: block;
    font-size: var(--ph-fs-sm);
    font-weight: var(--ph-fw-semibold);
    color: var(--ph-color-text);
    margin-bottom: var(--ph-space-2);
}

.ph-form-control,
.ph-form-select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-family: var(--ph-font-sans);
    font-size: var(--ph-fs-base);
    color: var(--ph-color-text);
    background: var(--ph-color-surface);
    border: 1px solid var(--ph-color-border);
    border-radius: var(--ph-radius-md);
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ph-form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23708080' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.ph-form-control:focus,
.ph-form-select:focus {
    outline: none;
    border-color: var(--ph-color-primary-600);
    box-shadow: 0 0 0 3px var(--ph-color-primary-100);
}

.ph-form-control.is-invalid { border-color: var(--ph-color-danger); }
.ph-form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--ph-color-danger-bg); }
.ph-form-control.is-valid { border-color: var(--ph-color-success); }
.ph-form-control.is-valid:focus { box-shadow: 0 0 0 3px var(--ph-color-success-bg); }

.was-validated .ph-form-control:invalid,
.was-validated .ph-form-select:invalid {
    border-color: var(--ph-color-danger);
}
.was-validated .ph-form-control:invalid:focus,
.was-validated .ph-form-select:invalid:focus {
    box-shadow: 0 0 0 3px var(--ph-color-danger-bg);
}
.was-validated .ph-form-control:valid,
.was-validated .ph-form-select:valid {
    border-color: var(--ph-color-success);
}
.was-validated .ph-form-control:valid:focus,
.was-validated .ph-form-select:valid:focus {
    box-shadow: 0 0 0 3px var(--ph-color-success-bg);
}

.ph-form-feedback {
    display: block;
    font-size: var(--ph-fs-xs);
    margin-top: var(--ph-space-1);
    color: var(--ph-color-danger);
}
.ph-form-feedback-success { color: var(--ph-color-success); }

/* Custom radio / checkbox */
.ph-check {
    /* Block-level (not inline-flex) so consecutive .ph-check labels in a
       plain container stack one per row by default; pages that want them
       side-by-side (e.g. Address.cshtml's Home/Work/Other) wrap them in a
       .ph-d-flex container instead of relying on this being inline. */
    display: flex;
    align-items: center;
    gap: var(--ph-space-2);
    cursor: pointer;
    font-size: var(--ph-fs-sm);
    color: var(--ph-color-text);
}
.ph-check input[type="radio"],
.ph-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin: 0;
    border: 1.5px solid var(--ph-color-border);
    background: var(--ph-color-surface);
    cursor: pointer;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease;
}
.ph-check input[type="radio"] { border-radius: 50%; }
.ph-check input[type="checkbox"] { border-radius: var(--ph-radius-sm); }

.ph-check input[type="radio"]:checked,
.ph-check input[type="checkbox"]:checked {
    border-color: var(--ph-color-primary-600);
    background: var(--ph-color-primary-600);
}
.ph-check input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--ph-color-contrast);
}
.ph-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--ph-color-contrast);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ph-check input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ph-color-primary-100);
}
/* Label content (icon + text, e.g. payment options) is often a single <span>
   wrapper; flex it internally so an inline icon taller than the text line
   doesn't sit on the text's baseline (default inline img alignment), which
   pushes the text down/out of vertical center with the icon and the radio. */
.ph-check > span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ph-space-2);
}

/* =====================================================================
   Badges
   ===================================================================== */
.ph-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ph-radius-pill);
    font-size: var(--ph-fs-xs);
    font-weight: var(--ph-fw-semibold);
    background: var(--ph-gray-100);
    color: var(--ph-gray-700);
    line-height: var(--ph-lh-normal);
}
.ph-badge-primary { background: var(--ph-color-primary-50); color: var(--ph-color-primary-700); }
.ph-badge-success { background: var(--ph-color-success-bg); color: var(--ph-color-success); }
.ph-badge-danger  { background: var(--ph-color-danger-bg); color: var(--ph-color-danger); }
.ph-badge-warning { background: var(--ph-color-warning-bg); color: var(--ph-color-warning); }

/* =====================================================================
   Modal
   ===================================================================== */
.ph-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--ph-z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--ph-space-4);
    background: rgba(20, 24, 24, 0.55);
}
.ph-modal.show { display: flex; }

.ph-modal-dialog {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 2 * var(--ph-space-4));
    display: flex;
    flex-direction: column;
    background: var(--ph-color-surface);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-xl);
    transform: scale(.96) translateY(6px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}
.ph-modal.show .ph-modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.ph-modal-dialog-sm { max-width: 360px; }
.ph-modal-dialog-lg { max-width: 720px; }

.ph-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-4);
    padding: var(--ph-space-5);
    border-bottom: 1px solid var(--ph-color-border);
}
.ph-modal-title { font-size: var(--ph-fs-lg); font-weight: var(--ph-fw-bold); margin: 0; }
.ph-modal-close {
    border: 0;
    background: transparent;
    font-size: var(--ph-fs-xl);
    line-height: 1;
    color: var(--ph-color-text-muted);
    cursor: pointer;
    padding: 4px;
}
.ph-modal-close:hover { color: var(--ph-color-text); }

.ph-modal-body { padding: var(--ph-space-5); overflow-y: auto; }
.ph-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ph-space-3);
    padding: var(--ph-space-5);
    border-top: 1px solid var(--ph-color-border);
}

body.ph-modal-open { overflow: hidden; }

/* =====================================================================
   Dropdown
   ===================================================================== */
.ph-dropdown { position: relative; display: inline-block; }

.ph-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--ph-space-2);
    min-width: 200px;
    padding: var(--ph-space-2);
    background: var(--ph-color-surface);
    border-radius: var(--ph-radius-md);
    box-shadow: var(--ph-shadow-lg);
    z-index: var(--ph-z-dropdown);
}
.ph-dropdown-menu.show { display: block; }
.ph-dropdown-menu-end { left: auto; right: 0; }

.ph-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ph-space-2);
    padding: var(--ph-space-2) var(--ph-space-3);
    border-radius: var(--ph-radius-sm);
    font-size: var(--ph-fs-sm);
    color: var(--ph-color-text);
    text-decoration: none;
    cursor: pointer;
}
.ph-dropdown-item:hover { background: var(--ph-gray-100); }
.ph-dropdown-divider {
    height: 1px;
    margin: var(--ph-space-2) 0;
    background: var(--ph-color-border);
    border: 0;
}

/* =====================================================================
   Accordion / Collapse
   (grid-template-rows 0fr -> 1fr trick — animates open/close height
   without JS ever measuring scrollHeight)
   ===================================================================== */
.ph-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}
.ph-collapse.show { grid-template-rows: 1fr; }
.ph-collapse-inner { overflow: hidden; min-height: 0; }

.ph-accordion-item { border-bottom: 1px solid var(--ph-color-border); }
.ph-accordion-item:first-child { border-top: 1px solid var(--ph-color-border); }

.ph-accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-3);
    padding: var(--ph-space-4) var(--ph-space-2);
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--ph-font-sans);
    font-size: var(--ph-fs-base);
    font-weight: var(--ph-fw-semibold);
    color: var(--ph-color-text);
    cursor: pointer;
}
.ph-accordion-icon { transition: transform .2s ease; flex: 0 0 auto; color: var(--ph-color-text-muted); }
.ph-accordion-toggle[aria-expanded="true"] .ph-accordion-icon { transform: rotate(180deg); }
.ph-accordion-body { padding: 0 var(--ph-space-2) var(--ph-space-4); color: var(--ph-color-text-muted); }

/* =====================================================================
   Popover
   ===================================================================== */
.ph-popover {
    display: none;
    position: fixed;
    z-index: var(--ph-z-popover);
    max-width: 300px;
    padding: var(--ph-space-3) var(--ph-space-4);
    background: var(--ph-color-surface);
    border-radius: var(--ph-radius-md);
    box-shadow: var(--ph-shadow-lg);
    font-size: var(--ph-fs-sm);
    color: var(--ph-color-text);
}
.ph-popover.show { display: block; }
.ph-popover-title { font-weight: var(--ph-fw-bold); margin-bottom: var(--ph-space-1); }

/* =====================================================================
   Toast
   ===================================================================== */
.ph-toast-container {
    position: fixed;
    top: var(--ph-space-5);
    right: var(--ph-space-5);
    z-index: var(--ph-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--ph-space-3);
    max-width: calc(100vw - 2 * var(--ph-space-5));
}

.ph-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--ph-space-3);
    min-width: 260px;
    padding: var(--ph-space-4);
    background: var(--ph-gray-900);
    color: var(--ph-color-contrast);
    border-radius: var(--ph-radius-md);
    box-shadow: var(--ph-shadow-lg);
    border-left: 4px solid var(--ph-color-primary-500);
    font-size: var(--ph-fs-sm);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}
.ph-toast.show { opacity: 1; transform: translateY(0); }
.ph-toast-success { border-left-color: var(--ph-color-success); }
.ph-toast-danger  { border-left-color: var(--ph-color-danger); }
.ph-toast-warning { border-left-color: var(--ph-color-warning); }

/* =====================================================================
   Navbar / offcanvas mobile menu
   ===================================================================== */
.ph-navbar {
    display: flex;
    align-items: center;
    gap: var(--ph-space-4);
    height: 64px;
    padding: 0 var(--ph-space-5);
    background: var(--ph-color-primary-600);
    box-shadow: var(--ph-shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--ph-z-sticky);
}
.ph-navbar-brand { display: flex; align-items: center; }
.ph-navbar-brand img { max-height: 30px; display: block; }

.ph-navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--ph-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ph-nav-link {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-weight: var(--ph-fw-medium);
    font-size: var(--ph-fs-sm);
}
.ph-nav-link:hover { color: var(--ph-color-contrast); }

.ph-navbar-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.ph-navbar-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ph-color-contrast);
}

.ph-offcanvas {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    max-width: 85vw;
    background: var(--ph-color-surface);
    box-shadow: var(--ph-shadow-xl);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: var(--ph-z-overlay);
    overflow-y: auto;
}
.ph-offcanvas.show { transform: translateX(0); }

.ph-offcanvas-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 24, 0.5);
    z-index: calc(var(--ph-z-overlay) - 1);
}
.ph-offcanvas-backdrop.show { display: block; }

.ph-offcanvas-link {
    display: flex;
    align-items: center;
    gap: var(--ph-space-3);
    padding: var(--ph-space-3) var(--ph-space-5);
    color: var(--ph-color-text);
    text-decoration: none;
    font-size: var(--ph-fs-sm);
    border-bottom: 1px solid var(--ph-color-border);
}
.ph-offcanvas-link:hover { background: var(--ph-gray-50); }

/* =====================================================================
   Icon badge overlay (e.g. cart item count over a cart icon)
   ===================================================================== */
.ph-icon-badge-wrap {
    position: relative;
    display: inline-flex;
}
.touchspin-group {
    display: flex;
    flex-wrap: nowrap;
}
.touchspin-group button {
    flex: 0 0 auto;
}
.touchspin-group input {
    min-width: 0;
    text-align: center;
}

.ph-icon-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10px;
    background: var(--ph-color-accent);
    color: var(--ph-gray-900);
}

/* =====================================================================
   Site notice banner (dismissible strip under the navbar)
   ===================================================================== */
.ph-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-3);
    padding: var(--ph-space-3) var(--ph-space-4);
    background: var(--ph-color-accent);
    color: var(--ph-gray-900);
    font-size: var(--ph-fs-sm);
}
.ph-banner-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: var(--ph-fs-lg);
    line-height: 1;
    color: inherit;
    padding: 0 var(--ph-space-2);
}

/* =====================================================================
   Search box + live results (Views/Shared/Search.cshtml partial)
   ===================================================================== */
.ph-search-box {
    display: flex;
    gap: var(--ph-space-2);
    max-width: 640px;
    margin: 0 auto;
}
.ph-search-box .ph-form-control {
    flex: 1 1 auto;
}

.ph-search-results {
    border: 1px solid var(--ph-color-border);
    border-radius: var(--ph-radius-lg);
    overflow: hidden;
    background: var(--ph-color-surface);
}
.ph-search-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-3);
    padding: var(--ph-space-3) var(--ph-space-4);
    border-bottom: 1px solid var(--ph-color-border);
    cursor: pointer;
}
.ph-search-result-row:last-child { border-bottom: 0; }
.ph-search-result-row:hover { background: var(--ph-gray-50); }

/* =====================================================================
   Breadcrumb
   ===================================================================== */
.ph-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ph-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--ph-fs-sm);
    color: var(--ph-color-text-muted);
}
.ph-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: var(--ph-space-2);
    color: var(--ph-color-border);
}
.ph-breadcrumb a {
    color: var(--ph-color-text-muted);
    text-decoration: none;
}
.ph-breadcrumb a:hover { color: var(--ph-color-primary-600); }
.ph-breadcrumb li.active { color: var(--ph-color-text); font-weight: var(--ph-fw-medium); }

/* =====================================================================
   Steps (order-progress indicator - Order.cshtml, MyTransactions.cshtml).
   ".completed" is the literal class name both views already toggle via
   server-side ternaries / Knockout css-binding - kept as-is rather than
   renamed, ".ph-step" is the new structural/base class alongside it.
   ===================================================================== */
.ph-steps {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ph-step {
    flex: 1 1 0;
    position: relative;
    text-align: center;
    font-size: var(--ph-fs-xs);
    color: var(--ph-color-text-muted);
    padding-top: var(--ph-space-1);
}
.ph-step .bubble {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ph-gray-200);
    margin: 0 auto var(--ph-space-2);
    position: relative;
    z-index: 1;
}
.ph-step::before {
    content: "";
    position: absolute;
    top: 13px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--ph-gray-200);
    z-index: 0;
}
.ph-step:first-child::before { display: none; }
.ph-step.completed { color: var(--ph-color-primary-700); font-weight: var(--ph-fw-semibold); }
.ph-step.completed .bubble { background: var(--ph-color-primary-600); }
.ph-step.completed::before { background: var(--ph-color-primary-600); }

/* =====================================================================
   Table
   ===================================================================== */
.ph-table-responsive {
    overflow-x: auto;
}
.ph-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ph-fs-sm);
    /* Inherited (not set directly on th/td) so a single-class utility like
       .ph-text-end can still override it - a compound ".ph-table td" selector
       would out-specificity a plain ".ph-text-end" and always win regardless
       of which stylesheet loads later. */
    text-align: left;
}
.ph-table th,
.ph-table td {
    padding: var(--ph-space-3);
    border-bottom: 1px solid var(--ph-color-border);
}
.ph-table th {
    color: var(--ph-color-text-muted);
    font-weight: var(--ph-fw-semibold);
    background: var(--ph-gray-50);
}
.ph-table tbody tr:hover {
    background: var(--ph-gray-50);
}
.ph-table .ph-text-center,
.ph-table.ph-text-center th,
.ph-table.ph-text-center td {
    text-align: center;
}

/* =====================================================================
   Mobile sticky CTA — pins its content (typically a primary action button)
   to the bottom of the viewport on mobile, matching Product.cshtml's
   Buy Now/Checkout bar; blends back into normal in-flow layout at desktop
   width so it can live inline (e.g. in a sidebar) without any markup
   duplication between breakpoints.
   ===================================================================== */
.ph-mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--ph-z-sticky);
    background: var(--ph-color-surface);
    padding: var(--ph-space-3) var(--ph-space-4);
    box-shadow: 0 -1px 15px 0 rgba(0, 0, 0, 0.15);
}
@media (min-width: 900px) {
    .ph-mobile-sticky-cta {
        position: static;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }
}

/* =====================================================================
   Checkout steps (My Cart / Address / Payment breadcrumb)
   ===================================================================== */
.ph-checkout-steps {
    display: flex;
    gap: var(--ph-space-2);
    margin-bottom: var(--ph-space-4);
}
.ph-checkout-step {
    flex: 1;
    font-size: var(--ph-fs-sm);
    color: var(--ph-color-text-muted);
}
.ph-checkout-step a {
    color: inherit;
    text-decoration: none;
}
.ph-checkout-step-bar {
    height: 4px;
    border-radius: var(--ph-radius-pill);
    background: var(--ph-gray-200);
    margin-top: var(--ph-space-1);
}
.ph-checkout-step.active,
.ph-checkout-step.done {
    color: var(--ph-color-text);
}
.ph-checkout-step.active .ph-checkout-step-bar,
.ph-checkout-step.done .ph-checkout-step-bar {
    background: var(--ph-color-primary-600);
}

/* =====================================================================
   Pagination
   ===================================================================== */
.ph-pagination {
    display: flex;
    align-items: center;
    gap: var(--ph-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ph-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--ph-space-2);
    border-radius: var(--ph-radius-sm);
    border: 1px solid var(--ph-color-border);
    color: var(--ph-color-text);
    text-decoration: none;
    font-size: var(--ph-fs-sm);
}
.ph-page-link:hover { background: var(--ph-gray-100); }
.ph-page-item.active .ph-page-link {
    background: var(--ph-color-primary-600);
    border-color: var(--ph-color-primary-600);
    color: var(--ph-color-contrast);
}
.ph-page-item.disabled .ph-page-link {
    opacity: .5;
    pointer-events: none;
}