/* =====================================================================================================
   YourSchoolBox UI revamp (2026-10, designs by Ayesha: brand kit, header, shop menu, search, categories,
   product card, product detail). Everything new is prefixed ysb- so older pages keep their styling.
   Brand kit: YSB Green #0CDD6B (brand/positive), Pink #F15F91 (primary customer actions), Blue #1FC1E0
   (links/focus/active), Orange #ED8534 (highlights/urgent CTAs), Navy #112755 (headings/text/panels),
   light grey #F4F7FA (backgrounds/borders/disabled). Poppins 700/600/400. 12-16px corners, thin borders,
   subtle shadows, visible focus states, 44px touch targets, mobile-first.
   ===================================================================================================== */

:root {
    --ysb-green: #0CDD6B;
    --ysb-green-dark: #09b457;
    --ysb-pink: #F15F91;
    --ysb-pink-dark: #db4a7c;
    --ysb-pink-tint: #fdeef3;
    --ysb-blue: #1FC1E0;
    --ysb-blue-tint: #e6f8fc;
    --ysb-orange: #ED8534;
    --ysb-orange-dark: #d6712a;
    --ysb-navy: #112755;
    --ysb-grey: #F4F7FA;
    --ysb-border: #dbe3ee;
    --ysb-muted: #5d6b82;
    --ysb-white: #ffffff;
    --ysb-page: #ffffff;   /* page background (body); used where something must blend into it */
    --ysb-radius: 12px;
    --ysb-radius-lg: 16px;
    --ysb-shadow: 0 2px 10px rgba(17, 39, 85, 0.06);
    --ysb-shadow-lg: 0 12px 32px rgba(17, 39, 85, 0.14);
    --ysb-font: 'Poppins', Arial, sans-serif;
    --ysb-container: 1280px;
    --ysb-header-h: 76px;
}

/* ---- Typography (brand kit: Poppins site-wide). site.min.css sets a universal font, so match it. ---- */
* { font-family: var(--ysb-font); }
body { background: var(--ysb-white); color: var(--ysb-navy); }

.ysb-container { max-width: var(--ysb-container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .ysb-container { padding: 0 24px; } }

.ysb-h1 { font-weight: 700; color: var(--ysb-navy); font-size: 1.75rem; line-height: 1.2; margin: 0 0 .25rem; }
.ysb-h2 { font-weight: 600; color: var(--ysb-navy); font-size: 1.25rem; line-height: 1.3; margin: 0 0 .75rem; }
.ysb-h3 { font-weight: 600; color: var(--ysb-navy); font-size: 1rem; margin: 0 0 .5rem; }
.ysb-lead { color: var(--ysb-muted); font-size: .95rem; margin: 0 0 1rem; }
.ysb-eyebrow { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ysb-muted); font-weight: 600; }
.ysb-muted { color: var(--ysb-muted); }
@media (min-width: 768px) { .ysb-h1 { font-size: 2.1rem; } }

.ysb-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ---- Focus: visible everywhere in the new UI ---- */
.ysb-scope :focus-visible, .ysb-header :focus-visible, .ysb-drawer :focus-visible {
    outline: 3px solid var(--ysb-blue); outline-offset: 2px; border-radius: 8px;
}

/* ---- Buttons ---- */
.ysb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: 0 1.25rem; border-radius: var(--ysb-radius); border: 1px solid transparent;
    font-weight: 600; font-size: .95rem; line-height: 1; cursor: pointer; text-decoration: none !important;
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease; white-space: nowrap;
}
.ysb-btn:active { transform: translateY(1px); }
.ysb-btn[disabled], .ysb-btn.is-disabled { background: var(--ysb-grey) !important; color: #9aa6b8 !important; border-color: var(--ysb-border) !important; cursor: not-allowed; }
.ysb-btn--green { background: var(--ysb-green); color: var(--ysb-navy) !important; }
.ysb-btn--green:hover { background: var(--ysb-green-dark); color: var(--ysb-white) !important; }
.ysb-btn--pink { background: var(--ysb-pink); color: var(--ysb-white) !important; }
.ysb-btn--pink:hover { background: var(--ysb-pink-dark); }
.ysb-btn--orange { background: var(--ysb-orange); color: var(--ysb-white) !important; }
.ysb-btn--orange:hover { background: var(--ysb-orange-dark); }
.ysb-btn--ghost { background: var(--ysb-white); color: var(--ysb-navy) !important; border-color: var(--ysb-border); }
.ysb-btn--ghost:hover { border-color: var(--ysb-blue); }
.ysb-btn--pill { border-radius: 999px; }
.ysb-btn--sm { min-height: 36px; padding: 0 .9rem; font-size: .85rem; }
.ysb-btn--block { width: 100%; }
.ysb-btn.is-added { background: var(--ysb-navy) !important; color: var(--ysb-white) !important; }
.ysb-btn.is-loading-ysb { opacity: .7; pointer-events: none; }

.ysb-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 999px; border: 0; background: var(--ysb-grey); color: var(--ysb-navy); cursor: pointer;
}
.ysb-iconbtn:hover { background: var(--ysb-blue-tint); }

/* ---- Chips ---- */
.ysb-chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .9rem; border-radius: 999px;
    border: 1px solid var(--ysb-border); background: var(--ysb-white); color: var(--ysb-navy) !important;
    font-size: .85rem; text-decoration: none !important; cursor: pointer; white-space: nowrap;
}
.ysb-chip:hover { border-color: var(--ysb-blue); }
.ysb-chip.is-active { background: var(--ysb-blue-tint); border-color: var(--ysb-blue); font-weight: 600; }
.ysb-chip--removable .ysb-icon { opacity: .7; }

/* ---- Cards / panels ---- */
.ysb-panel { background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); box-shadow: var(--ysb-shadow); }
.ysb-panel--grey { background: var(--ysb-grey); }

/* ---- Breadcrumbs ---- */
.ysb-breadcrumbs { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .8rem; color: var(--ysb-muted); margin: 1rem 0 .5rem; padding: 0; list-style: none; }
.ysb-breadcrumbs a { color: var(--ysb-muted) !important; text-decoration: none; }
.ysb-breadcrumbs a:hover { color: var(--ysb-blue) !important; }
.ysb-breadcrumbs li + li::before { content: "\203A"; margin-right: .35rem; }

/* =====================================================================================================
   Header (design 02): sticky on every page, full-width green line on top, logo left, four nav items,
   Sign In / Profile, cart with badge. Mobile: logo, account, cart and menu button.
   ===================================================================================================== */
.ysb-header { position: sticky; top: 0; z-index: 800; background: var(--ysb-white); border-top: 6px solid var(--ysb-green); box-shadow: 0 1px 0 var(--ysb-border); }
.ysb-header.is-scrolled { box-shadow: 0 6px 20px rgba(17, 39, 85, .08); }
.ysb-header__bar { display: flex; align-items: center; gap: 1rem; min-height: 64px; flex-wrap: wrap; }
.ysb-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.ysb-header__logo { min-width: 0; flex-shrink: 1; }
.ysb-header__logo img { max-height: 40px; max-width: 100%; width: auto; height: auto; display: block; }
@media (min-width: 600px) { .ysb-header__logo img { max-height: 48px; } }
@media (min-width: 1024px) { .ysb-header__bar { min-height: var(--ysb-header-h); } }
@media (min-width: 1440px) { .ysb-header__logo img { max-height: 56px; } }
@media (min-width: 600px) { .ysb-header__logo img { max-height: 54px; } }   /* tagline logo: a little taller so the tagline reads */
@media (min-width: 1024px) { .ysb-header__logo img { max-height: 62px; } }
/* Logo pairs: colour logo (.ysb-logo--light) and the white one (.ysb-logo--dark, shown in dark mode) */
.ysb-logo--dark { display: none !important; }
@media (max-width: 599px) { .ysb-header__bar { gap: .25rem; } .ysb-action { min-width: 40px; padding: 0 .25rem; } }

.ysb-nav { display: none; align-items: stretch; gap: .25rem; margin-left: auto; margin-right: 1rem; height: 100%; }
@media (min-width: 1024px) { .ysb-nav { display: flex; } }
.ysb-nav__item { position: relative; display: flex; align-items: center; }
.ysb-nav__link {
    position: relative; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .85rem;
    color: var(--ysb-navy) !important; font-weight: 600; font-size: .95rem; background: none; border: 0; cursor: pointer;
    text-decoration: none !important; white-space: nowrap;
}
.ysb-nav__link::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 2px; height: 3px; border-radius: 3px;
    background: var(--ysb-blue); transform: scaleX(0); transition: transform .15s ease;
}
.ysb-nav__link:hover::after, .ysb-nav__link:focus-visible::after, .ysb-nav__link.is-active::after, .ysb-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.ysb-nav__link .ysb-chevron { transition: transform .15s ease; }
.ysb-nav__link[aria-expanded="true"] .ysb-chevron { transform: rotate(180deg); }

.ysb-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
@media (min-width: 1024px) { .ysb-actions { margin-left: 0; } }
.ysb-action {
    position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 .5rem; color: var(--ysb-navy) !important; background: none; border: 0;
    cursor: pointer; text-decoration: none !important; border-radius: 10px; font-size: .7rem; font-weight: 600; gap: 2px;
}
.ysb-action:hover { background: var(--ysb-grey); }
.ysb-action__label { display: none; }
@media (min-width: 1024px) { .ysb-action__label { display: block; white-space: nowrap; } }
.ysb-badge {
    position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--ysb-orange); color: var(--ysb-white); font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center;
}
.ysb-menubtn { display: inline-flex; }
@media (min-width: 1024px) { .ysb-menubtn { display: none; } }

/* Profile dropdown */
.ysb-dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; padding: .5rem; z-index: 900; display: none; }
.ysb-dropdown.is-open { display: block; }
.ysb-dropdown a, .ysb-dropdown button {
    display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: 0 .75rem; border-radius: 10px;
    color: var(--ysb-navy) !important; text-decoration: none !important; font-size: .9rem; background: none; border: 0; cursor: pointer; text-align: left;
}
.ysb-dropdown a:hover, .ysb-dropdown button:hover { background: var(--ysb-grey); }
.ysb-dropdown__hello { padding: .4rem .75rem .6rem; font-size: .8rem; color: var(--ysb-muted); border-bottom: 1px solid var(--ysb-border); margin-bottom: .35rem; }

/* =====================================================================================================
   Shop menu (design 03, "direction only"): browse by category / grouped ranges / visual shortcuts.
   ===================================================================================================== */
.ysb-shopmenu { position: absolute; left: 0; right: 0; top: 100%; z-index: 790; display: none; padding: 0 0 1rem; }
.ysb-shopmenu.is-open { display: block; }
.ysb-shopmenu__panel { position: relative; display: grid; grid-template-columns: 260px 1fr 300px; gap: 1rem; padding: 1.25rem; max-height: calc(100vh - 170px); overflow: auto; box-shadow: var(--ysb-shadow-lg); }
.ysb-shopmenu__close { position: absolute; top: .75rem; right: .75rem; }
.ysb-shopmenu__col { border-radius: var(--ysb-radius); padding: 1rem; }
.ysb-shopmenu__col--cats { background: #effcf5; border: 1px solid #bff3d5; }
.ysb-shopmenu__col--ranges { background: var(--ysb-grey); border: 1px solid var(--ysb-border); }
.ysb-shopmenu__col--visual { background: #fff6f9; border: 1px solid #f9cfdd; }
.ysb-shopmenu__cats { list-style: none; margin: 0 0 1rem; padding: 0; }
.ysb-shopmenu__cat {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0 .6rem;
    background: none; border: 0; border-radius: 10px; color: var(--ysb-navy); font-weight: 600; font-size: .92rem; cursor: pointer; text-align: left;
}
.ysb-shopmenu__cat:hover, .ysb-shopmenu__cat[aria-selected="true"] { background: var(--ysb-white); box-shadow: inset 3px 0 0 var(--ysb-green); }
.ysb-shopmenu__group { display: none; }
.ysb-shopmenu__group.is-active { display: block; }
.ysb-shopmenu__grouphead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.ysb-shopmenu__grouphead a { color: var(--ysb-blue) !important; font-weight: 600; font-size: .85rem; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.ysb-shopmenu__ranges { columns: 2 220px; column-gap: 1.25rem; }
.ysb-shopmenu__range { break-inside: avoid; margin-bottom: 1rem; }
.ysb-shopmenu__range > a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: var(--ysb-navy) !important; text-decoration: none; }
.ysb-shopmenu__range > a:hover { color: var(--ysb-blue) !important; }
.ysb-shopmenu__range ul { list-style: none; margin: .1rem 0 0; padding: 0; }
.ysb-shopmenu__range li a { display: block; padding: .2rem 0; font-size: .85rem; color: var(--ysb-muted) !important; text-decoration: none; }
.ysb-shopmenu__range li a:hover { color: var(--ysb-blue) !important; text-decoration: underline; }
.ysb-shopmenu__note { margin: -.25rem 0 .6rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ysb-muted); }
.ysb-shopmenu__all { margin-top: .25rem; }
.ysb-shopmenu__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .5rem; }
.ysb-tile { display: flex; flex-direction: column; gap: .35rem; padding: .5rem; border-radius: var(--ysb-radius); background: var(--ysb-white); border: 1px solid var(--ysb-border); text-decoration: none !important; color: var(--ysb-navy) !important; font-size: .78rem; font-weight: 600; line-height: 1.25; }
.ysb-tile:hover { border-color: var(--ysb-blue); }
.ysb-tile__img { aspect-ratio: 4 / 3; border-radius: 8px; background: var(--ysb-grey); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ysb-muted); }
.ysb-tile__img img { width: 100%; height: 100%; object-fit: contain; }
.ysb-shortcuts { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .4rem; }
.ysb-shortcuts a { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .6rem; border-radius: 10px; background: var(--ysb-white); color: var(--ysb-navy) !important; text-decoration: none; font-size: .85rem; font-weight: 600; border: 1px solid transparent; }
.ysb-shortcuts a:hover { border-color: var(--ysb-pink); }
@media (max-width: 1279px) { .ysb-shopmenu__panel { grid-template-columns: 230px 1fr; } .ysb-shopmenu__col--visual { display: none; } }

