:root {
    --navy: var(--dark);
    --blue: var(--primary);
    --muted: var(--text-light);
}

/* PHP application screens layered on the supplied storefront design. */
.app-main { min-height: 60vh; }
.page-hero { background: var(--navy); color: #fff; padding: 80px 0 45px; }
.page-hero.compact { padding: 55px 0 35px; }
.page-hero h1 { margin: 12px 0; font-size: clamp(34px, 5vw, 58px); letter-spacing: -0.04em; }
.page-hero p { margin: 0; color: #bdc8d8; max-width: 640px; }
.page-hero a { color: #fff; text-decoration: underline; }
.flash {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    width: min(420px, calc(100vw - 48px));
    margin: 0;
    padding: 14px 18px;
    border-radius: 10px;
    font-weight: 600;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(12, 30, 54, .12);
    animation:
        quickfolksFlashIn .22s ease-out,
        quickfolksFlashOut .35s ease-in 2.65s forwards;
}
@keyframes quickfolksFlashIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes quickfolksFlashOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(10px); visibility: hidden; }
}

.flash-success { color: #075a3c; background: #dcfce7; border: 1px solid #86efac; }
.flash-error { color: #991b1b; background: #fee2e2; border: 1px solid #fca5a5; }
.page-hero + .section .flash { margin-top: 0; }
.catalog-section { padding-top: 54px; }
.catalog-filter, .add-to-cart-form, .button-row, .admin-actions { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.catalog-filter label { display: grid; gap: 7px; flex: 1 1 230px; font-weight: 700; font-size: 13px; color: var(--navy); }
.catalog-filter input, .catalog-filter select, .app-form input, .app-form select, .app-form textarea, .quantity-label input, .inline-update select, .inline-update input, .admin-table input { box-sizing: border-box; width: 100%; border: 1px solid #d6dce5; border-radius: 8px; background: #fff; padding: 12px; color: var(--navy); font: inherit; }
.catalog-filter .primary-button { min-height: 47px; border: 0; cursor: pointer; }
.catalog-filter .secondary-button { min-height: 47px; box-sizing: border-box; }
.results-summary { color: var(--muted); margin: 26px 0 18px; }
.catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-title-link { color: inherit; text-decoration: none; }
.product-title-link:hover { color: var(--blue); }
.product-placeholder { text-decoration: none; }
.product-description { color: var(--muted); font-size: 13px; line-height: 1.55; min-height: 60px; }
.wishlist-form { position: absolute; z-index: 2; top: 14px; right: 14px; }
.wishlist-button.is-active { color: #ef4444; }
.empty-state { text-align: center; padding: 60px 25px; background: #f7f9fc; border: 1px dashed #cad5e2; border-radius: 16px; }
.empty-state > i { display: block; margin-bottom: 18px; color: var(--blue); font-size: 38px; }
.empty-state h1, .empty-state h2 { margin: 0 0 10px; color: var(--navy); }
.empty-state p { color: var(--muted); margin: 0 0 22px; }
.compact-empty { padding: 34px 20px; text-align: left; }
.breadcrumb { color: var(--muted); font-size: 14px; margin: 0 0 25px; }
.breadcrumb a { color: var(--blue); text-decoration: none; }
.breadcrumb span { padding: 0 8px; }
.product-detail { padding-top: 70px; }
.product-detail-grid { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(0, 1fr); gap: clamp(30px, 7vw, 90px); align-items: center; }
.product-detail-visual { min-height: 360px; border-radius: 22px; font-size: 100px; display: flex; align-items: center; justify-content: center; }
.product-detail-info h1 { color: var(--navy); font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.04em; margin: 12px 0; }
.product-detail-info > p { color: var(--muted); line-height: 1.75; }
.product-detail-price { color: var(--navy) !important; font-size: 27px; font-weight: 800; }
.inline-badge { position: static; display: inline-block; margin: 0 0 14px; }
.stock-status { font-weight: 700; }
.stock-status.in-stock { color: #078657; }
.stock-status.out-of-stock { color: #b91c1c; }
.add-to-cart-form { margin-top: 26px; }
.add-to-cart-form label { display: grid; gap: 6px; font-weight: 700; font-size: 13px; }
.add-to-cart-form input { width: 90px; border: 1px solid #d6dce5; border-radius: 8px; padding: 10px; font: inherit; }
.add-to-cart-form .primary-button, .app-form .primary-button { border: 0; cursor: pointer; }
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, .8fr); gap: 28px; align-items: start; }
.cart-items, .order-summary, .auth-card, .app-form, .admin-product-form { background: #fff; border: 1px solid #e6ebf1; border-radius: 16px; box-shadow: 0 12px 36px rgba(12, 30, 54, .06); }
.cart-items { overflow: hidden; }
.cart-item {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 90px 100px 34px;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid #e8edf3;
    min-width: 0;
    overflow: hidden;
}
.cart-item-icon,
.cart-item-photo {
    width: 74px;
    min-width: 74px;
    max-width: 74px;
    height: 74px;
    min-height: 74px;
    max-height: 74px;
    border-radius: 10px;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cart-item-icon img,
.cart-item-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 7px;
    box-sizing: border-box;
}
.cart-item-info span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.cart-item-info h2 { font-size: 16px; margin: 4px 0; }
.cart-item-info a { color: var(--navy); text-decoration: none; }
.quantity-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.quantity-label input { margin-top: 5px; }
.cart-line-total { text-align: right; color: var(--navy); }
.remove-button { border: 0; color: #b91c1c; background: transparent; padding: 8px; cursor: pointer; }
.cart-items > .secondary-button { margin: 18px; border: 0; cursor: pointer; }
.order-summary { padding: 24px; }
.order-summary h2 { margin: 0 0 18px; color: var(--navy); font-size: 19px; }
.order-summary > div { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); padding: 10px 0; }
.order-summary strong { color: var(--navy); white-space: nowrap; }
.order-summary .summary-total { border-top: 1px solid #e4e9f0; margin-top: 7px; padding-top: 18px; color: var(--navy); font-size: 17px; font-weight: 800; }
.full-button { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
.summary-link { display: block; color: var(--blue); text-align: center; font-size: 14px; margin-top: 16px; text-decoration: none; }
.auth-section { display: grid; min-height: 80vh; place-items: center; padding: 80px 20px 60px; background: #f7f9fc; }
.auth-card { width: min(100%, 480px); padding: 34px; }
.auth-card.wide-card { width: min(100%, 600px); }
.auth-card h1 { color: var(--navy); margin: 10px 0; font-size: 38px; letter-spacing: -.04em; }
.auth-card > p { color: var(--muted); line-height: 1.6; }
.app-form { display: grid; gap: 17px; padding: 28px; }
.auth-card .app-form { box-shadow: none; border: 0; padding: 0; margin-top: 24px; }
.app-form label { display: grid; gap: 7px; color: var(--navy); font-size: 14px; font-weight: 700; }
.app-form textarea { resize: vertical; min-height: 90px; }
.app-form input:focus, .app-form select:focus, .app-form textarea:focus, .catalog-filter input:focus, .catalog-filter select:focus { border-color: var(--blue); outline: 2px solid rgba(0, 183, 255, .18); }
.form-errors { margin: 18px 0; padding: 12px 15px; border: 1px solid #fecaca; border-radius: 8px; color: #991b1b; background: #fff1f2; font-size: 14px; }
.form-errors ul { padding-left: 20px; margin: 0; }
.auth-switch { margin: 23px 0 0; font-size: 14px; text-align: center; }
.auth-switch a, .data-table a { color: var(--blue); font-weight: 700; text-decoration: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.full-field { grid-column: 1 / -1; }
.checkout-form h2 { color: var(--navy); margin: 0; }
.app-form fieldset { display: grid; gap: 10px; border: 1px solid #dce4ee; border-radius: 10px; padding: 16px; }
.app-form legend { padding: 0 5px; color: var(--navy); font-size: 14px; font-weight: 800; }
.radio-option, .checkbox-option { display: flex !important; align-items: center; gap: 8px; }
.radio-option input, .checkbox-option input { width: auto; }
.field-help { display: block; margin: 0; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.45; }
.summary-item { font-size: 13px; }
.narrow-container { max-width: 850px; }
.success-card { text-align: center; padding: 40px; margin-top: 120px; border: 1px solid #e4eaf1; border-radius: 18px; background: #fff; box-shadow: 0 14px 42px rgba(12,30,54,.08); }
.success-card h1 { color: var(--navy); font-size: 38px; margin: 12px 0; }
.success-card > p { color: var(--muted); }
.success-icon { color: #16a673; font-size: 48px; }
.order-details-list { max-width: 520px; margin: 28px auto; text-align: left; border-top: 1px solid #e7edf4; }
.order-details-list > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; color: var(--muted); }
.order-details-list strong { color: var(--navy); }
.tracking-result { margin-top: 25px; padding: 20px; background: #f4f8fc; border-radius: 12px; }
.tracking-result h2 { color: var(--navy); margin-top: 0; }
.tracking-result > div { display: flex; justify-content: space-between; gap: 20px; padding-top: 10px; color: var(--muted); }
.tracking-result strong { color: var(--navy); }
.status-pill { display: inline-block; border-radius: 20px; padding: 5px 10px; background: #edf2f7; color: #344054; font-size: 12px; font-weight: 800; }
.status-pending, .status-submitted { background: #fff7d6; color: #8a5b00; }
.status-confirmed, .status-approved, .status-processing, .status-printing { background: #dceeff; color: #075ea5; }
.status-shipped, .status-quoted { background: #eee7ff; color: #6341b5; }
.status-delivered, .status-completed { background: #dcfce7; color: #087443; }
.status-cancelled { background: #fee2e2; color: #b91c1c; }
.project-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-detail { color: var(--navy); }
.project-detail-image { height: 310px; margin-bottom: 34px; }
.project-detail h1 { font-size: clamp(34px, 5vw, 52px); margin: 10px 0; letter-spacing: -.04em; }
.project-lead { color: var(--muted); font-size: 19px; line-height: 1.65; }
.article-content { color: #475467; line-height: 1.8; margin: 26px 0 30px; }
.account-layout { display: grid; gap: 52px; }
.data-table-wrap { overflow-x: auto; border: 1px solid #e5ebf2; border-radius: 12px; background: #fff; }
.data-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 14px 16px; border-bottom: 1px solid #e9eef4; text-align: left; vertical-align: middle; }
.data-table th { color: var(--muted); background: #f8fafc; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table small { display: block; color: var(--muted); margin-top: 3px; }
.admin-actions { margin-bottom: 22px; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metric-card { padding: 22px; border-radius: 12px; color: #fff; background: var(--navy); }
.metric-card:nth-child(2) { background: #3a2e7e; }
.metric-card:nth-child(3) { background: #0d7461; }
.metric-card span { display: block; opacity: .8; font-size: 13px; }
.metric-card strong { display: block; margin-top: 8px; font-size: 31px; }
.dashboard-title { color: var(--navy); font-size: 24px; margin: 44px 0 16px; }
.dashboard-note { color: var(--muted); }
.inline-update select, .inline-update input, .admin-table input { min-width: 100px; padding: 8px; font-size: 13px; }
.table-save { border: 0; border-radius: 7px; color: #fff; background: var(--blue); padding: 8px 10px; cursor: pointer; font-weight: 700; }
.admin-products-layout { display: grid; grid-template-columns: minmax(330px, .75fr) minmax(0, 1.25fr); gap: 30px; align-items: start; }
.admin-products-layout h2 { color: var(--navy); margin: 0 0 18px; }
.admin-product-form .app-form { padding: 0; border: 0; box-shadow: none; }
.footer-signout { margin: 0; }
.footer-signout button { padding: 0; border: 0; color: inherit; background: none; cursor: pointer; font: inherit; }
@media (max-width: 900px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cart-layout, .checkout-layout, .admin-products-layout { grid-template-columns: 1fr; } .project-catalog { grid-template-columns: 1fr; } }
.flash {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
}
@media (max-width: 600px) {
.page-hero { padding-top: 120px; } .product-detail { padding-top: 115px; } .product-detail-grid, .form-grid { grid-template-columns: 1fr; } .cart-item { grid-template-columns: 55px 1fr 34px; gap: 10px; } .cart-item-icon, .cart-item-photo { width:55px; min-width:55px; max-width:55px; height:55px; min-height:55px; max-height:55px; } .quantity-label { grid-column: 2; } .cart-line-total { grid-column: 2; text-align: left; } .remove-button { grid-column: 3; grid-row: 1; } .catalog-grid { grid-template-columns: 1fr; } .metrics-grid { grid-template-columns: 1fr; } .auth-card, .success-card { padding: 25px; } .app-form { padding: 20px; } }


/* QuickFolks product photography */
.product-image-photo { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:#f7f9fc; text-decoration:none; overflow:hidden; }
.product-image-photo img { width:100%; height:100%; object-fit:contain; padding:18px; box-sizing:border-box; transition:transform .25s ease; }
.product-card:hover .product-image-photo img { transform:scale(1.04); }
.product-detail-photo { display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f7f9fc; border-radius:16px; min-height:430px; }
.product-detail-photo img { width:100%; height:100%; max-height:520px; object-fit:contain; padding:30px; box-sizing:border-box; }
/* Interactive admin workspace */
.admin-shell { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:calc(100vh - 80px); background:#f5f7fb; }
.admin-sidebar { display:flex; flex-direction:column; padding:28px 16px; background:#0b1b30; color:#fff; }
.admin-brand { display:flex; align-items:center; gap:10px; padding:5px 10px 30px; color:#fff; text-decoration:none; }
.admin-brand img { width:145px; height:auto; object-fit:contain; filter:brightness(0) invert(1); }
.admin-brand span { font-size:9px; letter-spacing:.14em; font-weight:800; color:#9fb0c7; }
.admin-nav { display:grid; gap:6px; }
.admin-nav a, .admin-logout button { display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; min-height:46px; padding:0 13px; border:0; border-radius:10px; color:#b9c7d8; background:transparent; text-decoration:none; font:inherit; font-weight:700; cursor:pointer; }
.admin-nav a i, .admin-logout i { width:20px; text-align:center; }
.admin-nav a:hover, .admin-nav a.is-active { color:#fff; background:rgba(255,255,255,.09); }
.admin-logout { margin-top:auto; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); }
.admin-logout button:hover { color:#fff; background:rgba(255,255,255,.07); }
.admin-content { min-width:0; padding:42px clamp(20px,4vw,54px) 60px; }
.admin-topbar, .admin-order-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:30px; }
.admin-topbar h1, .admin-order-heading h1 { margin:7px 0 6px; color:var(--navy); font-size:clamp(32px,4vw,48px); letter-spacing:-.04em; }
.admin-topbar p, .admin-order-heading p { margin:0; color:var(--muted); }
.admin-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.admin-metric { min-height:140px; padding:22px; box-sizing:border-box; border-radius:16px; background:#fff; border:1px solid #e5eaf1; color:var(--navy); text-decoration:none; box-shadow:0 10px 30px rgba(12,30,54,.04); transition:transform .18s ease,box-shadow .18s ease; }
.admin-metric:hover { transform:translateY(-2px); box-shadow:0 14px 35px rgba(12,30,54,.08); }
.admin-metric span { display:block; color:var(--muted); font-size:13px; font-weight:700; }
.admin-metric strong { display:block; margin:8px 0 13px; font-size:32px; letter-spacing:-.04em; }
.admin-metric small { color:var(--blue); font-weight:700; }
.admin-metric.metric-alert { border-color:#fde3a7; background:#fffdf5; }
.admin-metric.metric-stock { background:#f8fffc; }
.admin-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr); gap:20px; }
.admin-panel { min-width:0; padding:24px; border:1px solid #e3e8ef; border-radius:16px; background:#fff; box-shadow:0 10px 30px rgba(12,30,54,.04); }
.admin-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.admin-panel-head h2 { margin:5px 0 0; color:var(--navy); font-size:22px; }
.admin-count { color:var(--muted); font-size:13px; font-weight:700; }
.admin-order-list { display:grid; }
.admin-order-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto auto 18px; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #edf0f4; color:inherit; text-decoration:none; }
.admin-order-row:last-child { border-bottom:0; }
.admin-order-row:hover .admin-order-main strong { color:var(--blue); }
.admin-order-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:#eef7ff; color:var(--blue); }
.admin-order-main { min-width:0; }
.admin-order-main strong, .admin-order-main small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-order-main strong { color:var(--navy); }
.admin-order-main small { margin-top:4px; color:var(--muted); font-size:12px; }
.admin-order-total { color:var(--navy); font-weight:800; white-space:nowrap; }
.admin-empty { display:grid; place-items:center; text-align:center; min-height:180px; color:var(--muted); }
.admin-empty i { font-size:28px; color:#16a673; }
.admin-empty h3 { margin:10px 0 4px; color:var(--navy); }
.admin-empty p { margin:0; }
.low-stock-list { display:grid; }
.low-stock-row { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #edf0f4; color:inherit; text-decoration:none; }
.low-stock-row:last-child { border-bottom:0; }
.low-stock-row strong, .low-stock-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.low-stock-row strong { color:var(--navy); font-size:13px; }
.low-stock-row small { color:var(--muted); margin-top:3px; }
.low-stock-row b { color:#b45309; font-size:12px; white-space:nowrap; }
.admin-product-thumb { display:grid; place-items:center; width:46px; height:46px; border-radius:10px; background:#f5f7fa; overflow:hidden; color:#7a8ba1; }
.admin-product-thumb img { width:100%; height:100%; object-fit:contain; padding:5px; box-sizing:border-box; }
.admin-product-workspace { display:grid; grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr); gap:20px; align-items:start; }
.admin-editor { position:sticky; top:20px; }
.admin-editor-form { display:grid; gap:16px; }
.admin-editor-form label { display:grid; gap:7px; color:var(--navy); font-size:13px; font-weight:800; }
.admin-editor-form input, .admin-editor-form select, .admin-editor-form textarea { box-sizing:border-box; width:100%; border:1px solid #d7dee8; border-radius:9px; background:#fff; padding:12px 13px; color:var(--navy); font:inherit; }
.admin-editor-form input:focus, .admin-editor-form select:focus, .admin-editor-form textarea:focus { border-color:var(--blue); outline:2px solid rgba(0,183,255,.14); }
.admin-image-upload { display:grid; gap:10px; }
.admin-image-preview { display:grid; place-items:center; min-height:210px; border:1px dashed #cbd5e1; border-radius:13px; background:#f8fafc; overflow:hidden; color:#94a3b8; }
.admin-image-preview img { width:100%; height:210px; object-fit:contain; padding:12px; box-sizing:border-box; }
.admin-image-preview i { font-size:42px; }
.admin-image-preview span { margin-top:8px; font-size:12px; }
.upload-button { display:flex !important; flex-direction:row; align-items:center; justify-content:center; min-height:46px; border:1px solid #d7dee8; border-radius:9px; background:#fff; color:var(--navy) !important; cursor:pointer; }
.upload-button:hover { border-color:var(--blue); color:var(--blue) !important; }
.upload-button input { display:none; }
.admin-image-upload p { margin:0; color:var(--muted); font-size:11px; font-weight:500; line-height:1.5; }
.admin-switch-row { display:flex; flex-wrap:wrap; gap:16px; }
.admin-switch { display:flex !important; grid-template-columns:none !important; align-items:center; gap:9px !important; cursor:pointer; }
.admin-switch input { position:absolute; opacity:0; width:1px !important; height:1px; }
.admin-switch span { width:42px; height:24px; border-radius:99px; background:#cbd5e1; position:relative; transition:.2s; }
.admin-switch span:after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.admin-switch input:checked + span { background:var(--blue); }
.admin-switch input:checked + span:after { transform:translateX(18px); }
.admin-form-actions, .admin-card-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.admin-product-search { display:flex; gap:10px; margin-bottom:18px; }
.admin-product-search input { flex:1; min-width:0; border:1px solid #d7dee8; border-radius:9px; padding:11px 13px; font:inherit; }
.admin-product-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.admin-product-card { display:grid; grid-template-columns:105px minmax(0,1fr); gap:14px; padding:12px; border:1px solid #e6ebf1; border-radius:13px; background:#fff; }
.admin-product-card[hidden] { display:none; }
.admin-product-card-image { display:grid; place-items:center; width:105px; height:105px; border-radius:10px; overflow:hidden; background:#f6f8fb; color:#7d8da2; }
.admin-product-card-image img { width:100%; height:100%; object-fit:contain; padding:7px; box-sizing:border-box; }
.admin-product-card-body { min-width:0; display:flex; flex-direction:column; }
.admin-product-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.admin-product-card h3 { margin:7px 0 10px; color:var(--navy); font-size:15px; line-height:1.35; }
.admin-product-meta { display:flex; justify-content:space-between; gap:8px; margin-bottom:auto; color:var(--muted); font-size:12px; }
.admin-product-meta strong { color:var(--navy); font-size:14px; }
.admin-card-actions { margin-top:14px; }
.admin-card-actions .secondary-button { min-height:34px; padding:7px 10px; font-size:12px; }
.danger-button { width:36px; height:36px; border:1px solid #fecaca; border-radius:8px; background:#fff5f5; color:#b91c1c; cursor:pointer; }
.danger-button:hover { background:#fee2e2; }
.admin-no-results { margin:20px 0 0; text-align:center; color:var(--muted); }
.admin-order-toolbar { margin-bottom:20px; }
.admin-search-form { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.admin-search-form input, .admin-search-form select { min-height:45px; box-sizing:border-box; border:1px solid #d7dee8; border-radius:9px; background:#fff; padding:10px 12px; font:inherit; }
.admin-search-form input { flex:1 1 280px; }
.admin-search-form i { margin-right:-38px; z-index:1; color:#94a3b8; padding-left:13px; }
.admin-search-form input { padding-left:38px; }
.orders-table-wrap { overflow-x:auto; }
.admin-orders-table { width:100%; min-width:900px; border-collapse:collapse; }
.admin-orders-table th, .admin-orders-table td { padding:15px 12px; border-bottom:1px solid #edf0f4; text-align:left; vertical-align:middle; }
.admin-orders-table th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.admin-orders-table td small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.order-number-link { color:var(--navy); font-weight:800; text-decoration:none; }
.order-number-link:hover { color:var(--blue); }
.admin-view-button { width:36px; height:36px; padding:0; justify-content:center; background:#f6f8fb; }
.admin-detail-top { display:flex; justify-content:space-between; gap:20px; margin-bottom:25px; }
.admin-detail-date { margin-left:10px; color:var(--muted); font-size:12px; }
.order-status-editor { display:flex; align-items:end; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.order-status-editor label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:800; }
.order-status-editor select { min-height:43px; border:1px solid #d7dee8; border-radius:9px; padding:10px; background:#fff; font:inherit; color:var(--navy); }
.admin-order-detail-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:20px; }
.order-item-list { display:grid; }
.order-item-row { display:grid; grid-template-columns:50px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #edf0f4; }
.order-item-row:last-child { border-bottom:0; }
.order-item-row strong, .order-item-row small { display:block; }
.order-item-row small { color:var(--muted); margin-top:4px; }
.order-item-row b { color:var(--navy); white-space:nowrap; }
.order-totals { margin-top:12px; border-top:1px solid #e7ebf1; }
.order-totals div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; color:var(--muted); }
.order-totals strong { color:var(--navy); }
.order-totals .total { margin-top:5px; padding-top:16px; border-top:1px solid #e7ebf1; font-size:18px; font-weight:800; color:var(--navy); }
.customer-details { display:grid; gap:10px; color:var(--muted); font-size:14px; line-height:1.6; }
.customer-details > strong { color:var(--navy); font-size:17px; }
.customer-details a { color:var(--blue); text-decoration:none; }
.customer-details p { margin:4px 0; }
.payment-info { display:flex; justify-content:space-between; gap:12px; padding-top:15px; margin-top:5px; border-top:1px solid #e7ebf1; }
.payment-info strong { color:var(--navy); }
.admin-login-section { display:grid; place-items:center; min-height:calc(100vh - 170px); padding:50px 20px; background:#f5f7fb; }
.admin-login-card { width:min(100%,500px); padding:38px; box-sizing:border-box; border:1px solid #e1e7ef; border-radius:20px; background:#fff; box-shadow:0 18px 55px rgba(12,30,54,.09); text-align:center; }
.admin-login-mark { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 20px; border-radius:16px; background:#eaf6ff; color:var(--blue); font-size:23px; }
.admin-login-card h1 { margin:9px 0; color:var(--navy); font-size:40px; letter-spacing:-.04em; }
.admin-login-card > p { color:var(--muted); line-height:1.6; margin-bottom:24px; }
.admin-login-card .app-form { text-align:left; box-shadow:none; border:0; padding:0; }
.admin-back-link { display:inline-block; margin-top:20px; color:var(--muted); text-decoration:none; font-size:13px; font-weight:700; }
.admin-back-link:hover { color:var(--blue); }
@media (max-width:1100px) { .admin-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.admin-dashboard-grid,.admin-order-detail-grid{grid-template-columns:1fr}.admin-product-workspace{grid-template-columns:1fr}.admin-editor{position:static}.admin-product-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:800px) { .admin-shell{grid-template-columns:1fr}.admin-sidebar{padding:12px 14px;position:relative}.admin-brand{padding:5px 8px 12px}.admin-brand img{width:130px}.admin-nav{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-nav a{justify-content:center;min-height:44px;padding:0 8px;font-size:11px}.admin-nav a i{width:auto}.admin-nav a:not(.is-active){}.admin-logout{position:absolute;right:14px;top:10px;margin:0;padding:0;border:0}.admin-logout button{font-size:0;width:42px;justify-content:center;padding:0}.admin-logout i{font-size:16px}.admin-content{padding:30px 18px 45px}.admin-topbar,.admin-order-heading{align-items:flex-start;flex-direction:column}.admin-order-heading .order-status-editor{width:100%;justify-content:flex-start}.admin-product-cards{grid-template-columns:1fr;} }
@media (max-width:600px) { .admin-metric-grid{grid-template-columns:1fr}.admin-panel{padding:18px}.admin-search-form{display:grid;grid-template-columns:1fr}.admin-search-form input,.admin-search-form select,.admin-search-form .primary-button,.admin-search-form .secondary-button{width:100%}.admin-product-card{grid-template-columns:82px minmax(0,1fr)}.admin-product-card-image{width:82px;height:82px}.admin-image-preview,.admin-image-preview img{min-height:180px;height:180px}.admin-login-card{padding:28px 20px}.admin-nav{grid-template-columns:repeat(4,1fr)}.admin-nav a{font-size:0}.admin-nav a i{font-size:16px}.admin-order-row{grid-template-columns:38px minmax(0,1fr) auto 16px}.admin-order-row .status-pill{display:none}.admin-order-icon{width:38px;height:38px}.admin-detail-top{flex-direction:column}.order-status-editor{display:grid;grid-template-columns:1fr 1fr}.order-status-editor .primary-button{grid-column:1/-1}.product-detail-photo{min-height:300px}.product-detail-photo img{padding:20px;} }
/* About / services */
.about-intro { padding-bottom: 20px; }
.about-copy { max-width: 820px; }
.about-copy h2, .about-values h2 { color: var(--navy); font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.04em; margin: 12px 0 16px; }
.about-copy p { color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 760px; }
.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.service-card { padding:30px; border:1px solid #e4eaf1; border-radius:20px; background:#fff; box-shadow:0 14px 42px rgba(12,30,54,.06); display:flex; flex-direction:column; align-items:flex-start; }
.service-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:15px; margin-bottom:24px; font-size:23px; }
.service-components .service-icon { background:#e8f3ff; color:#208ce8; } .service-printing .service-icon { background:#fff1e5; color:#e87522; } .service-projects .service-icon { background:#f0e9ff; color:#7b3fe4; } .service-stem .service-icon { background:#e3f8f1; color:#14966f; }
.service-card h2 { color:var(--navy); margin:9px 0 12px; font-size:27px; letter-spacing:-.03em; }
.service-card p { color:var(--muted); line-height:1.7; margin:0 0 24px; }
.service-card .primary-button { margin-top:auto; }
.service-grid > .service-stem { grid-column: 1 / -1; justify-self: center; width: calc((100% - 44px) / 3); box-sizing: border-box; }
.about-values { background:#f7f9fc; }
.about-values-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }
.value-list { display:grid; gap:24px; }
.value-list > div { display:grid; grid-template-columns:42px 1fr; gap:15px; align-items:start; }
.value-list i { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff; color:var(--blue); border:1px solid #e4eaf1; }
.value-list h3 { color:var(--navy); margin:0 0 5px; font-size:17px; } .value-list p { color:var(--muted); margin:0; line-height:1.6; }
.enquiry-section { padding-top:45px; }
.enquiry-heading { margin-bottom:25px; }
.enquiry-heading h2 { color:var(--navy); font-size:clamp(28px,4vw,42px); letter-spacing:-.04em; margin:10px 0; }
.enquiry-heading p { color:var(--muted); margin:0; }
.enquiry-form { box-shadow:0 16px 50px rgba(12,30,54,.08); }
.enquiry-form > .primary-button { justify-self:start; }
/* Admin enquiries */
.admin-metric.metric-enquiry { background:linear-gradient(135deg,#132c4a,#245e8f); }
.enquiry-details { min-width:150px; }
.enquiry-details summary { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 10px; border-radius:8px; background:#f6f8fb; color:var(--navy); font-size:12px; font-weight:800; cursor:pointer; list-style:none; }
.enquiry-details summary::-webkit-details-marker { display:none; }
.enquiry-details[open] summary { background:#eaf3fb; color:var(--blue); }
.enquiry-detail-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(180px,.7fr); gap:25px; margin:18px 0; padding:18px; border-radius:12px; background:#f7f9fc; }
.enquiry-detail-grid p { margin:5px 0 14px; color:var(--muted); line-height:1.65; }
.detail-label { display:block; color:var(--navy); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.enquiry-status-form { display:flex; align-items:center; gap:8px; margin-top:12px; }
.enquiry-status-form select { min-height:38px; border:1px solid #d7dee8; border-radius:8px; background:#fff; padding:7px 9px; font:inherit; font-size:12px; }
.enquiry-status-form .primary-button { min-height:38px; padding:7px 11px; font-size:12px; }
@media (max-width: 900px) { .service-stem { grid-column:auto; width:auto; } .service-grid,.about-values-grid { grid-template-columns:1fr; } .about-values-grid { gap:35px; } .enquiry-detail-grid { grid-template-columns:1fr; } }
@media (max-width: 600px) { .service-card { padding:24px; } .enquiry-status-form { flex-wrap:wrap; } }
.footer-grid-contact {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
}

@media (max-width: 900px) {
    .footer-grid-contact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .footer-grid-contact {
        grid-template-columns: 1fr;
    }
}

/* Prevent fixed navbar from covering page content */
/* Desktop spacing below fixed navbar */
.app-main {
    padding-top: 100px;
}

/* Mobile navbar is relative, so no extra top padding is needed */
@media screen and (max-width: 768px) {
    .app-main {
        padding-top: 0 !important;
    }

    .page-hero {
        padding-top: 28px !important;
    }
}

/* Keep compact page hero spacing balanced */
.page-hero.compact {
    padding-top: 30px;
}
/* Print request payment button */
.data-table td:last-child .primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    padding: 11px 18px;
    background: #1683e8;
    color: #ffffff !important;

    border: none;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    box-shadow: 0 4px 12px rgba(22, 131, 232, 0.16);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.data-table td:last-child .primary-button:hover {
    background: #0f73d1;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 131, 232, 0.24);
}

/* =========================================================
   HOMEPAGE CIRCUIT HERO
   CLEAN CARD LAYOUT
   ========================================================= */

.hero-visual {
    position: relative;
    width: 100%;
    min-height: 540px;
    height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* =========================================================
   CIRCUIT BOARD
   ========================================================= */

.circuit-board {
    position: absolute;
    width: 68%;
    height: 78%;
    min-width: 360px;
    min-height: 360px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) rotate(-5deg);

    background: linear-gradient(
        135deg,
        #12345c 0%,
        #0e2949 55%,
        #102b4b 100%
    );

    border: 1px solid rgba(77, 157, 244, 0.28);
    border-radius: 70px;

    box-shadow:
        0 0 45px rgba(20, 102, 180, 0.16),
        inset 0 0 60px rgba(20, 90, 160, 0.12);

    overflow: hidden;
    z-index: 1;
}

/* Subtle board glow */

.circuit-glow {
    position: absolute;
    inset: 15%;

    background: radial-gradient(
        circle,
        rgba(47, 130, 220, 0.18),
        transparent 68%
    );

    filter: blur(20px);
    pointer-events: none;
}

/* =========================================================
   CENTRAL QUICKFOLKS LOGO
   ========================================================= */

.chip {
    position: absolute;

    width: 48%;
    height: 48%;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%) rotate(5deg);

    border: 4px solid #3275b7;
    border-radius: 40px;

    background: rgba(6, 25, 45, 0.38);

    box-shadow:
        0 0 0 14px rgba(39, 111, 185, 0.05),
        0 0 35px rgba(39, 111, 185, 0.18);

    z-index: 3;
}

/* Inner chip border */

.chip::before {
    content: "";

    position: absolute;
    inset: 22px;

    border: 1px dashed rgba(71, 147, 221, 0.32);
    border-radius: 24px;
}

/* Logo */

.chip-logo {
    position: absolute;

    width: 72%;
    max-width: 180px;
    height: auto;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    object-fit: contain;
    z-index: 2;
}

/* =========================================================
   FLOATING CARDS
   ========================================================= */

.floating-card {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 18px;

    width: 260px;
    min-height: 105px;

    padding: 20px 22px;

    background: rgba(18, 42, 68, 0.98);

    border: 1px solid rgba(119, 168, 216, 0.24);
    border-radius: 24px;

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    backdrop-filter: blur(12px);

    z-index: 5;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.floating-card strong {
    display: block;

    color: #ffffff;

    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;

    white-space: nowrap;
}

.floating-card span {
    display: block;

    margin-top: 7px;

    color: #8da4bf;

    font-size: 0.88rem;
    font-weight: 500;
}

/* =========================================================
   CARD ICONS
   ========================================================= */

.floating-icon {
    width: 70px;
    height: 70px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    font-size: 1.7rem;
}

.floating-icon.blue {
    color: #65a9ff;
    background: rgba(21, 87, 147, 0.58);
}

.floating-icon.purple {
    color: #b88cff;
    background: rgba(102, 58, 153, 0.35);
}

.floating-icon.orange {
    color: #ff9d4d;
    background: rgba(145, 85, 39, 0.32);
}

.floating-icon.green {
    color: #62d69b;
    background: rgba(31, 122, 85, 0.30);
}

.floating-icon.red {
    color: #ff7f87;
    background: rgba(142, 52, 64, 0.30);
}

/* =========================================================
   FINAL CARD POSITIONS
   ========================================================= */

/*
   Layout:

   Electronics          Projects


   Competitions      QUICKFOLKS LOGO


   STEM Workshops       3D Printing
*/

/* Electronics — upper left */

.hero-visual .card-one {
    top: 2%;
    left: -2%;
}

/* Projects — upper right */

.hero-visual .card-four {
    top: 19%;
    right: -3%;
}

/* Competitions — left middle */

.hero-visual .card-five {
    top: 52%;
    left: -7%;

    transform: translateY(-50%);
    z-index: 6;
}

/* STEM Workshops — lower left */

.hero-visual .card-three {
    bottom: 1%;
    left: -2%;
}

/* 3D Printing — lower right */

.hero-visual .card-two {
    bottom: 1%;
    right: -3%;
}

/* =========================================================
   HOVER EFFECT
   ========================================================= */

.floating-card:hover {
    border-color: rgba(91, 164, 235, 0.5);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(42, 122, 210, 0.12);

    transform: translateY(-5px);
}

/* Preserve competitions position on hover */

.hero-visual .card-five:hover {
    transform: translateY(calc(-50% - 5px));
}

/* =========================================================
   REMOVE CIRCUIT WIRES AND DOTS
   ========================================================= */

.circuit-line,
.circuit-node {
    display: none !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .hero-visual {
        min-height: 500px;
        height: 500px;
    }

    .circuit-board {
        width: 68%;
        height: 76%;
    }

    .floating-card {
        width: 220px;
        min-height: 90px;
        padding: 15px 17px;
        gap: 13px;
    }

    .floating-card strong {
        font-size: 0.92rem;
    }

    .floating-card span {
        font-size: 0.76rem;
    }

    .floating-icon {
        width: 58px;
        height: 58px;
        border-radius: 16px;
        font-size: 1.4rem;
    }

    .chip {
        width: 48%;
        height: 48%;
    }

    .chip-logo {
        width: 72%;
        max-width: 150px;
    }

    /* Electronics */

    .hero-visual .card-one {
        top: 15%;
        left: -7%;
    }

    /* Projects */

    .hero-visual .card-four {
        top: 20%;
        right: -25%;
    }

    /* Competitions */

    .hero-visual .card-five {
        top: 50%;
        left: -20%;
    }

    /* STEM */

    .hero-visual .card-three {
        bottom: 15%;
        left: -15%;
    }

    /* 3D Printing */

    .hero-visual .card-two {
        bottom: 13%;
        right: -15%;
    }
}

/* =========================================================
   LARGER MOBILE FLOATING CARDS
   ========================================================= */

@media (max-width: 768px) {

    .floating-card {
        width: 210px;
        min-width: 210px;
        max-width: 210px;

        height: 92px;
        min-height: 92px;

        padding: 15px 17px;
        gap: 12px;

        border-radius: 20px;
    }

    .floating-card strong {
        font-size: 0.86rem;
        line-height: 1.25;
    }

    .floating-card span {
        margin-top: 6px;
        font-size: 0.68rem;
        line-height: 1.3;
    }

    .floating-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;

        border-radius: 13px;
        font-size: 1.2rem;
    }
}

/* =========================================================
   USER AVATAR / ACCOUNT BUTTON
   ========================================================= */

.user-avatar {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;
    background: #6366f1;
    color: #ffffff;

    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;

    border: 2px solid rgba(255, 255, 255, 0.15);

    cursor: pointer;
    transition: all 0.25s ease;
}

.user-avatar:hover {
    background: #818cf8;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}


/* =========================================================
   DESKTOP NAVBAR ACCOUNT POSITION
   ========================================================= */

.nav-actions .user-avatar {
    margin-left: 4px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {
    .user-avatar {
        width: 38px;
        height: 38px;

        font-size: 0.74rem;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
    .user-avatar {
        width: 36px;
        height: 36px;

        font-size: 0.7rem;
    }
}
/* =========================================================
   USER AVATAR / LOGIN BUTTON
   ========================================================= */

.nav-actions .user-avatar,
.nav-actions .login-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;

    box-sizing: border-box;

    border-radius: 50% !important;

    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    color: #ffffff !important;

    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;

    text-decoration: none !important;
    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;

    cursor: pointer;
    visibility: visible !important;
    opacity: 1 !important;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.nav-actions .user-avatar:hover,
.nav-actions .login-button:hover {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}


/* =========================================================
   LOGGED-OUT LOGIN BUTTON
   Shows a user icon instead of plain Login text
   ========================================================= */

.nav-actions .login-button {
    font-size: 0 !important;
}

.nav-actions .login-button::before {
    content: "\f007";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 15px;
}


/* =========================================================
   NAV ACTIONS
   ========================================================= */

.nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;
    flex-shrink: 0;
}

.nav-actions > * {
    flex-shrink: 0;
}


/* =========================================================
   REMOVE WHITE GAP BELOW NAVBAR
   ========================================================= */

.navbar {
    margin-bottom: 0 !important;
}

.app-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
   MOBILE NAVIGATION MENU
   ========================================================= */

@media (max-width: 768px) {

    .navbar {
        margin-bottom: 0 !important;
    }

    .app-main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .mobile-nav {
        display: none !important;

        width: 100%;
        box-sizing: border-box;

        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        padding: 12px 20px 20px !important;

        background: #16263a !important;

        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: none;

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);

        position: relative;
        z-index: 1000;
    }

    .mobile-nav.open {
        display: flex !important;
        flex-direction: column !important;
    }

    .mobile-nav-link {
        display: flex !important;
        align-items: center;

        width: 100%;
        box-sizing: border-box;

        min-height: 54px;
        padding: 15px 4px !important;

        background: transparent !important;

        color: #dbe7f5 !important;

        font-size: 1rem;
        font-weight: 600;
        line-height: 1.3;

        text-decoration: none !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .mobile-nav-link:hover,
    .mobile-nav-link:active {
        color: #38bdf8 !important;
        background: rgba(255, 255, 255, 0.04) !important;
    }

    .mobile-nav-link:last-of-type {
        border-bottom: none;
    }

    .mobile-nav .user-avatar,
    .mobile-nav .login-button {
        display: inline-flex !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin-top: 14px;
        align-self: flex-start;
    }

    .mobile-nav .login-button {
        font-size: 0 !important;
    }

    .mobile-nav .login-button::before {
        content: "\f007";

        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 15px;
    }
}


/* =========================================================
   MOBILE HEADER USER AVATAR
   ========================================================= */

@media (max-width: 768px) {

    .nav-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 10px;
        flex-shrink: 0;
    }

    .nav-actions .user-avatar,
    .nav-actions .login-button {
        display: inline-flex !important;

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        flex: 0 0 38px !important;

        font-size: 11px;
    }

    .nav-actions .login-button {
        font-size: 0 !important;
    }

    .nav-actions .login-button::before {
        font-size: 14px;
    }

    .mobile-menu-button {
        flex-shrink: 0;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .nav-actions {
        gap: 7px;
    }

    .nav-actions .user-avatar,
    .nav-actions .login-button {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;

        flex: 0 0 34px !important;

        font-size: 10px;
    }

    .nav-actions .login-button::before {
        font-size: 13px;
    }

    .mobile-nav {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .mobile-nav-link {
        min-height: 50px;
        padding: 13px 2px !important;
        font-size: 0.95rem;
    }

    .mobile-nav .user-avatar,
    .mobile-nav .login-button {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;
    }
}

/* =========================================================
   STEM WORKSHOPS SECTION
   ========================================================= */

.stem-section {
    position: relative;
    overflow: hidden;
    background: #f7faff;
}

.stem-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 80px;
}

.stem-content {
    max-width: 620px;
}

.stem-content h2 {
    margin: 14px 0 22px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.12;
    color: #142033;
}

.stem-content h2 span {
    display: block;
    color: #2563eb;
}

.stem-intro {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 15px;
}

.stem-content > p:not(.stem-intro) {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 28px;
}


/* Features */

.stem-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-bottom: 34px;
}

.stem-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.stem-feature-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    font-size: 1rem;
}

.stem-feature-icon.blue {
    background: #dbeafe;
    color: #2563eb;
}

.stem-feature-icon.purple {
    background: #ede9fe;
    color: #7c3aed;
}

.stem-feature-icon.orange {
    background: #ffedd5;
    color: #ea580c;
}

.stem-feature-icon.green {
    background: #dcfce7;
    color: #16a34a;
}

.stem-feature h3 {
    margin: 2px 0 6px;
    font-size: 0.95rem;
    color: #172033;
}

.stem-feature p {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.55;
}


/* Enquire Button */

.stem-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}


/* =========================================================
   STEM VISUAL
   ========================================================= */

.stem-visual {
    position: relative;
    min-height: 470px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.stem-card-main {
    position: relative;
    z-index: 2;

    width: min(100%, 380px);
    padding: 42px 34px;

    border-radius: 28px;

    background: linear-gradient(145deg, #172b43, #0b1b2d);
    color: #ffffff;

    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stem-card-main::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(rgba(56, 189, 248, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.06) 1px, transparent 1px);

    background-size: 32px 32px;
}

.stem-card-icon {
    position: relative;

    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 24px;

    border-radius: 18px;

    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;

    font-size: 1.7rem;
}

.stem-card-main h3 {
    position: relative;

    margin: 0 0 15px;
    font-size: 1.6rem;
    line-height: 1.25;
}

.stem-card-main p {
    position: relative;

    margin: 0;
    color: #a9bdd3;
    line-height: 1.7;
}

.stem-stats {
    position: relative;

    display: flex;
    gap: 35px;

    margin-top: 30px;
    padding-top: 24px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.stem-stats div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stem-stats strong {
    font-size: 1.5rem;
    color: #38bdf8;
}

.stem-stats span {
    font-size: 0.75rem;
    color: #94a3b8;
}


/* Floating Cards */

.stem-floating-card {
    position: absolute;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 17px;

    border-radius: 14px;

    background: #ffffff;
    color: #172033;

    font-size: 0.82rem;
    font-weight: 700;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    border: 1px solid #e5e7eb;
}

.stem-floating-card i {
    font-size: 1rem;
}

.stem-float-one {
    top: 35px;
    left: 5px;
    color: #2563eb;
}

.stem-float-two {
    top: 145px;
    right: 0;
    color: #7c3aed;
}

.stem-float-three {
    bottom: 45px;
    left: 30px;
    color: #ea580c;
}


/* Decorative Orbit */

.stem-orbit {
    position: absolute;

    width: 430px;
    height: 430px;

    border: 1px dashed rgba(37, 99, 235, 0.18);
    border-radius: 50%;

    transform: rotate(-20deg);
}


/* =========================================================
   STEM HIGHLIGHTS
   ========================================================= */

.stem-highlight {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    margin-top: 70px;
    padding: 28px;

    border-radius: 20px;

    background: #ffffff;
    border: 1px solid #e5eaf2;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.stem-highlight > div {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 13px;
    align-items: center;
}

.stem-highlight i {
    grid-row: span 2;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eff6ff;
    color: #2563eb;
}

.stem-highlight strong {
    font-size: 0.9rem;
    color: #172033;
}

.stem-highlight span {
    font-size: 0.76rem;
    line-height: 1.5;
    color: #64748b;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .stem-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .stem-content {
        max-width: none;
    }

    .stem-visual {
        min-height: 430px;
    }

    .stem-highlight {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


@media (max-width: 768px) {

    .stem-section {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .stem-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stem-content h2 {
        font-size: 2.2rem;
    }

    .stem-intro {
        font-size: 1rem;
    }

    .stem-visual {
        min-height: 390px;
    }

    .stem-card-main {
        width: min(100%, 340px);
        padding: 32px 25px;
    }

    .stem-card-main h3 {
        font-size: 1.35rem;
    }

    .stem-floating-card {
        font-size: 0.72rem;
        padding: 10px 12px;
    }

    .stem-float-one {
        top: 10px;
        left: 0;
    }

    .stem-float-two {
        top: 120px;
        right: 0;
    }

    .stem-float-three {
        bottom: 15px;
        left: 5px;
    }

    .stem-orbit {
        width: 340px;
        height: 340px;
    }
}


@media (max-width: 480px) {

    .stem-content h2 {
        font-size: 1.9rem;
    }

    .stem-feature {
        gap: 12px;
    }

    .stem-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .stem-visual {
        min-height: 350px;
    }

    .stem-card-main {
        width: 100%;
        padding: 28px 22px;
        border-radius: 22px;
    }

    .stem-card-icon {
        width: 54px;
        height: 54px;
        font-size: 1.4rem;
    }

    .stem-stats {
        gap: 25px;
    }

    .stem-floating-card {
        padding: 9px 10px;
        font-size: 0.65rem;
    }

    .stem-float-one {
        top: 0;
    }

    .stem-float-two {
        top: 95px;
    }

    .stem-float-three {
        bottom: 0;
    }

    .stem-orbit {
        width: 290px;
        height: 290px;
    }
}

/* =========================================================
   HIDE STEM FLOATING CARDS ON MOBILE AND TABLET
   Keep visible only on main desktop
   ========================================================= */

@media (max-width: 1024px) {

    .stem-floating-card {
        display: none !important;
    }

}


/* =========================================================
   EXTRA SAFETY FOR SMALL MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .stem-floating-card {
        display: none !important;
    }

}

/* =========================================================
   MOVE EXPERIMENTATION CARD LOWER ON DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

    .stem-float-three {
        bottom: 2px;
    }

}







/* =========================================================
   GLOBAL FIX: CONTENT HIDDEN BEHIND FIXED NAVBAR
   ========================================================= */

:root {
    --header-offset: 104px;
}

/* Reserve space for the fixed header on every page */
.app-main {
    padding-top: var(--header-offset) !important;
}

/* Prevent anchor-linked sections from hiding under navbar */
html {
    scroll-padding-top: var(--header-offset);
}

#printing,
#projects,
#about,
#home {
    scroll-margin-top: var(--header-offset);
}


/* =========================================================
   REMOVE OLD HERO OFFSET
   ========================================================= */

.hero {
    padding-top: 0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --header-offset: 72px;
    }

    .app-main {
        padding-top: var(--header-offset) !important;
    }

    html {
        scroll-padding-top: var(--header-offset);
    }

    #printing,
    #projects,
    #about,
    #home {
        scroll-margin-top: var(--header-offset);
    }

    .hero {
        padding-top: 0 !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    :root {
        --header-offset: 72px;
    }

    .app-main {
        padding-top: var(--header-offset) !important;
    }

}

/* =========================================================
   STORE PAGE MOBILE SPACING FIX
   ========================================================= */

@media (max-width: 768px) {

    /* Remove excessive space caused by global header offset */
    .app-main {
        padding-top: 0 !important;
    }

    /* Keep only a compact gap below the fixed navbar */
    .page-hero {
        padding-top: 38px !important;
        padding-bottom: 32px !important;
    }

    .page-hero .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .page-hero h1 {
        margin-top: 10px !important;
        margin-bottom: 12px !important;
        font-size: 2rem;
        line-height: 1.2;
    }

    .page-hero p {
        margin-bottom: 0 !important;
    }

    /* Reduce the gap between heading and filters */
    .catalog-section {
        padding-top: 32px !important;
    }

    .catalog-filter {
        margin-top: 0 !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .page-hero {
        padding-top: 28px !important;
        padding-bottom: 24px !important;
    }

    .page-hero h1 {
        font-size: 1.75rem;
        margin-top: 8px !important;
        margin-bottom: 10px !important;
    }

    .page-hero p {
        font-size: 0.88rem;
        line-height: 1.6;
    }

    .catalog-section {
        padding-top: 24px !important;
    }
}



/* Desktop: keep the first content below the fixed navbar */
.page-hero {
    padding-top: 50px !important;
}

/* Mobile */
@media (max-width: 768px) {
    .page-hero {
        padding-top: 10px !important;
    }
}

/* =========================================================
   FINAL MOBILE CONTENT SPACING FIX
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Mobile navbar is relative, so remove desktop top padding */
    .app-main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Normal page heroes */
    .page-hero {
        padding-top: 100px !important;
    }

    /* Product/detail pages */
    .product-detail {
        padding-top: 50px !important;
    }
}


@media screen and (max-width: 768px) {

    /* Home page hero */
    .hero,
    .home-hero,
    .hero-section {
        padding-top: 100px !important;
    }

}