/* ==========================================================================
   Barafu Cool — custom design system (no Bootstrap framework)
   Implements the subset of layout/components/utilities the markup uses.
   ========================================================================== */
:root{
  --primary:#0ea5e9;
  --primary-dark:#0284c7;
  --primary-light:#e0f2fe;
  --accent:#ff7a00;        /* Fanta orange */
  --accent-dark:#e85d04;
  --accent-light:#fff1e6;
  --danger:#ef4444;
  --success:#22c55e;
  --warning:#f59e0b;
  --info:#38bdf8;
  --bg:#f0f9ff;
  --surface:#ffffff;
  --border:#e0f2fe;
  --text:#0f172a;
  --muted:#64748b;
  --shadow:0 2px 12px rgba(14,165,233,0.10);
  --shadow-lg:0 8px 32px rgba(14,165,233,0.15);
  --radius:12px;
  --radius-sm:8px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.5}
a{color:var(--primary-dark);text-decoration:none}
a:hover{color:var(--primary)}
img{max-width:100%}
h1,h2,h3,h4,h5,h6{margin:0 0 .5rem;font-weight:600;line-height:1.25}
p{margin:0 0 1rem}
hr{border:0;border-top:1px solid var(--border);margin:1rem 0;opacity:1}
code{color:var(--primary-dark);background:var(--primary-light);padding:.05rem .3rem;border-radius:4px}
:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

.h1,.h2,.h3,.h4,.h5,.h6{font-weight:600;line-height:1.25;display:block}
.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.75rem}.h4{font-size:1.5rem}.h5{font-size:1.25rem}.h6{font-size:1rem}
.display-1{font-size:5rem;font-weight:800;line-height:1}
.display-4{font-size:3rem;font-weight:700;line-height:1}
.small{font-size:.85em}
.fw-bold{font-weight:700}.fw-semibold{font-weight:600}
.text-capitalize{text-transform:capitalize}
.text-center{text-align:center}.text-end{text-align:right}.text-start{text-align:left}
.text-nowrap{white-space:nowrap}
.text-decoration-none{text-decoration:none}
.text-decoration-line-through{text-decoration:line-through}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-primary{color:var(--primary)!important}
.text-muted{color:var(--muted)!important}
.text-dark{color:var(--text)!important}
.text-white{color:#fff!important}
.text-danger{color:var(--danger)!important}
.text-success{color:var(--success)!important}
.link-secondary{color:var(--muted)}
.link-secondary:hover{color:var(--text)}

/* ---------- Container ---------- */
.container,.container-fluid{width:100%;margin:0 auto;padding-left:1rem;padding-right:1rem}
@media(min-width:576px){.container{max-width:540px}}
@media(min-width:768px){.container{max-width:720px}}
@media(min-width:992px){.container{max-width:960px}}
@media(min-width:1200px){.container{max-width:1140px}}

/* ---------- Grid ---------- */
.row{--gx:1.5rem;--gy:0;display:flex;flex-wrap:wrap;margin-left:calc(-.5 * var(--gx));margin-right:calc(-.5 * var(--gx));row-gap:var(--gy)}
/* Mobile-first: every column is full width unless a col-* width applies.
   min-width:0 lets overflow children (e.g. .table-responsive) scroll instead of
   stretching the column and the whole page. */
.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;min-width:0;padding-left:calc(.5 * var(--gx));padding-right:calc(.5 * var(--gx))}
.g-0{--gx:0;--gy:0}.g-1{--gx:.25rem;--gy:.25rem}.g-2{--gx:.5rem;--gy:.5rem}.g-3{--gx:1rem;--gy:1rem}.g-4{--gx:1.5rem;--gy:1.5rem}
.gy-3{--gy:1rem}
.col{flex:1 0 0%}
.col-1{flex:0 0 auto;width:8.3333%}.col-2{flex:0 0 auto;width:16.6667%}.col-3{flex:0 0 auto;width:25%}
.col-4{flex:0 0 auto;width:33.3333%}.col-5{flex:0 0 auto;width:41.6667%}.col-6{flex:0 0 auto;width:50%}
.col-7{flex:0 0 auto;width:58.3333%}.col-8{flex:0 0 auto;width:66.6667%}.col-9{flex:0 0 auto;width:75%}
.col-10{flex:0 0 auto;width:83.3333%}.col-11{flex:0 0 auto;width:91.6667%}.col-12{flex:0 0 auto;width:100%}
@media(min-width:576px){
  .col-sm-1{flex:0 0 auto;width:8.3333%}.col-sm-2{flex:0 0 auto;width:16.6667%}.col-sm-3{flex:0 0 auto;width:25%}
  .col-sm-4{flex:0 0 auto;width:33.3333%}.col-sm-5{flex:0 0 auto;width:41.6667%}.col-sm-6{flex:0 0 auto;width:50%}
  .col-sm-7{flex:0 0 auto;width:58.3333%}.col-sm-8{flex:0 0 auto;width:66.6667%}.col-sm-12{flex:0 0 auto;width:100%}
}
@media(min-width:768px){
  .col-md-1{flex:0 0 auto;width:8.3333%}.col-md-2{flex:0 0 auto;width:16.6667%}.col-md-3{flex:0 0 auto;width:25%}
  .col-md-4{flex:0 0 auto;width:33.3333%}.col-md-5{flex:0 0 auto;width:41.6667%}.col-md-6{flex:0 0 auto;width:50%}
  .col-md-7{flex:0 0 auto;width:58.3333%}.col-md-8{flex:0 0 auto;width:66.6667%}.col-md-12{flex:0 0 auto;width:100%}
}
@media(min-width:992px){
  .col-lg-1{flex:0 0 auto;width:8.3333%}.col-lg-2{flex:0 0 auto;width:16.6667%}.col-lg-3{flex:0 0 auto;width:25%}
  .col-lg-4{flex:0 0 auto;width:33.3333%}.col-lg-5{flex:0 0 auto;width:41.6667%}.col-lg-6{flex:0 0 auto;width:50%}
  .col-lg-7{flex:0 0 auto;width:58.3333%}.col-lg-8{flex:0 0 auto;width:66.6667%}.col-lg-12{flex:0 0 auto;width:100%}
}