/* =====================================================================================================
   Search (design 04): directly below the sticky header. Predictive panel, keyboard friendly.
   ===================================================================================================== */
/* The search is its own centred row under the bar at every width (Ayesha, design v2 p.4: "move in the middle of the page
   under the header"; replaces the 2026-10-06 compact in-bar search from 1200px). */
.ysb-search { order: 10; flex: 1 0 100%; display: flex; justify-content: center; padding: 0 0 .75rem; }
.ysb-search__form { width: 100%; max-width: 760px; }
@media (min-width: 1024px) and (max-width: 1215px) {
    .ysb-nav__link { padding: 0 .55rem; font-size: .92rem; }
    .ysb-nav__link::after { left: .55rem; right: .55rem; }
    .ysb-nav { margin-right: .25rem; }
}
@media (min-width: 1216px) {
    .ysb-nav__link { padding: 0 .8rem; font-size: 1rem; }
    .ysb-nav__link::after { left: .8rem; right: .8rem; }
}
@media (min-width: 1408px) {
    .ysb-nav__link { padding: 0 .95rem; font-size: 1.06rem; }
    .ysb-nav__link::after { left: .95rem; right: .95rem; }
}
.ysb-search__form { position: relative; display: flex; align-items: center; gap: .5rem; background: var(--ysb-grey); border: 2px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); padding: .3rem .3rem .3rem .9rem; transition: border-color .15s ease, box-shadow .15s ease; }
.ysb-search__form:focus-within { border-color: var(--ysb-blue); box-shadow: 0 0 0 4px rgba(31, 193, 224, .15); background: var(--ysb-white); }
.ysb-search__form > .ysb-icon { color: var(--ysb-muted); }
.ysb-search__input { flex: 1; min-width: 0; min-height: 40px; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; font-size: 1rem; color: var(--ysb-navy); }
.ysb-search__input::placeholder { color: #8b97aa; }
.ysb-search__input::-webkit-search-cancel-button, .ysb-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.ysb-shopmenu__visualset { display: none; }
.ysb-shopmenu__visualset.is-active { display: block; }
.ysb-search__clear { width: 36px; height: 36px; border-radius: 999px; border: 0; background: #e8edf3; color: var(--ysb-navy); cursor: pointer; display: none; align-items: center; justify-content: center; }
.ysb-search__clear.is-visible { display: inline-flex; }
.ysb-search__submit { min-width: 44px; }
@media (max-width: 599px) { .ysb-search__submit .ysb-search__submit-text { display: none; } .ysb-search__submit { padding: 0 .8rem; } }

.ysb-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 850; display: none; padding: 1rem; box-shadow: var(--ysb-shadow-lg); max-height: calc(100vh - 190px); overflow: auto; }
.ysb-suggest.is-open { display: block; }
.ysb-suggest__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .ysb-suggest__grid { grid-template-columns: 1fr 1.15fr; } .ysb-suggest__right { border-left: 1px solid var(--ysb-border); padding-left: 1rem; } }
.ysb-suggest__title { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ysb-muted); font-weight: 600; margin: .25rem 0 .4rem; }
.ysb-suggest__list { list-style: none; margin: 0 0 .75rem; padding: 0; }
.ysb-opt { display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: .35rem .6rem; border-radius: 10px; color: var(--ysb-navy) !important; text-decoration: none !important; cursor: pointer; font-size: .92rem; }
.ysb-opt:hover, .ysb-opt.is-active, .ysb-opt.is-closest { background: var(--ysb-blue-tint); }   /* closest match stays highlighted (design v2 p.4) */
.ysb-opt.is-active { box-shadow: inset 0 0 0 2px var(--ysb-blue); }   /* keyboard position stays visible on the highlighted row too */
.ysb-opt mark { background: none; color: inherit; font-weight: 700; }
.ysb-opt__hint { margin-left: auto; font-size: .72rem; color: var(--ysb-blue); font-weight: 600; }
.ysb-opt--cat { align-items: flex-start; }
.ysb-opt--cat .ysb-opt__bar { width: 4px; align-self: stretch; border-radius: 4px; background: var(--ysb-orange); }
.ysb-opt--cat:nth-child(3n+2) .ysb-opt__bar { background: var(--ysb-blue); }
.ysb-opt--cat:nth-child(3n) .ysb-opt__bar { background: var(--ysb-pink); }
.ysb-opt__sub { display: block; font-size: .75rem; color: var(--ysb-muted); }
.ysb-opt--product { border: 1px solid var(--ysb-border); margin-bottom: .5rem; padding: .5rem .75rem; }
.ysb-opt--product img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--ysb-grey); }
.ysb-opt__price { margin-left: auto; font-weight: 700; white-space: nowrap; }
.ysb-opt--all { background: var(--ysb-pink-tint); color: #a5254f !important; font-weight: 600; justify-content: space-between; }
.ysb-opt--all:hover, .ysb-opt--all.is-active { background: #fbdbe6; }
.ysb-noresults { background: #fff4f7; border: 1px solid #f9cfdd; border-radius: var(--ysb-radius); padding: 1rem 1.25rem; }
.ysb-noresults p { margin: 0 0 .75rem; color: var(--ysb-muted); font-size: .9rem; }
.ysb-noresults strong { color: var(--ysb-navy); }

/* =====================================================================================================
   Mobile drawer (design 02 "mobile header": the four nav links inside the menu, Shop as click-to-open)
   ===================================================================================================== */
.ysb-drawer { position: fixed; inset: 0; z-index: 1000; display: none; }
.ysb-drawer.is-open { display: block; }
.ysb-drawer__backdrop { position: absolute; inset: 0; background: rgba(17, 39, 85, .45); }
.ysb-drawer__panel { position: absolute; top: 0; bottom: 0; right: 0; width: min(92vw, 380px); background: var(--ysb-white); box-shadow: var(--ysb-shadow-lg); display: flex; flex-direction: column; border-top: 6px solid var(--ysb-green); }
.ysb-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--ysb-border); }
.ysb-drawer__body { overflow: auto; padding: .5rem 1rem 2rem; }
.ysb-drawer__link, .ysb-drawer__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 48px; padding: 0 .5rem;
    border: 0; border-bottom: 1px solid var(--ysb-border); background: none; color: var(--ysb-navy) !important; font-weight: 600; font-size: 1rem;
    text-decoration: none !important; cursor: pointer; text-align: left;
}
.ysb-drawer__link.is-active { box-shadow: inset 3px 0 0 var(--ysb-blue); }
.ysb-drawer__toggle[aria-expanded="true"] .ysb-chevron { transform: rotate(180deg); }
.ysb-drawer__sub { display: none; padding: .25rem 0 .5rem .75rem; }
.ysb-drawer__sub.is-open { display: block; }
.ysb-drawer__sub .ysb-drawer__toggle, .ysb-drawer__sub .ysb-drawer__link { font-weight: 500; font-size: .95rem; min-height: 44px; }
.ysb-drawer__sub .ysb-drawer__sub a { display: block; padding: .5rem; color: var(--ysb-muted) !important; font-size: .9rem; text-decoration: none; }
.ysb-drawer__account { margin-top: 1rem; display: grid; gap: .5rem; }
body.ysb-noscroll { overflow: hidden; }

/* =====================================================================================================
   Product card (design 07): image, category, name, pack size/unit, price, (rating only if any), green Add to Cart
   ===================================================================================================== */
.ysb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .ysb-grid { gap: 1rem; } }
@media (min-width: 900px) { .ysb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ysb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 379px) { .ysb-grid { grid-template-columns: 1fr; } }

.ysb-card { position: relative; display: flex; flex-direction: column; background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); padding: .75rem; transition: box-shadow .15s ease, border-color .15s ease; min-width: 0; }
.ysb-card:hover { box-shadow: var(--ysb-shadow-lg); border-color: #c9d5e4; }
.ysb-card__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--ysb-grey); border-radius: var(--ysb-radius); overflow: hidden; margin-bottom: .75rem; }
.ysb-card__img img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
img.ysb-img-fallback { width: 60% !important; height: auto !important; max-height: 60%; object-fit: contain; opacity: .5; mix-blend-mode: normal; }   /* image failed: our logo */
.ysb-card__cat { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ysb-muted); font-weight: 600; margin-bottom: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ysb-card__name { font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--ysb-navy) !important; text-decoration: none !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.ysb-card__name:hover { color: var(--ysb-blue) !important; }
.ysb-card__meta { font-size: .78rem; color: var(--ysb-muted); margin-top: .2rem; }
.ysb-card__rating { font-size: .78rem; color: var(--ysb-muted); margin-top: .25rem; }
.ysb-card__rating .ysb-stars { color: var(--ysb-orange); letter-spacing: 1px; }
.ysb-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .75rem; flex-wrap: wrap; }
.ysb-price { font-weight: 700; font-size: 1.05rem; color: var(--ysb-navy); white-space: nowrap; }
.ysb-price__was { display: block; font-size: .72rem; color: var(--ysb-muted); text-decoration: line-through; font-weight: 400; }
.ysb-price__deal { display: block; font-size: .68rem; color: var(--ysb-orange); font-weight: 600; }
.ysb-card form { margin: 0; }
.ysb-card .ysb-btn { padding: 0 1rem; }
@media (max-width: 479px) { .ysb-card__foot { flex-direction: column; align-items: stretch; } .ysb-card .ysb-btn { width: 100%; } }
.ysb-card__va { position: absolute; top: 1.1rem; right: 1.1rem; background: var(--ysb-green); color: var(--ysb-navy); font-size: .62rem; font-weight: 700; padding: .15rem .45rem; border-radius: 999px; }

/* =====================================================================================================
   Listing pages (designs 05 search results, 06 shop all categories): filters left, results right.
   ===================================================================================================== */
