:root {
    --green: #27AE60;
    --green-dark: #1e8449;
    --blue: #2980B9;
    --red: #E74C3C;
    --border: #E8E8E4;
    --text: #2A2A2A;
    --muted: #595959;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --max-w: 1281px;
    --sec: #595959;          /* secondary text: descriptions, form labels */
    --amber: #F5A623;        /* brand bar, payment-not-yet-confirmed */
    --red-dark: #C0392B;     /* red text on a red tint */
    --panel: #F3F3F1;        /* grey band behind a total */
    --offwhite: #FAFAF8;     /* quiet panels, summary boxes */
    --tint-blue: #F4F8FB;    /* selected card background */
    --tint-red: #FDF2F0;     /* deadline banner background */
    --disabled-cta:   #A8DDBB;  /* CTA not yet actionable — Rob: never grey    v2/Browse.dc.html:322     */
    /* Version 2: the one shop typeface. Swap the font here and in the font link (App.razor). */
    --font: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-19: 19px;
    --fs-22: 22px;
    --fs-26: 26px;
    /* ---- M1a: colours used by the design files that the pack README never lists ---- */
    --white:          #FFFFFF;  /* card and control surfaces            Browse.dc.html:106        */
    --image-bg:       #F0ECE4;  /* behind artwork and product images    Browse.dc.html:85,108     */
    --divider:        #F2F2EF;  /* light inner rule between list rows   Cart.dc.html:86           */
    --disabled-text:  #C9C9C4;  /* a figure present but zero            Browse.dc.html:263        */
    --disabled-icon:  #D8D8D4;  /* a control present but unavailable    Browse.dc.html:264        */
    --placeholder:    #C2C2BD;  /* input placeholder text               CodeEntry.dc.html:15      */
    --tint-green:     #F1F9F3;  /* confirmation panel background        Result.dc.html:88         */
    --tint-amber:     #FFF8EC;  /* not-yet-confirmed panel background   Result.dc.html:102        */
    --border-amber:   #F3DDAE;  /* edge of a not-yet-confirmed panel    Result.dc.html:102        */
    --border-dashed:  #C9D9E4;  /* dashed edge of an "add another"      Browse.dc.html:78         */
    --surface-dim:    #EDEDEA;  /* the page showing behind a modal      ChangeStudent.dc.html:19  */
    --backdrop:       #141412;  /* modal backdrop, used with opacity    Browse.dc.html:127        */
    --a2a-orange:     #E8720C;  /* the "2" in account2account — brand   Payment.dc.html:81        */
    /* ---- M1a: the dialog shadow. --shadow (M1) is unchanged and still the default. ---- */
    --shadow-dialog:  0 12px 36px rgba(0,0,0,0.14);  /*               ChangeStudent.dc.html:21  */
    /* ---- M1b: the glow behind the child's artwork on Browse ---- */
    --shadow-artwork: 0 0 48px 12px rgba(42,42,42,0.18);  /*  Browse.dc.html:85  */
    /* ---- M30: desktop v4 tokens. Used only by rules that apply from 1100px; no existing token changed. ---- */
    --d-font-disp:     var(--font);
    --d-font-body:     var(--font);
    --d-font-hand:     var(--font);
    --d-black:         #000000;  /* school name, cart heading             Browse.dc.html:38         */
    --d-ink:           #1C1C1A;  /* black photo border                    PhotoEditor.dc.html:258   */
    --d-step-tint:     #F4FAF6;  /* product stepper band                  Browse.dc.html:168        */
    --d-pill-tint:     #EAF3FA;  /* selected border / chip                PhotoEditor.dc.html:240   */
    --d-blue-dark:     #1F6390;  /* link hover                            CodeEntry.dc.html:18      */
    --d-stage:         #D6D6D1;  /* photo editor stage                    PhotoEditor.dc.html:85    */
    --d-warn:          #E67E22;  /* small photo warning icon              PhotoEditor.dc.html:183   */
    --d-border-red:    #F2C9C2;  /* school not open box edge              CodeEntry.dc.html:160     */
    --d-input-border:  #DADAD5;  /* address inputs                        Cart.dc.html:223          */
    --d-input-text:    #444444;  /* address input text                    Cart.dc.html:223          */
    --d-addr-title:    #555555;  /* Delivery address heading              Cart.dc.html:214          */
    --d-border-green:  #CDE9D6;  /* picked address card edge              Cart.dc.html:248          */
    --d-tick:          #9A9A94;  /* straighten centre mark                PhotoEditor.dc.html:114   */
    --d-swatch-border: #CFCFCA;  /* colour picker edge                    PhotoEditor.dc.html:125   */
    --d-fs-11:   11px;
    --d-fs-12-5: 12.5px;
    --d-fs-13-5: 13.5px;
    --d-fs-14-5: 14.5px;
    --d-fs-15-5: 15.5px;
    --d-fs-17:   17px;
    --d-fs-18:   18px;
    --d-fs-20:   20px;
    --d-fs-23:   23px;
    --d-fs-34:   34px;
    --d-shadow-art:     0 10px 30px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12);  /* Browse.dc.html:124       */
    --d-shadow-bar:     0 -4px 14px rgba(0,0,0,0.06);                             /* Browse.dc.html:181       */
    --d-shadow-field:   0 2px 8px rgba(0,0,0,0.08);                               /* CodeEntry.dc.html:256    */
    --d-shadow-hero-a:  0 6px 20px rgba(0,0,0,0.14);                              /* CodeEntry.dc.html:79     */
    --d-shadow-hero-b:  0 6px 20px rgba(0,0,0,0.16);                              /* CodeEntry.dc.html:82     */
    --d-shadow-close:   0 1px 4px rgba(0,0,0,0.18);                               /* Browse.dc.html:222       */
    --d-shadow-seg:     0 1px 3px rgba(0,0,0,0.12);                               /* Cart.dc.html:542         */
    --d-shadow-menu:    0 6px 18px rgba(0,0,0,0.08);                              /* Cart.dc.html:233         */
    --d-shadow-frame:   0 6px 24px rgba(0,0,0,0.25);                              /* PhotoEditor.dc.html:86   */
    --d-shadow-modal:   0 20px 60px rgba(0,0,0,0.3);                              /* PhotoEditor.dc.html:181  */
    --d-shadow-box:     inset 0 0 0 1px rgba(0,0,0,0.08);                         /* Cart.dc.html:287         */
    --d-scrim:          rgba(20,20,18,0.5);                                       /* Browse.dc.html:220       */
    --d-scrim-strong:   rgba(20,20,18,0.55);                                      /* PhotoEditor.dc.html:180  */
    --d-safe-line:      rgba(255,255,255,0.95);                                   /* PhotoEditor.dc.html:89   */
    --d-safe-outline:   rgba(0,0,0,0.55);                                         /* PhotoEditor.dc.html:89   */
    --d-on-blue-rule:   rgba(255,255,255,0.5);                                    /* PhotoEditor.dc.html:166  */
}
html, body {
    font-family: var(--font);
    margin: 0;
    padding: 0;
    background-color: #f0ece4;
}