/* ---------- Display / flex ---------- */
.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}
.d-block{display:block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}
.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}
.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}
.align-items-center{align-items:center!important}.align-items-end{align-items:flex-end!important}.align-items-start{align-items:flex-start!important}
.align-middle{vertical-align:middle!important}
.justify-content-between{justify-content:space-between!important}
.justify-content-center{justify-content:center!important}
.justify-content-end{justify-content:flex-end!important}
.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}
.mt-auto{margin-top:auto!important}.ms-auto{margin-left:auto!important}.me-auto{margin-right:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}
@media(min-width:576px){.d-sm-inline{display:inline!important}}
@media(min-width:992px){.d-lg-none{display:none!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-auto{margin-left:auto!important}.align-items-lg-center{align-items:center!important}}

/* ---------- Spacing ---------- */
.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}
.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}
.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}
.mx-0{margin-left:0!important;margin-right:0!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}
.pt-0{padding-top:0!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}
.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}
.ps-0{padding-left:0!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}
.pe-0{padding-right:0!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}
.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}
.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}
@media(min-width:768px){.p-md-4{padding:1.5rem!important}}

/* ---------- Backgrounds / borders / misc ---------- */
.bg-white{background:#fff!important}.bg-light{background:var(--primary-light)!important}.bg-dark{background:#0b3a52!important}
.bg-primary{background:var(--primary)!important}.bg-success{background:var(--success)!important}
.bg-secondary{background:#94a3b8!important}.bg-danger{background:var(--danger)!important}.bg-warning{background:var(--warning)!important}.bg-info{background:var(--info)!important}
.border{border:1px solid var(--border)!important}.border-0{border:0!important}
.border-top{border-top:1px solid var(--border)!important}.border-bottom{border-bottom:1px solid var(--border)!important}
.rounded{border-radius:var(--radius)!important}.rounded-pill{border-radius:50rem!important}
.shadow-sm{box-shadow:var(--shadow)!important}.shadow{box-shadow:var(--shadow-lg)!important}
.w-100{width:100%!important}.h-100{height:100%!important}
.img-fluid{max-width:100%;height:auto}
.overflow-hidden{overflow:hidden!important}
.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}
.bottom-0{bottom:0!important}.end-0{right:0!important}.top-0{top:0!important}.start-0{left:0!important}
.sticky-top{position:sticky;top:0;z-index:1020}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.95rem;font-weight:500;line-height:1.4;padding:.5rem 1rem;border:1px solid transparent;
  border-radius:var(--radius-sm);cursor:pointer;background:transparent;color:var(--text);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;text-decoration:none}