.ysb-page { padding-bottom: 3rem; }
.ysb-listing { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 1024px) { .ysb-listing { grid-template-columns: 260px 1fr; } }
.ysb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
.ysb-toolbar__count { color: var(--ysb-muted); font-size: .9rem; }
.ysb-select { min-height: 44px; border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius); padding: 0 2.25rem 0 .9rem; background: var(--ysb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23112755' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center; appearance: none; -webkit-appearance: none; font-weight: 600; color: var(--ysb-navy); font-size: .88rem; cursor: pointer; }
.ysb-select:focus { border-color: var(--ysb-blue); outline: none; box-shadow: 0 0 0 3px rgba(31, 193, 224, .2); }
.ysb-activefilters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ysb-activefilters__label { font-size: .85rem; font-weight: 600; }

.ysb-filters { padding: 1rem; background: var(--ysb-grey); }
.ysb-filters__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .75rem; border-bottom: 1px solid var(--ysb-border); margin-bottom: .75rem; }
.ysb-filters__head a { color: var(--ysb-pink) !important; font-size: .85rem; font-weight: 600; text-decoration: none; }
.ysb-filters__group { padding: .5rem 0 .75rem; border-bottom: 1px solid var(--ysb-border); }
.ysb-filters__group:last-of-type { border-bottom: 0; }
.ysb-filters__group h4 { font-size: .9rem; font-weight: 600; color: var(--ysb-navy); margin: 0 0 .5rem; }
.ysb-check { display: flex; align-items: center; gap: .6rem; min-height: 36px; font-size: .85rem; color: var(--ysb-muted); cursor: pointer; text-decoration: none !important; }
.ysb-check:hover { color: var(--ysb-navy); }
.ysb-check__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #b8c4d4; background: var(--ysb-white); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ysb-white); }
.ysb-check.is-checked { color: var(--ysb-navy); font-weight: 600; }
.ysb-check.is-checked .ysb-check__box { background: var(--ysb-blue); border-color: var(--ysb-blue); }
.ysb-check__count { margin-left: auto; font-size: .75rem; }
.ysb-filters__note { font-size: .75rem; color: var(--ysb-muted); margin: .5rem 0 0; }
.ysb-filterbtn { display: inline-flex; }
@media (min-width: 1024px) { .ysb-filterbtn { display: none; } }
@media (max-width: 1023px) {
    .ysb-filters-wrap { position: fixed; inset: 0; z-index: 1000; display: none; }
    .ysb-filters-wrap.is-open { display: block; }
    .ysb-filters-wrap::before { content: ""; position: absolute; inset: 0; background: rgba(17, 39, 85, .45); }
    .ysb-filters-wrap .ysb-filters { position: absolute; left: 0; top: 0; bottom: 0; width: min(90vw, 360px); overflow: auto; border-radius: 0 var(--ysb-radius-lg) var(--ysb-radius-lg) 0; background: var(--ysb-white); }
}
.ysb-filters__close { display: none; }
@media (max-width: 1023px) { .ysb-filters__close { display: inline-flex; } }
.ysb-filters__apply { display: none; margin-top: 1rem; }
@media (max-width: 1023px) { .ysb-filters__apply { display: flex; } }

.ysb-pager { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.ysb-pager__info { margin-right: auto; color: var(--ysb-muted); font-size: .85rem; }
.ysb-pager a, .ysb-pager span.ysb-pager__current { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .75rem; border-radius: 999px; background: var(--ysb-grey); color: var(--ysb-navy) !important; font-weight: 600; text-decoration: none; font-size: .9rem; }
.ysb-pager span.ysb-pager__current { background: var(--ysb-navy); color: var(--ysb-white) !important; }
.ysb-pager a:hover { background: var(--ysb-blue-tint); }
.ysb-pager a.ysb-pager__next { background: var(--ysb-blue-tint); }
.ysb-empty { text-align: center; padding: 3rem 1rem; color: var(--ysb-muted); }

/* Shop by category (design 06 + v2 p.8, Aqeel 2026-10-10): main categories on the left, subcategory tiles + products, filters on the right.
   Wider container so the side columns use the empty space on big screens. Filters fold into a drawer below 1280px,
   the main categories below 1024px (both reuse the .ysb-filters-wrap drawer). */
.ysb-container--wide { max-width: 1600px; }
.ysb-browse__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: .5rem; }
@media (min-width: 1024px) { .ysb-browse__layout { grid-template-columns: 250px minmax(0, 1fr); } }
@media (min-width: 1280px) { .ysb-browse__layout { grid-template-columns: 250px minmax(0, 1fr) 260px; } }
@media (min-width: 1024px) {
    .ysb-browse .ysb-catnav-wrap, .ysb-browse .ysb-filters-wrap--wide {
        position: sticky; top: calc(var(--ysb-sticky-top, 140px) + .75rem); max-height: calc(100vh - var(--ysb-sticky-top, 140px) - 1.5rem);
        overflow: auto; overscroll-behavior: contain; border-radius: var(--ysb-radius-lg);
    }
}
.ysb-browse__main { min-width: 0; }
.ysb-browse__main > .ysb-toolbar { margin-top: 0; }
.ysb-browse__tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ysb-browse .ysb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ysb-browse .ysb-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.ysb-catbtn { display: inline-flex; }
@media (min-width: 1024px) { .ysb-catbtn { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) { .ysb-browse .ysb-filterbtn--wide { display: inline-flex; } }
@media (min-width: 1280px) { .ysb-browse .ysb-filterbtn--wide { display: none; } }
/* Right-hand filters: a drawer (from the right) until there's room for the third column */
@media (min-width: 1024px) and (max-width: 1279px) {
    .ysb-browse .ysb-filters-wrap--wide { position: fixed; inset: 0; z-index: 1000; display: none; max-height: none; border-radius: 0; overflow: visible; }
    .ysb-browse .ysb-filters-wrap--wide.is-open { display: block; }
    .ysb-browse .ysb-filters-wrap--wide::before { content: ""; position: absolute; inset: 0; background: rgba(17, 39, 85, .45); }
    .ysb-browse .ysb-filters-wrap--wide .ysb-filters { position: absolute; right: 0; top: 0; bottom: 0; width: min(90vw, 360px); overflow: auto; border-radius: var(--ysb-radius-lg) 0 0 var(--ysb-radius-lg); background: var(--ysb-white); }
    .ysb-browse .ysb-filters-wrap--wide .ysb-filters__close { display: inline-flex; }
    .ysb-browse .ysb-filters-wrap--wide .ysb-filters__apply { display: flex; }
}
@media (max-width: 1023px) { .ysb-browse .ysb-filters-wrap--wide .ysb-filters { left: auto; right: 0; border-radius: var(--ysb-radius-lg) 0 0 var(--ysb-radius-lg); } }
html[data-theme="dark"] .ysb-browse .ysb-filters-wrap--wide::before { background: rgba(0, 0, 0, .6); }
html[data-theme="dark"] .ysb-browse .ysb-filters-wrap--wide .ysb-filters { background: var(--ysb-d-surface); }
.ysb-filters__more summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--ysb-blue); padding: .35rem 0; list-style: none; }
.ysb-filters__more summary::-webkit-details-marker { display: none; }
.ysb-activefilters__clear { font-size: .85rem; font-weight: 600; color: var(--ysb-pink) !important; text-decoration: none; }

/* Main categories (left column) */
.ysb-catnav__list { list-style: none; margin: 0; padding: 0; }
.ysb-catnav__link { display: flex; align-items: center; gap: .5rem; min-height: 42px; padding: .4rem .7rem; border-radius: 10px; color: var(--ysb-navy) !important; font-size: .92rem; font-weight: 600; text-decoration: none !important; line-height: 1.25; }
.ysb-catnav__link > span:first-child { flex: 1; min-width: 0; }
.ysb-catnav__link:hover { background: var(--ysb-blue-tint); }
.ysb-catnav__link.is-current { background: var(--ysb-blue-tint); box-shadow: inset 3px 0 0 var(--ysb-blue); font-weight: 700; }
.ysb-catnav__count { font-size: .72rem; color: var(--ysb-muted); font-weight: 500; }