.content {
    max-width: var(--max-w);
    margin: 0 auto;
    background-color: #ffffff;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
.product-grid .mud-grid-item {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
}

@media (max-width: 768px) {
    .product-grid .mud-grid-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}
.rainbow-bar {
    height: 5px;
    background: linear-gradient(90deg, var(--red) 0 25%, var(--amber) 25% 50%, var(--green) 50% 75%, var(--blue) 75% 100%);
}

.top-nav {
    background: white;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}
.account-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font);
    color: var(--text);
}
.app-shell {
    max-width: var(--max-w);
    margin: 0 auto;
    background: white;
    min-height: 100vh;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}
/* M29: the v3 mobile screens are their own components (.m-screen), rendered next to the desktop
   markup of the same page. While one is on the page and the width is in its range, it replaces the
   layout header and the desktop markup, and its own bars sit at the very bottom. Child page and
   cart: under 1100px (.m-to-1100). Code entry and payment: 768px and under (.m-to-768). */
@media (max-width: 1099.98px) {
    .app-shell:has(> article > .m-to-1100) {
        padding-bottom: 0;
    }

    .app-shell:has(> article > .m-to-1100) > .rainbow-bar,
    .app-shell:has(> article > .m-to-1100) > .top-nav,
    .app-shell:has(> article > .m-to-1100) > article > :not(.m-screen) {
        display: none;
    }
}

@media (max-width: 768px) {
    .app-shell:has(> article > .m-to-768) {
        padding-bottom: 0;
    }

    .app-shell:has(> article > .m-to-768) > .rainbow-bar,
    .app-shell:has(> article > .m-to-768) > .top-nav,
    .app-shell:has(> article > .m-to-768) > article > :not(.m-screen) {
        display: none;
    }
}
/* M30: the desktop v4 screens that draw their own header (home code entry, photo editor). Version 2:
   from 769px the layout header gives way to theirs (the code entry shows from 769px; under 1100px the
   photo editor's page is covered by its own "bigger screen" panel). Nothing here applies under 769px. */
@media (min-width: 769px) {
    .app-shell:has(> article > .d-own-header) {
        padding-bottom: 0;
    }

    .app-shell:has(> article > .d-own-header) > .rainbow-bar,
    .app-shell:has(> article > .d-own-header) > .top-nav,
    .app-shell:has(> article > .d-own-header) > .top-nav-v4 {
        display: none;
    }
}
/* Version 2: the art page from 1100px is exactly one screen high (Browse.dc.html:23-24, :95). Only while
   the art page's body (.bd-body, HomeView) is on the page: the layout becomes a full-height column, the
   header keeps its own height and the page takes the rest. Every other page is untouched. Below 620px
   high the page scrolls as before. */
@media (min-width: 1100px) and (min-height: 620px) {
    .app-shell-v4:has(> article > .browse .bd-body) {
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .app-shell-v4:has(> article > .browse .bd-body) > article {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
}
.student-row {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}
.student-info {
    margin-top: 8px;
}
.student-links {
    display: none;
    gap: 8px;
    font-size: 12px;
    margin-top: 4px;
}
.student-links .mud-link {
    font-size: 12px;
    color: var(--muted);
}
.link-divider {
    color: var(--border);
}
.student-buttons-desktop {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .student-links {
        display: flex;
    }
    .student-buttons-desktop {
        display: none;
    }
}
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--border);
    padding: 10px 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); /* Added safe area padding */
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    z-index: 100;
}

.cart-content {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.payment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 0 16px;
}
.visa-logo {
    background: #1A1F71;
    color: white;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}
.mc-logo {
    display: flex;
}
.mc-r {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.mc-r {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.pricing-note {
    font-size: 11px;
    color: var(--muted);
    margin-left: auto;
}
.qty-btn {
    width: 48px;
    height: 36px;
    background: #f0f0f0;
    border: 1.5px solid var(--border);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-family: var(--font);
}
.qty-val {
    flex: 1;
    height: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}
.btn-sec {
    background: white;
    color: #2A2A2A;
    border: 1.5px solid #ccc;
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font);
    transition: background .15s;
}

.btn-sec:hover {
    background: #f7f7f5;
}

.cart-secondary-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}