.btn:hover{text-decoration:none}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-sm{padding:.3rem .6rem;font-size:.825rem}
.btn-lg{padding:.7rem 1.4rem;font-size:1.1rem}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-success:hover{filter:brightness(.95);color:#fff}
.btn-warning{background:var(--warning);border-color:var(--warning);color:#1f2937}
.btn-dark{background:#0b3a52;border-color:#0b3a52;color:#fff}
.btn-outline-primary{border-color:var(--primary);color:var(--primary-dark)}
.btn-outline-primary:hover{background:var(--primary);color:#fff}
.btn-outline-secondary{border-color:#cbd5e1;color:var(--muted)}
.btn-outline-secondary:hover{background:#f1f5f9;color:var(--text)}
.btn-outline-danger{border-color:var(--danger);color:var(--danger)}
.btn-outline-danger:hover{background:var(--danger);color:#fff}
.btn-link{border:0;color:var(--primary-dark);background:none;padding:.4rem .2rem}
.btn-link:hover{color:var(--primary);text-decoration:underline}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn-outline-accent{border-color:var(--accent);color:var(--accent-dark)}
.btn-outline-accent:hover{background:var(--accent);color:#fff}

/* Accent helpers + product price (Fanta orange) */
.text-accent{color:var(--accent)!important}
.bg-accent{background:var(--accent)!important;color:#fff}
.price{color:var(--accent);font-weight:700}

/* Brand logo. The source is a square logo on a white background, so it sits
   seamlessly on the white shop navbar, and gets a tidy white "badge" only on
   the dark admin bar / blue footer so it reads as a logo, not a photo. */
.brand-logo{height:52px;width:auto;display:block;object-fit:contain}
.navbar{padding-top:.35rem;padding-bottom:.35rem}
.navbar-brand{padding:0}
.navbar-dark .brand-logo,.site-footer .brand-logo{background:#fff;padding:5px 10px;border-radius:10px;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.footer-logo{height:72px}
.auth-logo{height:84px;width:auto;display:block;margin:0 auto 1rem;border-radius:10px}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.border-0{border:0}
.card-body{padding:1.25rem}
.card-title{font-size:1rem;font-weight:600;margin-bottom:.75rem}
.card-img-top{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);width:100%;display:block}

/* ---------- Forms ---------- */
.form-label{display:inline-block;margin-bottom:.35rem;font-size:.9rem;font-weight:500}
.form-control,.form-select{display:block;width:100%;padding:.5rem .75rem;font-size:.95rem;line-height:1.4;
  color:var(--text);background:#fff;border:1px solid #cbd5e1;border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,233,.18);outline:none}
.form-control-sm,.form-select-sm{padding:.3rem .55rem;font-size:.825rem}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;background-size:14px;padding-right:1.8rem}
textarea.form-control{min-height:80px}
.form-text{font-size:.8rem;color:var(--muted);margin-top:.25rem}
.form-check{position:relative;padding-left:1.6rem;margin-bottom:.35rem}
.form-check-input{position:absolute;left:0;top:.15rem;width:1.1rem;height:1.1rem;margin:0;cursor:pointer;accent-color:var(--primary)}
.form-check-label{cursor:pointer}
.form-switch .form-check-input{width:2.2rem;height:1.2rem;border-radius:1rem}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;color:var(--text)}
.table th,.table td{padding:.6rem .75rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.table.align-middle th,.table.align-middle td,.align-middle{vertical-align:middle}
.table-sm th,.table-sm td{padding:.4rem .5rem}
.table-light th,.table-light td,thead.table-light{background:var(--primary-light)}
.table-hover tbody tr:hover{background:#f8fbfe}
.table-success{background:#dcfce7!important}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:.3em .55em;font-size:.72rem;font-weight:600;line-height:1;border-radius:.4rem;color:#fff;background:var(--muted)}
.badge.bg-success{background:var(--success)!important}.badge.bg-secondary{background:#94a3b8!important}
.badge.bg-primary{background:var(--primary)!important}.badge.bg-danger{background:var(--danger)!important}
.badge.bg-warning{background:var(--warning)!important;color:#1f2937}.badge.bg-info{background:var(--info)!important;color:#0f172a}
.badge.text-dark{color:#1f2937!important}
.rounded-pill{border-radius:50rem!important}
.badge-soft{background:var(--primary-light);color:var(--primary-dark)}

/* ---------- Alerts ---------- */
.alert{position:relative;padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--radius-sm);margin-bottom:1rem}
.alert-success{background:#dcfce7;border-color:#86efac;color:#166534}
.alert-danger{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.alert-warning{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.alert-info{background:var(--primary-light);border-color:#7dd3fc;color:#075985}
.alert-secondary{background:#f1f5f9;border-color:#cbd5e1;color:#334155}
.alert-dismissible{padding-right:2.5rem}
.alert .btn-close{position:absolute;top:.6rem;right:.7rem}
.fade{transition:opacity .15s}.fade:not(.show){opacity:0}

/* ---------- Close button ---------- */
.btn-close{width:1.1rem;height:1.1rem;padding:0;border:0;background:transparent;cursor:pointer;opacity:.6;line-height:1}
.btn-close::before{content:"\00d7";font-size:1.3rem;color:inherit}
.btn-close:hover{opacity:1}
.btn-close-white::before{color:#fff}

/* ---------- Nav / pills ---------- */
.nav{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:.25rem}
.nav-item{list-style:none}
.nav-link{display:block;padding:.5rem .85rem;color:var(--primary-dark);border-radius:var(--radius-sm);cursor:pointer}
.nav-link:hover{background:var(--primary-light)}
.nav-pills .nav-link.active{background:var(--primary);color:#fff}
.flex-column{flex-direction:column}

/* ---------- Navbar ---------- */
.navbar{background:var(--surface);box-shadow:var(--shadow);padding:.6rem 0;border-bottom:3px solid var(--accent)}
.navbar .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.navbar-brand{font-size:1.25rem;font-weight:700;color:var(--primary-dark);margin-right:.5rem;display:inline-flex;align-items:center;gap:.4rem}
.navbar-dark{background:#0b3a52}
.navbar-dark .navbar-brand,.navbar-dark .nav-link,.navbar-dark a{color:#fff}
.navbar-toggler{display:inline-flex;align-items:center;border:1px solid var(--border);background:transparent;border-radius:var(--radius-sm);padding:.35rem .55rem;cursor:pointer}
.navbar-toggler-icon{display:inline-block;width:1.4em;height:1.4em;background:no-repeat center/100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}
.navbar-collapse{flex-basis:100%;flex-grow:1}
.navbar-nav{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:.15rem}
.navbar-nav .nav-link{padding:.5rem .75rem}
@media(max-width:991.98px){
  .navbar-expand-lg .navbar-collapse{display:none}
  .navbar-expand-lg .navbar-collapse.show{display:block}
}
@media(min-width:992px){
  .navbar-expand-lg .navbar-toggler{display:none}
  .navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto;align-items:center}
  .navbar-expand-lg .navbar-nav{flex-direction:row;align-items:center}
}

/* ---------- Dropdown ---------- */
.dropdown{position:relative}
.dropdown-toggle::after{content:"";display:inline-block;margin-left:.35em;vertical-align:.15em;border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent}
.dropdown-menu{position:absolute;z-index:1030;display:none;min-width:11rem;margin-top:.25rem;padding:.35rem 0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);list-style:none}
.dropdown-menu.show{display:block}
.dropdown-menu-end{right:0;left:auto}
.dropdown-item{display:block;width:100%;padding:.45rem 1rem;color:var(--text);background:none;border:0;text-align:left;cursor:pointer;white-space:nowrap}
.dropdown-item:hover{background:var(--primary-light);color:var(--primary-dark)}
.dropdown-divider{height:0;margin:.35rem 0;border-top:1px solid var(--border)}

/* ---------- List group ---------- */
.list-group{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.list-group-item{padding:.7rem 1rem;background:var(--surface);border-bottom:1px solid var(--border)}
.list-group-item:last-child{border-bottom:0}
.list-group-item-light{background:var(--bg)}
.list-unstyled{list-style:none;padding:0;margin:0}

/* ---------- Breadcrumb ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 1rem;gap:.4rem;font-size:.85rem}
.breadcrumb-item+.breadcrumb-item::before{content:"/";color:var(--muted);margin-right:.4rem}
.breadcrumb-item.active{color:var(--muted)}

/* ---------- Spinner ---------- */
.spinner-border{display:inline-block;width:1.4rem;height:1.4rem;border:.2em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-.15em}
.spinner-border-sm{width:1rem;height:1rem;border-width:.15em}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Toasts ---------- */
.toast-container{z-index:1090;display:flex;flex-direction:column;gap:.5rem}
.toast{min-width:240px;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);overflow:hidden;
  opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;background:var(--surface);color:var(--text)}
.toast.show{opacity:1;transform:none}
.toast .toast-body{padding:.7rem .9rem;font-size:.9rem}
.toast .d-flex{display:flex}
.text-bg-primary{background:var(--primary);color:#fff}
.text-bg-success{background:var(--success);color:#fff}
.text-bg-danger{background:var(--danger);color:#fff}
.text-bg-warning{background:var(--warning);color:#1f2937}
.text-bg-secondary{background:#475569;color:#fff}

/* ==========================================================================
   Storefront components
   ========================================================================== */
.product-card{position:relative;overflow:hidden;transition:box-shadow .15s ease,transform .15s ease}
.product-card:hover{box-shadow:var(--shadow-lg)!important;transform:translateY(-3px)}
.product-card .product-thumb{height:180px;object-fit:cover;width:100%;background:var(--primary-light)}
.product-card .product-thumb-sm{height:130px;object-fit:cover;width:100%;background:var(--primary-light)}
.wish-btn{position:absolute;top:.5rem;right:.5rem;z-index:2;border:none;background:rgba(255,255,255,.92);
  border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);box-shadow:var(--shadow);cursor:pointer;transition:color .15s,transform .15s}
.wish-btn:hover{color:var(--danger);transform:scale(1.08)}
.wish-btn.is-wished{color:var(--danger)}

/* Product detail gallery (sticky on desktop so content scrolls past the image) */
.product-gallery{position:relative}
@media(min-width:992px){.product-gallery{position:sticky;top:90px}}
.product-main-img{width:100%;height:420px;object-fit:contain;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.product-thumbs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.product-thumbs .thumb{width:72px;height:72px;object-fit:cover;border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;background:var(--primary-light)}
.product-thumbs .thumb.active,.product-thumbs .thumb:hover{border-color:var(--primary)}
.product-thumbs .thumb-label{font-size:.65rem;text-align:center;color:var(--muted)}

/* Star ratings */
.stars{display:inline-flex;color:var(--warning);font-size:1rem;line-height:1}
.stars .bi{margin-right:1px}
.rating-input{display:inline-flex;flex-direction:row-reverse;font-size:1.8rem;cursor:pointer}
.rating-input input{display:none}
.rating-input label{color:#d1d5db;padding:0 .05rem;transition:color .1s}
.rating-input label:hover,.rating-input label:hover ~ label,.rating-input input:checked ~ label{color:var(--warning)}

/* Hero */
.hero-banner{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

/* ==========================================================================
   Admin shell (responsive)
   ========================================================================== */
.admin-body{background:var(--bg)}
.admin-wrap{display:flex;min-height:calc(100vh - 56px)}
.admin-sidebar{width:240px;flex-shrink:0;background:#0b3a52}
.admin-sidebar .nav{flex-direction:column;gap:.15rem}
.admin-sidebar .nav-link{border-radius:var(--radius-sm);color:#cbd5e1}
.admin-sidebar .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-sidebar .nav-link.active{background:var(--primary);color:#fff}
.admin-main{min-width:0;flex-grow:1;background:var(--bg)}
.stat-card{border:0;border-left:4px solid var(--primary)}
@media(max-width:991.98px){
  .admin-wrap{display:block}
  .admin-sidebar{position:fixed;top:0;left:0;height:100%;width:270px;z-index:1085;transform:translateX(-100%);transition:transform .25s}
  .admin-sidebar.show{transform:none}
}

/* Offcanvas (used by the admin sidebar below lg) */
.offcanvas-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;color:#fff}
.offcanvas-body{padding:0}
.offcanvas-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1080}
@media(min-width:992px){
  .offcanvas-lg .offcanvas-header{display:none!important}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--primary-dark);color:#e0f2fe;border-top:4px solid var(--accent)}
.site-footer h6{color:#fff;font-weight:600}
.site-footer a{color:#e0f2fe;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .footer-links{margin:0}
.site-footer .footer-links li{margin-bottom:.4rem;display:flex;align-items:flex-start}
.footer-divider{border-top:1px solid rgba(255,255,255,.2);margin:1.5rem 0 1rem}

/* ---------- Misc ---------- */
.mpesa-wait{font-size:.95rem}
.object-fit-cover{object-fit:cover}
main{display:block}

/* ---------- Pagination ---------- */
.pagination{display:flex;list-style:none;margin:1.5rem 0 0;padding:0;gap:.25rem}
.pagination.justify-content-center{justify-content:center}
.pagination.flex-wrap{flex-wrap:wrap}
.page-link{display:block;padding:.45rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--primary-dark);font-size:.9rem;line-height:1.3;text-decoration:none}
a.page-link:hover{background:var(--primary-light);color:var(--primary-dark)}
.page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:#fff}
.page-item.disabled .page-link{color:var(--muted);background:var(--bg);cursor:default}

/* ---------- Category tiles ---------- */
.category-tile{transition:transform .15s ease, box-shadow .15s ease}
.category-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.category-tile .card-img-top{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}