/* Subcategory tiles above the products; the picked one's third tiers open in a row underneath (Aqeel: the earlier layout) */
.ysb-subcats { margin: 0 0 1.25rem; }
.ysb-subcats__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ysb-subcats__find { flex: 0 1 280px; min-width: 200px; }
.ysb-subcats__find .input { min-height: 40px; border-radius: var(--ysb-radius); font-size: .85rem; border-color: var(--ysb-border); box-shadow: none; background: var(--ysb-white); color: var(--ysb-navy); }
.ysb-subcats__find .input:focus { border-color: var(--ysb-blue); box-shadow: 0 0 0 3px rgba(31, 193, 224, .2); }
.ysb-subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 700px) { .ysb-subgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .ysb-subgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ysb-subtile { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 50px; padding: .5rem .85rem; border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius); background: var(--ysb-white); color: var(--ysb-navy) !important; font-weight: 600; font-size: .86rem; line-height: 1.25; text-decoration: none !important; transition: border-color .15s ease, background .15s ease; }
.ysb-subtile:hover { border-color: var(--ysb-blue); }
.ysb-subtile.is-active { border: 2px solid var(--ysb-blue); background: var(--ysb-blue-tint); }
.ysb-subtile .ysb-chevron { flex-shrink: 0; color: var(--ysb-muted); transition: transform .15s ease; }
.ysb-subtile.is-active .ysb-chevron { transform: rotate(180deg); color: var(--ysb-blue); }
.ysb-subtile__count { font-size: .72rem; color: var(--ysb-muted); font-weight: 500; }
.ysb-thirdrow { grid-column: 1 / -1; border: 1px solid var(--ysb-blue); background: #f2fbfd; border-radius: var(--ysb-radius); padding: .9rem 1rem; }
.ysb-thirdrow__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ysb-thirdrow__head h3 { font-size: .9rem; font-weight: 600; margin: 0; color: var(--ysb-navy); }
.ysb-thirdrow__head a { color: var(--ysb-pink) !important; font-size: .85rem; font-weight: 600; text-decoration: none; }
.ysb-thirdrow__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ysb-thirdrow__chips .ysb-subtile__count { margin-left: .15rem; }
html[data-theme="dark"] .ysb-thirdrow { background: rgba(31, 193, 224, .08); }

/* =====================================================================================================
   Product detail (designs 08, 09)
   ===================================================================================================== */
.ysb-pdp { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem; }
@media (min-width: 900px) { .ysb-pdp { grid-template-columns: 1fr 1fr; padding: 1.5rem; gap: 2rem; } }
.ysb-pdp__media { background: var(--ysb-grey); border-radius: var(--ysb-radius-lg); display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; }
.ysb-pdp__media img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.ysb-pdp__thumbs { display: flex; gap: .6rem; margin-top: .75rem; }
.ysb-pdp__thumbs button { width: 72px; height: 72px; border-radius: var(--ysb-radius); border: 1px solid var(--ysb-border); background: var(--ysb-white); padding: 4px; cursor: pointer; }
.ysb-pdp__thumbs button[aria-current="true"] { border: 2px solid var(--ysb-blue); }
.ysb-pdp__name { font-size: 1.5rem; font-weight: 700; margin: .25rem 0 .75rem; color: var(--ysb-navy); line-height: 1.25; }
@media (min-width: 900px) { .ysb-pdp__name { font-size: 1.9rem; } }
.ysb-pdp__section { padding: .75rem 0; border-top: 1px solid var(--ysb-border); }
.ysb-pdp__label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ysb-navy); font-weight: 700; margin: 0 0 .35rem; }
.ysb-pdp__info { list-style: none; margin: 0; padding: 0; color: var(--ysb-muted); font-size: .9rem; line-height: 1.9; }
.ysb-pdp__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.ysb-pdp__buy { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding-top: 1rem; }
.ysb-pdp__price { font-size: 1.6rem; font-weight: 700; color: var(--ysb-navy); margin-right: .5rem; }
.ysb-qty { display: inline-flex; align-items: center; border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius); min-height: 44px; }
.ysb-qty button { width: 40px; height: 44px; border: 0; background: none; color: var(--ysb-navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ysb-qty input { width: 48px; text-align: center; border: 0 !important; box-shadow: none !important; font-weight: 600; color: var(--ysb-navy); background: transparent; -moz-appearance: textfield; }
.ysb-qty input::-webkit-outer-spin-button, .ysb-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ysb-pdp__buy .ysb-btn--green { flex: 1; min-width: 180px; }
.ysb-pdp__extras { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.ysb-details { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .ysb-details { grid-template-columns: 1.6fr 1fr; } }
.ysb-details.ysb-details--single { grid-template-columns: 1fr; }
.ysb-specs dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; font-size: .9rem; }
.ysb-specs dt { color: var(--ysb-muted); }
.ysb-specs dd { margin: 0; font-weight: 600; color: var(--ysb-navy); }
.ysb-pdp__thumbs { flex-wrap: wrap; }
.ysb-pdp__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.ysb-stock { display: inline-flex; align-items: center; gap: .3rem; margin-left: .6rem; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; vertical-align: middle; background: rgba(12, 221, 107, .14); color: #0b7a3d; }
.ysb-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ysb-stock.is-out { background: rgba(237, 133, 52, .14); color: #b25a12; }
html[data-theme="dark"] .ysb-stock { color: #5ff0a0; }
html[data-theme="dark"] .ysb-stock.is-out { color: #ffb072; }
html[data-theme="dark"] .ysb-specs dd { color: var(--ysb-d-text); }
.ysb-details__copy { padding: 1.25rem; color: var(--ysb-muted); line-height: 1.7; font-size: .92rem; white-space: pre-line; }
.ysb-specs { padding: 1.25rem; }
.ysb-specs dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.ysb-specs dt, .ysb-specs dd { padding: .6rem 0; border-bottom: 1px solid var(--ysb-border); margin: 0; font-size: .88rem; }
.ysb-specs dt { color: var(--ysb-muted); }
.ysb-specs dd { text-align: right; font-weight: 600; color: var(--ysb-navy); }

.ysb-fbt { padding: 1.25rem; }
.ysb-fbt__items { display: flex; align-items: stretch; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.ysb-fbt__plus { display: flex; align-items: center; color: var(--ysb-muted); font-size: 1.25rem; }
.ysb-fbt__item { position: relative; flex: 0 0 180px; border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); padding: .75rem; background: var(--ysb-white); cursor: pointer; text-align: left; color: var(--ysb-navy); }
.ysb-fbt__item[aria-pressed="false"] { opacity: .45; }
.ysb-fbt__tick { position: absolute; top: .5rem; left: .5rem; width: 24px; height: 24px; border-radius: 999px; background: var(--ysb-green); color: var(--ysb-navy); display: flex; align-items: center; justify-content: center; }
.ysb-fbt__item[aria-pressed="false"] .ysb-fbt__tick { background: var(--ysb-white); border: 1.5px solid #b8c4d4; color: transparent; }
.ysb-fbt__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--ysb-grey); border-radius: var(--ysb-radius); margin-bottom: .5rem; mix-blend-mode: multiply; }
.ysb-fbt__name { font-weight: 600; font-size: .85rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ysb-fbt__meta { font-size: .75rem; color: var(--ysb-muted); }
.ysb-fbt__price { font-weight: 700; margin-top: .35rem; }
.ysb-fbt__total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--ysb-grey); border-radius: var(--ysb-radius); padding: 1rem 1.25rem; margin-top: 1rem; }
.ysb-fbt__total small { display: block; color: var(--ysb-muted); font-size: .75rem; }
.ysb-fbt__total strong { font-size: 1.25rem; }

.ysb-section { margin-top: 2rem; }
.ysb-notice { padding: .75rem 1rem; border-radius: var(--ysb-radius); background: #effcf5; border: 1px solid #bff3d5; color: var(--ysb-navy); font-size: .88rem; }
.ysb-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ysb-skip { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--ysb-navy); color: var(--ysb-white) !important; padding: .75rem 1rem; border-radius: 0 0 10px 0; }
.ysb-skip:focus { left: 0; }

/* =====================================================================================================
   Light/dark switch (top left of the header, Pages/Shared/_ThemeToggle.cshtml).
   Artwork adapted from "fluffy-robin-48" by Rishi Kumar Chawda on Uiverse.io (MIT licence, see THIRD-PARTY-NOTICES.md).
   ===================================================================================================== */
.ysb-theme { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 2px; margin: 0; border: 0; background: none; border-radius: 999px; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.ysb-theme__svg { display: block; width: 52px; height: auto; }
.ysb-theme:focus-visible { outline: 3px solid var(--ysb-blue); outline-offset: 2px; }
.ysb-theme__sky, .ysb-theme__knob, .ysb-theme__sun, .ysb-theme__moon, .ysb-theme__cloud, .ysb-theme__stars { transition: all .25s cubic-bezier(.4, 0, .2, 1); }
.ysb-theme__sky { fill: var(--ysb-blue); }          /* day: YSB Blue sky */
.ysb-theme__moon, .ysb-theme__stars { opacity: 0; }
.ysb-theme[aria-checked="true"] .ysb-theme__sky { fill: #3A5BA0; stroke: #B6C2D8; stroke-width: 1.5; }   /* night: a lighter navy with a light outline so it stands out on the dark header */
.ysb-theme[aria-checked="true"] .ysb-theme__knob { transform: translate(28px, 2.333px); }
.ysb-theme[aria-checked="true"] .ysb-theme__sun, .ysb-theme[aria-checked="true"] .ysb-theme__cloud { opacity: 0; }
.ysb-theme[aria-checked="true"] .ysb-theme__moon, .ysb-theme[aria-checked="true"] .ysb-theme__stars { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ysb-theme * { transition: none !important; } }

/* =====================================================================================================
   Dark mode (brand kit page 2: "Website Brand Kit - Dark Mode"). On when html[data-theme="dark"].
   Canvas #081630 · Surface #112755 · Raised #172F60 · Borders #2B4271 · Text #F7F9FC / #B6C2D8 / muted #93A4C2 ·
   Disabled #697A99 on #24395F · Pink CTA with navy text, hover #FF75A4 · focus ring Blue · accents unchanged.
   The light tokens are redefined, so every ysb- component follows. Brand accents stay as they are (never large areas).
   Product photos keep a light plate (no inverting or darkening images). The logo sits on a light safe area until the
   white/reversed SVG logo arrives (the spec forbids making it with a CSS filter).
   ===================================================================================================== */
html[data-theme="dark"] {
    --ysb-page: #081630;
    --ysb-d-canvas: #081630;
    --ysb-d-surface: #112755;
    --ysb-d-raised: #172F60;
    --ysb-d-border: #2B4271;
    --ysb-d-text: #F7F9FC;
    --ysb-d-text-2: #B6C2D8;
    --ysb-d-muted: #93A4C2;
    --ysb-d-disabled-bg: #24395F;
    --ysb-d-disabled: #697A99;
    --ysb-white: var(--ysb-d-surface);   /* surfaces, and the text on pink/orange buttons (navy, as the dark spec asks) */
    --ysb-navy: var(--ysb-d-text);
    --ysb-muted: var(--ysb-d-text-2);
    --ysb-grey: var(--ysb-d-raised);
    --ysb-border: var(--ysb-d-border);
    --ysb-pink-dark: #FF75A4;
    --ysb-pink-tint: rgba(241, 95, 145, .16);
    --ysb-blue-tint: rgba(31, 193, 224, .16);
    --ysb-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    --ysb-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
    --ysb-image-well: #EEF2F7;
    color-scheme: dark;
}
/* html too: Bulma paints html white, and site.css limits body height, so long pages would show white below the fold */
html[data-theme="dark"], html[data-theme="dark"] body { background: var(--ysb-d-canvas); color: var(--ysb-d-text); }
html[data-theme="dark"] .ysb-header.is-scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .ysb-logo--light { display: none !important; }   /* Ayesha's white logo, background made transparent */
html[data-theme="dark"] .ysb-logo--dark { display: block !important; }
html[data-theme="dark"] .ysb-btn--green, html[data-theme="dark"] .ysb-btn--green:hover { color: var(--ysb-d-canvas) !important; }
html[data-theme="dark"] .ysb-btn--ghost { background: transparent; }
html[data-theme="dark"] .ysb-btn[disabled], html[data-theme="dark"] .ysb-btn.is-disabled { background: var(--ysb-d-disabled-bg) !important; color: var(--ysb-d-disabled) !important; border-color: var(--ysb-d-border) !important; }
html[data-theme="dark"] .ysb-shopmenu__col--cats { background: rgba(12, 221, 107, .07); border-color: rgba(12, 221, 107, .32); }
html[data-theme="dark"] .ysb-shopmenu__col--visual { background: rgba(241, 95, 145, .07); border-color: rgba(241, 95, 145, .32); }
html[data-theme="dark"] .ysb-shopmenu__cat:hover, html[data-theme="dark"] .ysb-shopmenu__cat[aria-selected="true"] { background: var(--ysb-d-raised); }
html[data-theme="dark"] .ysb-search__input::placeholder { color: var(--ysb-d-muted); }
html[data-theme="dark"] .ysb-search__form:focus-within { background: var(--ysb-d-raised); }
html[data-theme="dark"] .ysb-search__clear { background: var(--ysb-d-border); }
html[data-theme="dark"] .ysb-opt--all:hover, html[data-theme="dark"] .ysb-opt--all.is-active { background: rgba(241, 95, 145, .24); }
html[data-theme="dark"] .ysb-noresults { background: rgba(241, 95, 145, .10); border-color: rgba(241, 95, 145, .35); }
html[data-theme="dark"] .ysb-notice { background: rgba(12, 221, 107, .08); border-color: rgba(12, 221, 107, .32); }
html[data-theme="dark"] .ysb-check__box, html[data-theme="dark"] .ysb-fbt__item[aria-pressed="false"] .ysb-fbt__tick { border-color: #4A6290; }
html[data-theme="dark"] .ysb-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F7F9FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ysb-drawer__backdrop, html[data-theme="dark"] .ysb-filters-wrap::before { background: rgba(0, 0, 0, .6); }
/* Product and category images: light plate, photo colours untouched */
html[data-theme="dark"] .ysb-card__img, html[data-theme="dark"] .ysb-pdp__media, html[data-theme="dark"] .ysb-fbt__item img,
html[data-theme="dark"] .ysb-opt--product img, html[data-theme="dark"] .ysb-pdp__thumbs button,
html[data-theme="dark"] .ysb-tile__img { background: var(--ysb-image-well); color: #5d6b82; }
/* ...but only behind a real photo: placeholders (no image yet) stay on the raised surface */
html[data-theme="dark"] .ysb-card__img:not(:has(img)), html[data-theme="dark"] .ysb-tile__img:not(:has(img)),
html[data-theme="dark"] .ysb-pdp__media:not(:has(img)) { background: var(--ysb-d-raised); color: var(--ysb-d-muted); }
/* Footer (older markup with inline greys) */
html[data-theme="dark"] body > footer.footer { background: var(--ysb-d-canvas) !important; border-top: 1px solid var(--ysb-d-border); }
html[data-theme="dark"] body > footer.footer h4, html[data-theme="dark"] body > footer.footer p, html[data-theme="dark"] body > footer.footer span { color: var(--ysb-d-text-2) !important; }
html[data-theme="dark"] body > footer.footer a { color: var(--ysb-d-text-2) !important; }
html[data-theme="dark"] body > footer.footer a:hover { color: var(--ysb-green) !important; }
/* New-design leftovers: hard-coded light colours */
html[data-theme="dark"] .ysb-opt--all { color: #FF75A4 !important; }
html[data-theme="dark"] .ysb-card:hover { border-color: #4A6290; }
html[data-theme="dark"] .ysb-fbt__item img { mix-blend-mode: normal; }   /* its plate is on the img itself: multiply darkened the photo */

/* ---- Older pages (Bulma + site.css, not redesigned yet): same dark palette, so the whole customer site is dark.
   Brand colour helpers keep their colour: Bulma's has-text-* use !important, and site.css color-* classes are excluded below. ---- */
html[data-theme="dark"] strong, html[data-theme="dark"] b { color: inherit; }   /* Bulma paints strong #363636 */
html[data-theme="dark"] .content :is(h1, h2, h3, h4, h5, h6):not([class*="color-"]):not([class*="has-text-"]),
html[data-theme="dark"] .card-header-title, html[data-theme="dark"] .modal-card-title, html[data-theme="dark"] .label { color: var(--ysb-d-text); }
html[data-theme="dark"] .subtitle:not([class*="color-"]):not([class*="has-text-"]), html[data-theme="dark"] .help { color: var(--ysb-d-text-2); }
html[data-theme="dark"] hr { background-color: var(--ysb-d-border); }
html[data-theme="dark"] #main-content a:not([class]), html[data-theme="dark"] .modal a:not([class]) { color: var(--ysb-blue); }
html[data-theme="dark"] .has-text-dark, html[data-theme="dark"] .has-text-black, html[data-theme="dark"] .has-text-black-bis,
html[data-theme="dark"] .has-text-black-ter, html[data-theme="dark"] .has-text-grey-dark, html[data-theme="dark"] .has-text-grey-darker { color: var(--ysb-d-text) !important; }
html[data-theme="dark"] .has-text-grey { color: var(--ysb-d-text-2) !important; }
/* Surfaces */
html[data-theme="dark"] .box, html[data-theme="dark"] .card, html[data-theme="dark"] .modal-card-body, html[data-theme="dark"] .dropdown-content,
html[data-theme="dark"] .panel, html[data-theme="dark"] .message-body { background-color: var(--ysb-d-surface); color: var(--ysb-d-text); border-color: var(--ysb-d-border); }
html[data-theme="dark"] .modal-card-head, html[data-theme="dark"] .modal-card-foot, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .card-footer-item { background-color: var(--ysb-d-raised); border-color: var(--ysb-d-border); color: var(--ysb-d-text); }
html[data-theme="dark"] .has-background-white, html[data-theme="dark"] .has-background-white-bis, html[data-theme="dark"] .has-background-white-ter,
html[data-theme="dark"] .has-background-light, html[data-theme="dark"] .hero.is-light, html[data-theme="dark"] .hero.is-white,
html[data-theme="dark"] .section.is-light { background-color: var(--ysb-d-surface) !important; color: var(--ysb-d-text); }
html[data-theme="dark"] [style*="background-color:#F5F5F4" i], html[data-theme="dark"] [style*="background-color: #F5F5F4" i],
html[data-theme="dark"] [style*="background:#F5F5F4" i], html[data-theme="dark"] [style*="background: #F5F5F4" i],
html[data-theme="dark"] [style*="background-color:#fff;" i], html[data-theme="dark"] [style*="background-color: #fff;" i],
html[data-theme="dark"] [style*="background:#fff;" i], html[data-theme="dark"] [style*="background: #fff;" i],
html[data-theme="dark"] [style*="background-color: white" i], html[data-theme="dark"] [style*="background:white" i],
html[data-theme="dark"] [style*="background: white" i] { background-color: var(--ysb-d-raised) !important; }
html[data-theme="dark"] [style*="box-shadow: 8px 8px 31px #bababa" i] { box-shadow: var(--ysb-shadow) !important; }   /* old neumorphic glow */
html[data-theme="dark"] .color-background-white { background: var(--ysb-d-raised) !important; }   /* cart/order box header rows */
html[data-theme="dark"] .color-slate-gray { color: var(--ysb-d-text-2) !important; }
/* Sign-in / register / forgot-password "Have an account?" bands, label tiles, Sponsor-a-child tints */
html[data-theme="dark"] [style*="background:#f4f9f5" i], html[data-theme="dark"] [style*="background-color: #efeeec" i],
html[data-theme="dark"] [style*="background-color:#efeeec" i] { background: var(--ysb-d-surface) !important; }
html[data-theme="dark"] [style*="background-color:#FFF9CE" i] { background: rgba(255, 223, 9, .10) !important; }
html[data-theme="dark"] [style*="background-color:#FCDFE9" i] { background: rgba(241, 95, 145, .12) !important; }
/* Page <style> blocks: favourite-list and quote lines, checkout payment options, address pickers */
html[data-theme="dark"] .fav-line, html[data-theme="dark"] .quote-line { background-color: var(--ysb-d-surface); }
html[data-theme="dark"] .fav-line-heading, html[data-theme="dark"] .quote-line-heading { background-color: var(--ysb-d-raised); }
html[data-theme="dark"] .blue-button-unselected, html[data-theme="dark"] .orange-button-unselected { background-color: var(--ysb-d-raised) !important; }
html[data-theme="dark"] .payment-method-label { background-color: var(--ysb-d-raised); border-color: var(--ysb-d-border); }
html[data-theme="dark"] .payment-method-radio:checked + .payment-method-label { background-color: rgba(238, 133, 52, .14); border-color: #EE8534; }
html[data-theme="dark"] .pac-card, html[data-theme="dark"] .sc--search-result { background-color: var(--ysb-d-surface); }   /* + "search products to add" dropdown */
html[data-theme="dark"] .search-link { color: var(--ysb-d-text-2) !important; }   /* its result rows: Bulma grey #7A7A7A !important */
/* Bulma inverted buttons are white with coloured text: keep the colour, drop the white */
html[data-theme="dark"] .button.is-inverted:not(.is-outlined) { background-color: var(--ysb-d-raised); border-color: var(--ysb-d-border); }
html[data-theme="dark"] .button.is-pink.is-inverted:not(.is-outlined) { color: #FF75A4; }
/* Summary panels (cart, school list): headings were #66757D (about 3:1 on navy); panel gets a visible edge for bright light */
html[data-theme="dark"] .headerDarkBold { color: var(--ysb-d-text); }
/* White on the bright brand colours is 1.8-2.6:1 (unreadable in sunlight): navy text instead, as the new design does on green */
html[data-theme="dark"] :is(.color-background-green, .color-background-blue, .color-background-orange,
    .button.is-primary:not(.is-outlined):not(.is-inverted), .button.is-info:not(.is-outlined):not(.is-inverted),
    .button.is-secondary:not(.is-outlined):not(.is-inverted), .button.is-success:not(.is-outlined):not(.is-inverted)):not([style*="#7a7a7a" i]):not([style*="rgb(122, 122, 122)"]),
html[data-theme="dark"] :is(.color-background-green, .color-background-blue, .color-background-orange) *,
html[data-theme="dark"] tr.highlightbox.has-text-white[style*="background-color"], html[data-theme="dark"] .subject-title,
html[data-theme="dark"] .subject-title :is(span, label, p, .button.color-white) { color: var(--ysb-d-canvas) !important; }   /* subject header rows (brand colour per subject) */
html[data-theme="dark"] .subject-title .button.color-border-white { border-color: var(--ysb-d-canvas) !important; }
html[data-theme="dark"] :is(.color-background-pink, .button.is-pink:not(.is-outlined):not(.is-inverted), .ysb-btn--pink, .ysb-btn--orange),
html[data-theme="dark"] .color-background-pink *, html[data-theme="dark"] .featuretile-label,
html[data-theme="dark"] :is(.button.secondary, .green-button-selected, .blue-button-selected, .orange-button-selected),
html[data-theme="dark"] .alternating-cards .card-header :is(.card-header-title, .icon) { color: var(--ysb-d-canvas) !important; }   /* pink/orange too: one rule, readable outdoors */
html[data-theme="dark"] .button[style*="background-color: #7a7a7a" i], html[data-theme="dark"] .button[style*="rgb(122, 122, 122)"] { background-color: var(--ysb-d-raised) !important; border: 1px solid #4A6290; }   /* Clear Cart */
/* School and grade tiles: the grey one in the colour cycle (white text on #CBCBCB) becomes the raised navy */
html[data-theme="dark"] .six-col-cycle:nth-child(5n-2) div { background-color: var(--ysb-d-raised) !important; }
html[data-theme="dark"] .six-col-cycle:not(:nth-child(5n-2)) :is(.link-white, .new-category-tile-title, a, p, span) { color: var(--ysb-d-canvas) !important; }   /* names on the bright tiles */
/* Old product cards: photos on a light plate, as in the new cards */
html[data-theme="dark"] .bounded-image, html[data-theme="dark"] .product-image-boundries, html[data-theme="dark"] .card-image { background: var(--ysb-image-well); border-radius: 10px; }
/* Tables (site.css paints cart/school-list rows #F4F8F5 / #EFEEEC with white outlines, headers #DBDBDB) */
html[data-theme="dark"] .table tr, html[data-theme="dark"] .table tbody tr, html[data-theme="dark"] .table-mobile-12,
html[data-theme="dark"] .table-mobile-14 { background-color: var(--ysb-d-surface); outline-color: var(--ysb-d-canvas); }
html[data-theme="dark"] .table thead tr { background-color: var(--ysb-d-raised); }
html[data-theme="dark"] .is_disabled, html[data-theme="dark"] .table tr.is-disabled { background-color: var(--ysb-d-disabled-bg) !important; color: var(--ysb-d-disabled) !important; }
html[data-theme="dark"] .side-content, html[data-theme="dark"] .has-background-grey-lighter { background-color: var(--ysb-d-raised) !important; color: var(--ysb-d-text); }
html[data-theme="dark"] .side-content { border: 1px solid #4A6290; border-radius: 10px; }
html[data-theme="dark"] .table-image { background-color: var(--ysb-image-well); }
html[data-theme="dark"] .table-mobile-header-background { background-color: var(--ysb-d-raised); }   /* mobile_table.css (list/quote detail on phones) */
html[data-theme="dark"] .table-mobile-header { color: var(--ysb-d-text); }
html[data-theme="dark"] .table-mobile-subheader { color: var(--ysb-d-text-2); }
html[data-theme="dark"] .button.is-static { background-color: var(--ysb-d-raised); border-color: var(--ysb-d-border); color: var(--ysb-d-text-2); }
html[data-theme="dark"] .btn.btn-default { background-color: var(--ysb-d-raised); color: var(--ysb-d-text); border-color: var(--ysb-d-border); }
html[data-theme="dark"] [style*="background:#efeeec" i], html[data-theme="dark"] [style*="background: #efeeec" i] { background: var(--ysb-d-surface) !important; color: var(--ysb-d-text) !important; }
/* .new-table (school lists, checkout, order history) lives in the project's custom bulma.min.css */
html[data-theme="dark"] .new-table > thead > tr > th, html[data-theme="dark"] .new-table.is-mobile .header { background-color: var(--ysb-d-raised); color: var(--ysb-d-text); border-bottom-color: var(--ysb-d-border); }
html[data-theme="dark"] .new-table > tbody > tr, html[data-theme="dark"] .new-table.is-mobile > tbody > tr { background-color: var(--ysb-d-surface); }
html[data-theme="dark"] .new-table > tbody > tr > td, html[data-theme="dark"] .new-table.is-mobile > tbody > tr > td { border-color: var(--ysb-d-border); }
html[data-theme="dark"] .new-table > tbody > tr.is-disabled { background-color: var(--ysb-d-canvas) !important; color: var(--ysb-d-muted) !important; }
html[data-theme="dark"] .new-table.is-mobile > tbody > tr > td[data-label]::before { color: var(--ysb-d-text-2); }
html[data-theme="dark"] .table { background-color: transparent; color: var(--ysb-d-text); }
html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--ysb-d-border); color: inherit; }
html[data-theme="dark"] .table thead td, html[data-theme="dark"] .table thead th { color: var(--ysb-d-text); }
html[data-theme="dark"] .table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .table.is-hoverable tbody tr:not(.is-selected):hover { background-color: var(--ysb-d-raised); }
/* Forms (coloured borders from site.css color-border-* are kept) */
html[data-theme="dark"] .input, html[data-theme="dark"] .textarea, html[data-theme="dark"] .select select { background-color: var(--ysb-d-raised); color: var(--ysb-d-text); }
html[data-theme="dark"] .input:not([class*="color-border"]), html[data-theme="dark"] .textarea:not([class*="color-border"]),
html[data-theme="dark"] .select select:not([class*="color-border"]) { border-color: var(--ysb-d-border); }
html[data-theme="dark"] .input::placeholder, html[data-theme="dark"] .textarea::placeholder,
html[data-theme="dark"] .input::-webkit-input-placeholder, html[data-theme="dark"] .textarea::-webkit-input-placeholder { color: var(--ysb-d-muted) !important; }   /* a page style forces #363636 !important */
html[data-theme="dark"] .input[disabled], html[data-theme="dark"] .input[readonly], html[data-theme="dark"] .textarea[disabled] { background-color: var(--ysb-d-disabled-bg); color: var(--ysb-d-disabled); }
html[data-theme="dark"] .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--ysb-d-text-2); }
html[data-theme="dark"] .checkbox:hover, html[data-theme="dark"] .radio:hover { color: var(--ysb-d-text); }
/* Plain Bulma buttons (coloured ones keep their colours) */
html[data-theme="dark"] .button:not([class*="is-"]):not(.primary):not(.secondary):not(.ysb-btn),
html[data-theme="dark"] .button.is-white, html[data-theme="dark"] .button.is-light { background-color: var(--ysb-d-raised); color: var(--ysb-d-text); border-color: var(--ysb-d-border); }
html[data-theme="dark"] .button.is-text { color: var(--ysb-d-text-2); }
html[data-theme="dark"] .delete, html[data-theme="dark"] .modal-close { background-color: rgba(255, 255, 255, .2); }
/* Menus, dropdowns, tabs, breadcrumbs, tags, notifications, pagination */
html[data-theme="dark"] .dropdown-item, html[data-theme="dark"] .menu-list a, html[data-theme="dark"] .tabs a { color: var(--ysb-d-text-2); }
html[data-theme="dark"] a.dropdown-item:hover, html[data-theme="dark"] .menu-list a:hover { background-color: var(--ysb-d-raised); color: var(--ysb-d-text); }
html[data-theme="dark"] .dropdown-divider, html[data-theme="dark"] .tabs ul, html[data-theme="dark"] .tabs a { border-color: var(--ysb-d-border); }
html[data-theme="dark"] .menu-label { color: var(--ysb-d-muted); }
html[data-theme="dark"] .breadcrumb a { color: var(--ysb-blue); }
html[data-theme="dark"] .breadcrumb li.is-active a, html[data-theme="dark"] .breadcrumb li + li::before { color: var(--ysb-d-text-2); }
html[data-theme="dark"] .tag:not(body):not([class*="is-"]), html[data-theme="dark"] .notification:not([class*="is-"]) { background-color: var(--ysb-d-raised); color: var(--ysb-d-text); }
html[data-theme="dark"] .notification:is(.is-info, .is-primary, .is-success, .is-link) { color: var(--ysb-d-canvas); }   /* white on bright blue/green */
html[data-theme="dark"] .file-cta, html[data-theme="dark"] .file-name { background-color: var(--ysb-d-raised); color: var(--ysb-d-text); border-color: var(--ysb-d-border); }
html[data-theme="dark"] .ysb-pager span.ysb-pager__current { background: var(--ysb-blue); color: var(--ysb-d-canvas) !important; }
html[data-theme="dark"] .pagination-link,html[data-theme="dark"] .pagination-previous, html[data-theme="dark"] .pagination-next { background-color: var(--ysb-d-surface); border-color: var(--ysb-d-border); color: var(--ysb-d-text); }
/* jQuery UI autocomplete (school search) */
html[data-theme="dark"] .ui-widget.ui-widget-content { background: var(--ysb-d-surface); border-color: var(--ysb-d-border); color: var(--ysb-d-text); }
html[data-theme="dark"] .ui-menu .ui-menu-item-wrapper { color: var(--ysb-d-text); }
html[data-theme="dark"] .ui-menu .ui-state-active, html[data-theme="dark"] .ui-menu .ui-menu-item-wrapper:hover { background: var(--ysb-d-raised); border-color: var(--ysb-d-border); color: var(--ysb-d-text); margin: 0; }
/* ---- Older pages, both themes: rounded corners like the new design (Aqeel, 2026-10-09): controls 12px, panels 16px ---- */
.button, .input, .textarea, .select select, .file-cta, .file-name, .notification, .message, .tag:not(body),
.pagination-link, .pagination-previous, .pagination-next, .ui-menu, .menu-label { border-radius: var(--ysb-radius); }
.button.is-radiusless, .input.is-radiusless, .textarea.is-radiusless { border-radius: var(--ysb-radius) !important; }   /* helper used all over the old cart/checkout */
/* ...but where Bulma joins controls (has-addons, e.g. voucher code + Claim), keep the joined edges square */
.field.has-addons .control:not(:first-child) :is(.button, .input, .select select) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.field.has-addons .control:not(:last-child) :is(.button, .input, .select select) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.box, .card, .modal-card, .dropdown-content, .navbar-dropdown, .side-content, .sc--search-result, .columnCard { border-radius: var(--ysb-radius-lg); }
.columnCard, .featuretile { overflow: hidden; }   /* school/category/homepage tiles: the coloured fill follows the corners */
.featuretile, .products.has-background-grey-lighter, .side-banner,
[style*="background-color:#FFF9CE" i], [style*="background-color:#FCDFE9" i],
[style*="background-color:#F5F5F4" i], [style*="background-color: #F5F5F4" i] { border-radius: var(--ysb-radius-lg); }   /* list/quote panels, Sponsor-a-child boxes, homepage section bars */
.fav-line, .quote-line, .fav-line-heading, .quote-line-heading, .box-contents-header { border-radius: var(--ysb-radius); }
/* Summary panels (cart, checkout, school list): one inner padding so the voucher and buttons sit inside the rounded panel */
.side-content { padding: 1rem; }
.side-content #cart-summary { padding: 0 !important; }
/* The panel is too narrow for voucher code + Claim on one row: stack them, each fully rounded */
.side-content .voucher-container { flex-wrap: wrap; gap: .5rem; }
.side-content .voucher-container > .control { flex: 1 1 100%; margin-right: 0 !important; }
.side-content .field.has-addons .control :is(.button, .input) { border-radius: var(--ysb-radius) !important; }
.card > :first-child { border-top-left-radius: var(--ysb-radius-lg); border-top-right-radius: var(--ysb-radius-lg); }
.card > :last-child { border-bottom-left-radius: var(--ysb-radius-lg); border-bottom-right-radius: var(--ysb-radius-lg); }
.modal-card-head { border-top-left-radius: var(--ysb-radius-lg); border-top-right-radius: var(--ysb-radius-lg); }
.modal-card-foot { border-bottom-left-radius: var(--ysb-radius-lg); border-bottom-right-radius: var(--ysb-radius-lg); }
/* Boxed table groups (cart boxes, order history, expanded school-list alternatives): round the group's outer corners */
@media (min-width: 1024px) {
    .new-table > tbody > tr.highlightbox.top > td:first-of-type { border-top-left-radius: var(--ysb-radius-lg); }
    .new-table > tbody > tr.highlightbox.top > td:last-of-type { border-top-right-radius: var(--ysb-radius-lg); }
    .new-table > tbody > tr.highlightbox.bottom > td:first-of-type { border-bottom-left-radius: var(--ysb-radius-lg); }
    .new-table > tbody > tr.highlightbox.bottom > td:last-of-type { border-bottom-right-radius: var(--ysb-radius-lg); }
    /* Cart and school-list tables: row colours are painted by the rows, which can't be rounded or clipped per cell, and clipping
       the table would cut off the delete tooltips. So the table's four outer corners are masked with the page colour instead. */
    .new-table:is(:has(> tbody#cart-items), :has(td.subject-title)) { position: relative; }
    .new-table:is(:has(> tbody#cart-items), :has(td.subject-title))::before,
    .new-table:is(:has(> tbody#cart-items), :has(td.subject-title))::after {
        content: ""; position: absolute; left: 0; right: 0; height: var(--ysb-radius-lg); pointer-events: none; z-index: 1;
    }
    .new-table:is(:has(> tbody#cart-items), :has(td.subject-title))::before { top: 0;
        background: radial-gradient(circle at 100% 100%, transparent 15.5px, var(--ysb-page) 16px) left top / 16px 16px no-repeat,
                    radial-gradient(circle at 0 100%, transparent 15.5px, var(--ysb-page) 16px) right top / 16px 16px no-repeat; }
    .new-table:is(:has(> tbody#cart-items), :has(td.subject-title))::after { bottom: 0;
        background: radial-gradient(circle at 100% 0, transparent 15.5px, var(--ysb-page) 16px) left bottom / 16px 16px no-repeat,
                    radial-gradient(circle at 0 0, transparent 15.5px, var(--ysb-page) 16px) right bottom / 16px 16px no-repeat; }
}
@media (max-width: 1023px) {
    .new-table.is-mobile > tbody > tr.highlightbox.top { border-top-left-radius: var(--ysb-radius-lg); border-top-right-radius: var(--ysb-radius-lg); }
    .new-table.is-mobile > tbody > tr.highlightbox.bottom { border-bottom-left-radius: var(--ysb-radius-lg); border-bottom-right-radius: var(--ysb-radius-lg); }
    .new-table.is-mobile > tbody > tr:not(.highlightbox) { border-radius: var(--ysb-radius); }
}
/* Filters: a long selected-subcategory name wraps inside the panel instead of running past it */
.ysb-filters .ysb-chip { max-width: 100%; white-space: normal; line-height: 1.25; padding-top: .45rem; padding-bottom: .45rem; text-align: left; }
.ysb-filters .ysb-chip .ysb-icon { flex-shrink: 0; }

/* Desktop header layout (Aqeel, 2026-10-10): the logo on the left, as tall as the nav and search together; the nav centred
   with the search centred under it; Sign In / My account and the cart on the right, level with the nav, with the dark-mode
   switch centred beneath them, level with the search (a subgrid shares the two rows). Equal side columns keep the middle
   truly centred. Phones/tablets keep the compact bar (search row below, switch in the menu drawer). */
.ysb-actions__theme { display: none; }
@media (min-width: 1024px) {
    .ysb-header__bar {
        display: grid; grid-template-columns: var(--ysb-hdr-side, 240px) minmax(0, 1fr) var(--ysb-hdr-side, 240px);
        grid-template-areas: "logo nav actions" "logo search actions";
        column-gap: 1.25rem; row-gap: .7rem; align-items: center; min-height: 0; padding: .7rem 0 1.25rem;
    }
    .ysb-header__logo { grid-area: logo; justify-self: start; align-self: center; }
    .ysb-header__logo img { max-height: 98px; }
    .ysb-nav { grid-area: nav; justify-self: center; align-self: center; margin: 0; height: auto; }
    .ysb-search { grid-area: search; padding: 0; }
    .ysb-header .ysb-search__form { max-width: 600px; padding: .2rem .2rem .2rem .85rem; }   /* about the nav's width; a slimmer bar */
    .ysb-header .ysb-search__input { min-height: 36px; }
    .ysb-header .ysb-search__submit { min-height: 36px; padding: 0 1.1rem; }
    .ysb-actions {
        grid-area: actions; justify-self: end; align-self: stretch; margin: 0;
        display: grid; grid-template-rows: subgrid; grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 1.1rem; row-gap: normal;   /* normal = use the header grid's row gap */
    }
    .ysb-actions > * { grid-row: 1; align-self: center; }
    .ysb-actions > .ysb-actions__theme { grid-row: 2; grid-column: 1 / -1; display: flex; justify-content: center; align-self: center; }
    .ysb-header .ysb-action { font-size: .8rem; min-width: 52px; min-height: 44px; gap: 2px; }
    .ysb-header .ysb-action > .ysb-icon { width: 28px; height: 28px; }
    .ysb-header .ysb-action__label { line-height: 1.1; }
    .ysb-actions { position: relative; }
    .ysb-actions > .ysb-sr-only { position: absolute; }
    .ysb-actions__theme .ysb-theme { min-height: 30px; min-width: 44px; }
    .ysb-actions__theme .ysb-theme__svg { width: 44px; }
}
@media (min-width: 1024px) and (max-width: 1215px) {
    .ysb-header__bar { --ysb-hdr-side: 190px; column-gap: 1rem; }
    .ysb-header__logo img { max-height: 80px; }
}
@media (min-width: 1408px) {
    .ysb-header__bar { --ysb-hdr-side: 260px; }
    .ysb-header__logo img { max-height: 106px; }
}
/* Same width as the page content below (the Bulma .container the home banner and older pages use: 960 / 1152 / 1344px),
   so the logo lines up with the banner's left edge and the cart with its right edge (Aqeel). */
@media (min-width: 1024px) { .ysb-header > .ysb-container { max-width: 960px; padding: 0; } }
@media (min-width: 1216px) { .ysb-header > .ysb-container { max-width: 1152px; } }
@media (min-width: 1408px) { .ysb-header > .ysb-container { max-width: 1344px; } }
.ysb-drawer__theme { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .25rem .25rem .25rem 0; margin-top: .5rem; border-top: 1px solid var(--ysb-border); font-weight: 600; }

/* =====================================================================================================
   Homepage, design v2 pages 12-17 (Aqeel 2026-10-10). Sections sit in the Bulma .container like the rest of the page
   (so they line up with the header); below 1024px that container has no side padding, so .ysb-home__wrap adds it.
   Placeholders (.ysb-ph) show the picture size to supply until a picture is uploaded in Admin → Homepage.
   ===================================================================================================== */
.ysb-btn--blue { background: var(--ysb-blue); color: var(--ysb-white) !important; }
.ysb-btn--blue:hover { filter: brightness(.94); }
@media (max-width: 1023px) { .ysb-home__wrap { padding-left: 16px; padding-right: 16px; } }
.ysb-home__banner { padding-top: 1rem; }
.ysb-home__banner-img { display: block; width: 100%; height: auto; border-radius: var(--ysb-radius-lg); }
.ysb-home__section { margin-top: 2.5rem; }
.ysb-home__title { font-weight: 700; color: var(--ysb-navy); font-size: 1.5rem; line-height: 1.25; margin: 0 0 1rem; }
@media (max-width: 599px) { .ysb-home__title { font-size: 1.25rem; } }

/* Placeholders */
.ysb-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; padding: 1rem; border: 2px dashed #b8c4d6; border-radius: var(--ysb-radius-lg); background: repeating-linear-gradient(135deg, #f4f7fa 0 14px, #eef2f7 14px 28px); color: #5d6b82 !important; text-decoration: none !important; }
.ysb-ph__label { font-weight: 700; font-size: 1rem; color: var(--ysb-navy); }
.ysb-ph__size { font-size: .8rem; font-weight: 600; background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: 999px; padding: .15rem .65rem; color: var(--ysb-navy); }
.ysb-ph--banner { aspect-ratio: 2688 / 816; }
@media (max-width: 599px) { .ysb-ph--banner { aspect-ratio: 1 / 1; } }
.ysb-ph--tile { aspect-ratio: 1 / 1; border-radius: var(--ysb-radius); }
.ysb-ph--photo { width: 100%; height: 100%; min-height: 220px; border-radius: 0; border: 0; }
html[data-theme="dark"] .ysb-ph { border-color: var(--ysb-d-border); background: repeating-linear-gradient(135deg, #12264d 0 14px, #0f2147 14px 28px); color: var(--ysb-d-text-2) !important; }

/* Find your school list (component, also on Find My School, Capitec, Sanlam and after adding a box) */
.ysb-schoolfinder__title { font-weight: 700; color: var(--ysb-navy); font-size: 1.25rem; margin: 0 0 .75rem; }
.ysb-schoolfinder__row { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: start; }
@media (min-width: 768px) { .ysb-schoolfinder__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: start; } }
@media (min-width: 768px) { .ysb-schoolfinder__go { margin-top: 1.45rem; } }
.ysb-schoolfinder__field { position: relative; min-width: 0; }
.ysb-schoolfinder__label { display: block; font-size: .8rem; font-weight: 600; color: var(--ysb-navy); margin: 0 0 .3rem; }
.ysb-schoolfinder__input { width: 100%; min-height: 52px; padding: 0 1rem; border: 2px solid var(--ysb-border); border-radius: var(--ysb-radius); background: var(--ysb-white); color: var(--ysb-navy); font-size: 1rem; box-shadow: none; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ysb-schoolfinder__input:focus { border-color: var(--ysb-blue); box-shadow: 0 0 0 4px rgba(31, 193, 224, .15); }
.ysb-schoolfinder__input:disabled { background: var(--ysb-grey); color: var(--ysb-muted); cursor: not-allowed; }
.ysb-schoolfinder__input::placeholder { color: #8b97aa; }
.ysb-schoolfinder__go { min-height: 52px; padding: 0 1.5rem; background: #e3e8ef; color: #7d8a9e !important; border-color: transparent; cursor: not-allowed; white-space: nowrap; }
.ysb-schoolfinder__go.is-ready { background: var(--ysb-orange); color: var(--ysb-white) !important; cursor: pointer; }
.ysb-schoolfinder__go.is-ready:hover { background: var(--ysb-orange-dark); }
.ysb-schoolfinder__nomatch { margin: .35rem 0 0; font-size: .85rem; font-weight: 600; color: #c93a6c; }
.ysb-schoolfinder__upload { margin: .9rem 0 0; font-size: .92rem; color: var(--ysb-muted); }
.ysb-schoolfinder__upload a { color: #c93a6c !important; font-weight: 700; text-decoration: none; }
html[data-theme="dark"] .ysb-schoolfinder__upload a { color: #FF75A4 !important; }
.ysb-schoolfinder__upload a:hover { text-decoration: underline; }
html[data-theme="dark"] .ysb-schoolfinder__go:not(.is-ready) { background: var(--ysb-d-disabled-bg); color: var(--ysb-d-disabled) !important; }
html[data-theme="dark"] .ysb-schoolfinder__nomatch { color: #FF75A4; }
.ysb-home__finder { margin-top: 1rem; }
.ysb-home__finder-card { padding: 1.25rem; }
@media (min-width: 768px) { .ysb-home__finder-card { padding: 1.5rem 1.75rem; } }
.ysb-home__delivery { text-align: center; margin: .9rem 0 0; color: var(--ysb-navy); }
.ysb-home__delivery a { color: #0b7f96 !important; font-weight: 600; }
html[data-theme="dark"] .ysb-home__delivery a { color: var(--ysb-blue) !important; }

/* Latest updates cards (only the notice shows for now) */
.ysb-home__updates { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .ysb-home__updates { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.ysb-update { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.4rem; border-radius: var(--ysb-radius-lg); text-decoration: none !important; color: var(--ysb-navy) !important; border: 1px solid transparent; }
.ysb-update h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: inherit; }
.ysb-update p { margin: 0; line-height: 1.5; }
.ysb-update__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.ysb-update__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-weight: 700; }
.ysb-update--pink { background: #fdeef3; border-color: rgba(241, 95, 145, .35); }
.ysb-update--pink .ysb-update__eyebrow, .ysb-update--pink .ysb-update__link { color: #b3234f; }
.ysb-update--blue { background: var(--ysb-blue-tint); border-color: rgba(31, 193, 224, .35); }
.ysb-update--navy { background: #112755; color: #fff !important; }
html[data-theme="dark"] .ysb-update--pink { background: rgba(241, 95, 145, .12); }
html[data-theme="dark"] .ysb-update--pink .ysb-update__eyebrow, html[data-theme="dark"] .ysb-update--pink .ysb-update__link { color: #FF75A4; }

/* Reassurance links */
.ysb-reassure { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .5rem; background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); box-shadow: var(--ysb-shadow); }
@media (min-width: 768px) { .ysb-reassure { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .ysb-reassure.ysb-home__wrap { margin-left: 16px; margin-right: 16px; padding: .5rem; } }
.ysb-reassure__item { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 56px; padding: .6rem .75rem; border-radius: var(--ysb-radius); border-bottom: 3px solid transparent; color: var(--ysb-navy) !important; font-weight: 600; text-decoration: none !important; text-align: center; transition: background .15s ease; }
.ysb-reassure__item--green { border-bottom-color: var(--ysb-green); }
.ysb-reassure__item--blue { border-bottom-color: var(--ysb-blue); }
.ysb-reassure__item--pink { border-bottom-color: var(--ysb-pink); }
.ysb-reassure__item--orange { border-bottom-color: var(--ysb-orange); }
.ysb-reassure__item:hover, .ysb-reassure__item:focus-visible { background: var(--ysb-blue-tint); }
.ysb-reassure__item .ysb-icon { flex-shrink: 0; color: var(--ysb-muted); }

/* Shop School Essentials */
.ysb-essentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .ysb-essentials { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.ysb-essential { display: flex; flex-direction: column; gap: .6rem; text-decoration: none !important; color: var(--ysb-navy) !important; }
.ysb-essential__img { display: block; aspect-ratio: 1 / 1; border-radius: var(--ysb-radius-lg); overflow: hidden; background: var(--ysb-grey); }
.ysb-essential__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.ysb-essential:hover .ysb-essential__img img { transform: scale(1.03); }
.ysb-essential__name { font-weight: 700; font-size: 1rem; text-align: center; }
.ysb-essential:hover .ysb-essential__name { color: var(--ysb-blue) !important; }

/* What Parents Say */
.ysb-reviews { position: relative; outline: none; }
.ysb-reviews:focus-visible { box-shadow: 0 0 0 3px rgba(31, 193, 224, .35); border-radius: var(--ysb-radius-lg); }
.ysb-reviews__viewport { overflow: hidden; touch-action: pan-y; padding: 4px; margin: -4px; }
.ysb-reviews__track { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; transition: transform .45s ease; }
.ysb-review { flex: 0 0 100%; display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.4rem; background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); box-shadow: var(--ysb-shadow); }
@media (min-width: 768px) { .ysb-review { flex-basis: calc((100% - 1rem) / 2); } }
@media (min-width: 1024px) { .ysb-review { flex-basis: calc((100% - 2rem) / 3); } }
.ysb-review__mark { color: var(--ysb-orange); fill: var(--ysb-orange); }
.ysb-review blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: 1rem; line-height: 1.55; color: var(--ysb-navy); }
.ysb-review__who { margin: auto 0 0; font-size: .88rem; color: var(--ysb-muted); display: flex; flex-direction: column; }
.ysb-review__who strong { color: var(--ysb-navy); }
.ysb-reviews--few .ysb-reviews__track { justify-content: center; }
.ysb-reviews__controls { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.ysb-reviews__dots { display: flex; gap: .4rem; }
.ysb-reviews__dots button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: var(--ysb-border); cursor: pointer; }
.ysb-reviews__dots button[aria-current="true"] { background: var(--ysb-blue); width: 22px; }
@media (prefers-reduced-motion: reduce) { .ysb-reviews__track { transition: none; } }

/* School Partnerships */
.ysb-partner { display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: var(--ysb-radius-lg); background: #112755; color: #fff; }
@media (min-width: 768px) { .ysb-partner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ysb-partner__media { min-height: 220px; display: flex; }
.ysb-partner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ysb-partner__body { padding: 1.75rem 1.5rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
@media (min-width: 1024px) { .ysb-partner__body { padding: 2.5rem 2.75rem; } }
.ysb-partner__body h2 { margin: 0; color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.ysb-partner__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ysb-partner__list li { display: flex; gap: .6rem; align-items: flex-start; color: #dbe3f2; }
.ysb-partner__list .ysb-icon { flex-shrink: 0; color: var(--ysb-green); margin-top: .15rem; }
.ysb-partner .ysb-btn { align-self: flex-start; color: #112755 !important; }
html[data-theme="dark"] .ysb-partner { background: var(--ysb-d-raised); border: 1px solid var(--ysb-d-border); }
.ysb-home { padding-bottom: 1rem; }

/* Help Centre sections (the homepage links jump to #delivery, #payments, #notices) */
.ysb-help { padding-top: 1.5rem; padding-bottom: 2.5rem; max-width: 960px; }
.ysb-help__lead { color: var(--ysb-muted); margin: .25rem 0 1rem; }
.ysb-help__lead a { color: var(--ysb-blue) !important; font-weight: 600; }
.ysb-help__jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.ysb-help__section { scroll-margin-top: calc(var(--ysb-sticky-top, 140px) + 1rem); padding: 1.25rem 1.4rem; margin-bottom: 1rem; background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); box-shadow: var(--ysb-shadow); }
.ysb-help__section > h2 { font-size: 1.25rem; font-weight: 700; color: var(--ysb-navy); margin: 0 0 .75rem; }
.ysb-help__section:target { border-color: var(--ysb-blue); box-shadow: 0 0 0 3px rgba(31, 193, 224, .2); }
.ysb-help__qa + .ysb-help__qa { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--ysb-border); }
.ysb-help__qa h3 { font-size: 1rem; font-weight: 700; color: var(--ysb-navy); margin: 0 0 .25rem; }
.ysb-help__qa p, .ysb-help__section > p { margin: 0; color: var(--ysb-navy); line-height: 1.55; }
.ysb-help__qa a, .ysb-help__section > p a { color: var(--ysb-blue) !important; font-weight: 600; }
.ysb-essential__img.ysb-ph { display: flex; background: repeating-linear-gradient(135deg, #f4f7fa 0 14px, #eef2f7 14px 28px); }
html[data-theme="dark"] .ysb-essential__img.ysb-ph { background: repeating-linear-gradient(135deg, #12264d 0 14px, #0f2147 14px 28px); }
/* Older pages put the school search in a narrow inline box: give it room for the two fields and the button */
.ysb-schoolfinder { min-width: min(100%, 760px); text-align: left; }

/* Homepage hero: banner and "Find your school list" are two cards on one outer card (Aqeel 2026-10-11) */
.ysb-home__hero-wrap { padding-top: 1rem; }
.ysb-home__hero { display: grid; gap: 1rem; padding: 1rem; background: #eef2f7; border: 1px solid var(--ysb-border); border-radius: calc(var(--ysb-radius-lg) + 6px); }
@media (min-width: 768px) { .ysb-home__hero { gap: 1.25rem; padding: 1.25rem; } }
.ysb-home__card { background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); box-shadow: var(--ysb-shadow); overflow: hidden; }
.ysb-home__card.ysb-home__banner { padding: 0; }
.ysb-home__card .ysb-home__banner-img { border-radius: 0; border: 0; display: block; }
.ysb-home__card .ysb-ph--banner { border-radius: 0; border: 0; }
.ysb-home__card.ysb-home__finder-card { padding: 1.25rem; overflow: visible; }
@media (min-width: 768px) { .ysb-home__card.ysb-home__finder-card { padding: 1.5rem 1.75rem; } }
html[data-theme="dark"] .ysb-home__hero { background: var(--ysb-d-raised); border-color: var(--ysb-d-border); }

/* Starter packs page (/starter-packs) */
.ysb-packs { padding-top: 1.25rem; padding-bottom: 2.5rem; }
.ysb-packs__lead { color: var(--ysb-muted); margin: .25rem 0 1.25rem; }
.ysb-packs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .ysb-packs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.ysb-pack { display: flex; flex-direction: column; gap: .5rem; padding: .6rem; background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); text-decoration: none !important; color: var(--ysb-navy) !important; transition: border-color .15s ease, box-shadow .15s ease; }
.ysb-pack:hover { border-color: var(--ysb-blue); box-shadow: var(--ysb-shadow); }
.ysb-pack__img { aspect-ratio: 1 / 1; border-radius: var(--ysb-radius); background: var(--ysb-image-well, #eef2f7); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ysb-pack__img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ysb-pack__name { font-weight: 700; text-align: center; }

/* Landing card only (Aqeel 2026-10-11: "a bit of neumorphism", nowhere else): the outer card is a soft raised surface,
   light from the top left, and the banner/finder cards inside sit on it as gently raised panels. */
.ysb-home__hero-wrap { padding-bottom: .75rem; }
.ysb-home__hero { background: linear-gradient(145deg, #f6f9fd, #e5ebf3); border: 0; box-shadow: 14px 14px 34px rgba(17, 39, 85, .16), -12px -12px 30px rgba(255, 255, 255, .95); }
.ysb-home__hero .ysb-home__card { border: 0; box-shadow: 5px 5px 14px rgba(17, 39, 85, .09), -5px -5px 14px rgba(255, 255, 255, .9); }
@media (max-width: 767px) { .ysb-home__hero { box-shadow: 8px 8px 20px rgba(17, 39, 85, .14), -6px -6px 16px rgba(255, 255, 255, .95); } }
html[data-theme="dark"] .ysb-home__hero { background: linear-gradient(145deg, #183570, #0f2452); border: 0; box-shadow: 14px 14px 32px rgba(0, 0, 0, .5), -10px -10px 28px rgba(43, 66, 113, .4); }
html[data-theme="dark"] .ysb-home__hero .ysb-home__card { border: 1px solid rgba(43, 66, 113, .6); box-shadow: 5px 5px 14px rgba(0, 0, 0, .35), -4px -4px 12px rgba(43, 66, 113, .3); }

/* ---------------- Homepage, second pass against Ayesha's design v2 pages 12-17 (2026-10-11) ---------------- */
/* Shared white panel with a centred title (Latest Updates, Shop School Essentials, What Parents Say) */
.ysb-home__panel { background: var(--ysb-white); border: 1px solid var(--ysb-border); border-radius: var(--ysb-radius-lg); box-shadow: var(--ysb-shadow); padding: 1.5rem 1.1rem; }
@media (min-width: 768px) { .ysb-home__panel { padding: 1.75rem 2rem 2rem; } }
.ysb-home__panel-title { text-align: center; font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--ysb-navy); margin: 0 0 1.25rem; }
.ysb-home__panel-title--left { text-align: left; }
.ysb-home__panel-sub { text-align: center; margin: -1rem 0 1.25rem; color: var(--ysb-muted); font-size: .9rem; }
@media (max-width: 599px) { .ysb-home__panel-title { font-size: 1.25rem; } }

/* Select your school list (p.12): labels inside the fields, search icon, dropdown-style grade, pink no-match box */
.ysb-home__card.ysb-home__finder-card { border: 2px solid var(--ysb-blue); }
.ysb-schoolfinder__title { font-size: 1.45rem; font-weight: 700; color: var(--ysb-navy); margin: 0; }
.ysb-schoolfinder__accent { color: var(--ysb-pink); }
.ysb-schoolfinder__help { margin: .1rem 0 1rem; font-size: .82rem; color: var(--ysb-muted); }
.ysb-schoolfinder__box { position: relative; }
.ysb-schoolfinder__box .ysb-schoolfinder__label { position: absolute; top: 8px; left: 2.75rem; margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ysb-muted); pointer-events: none; z-index: 1; }
.ysb-schoolfinder__box--select .ysb-schoolfinder__label { left: 1rem; }
.ysb-schoolfinder__box .ysb-schoolfinder__input { min-height: 58px; padding: 20px 1rem 5px 2.75rem; }
.ysb-schoolfinder__box--select .ysb-schoolfinder__input { padding-left: 1rem; padding-right: 2.6rem; }
.ysb-schoolfinder__icon { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--ysb-muted); pointer-events: none; z-index: 1; }
.ysb-schoolfinder__chevron { position: absolute; right: .95rem; top: 50%; transform: translateY(-50%); color: var(--ysb-muted); pointer-events: none; }
.ysb-schoolfinder__go { min-height: 58px; }
@media (min-width: 768px) { .ysb-schoolfinder__go { margin-top: 0; } }
.ysb-schoolfinder__nomatch { margin: .5rem 0 0; padding: .6rem .8rem; border: 1px solid rgba(241, 95, 145, .45); background: #fdeef3; border-radius: var(--ysb-radius); color: #b3234f; font-size: .85rem; font-weight: 500; }
.ysb-schoolfinder__nomatch strong { color: #b3234f; }
html[data-theme="dark"] .ysb-schoolfinder__nomatch, html[data-theme="dark"] .ysb-schoolfinder__nomatch strong { background: rgba(241, 95, 145, .12); color: #FF75A4; }
.ysb-schoolfinder__upload { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 0; color: var(--ysb-navy); font-size: .95rem; }
.ysb-schoolfinder__upload a.ysb-btn { color: var(--ysb-white) !important; text-decoration: none; }
.ysb-schoolfinder__upload a.ysb-btn:hover { text-decoration: none; }

/* Latest Updates (p.13): cards inside the panel; pills */
.ysb-home__panel .ysb-home__updates { margin-top: 0; }
.ysb-update__pill { align-self: flex-start; display: inline-block; margin-bottom: .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; padding: .22rem .7rem; }
.ysb-update__pill--pink { background: var(--ysb-pink); color: #fff; }
.ysb-update__pill--green { background: var(--ysb-green); color: #112755; }
html[data-theme="dark"] .ysb-update__pill--pink { color: #112755; }
.ysb-update__sub { font-weight: 700; color: var(--ysb-blue); }

/* Reassurance links (p.14): coloured icons that match the bottom border, light tint on hover */
.ysb-reassure { margin-top: 0; }
.ysb-reassure__item { min-height: 66px; gap: .7rem; font-size: 1rem; }
.ysb-reassure__item--pink .ysb-icon { color: var(--ysb-pink); }
.ysb-reassure__item--green .ysb-icon { color: #0bbf5c; }
.ysb-reassure__item--orange .ysb-icon { color: var(--ysb-orange); }
.ysb-reassure__item--blue .ysb-icon { color: var(--ysb-blue); }
.ysb-reassure__item--pink:hover, .ysb-reassure__item--pink:focus-visible { background: rgba(241, 95, 145, .09); }
.ysb-reassure__item--green:hover, .ysb-reassure__item--green:focus-visible { background: rgba(12, 221, 107, .1); }
.ysb-reassure__item--orange:hover, .ysb-reassure__item--orange:focus-visible { background: rgba(237, 133, 52, .1); }
.ysb-reassure__item--blue:hover, .ysb-reassure__item--blue:focus-visible { background: rgba(31, 193, 224, .1); }

/* Shop School Essentials (p.15): picture tiles with the name on a tinted bar and an arrow */
.ysb-essential { position: relative; gap: 0; border-radius: var(--ysb-radius-lg); overflow: hidden; background: var(--ysb-white); border: 1px solid var(--ysb-border); transition: box-shadow .15s ease, transform .15s ease; }
.ysb-essential:hover { box-shadow: var(--ysb-shadow-lg); }
.ysb-essential__img { border-radius: 0; }
.ysb-essential__img.ysb-ph { border: 0; border-radius: 0; }
.ysb-essential__name { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .7rem .9rem; font-weight: 700; font-size: .95rem; text-align: left; }
.ysb-essential:hover .ysb-essential__name { color: var(--ysb-navy) !important; }
.ysb-essential__name .ysb-icon { flex-shrink: 0; transition: transform .15s ease; }
.ysb-essential:hover .ysb-essential__name .ysb-icon { transform: translateX(3px); }
.ysb-essential--green .ysb-essential__name { background: rgba(12, 221, 107, .16); }
.ysb-essential--pink .ysb-essential__name { background: rgba(241, 95, 145, .16); }
.ysb-essential--blue .ysb-essential__name { background: rgba(31, 193, 224, .18); }
.ysb-essential--orange .ysb-essential__name { background: rgba(237, 133, 52, .18); }

/* What Parents Say (p.16): arrows at the sides, dots below, middle card highlighted, one review per step */
.ysb-reviews { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.ysb-reviews__dots { grid-column: 1 / -1; display: flex; justify-content: center; gap: .4rem; margin-top: .75rem; }
.ysb-reviews__arrow { border: 1px solid var(--ysb-border); background: var(--ysb-white); }
.ysb-reviews.ysb-reviews--few .ysb-reviews__arrow, .ysb-reviews.ysb-reviews--few .ysb-reviews__dots { display: none; }
.ysb-reviews.ysb-reviews--few { grid-template-columns: minmax(0, 1fr); }
.ysb-review { border: 2px solid var(--ysb-border); transition: border-color .3s ease, box-shadow .3s ease; }
.ysb-review.is-active { border-color: var(--ysb-blue); box-shadow: inset 0 4px 0 var(--ysb-blue), var(--ysb-shadow); }
.ysb-review__stars { color: var(--ysb-orange); letter-spacing: 3px; font-size: 1rem; line-height: 1; }
.ysb-review blockquote { font-weight: 600; }
.ysb-review__who { flex-direction: row; align-items: center; gap: .65rem; border-top: 1px solid var(--ysb-border); padding-top: .75rem; }
.ysb-review__who > span:last-child { display: flex; flex-direction: column; }
.ysb-review__school { font-size: .8rem; color: var(--ysb-muted); }
.ysb-review__avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; background: rgba(12, 221, 107, .18); color: #0b7a3d; }
.ysb-review:nth-child(3n+2) .ysb-review__avatar { background: rgba(31, 193, 224, .18); color: #0b7f96; }
.ysb-review:nth-child(3n) .ysb-review__avatar { background: rgba(241, 95, 145, .16); color: #b3234f; }
html[data-theme="dark"] .ysb-review__avatar { color: var(--ysb-d-text) !important; }

/* School Partnerships (p.17): inset rounded picture, orange accent, coloured ticks, button arrow nudges on hover */
.ysb-partner { padding: 1rem; gap: 1.25rem; }
@media (min-width: 768px) { .ysb-partner { padding: 1.25rem; gap: 1.75rem; } }
.ysb-partner__media { border-radius: var(--ysb-radius-lg); overflow: hidden; }
.ysb-partner__media .ysb-ph--photo { border-radius: var(--ysb-radius-lg); }
.ysb-partner__body { padding: .5rem .5rem 1rem; gap: .85rem; }
@media (min-width: 1024px) { .ysb-partner__body { padding: 1.25rem 1.5rem 1.25rem .25rem; } }
.ysb-partner__accent { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--ysb-orange); }
.ysb-partner__intro { margin: -.35rem 0 0; color: #b6c2d8; font-size: .9rem; }
.ysb-partner__list li { gap: .65rem; }
.ysb-partner__list li > span { display: flex; flex-direction: column; }
.ysb-partner__list strong { color: #fff; font-weight: 600; }
.ysb-partner__list small { color: #b6c2d8; font-size: .8rem; }
.ysb-partner__benefit--green .ysb-icon { color: var(--ysb-green); }
.ysb-partner__benefit--pink .ysb-icon { color: var(--ysb-pink); }
.ysb-partner__benefit--orange .ysb-icon { color: var(--ysb-orange); }
.ysb-partner__benefit--blue .ysb-icon { color: var(--ysb-blue); }
.ysb-partner__btn .ysb-icon { transition: transform .15s ease; }
.ysb-partner__btn:hover { background: #18a9c6; filter: none; }
.ysb-partner__btn:hover .ysb-icon { transform: translateX(3px); }
@media (max-width: 767px) { .ysb-partner__btn { align-self: stretch !important; } }
/* readable small text on the light theme: deeper pink pill, deeper orange stars */
.ysb-update__pill--pink { background: #c93a6c; }
html[data-theme="dark"] .ysb-update__pill--pink { background: var(--ysb-pink); }
.ysb-review__stars { color: var(--ysb-orange-dark); }
html[data-theme="dark"] .ysb-review__stars { color: var(--ysb-orange); }
/* reviews: arrows beside the cards; on phones they sit under the card, either side of the dots */
.ysb-reviews { grid-template-areas: "prev view next" "dots dots dots"; }
.ysb-reviews__arrow--prev { grid-area: prev; } .ysb-reviews__arrow--next { grid-area: next; }
.ysb-reviews__viewport { grid-area: view; } .ysb-reviews__dots { grid-area: dots; grid-column: auto; }
@media (max-width: 599px) { .ysb-reviews { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "view view view" "prev dots next"; } .ysb-reviews__dots { margin-top: 0; align-self: center; } }
.ysb-reviews.ysb-reviews--few { grid-template-areas: "view"; }