:root{
  --bg:#0b0b0b; --panel:#121212; --ink:#fff; --dim:#9aa0a6;
  --gold:#D4AF37; --gold2:#B99018; --stroke:#262626;
  --radius:16px;
  --tab:#171717; --tabActive:#1f1f1f;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font:15px/1.45 system-ui, Segoe UI, Arial; color:var(--ink); background:var(--bg)}

/* Login */
body.login{display:grid; place-items:center}
.login-wrap{width:min(960px,92vw)}
.brand{display:flex; align-items:center; gap:12px; margin:10px 0 22px}
.brand-logo{width:56px;height:56px;border-radius:14px;border:1px solid rgba(212,175,55,.35)}
.brand h1{margin:0;font-size:22px}
.brand h1 span{color:var(--gold)} .brand p{margin:0;color:var(--dim)}

.cards{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.card{background:linear-gradient(180deg,#151515,#0f0f0f); border:1px solid var(--stroke); border-radius:var(--radius); padding:18px}
h2{margin:0 0 10px}
.dim{color:var(--dim)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px}
.input{width:100%; padding:12px; border-radius:12px; border:1px solid #2b2b2b; background:#0b0b0b; color:#fff}
.btn{border:0; border-radius:12px; padding:12px 14px; cursor:pointer}
.btn.gold{background:linear-gradient(180deg, #F4D465, #B99018); color:#171717; font-weight:700}
.err{color:#ff8a8a; min-height:18px; margin-top:6px}

/* === Smart Press Animation for Tab Buttons === */
#tabs button {
  background: #111;
  color: #eee;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 8px 18px;
  margin: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

#tabs button:hover {
  background: #222;
  color: #ffd700;
  border-color: #ffd700;
}

#tabs button.active {
  background: linear-gradient(145deg, #ffd700, #c9a500);
  color: #111;
  box-shadow: 0 0 10px #ffd70080, inset 0 0 4px #000;
  transform: scale(0.97);
  transition: all 0.15s ease;
}

/* App */
.appbar{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--stroke); background:#0f0f0f; position:sticky; top:0}
.brand-mini{width:28px;height:28px;border-radius:7px;margin-right:8px;border:1px solid rgba(212,175,55,.3)}
.appbar .left{display:flex; align-items:center}
.appbar .left b{margin-right:8px} .appbar .sub{color:var(--dim)}
.btn.pill{background:#1f1f1f; color:#fff; border:1px solid #2a2a2a; border-radius:999px; padding:8px 12px}

.view{padding:16px}
/* Tabs row */
.tabs{display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--stroke); background:#0f0f0f}
.tab{
  background:var(--tab);
  color:#ddd;
  border:1px solid #222;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .06s ease, background .12s ease;
  user-select:none;
}
.tab:hover{ box-shadow:0 2px 10px rgba(0,0,0,.25); }
.tab.active{ background:var(--tabActive); color:#fff; border-color:#333 }

/* Generic smart button effect (tabs + buttons with .smart) */
.smart.is-pressed,
.smart[aria-pressed="true"]{
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px rgba(255,255,255,.02);
  filter: brightness(0.98);
}
.smart:active{ transform: translateY(1px); }

/* KPI styles (optional) */
.kpis{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  margin:10px 0 14px;
}
.kpi{
  background: linear-gradient(180deg, #151515, #0f0f0f);
  border:1px solid #262626; border-radius:12px; padding:14px;
}
.kpi-title{ color:var(--dim); font-size:12px; margin-bottom:6px }
.kpi-value{ font-size:22px; font-weight:700 }
.dash-note{ color:var(--dim); font-size:12px }

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:12px;
}
/* Success message card under Books */
#booksMsg .success-card{
  margin-top:12px;
  padding:12px 14px;
  border-radius:8px;
  border-left:4px solid #16a34a;
  background:#ecfdf3;
  font-size:14px;
}
#booksMsg .success-title{
  font-weight:600;
  margin-bottom:6px;
}
#booksMsg .btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
#booksMsg .btn-row .btn{
  font-size:13px;
  padding:6px 10px;
}
/* ===== MARKETING TAB ===== */

.marketing-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.m-card {
  background: #111827;
  border: 1px solid #27272f;
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 130px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.m-label {
  display: block;
  font-size: 11px;
  color: #9ca3af;
}

.m-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #f9fafb;
}

.marketing-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 10px;
  align-items: flex-start;
}

.marketing-column {
  background: #050505;
  border-radius: 8px;
  padding: 8px;
  border: 1px solid #27272f;
  max-height: 420px;
  overflow-y: auto;
}

.marketing-column h3 {
  margin-top: 0;
  font-size: 14px;
}

.m-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.m-list li {
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  border: 1px solid #27272f;
  cursor: pointer;
  font-size: 13px;
  color: #e5e7eb;
}

.m-list li:hover {
  background: #111827;
}

.m-list li.m-selected {
  border-color: #f5b301;
  background: #312e0c;
}

.marketing-details {
  background: #050505;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #27272f;
  max-height: 420px;
  overflow-y: auto;
}

.m-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
  gap: 8px;
}

.m-row span:first-child {
  font-weight: 500;
  color: #e5e7eb;
}

.m-empty {
  font-size: 13px;
  color: #9ca3af;
}

.m-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.m-btn-main,
.m-btn-secondary,
.m-btn-outline {
  padding: 6px 10px;
  border-radius: 999px;
  border: none;
  font-size: 12px;
  cursor: pointer;
}

.m-btn-main {
  background: #f5b301;
  color: #111827;
}

.m-btn-secondary {
  background: #1f2937;
  color: #f9fafb;
}

.m-btn-outline {
  background: transparent;
  border: 1px solid #f5b301;
  color: #f5b301;
}

/* hide helper */
.hidden {
  display: none !important;
}
.m-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  font-size: 13px;
}

.m-list li {
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.m-list li:hover {
  background: rgba(255,255,255,0.05);
}

.m-list li.m-selected {
  background: rgba(245,179,1,0.15);
  border: 1px solid rgba(245,179,1,0.6);
}

/* ===== Books 3-panel layout ===== */
.books-layout{
  display:grid;
  grid-template-columns: 230px minmax(0, 1fr) 380px;
  gap:16px;
  align-items:flex-start;
  margin-top:8px;
}

.books-filter{
  position:sticky;
  top:80px;
}

.books-side {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;

  /* 🟡 Push scrollbar inward so border is visible */
  padding-right: 18px;
  box-sizing: border-box;
}


.books-grid{
  /* use existing .grid behavior but slightly smaller cards */
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
}

/* smaller book cards */
.books-card-inner{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:6px;
}

.book-img-wrap{
  width:100%;
  height:140px;
  border-radius:8px;
  background:#111;
  display:flex;
  justify-content:center;
  align-items:center;
}
.book-img-wrap img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:6px;
}

.book-text{
  font-size:14px;
}

.book-actions{
  display:flex;
  justify-content:flex-end;
}

.lbl-small{
  display:block;
  font-size:13px;
}

/* mobile / tablet – stack vertically */
@media (max-width: 1024px){
  .books-layout{
    grid-template-columns:1fr;
  }
  .books-filter,
  .books-side{
    position:static;
    max-height:none;
  }
}


/* ============ Books grid & compact cards ============ */



/* 4-across on desktop, tighter gaps */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 12px;
  padding: 5px;
}

/* Main book card */
.book-card {
  position: relative;                            /* needed for ribbon */
  max-width: 185px;
  min-width: 185px;
  padding: 8px 10px 12px;
  border-radius: 12px;
  border: none !important;     /* thin gold outline */
  box-shadow: 0 0 10px rgba(255,255,255,0.6); /* subtle glow */
  background: #050607;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.book-card:hover {
  box-shadow: 
    0 0 8px rgba(255, 215, 120, 0.28),
    0 0 22px rgba(255, 215, 120, 0.32);
}

/* Image area */
.book-img-wrap {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.book-img-wrap img {
  max-width: 95%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* Text area */
.book-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.book-meta {
  font-size: 11px;
  line-height: 1.3;
  color: #9ca3af;
}

/* Price + (optionally) some text on left side */
.book-price-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.book-price {
  font-weight: 700;
  font-size: 14px;
}

/* “Free delivery” RIBBON – Option D */
.badge-free-ribbon {
  position: absolute;
  top: 8px;
  right: -4px;
  padding: 4px 16px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px 0 0 999px;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.55);
  pointer-events: none;           /* don’t block Add button etc. */
}



/* Add button row */
.book-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.ribbon-free {
  background: #22c55e;
  color: white;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  white-space: nowrap;
}
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 12px;
  padding: 5px;
}

.book-card {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(245, 179, 1, 0.75); /* gold outline */
  background: #050607;
  max-width: 185px;
  min-width: 185px;
}
.payment-options,
.delivery-options {
  display: flex;
  flex-direction: column;   /* Stack each option as a row */
  gap: 6px;                 /* Space between rows */
}

.payment-options label,
.delivery-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 400;
}

.payment-options label.with-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;            /* wraps nicely on small screens */
}

.promo-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(46, 204, 113, 0.15);  /* light green for dark theme */
  color: #2ecc71;                         /* green text */
  border: 1px solid rgba(46, 204, 113, 0.4);
  font-weight: 600;
}


/* ===== FUTURE PRINT GOLD BUTTON ===== */
.btn.primary {
  background: linear-gradient(135deg, #f7e7a6 0%, #efc766 50%, #cba044 100%);
  color: #000;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.25s ease;
  box-shadow: 0 3px 12px rgba(255, 215, 130, 0.25);
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 215, 130, 0.35);
}

.btn.primary:active {
  transform: scale(0.97);
}
/* Extra space between Referral box and Proceed button */
.books-side #btnSaveOrder {
  margin-top: 8px;      /* adjust to 6–10px as you like */
  display: inline-block;
}
/* Space between Referral box and Proceed button */
.books-side #btnSaveOrder.proceed-btn {
  margin-top: 12px;
}
.btn.primary.proceed-btn {
  padding-inline: 26px;   /* bit more left–right space */
}
/* Icon + layout + glow + pulse */
.btn.primary.proceed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;

  /* extra glow + pulse (on top of your existing .btn.primary style) */
  box-shadow: 0 3px 12px rgba(255, 215, 130, 0.35);
  animation: fpPulse 3s ease-in-out infinite;
}

.btn.primary.proceed-btn .btn-icon {
  font-size: 16px;
  margin-top: 1px;
}

.btn.primary.proceed-btn .btn-label {
  white-space: nowrap;
}

/* Gentle pulse animation */
@keyframes fpPulse {
  0%, 100% {
    box-shadow: 0 3px 12px rgba(255, 215, 130, 0.30);
  }
  50% {
    box-shadow: 0 6px 20px rgba(255, 215, 130, 0.55);
  }
}

/* Mobile: make button full width */
@media (max-width: 768px) {
  .books-side #btnSaveOrder.proceed-btn {
    width: 100%;
    justify-content: center;
  }
}
.sub {
  color: #f4d37d !important;   /* Future Print gold */
  font-weight: 500;
}
.sub {
  color: #f4d37d !important;
  font-weight: 500;
  text-shadow: 0 0 6px rgba(250, 220, 140, 0.4);
}
/* ===== FUTURE PRINT GOLD GLOW (GLOBAL SHADOW) ===== */
.fp-gold-glow {
  box-shadow: 
    0 0 6px rgba(255, 215, 120, 0.20),
    0 0 14px rgba(255, 215, 120, 0.25);
  border-radius: 14px;
  transition: box-shadow 0.2s ease;
}

.fp-gold-glow:hover {
  box-shadow: 
    0 0 8px rgba(255, 215, 120, 0.28),
    0 0 22px rgba(255, 215, 120, 0.32);
}
.order-action-box {
  display: flex;
  flex-direction: column;
  gap: 10px;           /* space between buttons */
  margin-top: 12px;
}

.order-action-box .btn {
  width: 100%;
  text-align: center;
  padding: 10px 14px;
  border-radius: 8px;
}
button:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ===== Tiny Scrollbar for Books-side ===== */
.books-side::-webkit-scrollbar {
  width: 6px;              /* tiny */
}

.books-side::-webkit-scrollbar-track {
  background: transparent;
}

.books-side::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 8px;
}

.books-side::-webkit-scrollbar-thumb:hover {
  background: #888;
}

/* ===== Cart row buttons – ALL tabs (Books / General / etc.) ===== */

.cart-qty-cell {
  white-space: nowrap;        /* keep buttons on one line */
}

.cart-qty-cell button {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin: 0 2px;
  flex-shrink: 0;             /* don't squash when text is long */
}
/* Make qty button area clean and non-wrapping */
.cart-qty-container {
  white-space: nowrap;
}

.cart-qty-container button {
  min-width: 26px;
  height: 26px;
  font-size: 13px;
  padding: 0;
  line-height: 24px;
}

.cart-qty-container span {
  display: inline-block;
  width: 24px;
  text-align: center;
}
.books-refresh-wrap {
    margin-top: 10px;
    margin-bottom: 12px;
    text-align: center;
}

.books-refresh-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #f7e7a6, #efc766, #cba044);
    color: #000;
    box-shadow: 0 3px 12px rgba(255, 215, 130, 0.25);
}

.books-refresh-btn:hover {
    transform: translateY(-2px);
}

/* ===============================
   BOOKS TAB – NEW THREE PANEL LAYOUT
   =============================== */
/* ============ 3 COL LAYOUT ============ */

.books-3col-layout {
  display: grid;
  grid-template-columns: 260px minmax(0,1fr) 360px;
  gap: 18px;
  height: calc(100vh - 150px);
  padding: 10px 18px 18px 0;
}

/* -------- LEFT FIXED FILTER PANEL -------- */
.books-left-fixed {
  position: sticky;
  top: 120px;
  height: fit-content;
  background: #0d0d0d;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,215,0,0.15);
  box-shadow: 0 0 12px rgba(255,215,0,0.1);
  animation: fadeIn 0.4s ease;
}

/* GOLD TITLE BAR */
.books-left-fixed .panel-title {
  font-size: 16px;
  font-weight: 700;
  color: #FFD700;
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* -------- INPUT + DROPDOWN ENHANCEMENT -------- */

.books-left-fixed input,
.books-left-fixed select,
.books-middle-scroll input {
  background: #111;
  border: 1px solid #333;
  color: white;
  padding: 10px 12px;
  border-radius: 10px;
  width: 100%;
  transition: 0.25s;
}

.books-left-fixed input:focus,
.books-left-fixed select:focus,
.books-middle-scroll input:focus {
  border-color: #FFD700;
  box-shadow: 0 0 10px rgba(255,215,0,0.2);
}

/* -------- MIDDLE SCROLL GRID -------- */
.books-middle-scroll {
  overflow-y: auto;
  padding-right: 8px;
  animation: fadeInUp 0.55s ease;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
  gap: 20px;
}

/* BOOK CARD */
.book-card {
  background: #111;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #222;
  transition: 0.25s;
}

.book-card:hover {
  border-color: #FFD700;
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(255,215,0,0.25);
}

/* -------- RIGHT PANEL -------- */
.books-right-scroll {
  overflow-y: auto;
  padding-right: 6px;
  max-height: calc(100vh - 150px);
  animation: fadeIn 0.4s ease;
}

.books-right-scroll .card {
  background: #0f0f0f;
  border-radius: 14px;
  border: 1px solid #222;
  box-shadow: 0 0 12px rgba(255,215,0,0.15);
}

/* GOLD BUTTONS */
.btn.primary {
  background: linear-gradient(90deg, #FFD700, #cfa700);
  border: none !important;
  color: black !important;
  font-weight: 700;
  padding: 12px 0;
  border-radius: 10px;
  transition: 0.25s;
}

.btn.primary:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* SECONDARY BUTTON */
.btn.secondary {
  background: #222;
  border: 1px solid #555;
  color: white;
}

.btn.secondary:hover {
  border-color: #FFD700;
}

/* LABEL ENHANCEMENT */
.lbl {
  font-size: 13px;
  color: #bbb;
  margin-bottom: 4px;
}

/* CHIP RADIO BUTTONS */
.chip {
  background: #151515;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #333;
  cursor: pointer;
  transition: 0.25s;
}

.chip input {
  margin-right: 6px;
}

.chip:hover {
  border-color: #FFD700;
}

/* ===== ANIMATIONS ===== */

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

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== MOBILE RESPONSIVE ===== */
@media(max-width: 1100px) {
  .books-3col-layout {
    grid-template-columns: 220px 1fr;
    grid-template-areas:
      "left middle"
      "left right";
  }
}

@media(max-width: 900px) {
  .books-3col-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "middle"
      "right";
  }
  .books-left-fixed {
    position: relative;
    top: 0;
  }
}

/* ===== MISCELLANEOUS ===== */
.misc-layout {
  grid-template-columns: 220px minmax(0, 1fr) 460px;
}


.st-mrp span {
  text-decoration: line-through;
  color: #d33;
  font-size: 12px;
}

.st-our-price span {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.st-save {
  font-size: 11px;
  color: #10c020;
}


.st-mrp-strike {
  text-decoration: line-through;
  color: #ff8080;
}

.st-our-price-val {
  font-weight: 600;
}

.st-save {
  font-size: 11px;
  color: #9cff9c;
}
/* Hide COD option only on General Printing tab */
.view-print .pay-option-cod {
  display: none !important;
}
/* ===== Special Printing Layout ===== */
.sp-layout{
  display: grid;
  grid-template-columns: 2fr 1fr;   /* ✅ left 2/3, right 1/3 */
  gap: 14px;
  align-items: start;
}
.sp-left{ min-height: 70vh; }
.sp-right{ min-height: 70vh; }

/* toolbar */
.sp-toolbar{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

/* grid + cards */
.sp-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.sp-card{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
  box-shadow: 0 0 24px rgba(0,0,0,0.35);
}

.sp-thumb{
  position: relative;
  height: 170px;
  background: #0b0b0b;
}
.sp-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
}
.sp-badge.delivery{ color: #8dffb0; }
.sp-badge.pickup{ color: #ffd18d; }

.sp-meta{ padding: 12px; }
.sp-title{ font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.sp-sub{ opacity: .75; font-size: 13px; margin-bottom: 6px; }

.sp-controls{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 10px;
}
.sp-qty{ width: 110px; }
.sp-add{ flex: 1; }

.sp-prices{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 10px;
}
.sp-unit, .sp-total{
  font-weight: 700;
}

/* ✅ Special Printing: keep cart fixed/sticky like other tabs */
.sp-layout{
  align-items: start;
}

.sp-right,
.sp-layout .books-side{
  position: sticky;
  top: 115px;
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
  align-self: start;
}

/* Mobile/tablet: normal stacking */
@media (max-width: 1100px){
  .sp-right,
  .sp-layout .books-side{
    position: static;
    max-height: none;
    overflow: visible;
  }
}
/* ===== Free Delivery Batch ===== */

.book-card{ position:relative; overflow:hidden; }

.badge-free{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-radius:700px;
  font-size:11px;
  font-weight:700;
  color:#0b0b0b;
  background: linear-gradient(90deg, #d9ffb0, #7dff9e);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10px 20px rgba(0,0,0,.25);
  white-space:nowrap;
}

.badge-free .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#0b0b0b;
  box-shadow: 0 0 14px rgba(125,255,158,.9);
}

.badge-free{
  position:relative;
}
.badge-free::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: translateX(-120%);
  animation: shine 2.9s infinite;
  opacity:.45;
}
@keyframes shine{
  0%{ transform: translateX(-120%); }
  60%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}
/* ===== BOOKS GRID (FINAL) ===== */
.books-grid{
  display:grid;
  gap:12px;
  padding:5px;

  /* ✅ desktop: 4 per row */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* laptop: 3 per row */
@media (max-width: 1400px){
  .books-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* tablet: 2 per row */
@media (max-width: 1024px){
  .books-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* mobile: 1 per row */
@media (max-width: 600px){
  .books-grid{ grid-template-columns: 1fr; }
}


/* ===== GENERAL PRINTING LAYOUT ===== */
/* ===================== GP FINAL LAYOUT (NO OVERLAP) ===================== */
/* ===== GP 3-column layout ===== */
.gp-3col{
  display: grid;
  grid-template-columns: 420px 520px minmax(420px, 520px);
  gap: 18px;
  align-items: start;
}

/* Compact cards */
.gp-compact .gp-section{
  background: linear-gradient(180deg, #0f0f0f, #0b0b0b);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,215,0,0.08);
}

/* Two/Three column form rows */
.gp-two{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.gp-three{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; }

.gp-jobcat-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.gp-method-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.gp-direct-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

/* Actions */
.gp-actions{ display:flex; gap:10px; }
.gp-actions .btn{ flex:1; }

/* RIGHT panel compact: smaller padding, fixed height + internal scroll */
.gp-right-compact{
  padding: 12px !important;
  max-height: calc(100vh - 220px);
  overflow: auto;
  position: sticky;
  top: 120px;
}

/* Make fieldsets tighter inside right panel */
.gp-right-compact fieldset.card{
  padding: 10px !important;
}
.gp-right-compact .mt12{ margin-top: 10px !important; }
.gp-right-compact .mt16{ margin-top: 12px !important; }

/* Responsive: stack nicely */
@media (max-width: 1300px){
  .gp-3col{
    grid-template-columns: 1fr;
  }
  .gp-right-compact{
    position: static;
    max-height: none;
  }
}
.gp-finishes{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.gp-fin-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px;
  border-radius:12px;
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(255,215,0,0.08);
}

.gp-fin-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.gp-fin-name{ font-weight:700; }
.gp-fin-meta{ font-size:12px; opacity:0.75; }

@media (max-width: 900px){
  .gp-finishes{ grid-template-columns:1fr; }
}
/* Quick preset buttons */
.gp-direct-btn{
  background:#f2f2f2;
  color:#000;
  border-radius:14px;
  padding:14px 18px;
  font-weight:600;
  border:2px solid transparent;
  transition: all .15s ease;
}

/* Hover */
.gp-direct-btn:hover{
  background:#fff;
}

/* ACTIVE (selected) */
.gp-direct-btn.active{
  background: linear-gradient(135deg,#FFD700,#FFC400);
  color:#000;
  border-color:#FFD700;
  box-shadow: 0 0 14px rgba(255,215,0,.55);
}
/* ---------- Ripple (works 100%) ---------- */
/* ===== FORCE RIPPLE for GP Quick Presets ===== */
button.gp-direct-btn{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate; /* keep ripple on top */
}

button.gp-direct-btn::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.55) !important;
  transform: translate(-50%,-50%) scale(0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

button.gp-direct-btn:active::after{
  animation: gpRipple .55s ease-out !important;
}

@keyframes gpRipple{
  0%   { transform: translate(-50%,-50%) scale(0);  opacity: .55; }
  100% { transform: translate(-50%,-50%) scale(20); opacity: 0; }
}
/* Ripple span */
.gp-direct-btn{
  position: relative;
  overflow: hidden;
}

.gp-ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transform: scale(0);
  animation: gpRipple .6s ease-out;
  pointer-events: none;
}

@keyframes gpRipple{
  to{
    transform: scale(2.8);
    opacity: 0;
  }
}
.fp-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.fp-modal{
  width: min(420px, 92vw);
  background: rgba(20,20,20,.98);
  border: 1px solid rgba(255,215,0,.35);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}

.fp-modal-title{
  font-weight: 700;
  margin-bottom: 6px;
  color: #ffd54a;
  font-size: 16px;
}

.fp-modal-text{
  color: rgba(255,255,255,.85);
  font-size: 13px;
  line-height: 1.4;
}

.fp-modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}
.mkt-actions{ text-align:right; white-space:nowrap; }
.ibtn{
  width:34px; height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  margin-left:6px;
  font-weight:800;
}
.ibtn.ok{ background:rgba(255,215,0,.18); border-color:rgba(255,215,0,.28); }
.ibtn.pay{ background:rgba(0,255,150,.12); }
.ibtn.del{ background:rgba(255,0,0,.12); }
.ibtn:disabled{ opacity:.35; cursor:not-allowed; }

.fp-modal-row{ margin-top: 12px; }

.fp-modal-label{
  display:block;
  font-size: 12px;
  opacity: .85;
  margin-bottom: 6px;
}

.fp-modal-input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
}

.fp-modal-hint{
  font-size: 11px;
  opacity: .65;
  margin-top: 6px;
}
/* ✅ Keep modal buttons clean even if .btn.primary is overridden elsewhere */
#reqDelModal .btn{
  border-radius: 12px;
  padding: 10px 14px;
}

#reqDelModal .btn.primary{
  background: linear-gradient(135deg, #f7e7a6 0%, #efc766 50%, #cba044 100%);
  color: #000 !important;
  font-weight: 700;
}
/* ===== Production KPI row (force horizontal like Marketing) ===== */
#prodKpiRow.mkt-top{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin-bottom:10px;
  align-items:stretch;
}

#prodKpiRow .mkt-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:70px;
}

/* ===== MARKETING: make LEFT panel narrower, RIGHT table wider ===== */
.mkt-grid{
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;  /* left | right */
  gap: 14px !important;
  align-items: start !important;
}

/* left card (filters) */
.mkt-grid > .card:first-child{
  min-width: 200px !important;
  max-width: 220px !important;
}

/* right card (table container) */
.mkt-grid > .card:last-child{
  min-width: 0 !important;    /* IMPORTANT: allow expanding */
  width: 100% !important;
}
.fin-pill.due{
  border-color: rgba(120,170,255,.45);
}
.fin-due{
  font-size:12px;
  opacity:.9;
  white-space:nowrap;
}
.fin-due small{
  opacity:.75;
}
.fin-tr.closedSoon{
  border: 1px solid rgba(255,140,0,.35);
}
.fin-tr.okClose{
  border: 1px solid rgba(60,220,120,.25);
}
.delivery-options input:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.delivery-options input:disabled + span {
  opacity: .5;
}
/* ================= SPECIAL PRINTING (PREMIUM UI) ================= */

/* Layout: left content looks framed */
.sp-left{
  background: radial-gradient(1200px 600px at 30% 10%, rgba(255,215,0,.09), transparent 55%),
              radial-gradient(900px 500px at 70% 0%, rgba(0,180,255,.08), transparent 55%),
              rgba(0,0,0,.55);
  border: 1px solid rgba(255,215,0,.18);
  box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: 18px;
}

/* Toolbar: cleaner + more contrast */
.sp-toolbar{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}
.sp-toolbar .input{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.sp-toolbar .input:focus{
  outline:none;
  border-color: rgba(255,215,0,.45);
  box-shadow: 0 0 0 3px rgba(255,215,0,.10), inset 0 0 0 1px rgba(255,215,0,.15);
}

/* ================= SPECIAL PRINTING – CARD V2 (NEW LOOK) ================= */

/* ================= SPECIAL PRINTING – GRID ================= */

.sp-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap:18px;                    /* slightly increased spacing */
}


/* ================= CARD BASE ================= */

.sp-card2{
  display:grid;
  grid-template-columns: 190px 1fr;
  min-height: 210px;
  border-radius: 18px;
  overflow:hidden;
  background: linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.02)
  );

  /* Main white border */
  border: 1px solid rgba(255,255,255,.14);

  /* Slight yellow glow (very soft) */
  box-shadow:
      0 18px 45px rgba(0,0,0,.45),
      0 0 8px rgba(255,215,0,.12);

  backdrop-filter: blur(10px);
}



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

.sp-card2:hover{
  border: 1px solid rgba(255,215,0,.65);
  box-shadow:
    0 22px 60px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,215,0,.35),
    0 0 30px rgba(255,215,0,.25);
  transform: translateY(-4px);
  background: linear-gradient(
      180deg,
      rgba(255,215,0,.08),
      rgba(255,215,0,.03)
  );
}


/* ================= IMAGE SIDE ================= */

.sp2-media{
  position:relative;
  overflow:hidden;
  background: radial-gradient(
                circle at 30% 20%,
                rgba(255,215,0,.20),
                rgba(0,0,0,0) 55%
              ),
              linear-gradient(
                180deg,
                rgba(0,0,0,.35),
                rgba(0,0,0,.75)
              );
}

.sp2-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition: transform .35s ease;
}

.sp-card2:hover .sp2-img{
  transform: scale(1.05);     /* subtle zoom effect */
}

.sp2-overlay{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}


/* ================= CHIPS ================= */

.sp-chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color:#fff;
}

.sp-chip-delivery{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.18);
}

.sp-chip-pickup{
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.16);
}

.sp-chip-muted{
  opacity:.9;
}


/* ================= CONTENT SIDE ================= */

.sp2-body{
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sp2-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.sp2-title{
  font-size:19px;
  font-weight:800;
  color:#fff;
  line-height:1.2;
  transition: color .25s ease;
}

.sp-card2:hover .sp2-title{
  color:#ffd400;              /* title becomes gold on hover */
}

.sp2-code{
  font-size:12px;
  opacity:.9;
  color:#fff;
  padding:6px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
}


/* price row */
.sp2-metaRow{
  display:grid;
  grid-template-columns: 90px 1fr 1fr;
  gap:10px;
}
.sp2-metaBox,
.sp2-priceBox,
.sp2-totalBox{
  border-radius:14px;
  padding:10px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
}
.sp2-priceBox{
  border-color: rgba(255,215,0,.22);
  background: rgba(255,215,0,.08);
}
.sp2-totalBox{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.sp2-metaLabel,
.sp2-priceLabel,
.sp2-totalLabel{
  font-size:11px;
  opacity:.8;
  color:#fff;
}
.sp2-metaVal{
  margin-top:2px;
  font-size:18px;
  font-weight:900;
  color:#fff;
}
.sp2-priceVal{
  margin-top:2px;
  font-size:18px;
  font-weight:900;
  color:#ffd400;
}
.sp2-totalVal{
  margin-top:2px;
  font-size:18px;
  font-weight:900;
  color:#fff;
}

/* actions */
.sp2-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:2px;
}

.sp2-qtyWrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
}
.sp2-qtyBtn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-size:18px;
  cursor:pointer;
}
.sp2-qtyBtn:hover{
  background: rgba(255,255,255,.10);
}
.sp2-qtyInput{
  width:86px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color:#fff;
  text-align:center;
  font-weight:800;
  outline:none;
}
.sp2-addBtn{
  flex:1;
  width:100%;
  height:56px;
  border-radius:8px;
  background: linear-gradient(180deg, #ffd400, #f2b800);
  box-shadow: 
    0 12px 24px rgba(255,215,0,.18),
    0 0 0 1px rgba(255,215,0,.35) inset;
  transition: all .2s ease;
}

.sp2-addBtn:hover{
  transform: translateY(-2px);
  box-shadow: 
    0 16px 30px rgba(255,215,0,.28),
    0 0 0 1px rgba(255,215,0,.45) inset;
}

.sp2-addIcon{ font-size:16px; }

.sp2-hint{
  font-size:12px;
  opacity:.72;
  color:#fff;
  margin-top:-2px;
}
/* chips row under title */
.sp2-chipsRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}

/* code chip separate style */
.sp-chip-code{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  opacity:.95;
}
/* CLEAN LINE-WISE STYLE */
.sp-clean .sp2-lines{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.sp-clean .sp2-line{
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-size:12px;
  color:#fff;
  opacity:.95;
}
.sp-clean .sp2-line span{
  opacity:.75;
}
.sp-clean .sp2-line b{
  font-weight:900;
  letter-spacing:.3px;
}

/* STACKED layout: qty bar then button */
.sp2-actionsStack{
  flex-direction:column;
  align-items:stretch;
}

.sp2-actionsStack .sp2-qtyWrap{
  width:100%;
  justify-content:space-between;
}

.sp2-actionsStack .sp2-addBtn{
  width:100%;
}

/* BUY PDF */


.view{ max-width:none !important; } /* full width */

/* ===== GRID LAYOUT ===== */
.pdf-4col{
  display:grid;
  gap:12px;
  align-items:start;

  grid-template-columns:
    270px                 /* LEFT */
    320px                 /* UNITS */
    440px                 /* ✅ PRESETS (wider) */
    minmax(280px, 1fr);   /* ✅ CART (smaller) */
}


/* IMPORTANT: allow shrink */
.books-filter,
#pdfUnitsPanel,
#pdfPresetsPanel,
#cartSide{
  min-width:0;
}

/* ===== UNITS PANEL SCROLL ===== */
#pdfUnitsPanel{
  max-height:560px;
  overflow:auto;
}

/* ===== PRESETS PANEL SCROLL ===== */
#pdfPresetsPanel{
  max-height:560px;
  overflow:auto;
}

/* ===== CART STICKY (like TM) ===== */
#cartSide{
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow: auto;
}

/* ===== LEFT FILTER SCROLL ===== */
.books-filter{
  max-height: calc(100vh - 110px);
  overflow:auto;
}

/* ===== Responsive (same behavior as TM) ===== */
@media (max-width: 1180px){
  .pdf-4col{
    grid-template-columns: 270px 1fr;
  }

  #pdfUnitsPanel{
    grid-column: 1 / -1;
  }

  #pdfPresetsPanel{
    grid-column: 1 / -1;
  }

  #cartSide{
    grid-column: 1 / -1;
    position: static;
    max-height: none;
  }
}
/* ===== PDF UNIT CHIPS (Teaching Style) ===== */

#pdfList{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.pdf-chip{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,215,0,.16);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  user-select:none;
}

.pdf-chip:hover{
  border-color: rgba(255,215,0,.35);
}

.pdf-chip-name{
  font-weight:600;
  font-size:13px;
}

.pdf-chip-sub{
  font-size:11px;
  opacity:.7;
}

.pdf-chip-price{
  font-weight:700;
  font-size:14px;
  margin-top:4px;
}

.pdf-chip.is-on{
  border-color: #32d96b;
  box-shadow: 0 0 14px rgba(50,217,107,0.28);
  background: linear-gradient(180deg, #0f1511, #0a120d);
}

.pdf-chip.is-on .pdf-chip-name{
  color: #ffffff;
}

.pdf-chip.is-on .pdf-chip-price{
  color: #32d96b;
}
/* Quick Presets: ALWAYS 2 per row */
#pdfPresetRow.pdf-presets-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* ✅ 2 columns */
  gap:12px;
}
.pdf-preset-card img{
  height:120px;            /* was 140px */
}

.pdf-preset-body{
  padding:8px 10px;        /* slightly tighter */
}

.pdf-preset-price-new{
  font-size:15px;          /* slightly smaller */
}
#cartSide .input{
  padding:8px 10px;
  border-radius:12px;
}

#cartSide .btn{
  padding:8px 10px;
  border-radius:12px;
}
/* 4 columns: make presets wider, cart smaller */
.books-layout.pdf-4col{
  grid-template-columns: 320px 1.45fr 1.25fr 320px; /* cart smaller, presets wider */
}

/* presets: 2 per row */
#pdfView .pdf-presets-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

/* preset card styling */
#pdfView .pdf-preset-card{
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,215,0,0.18);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  text-align:left;
  padding:0;
}

#pdfView .pdf-preset-card img{
  width:100%;
  height:120px; /* slightly smaller */
  object-fit:cover;
  display:block;
}
/* Compact PDF Units */
.pdf-chip-compact{
  border:1px solid rgba(255,215,0,.2);
  border-radius:10px;
  padding:8px 10px;
  margin-bottom:6px;
  cursor:pointer;
  transition:0.2s;
  background:rgba(255,255,255,.03);
}

.pdf-chip-compact:hover{
  border-color:#D4AF37;
  transform:translateY(-1px);
}

.pdf-chip-compact.is-on{
  border-color:#00c853;
  background:rgba(0,200,83,.08);
}

.pdf-chip-top{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  font-weight:600;
}

.pdf-chip-meta{
  font-size:11px;
  opacity:.7;
  margin-top:2px;
}
/* ===== Stationeries-style card for PDF Presets ===== */

/* ===== Compact Professional Preset Cards ===== */

.pdf-presets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:10px;
}

.pdf-preset-card{
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(212,175,55,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.pdf-preset-card:hover{
  transform:translateY(-2px);
  border-color:rgba(212,175,55,.45);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.fs-imgWrap{
  height:130px;   /* smaller image */
  background: rgba(0,0,0,.25);
}

.fs-body{
  padding:10px 12px 12px;
}

.fs-title{
  font-size:14px;        /* smaller title */
  font-weight:700;
  line-height:1.25;
  margin-bottom:4px;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.fs-meta{
  font-size:11px;
  opacity:.7;
  margin-bottom:6px;
}

.fs-old{
  font-size:11px;
  margin-bottom:2px;
}

.fs-oldVal{
  color:#ff6b6b;
  text-decoration: line-through;
  font-weight:700;
}

.fs-new{
  font-size:13px;
  margin-bottom:4px;
}

.fs-newVal{
  font-size:15px;
  font-weight:800;
}

.fs-save{
  font-size:11px;
  color:#36ff75;
  font-weight:700;
  margin-bottom:8px;
}

.fs-btn{
  width:100%;
  border:none;
  cursor:pointer;
  background:#D4AF37;
  color:#000;
  font-weight:800;
  border-radius:10px;
  padding:8px 10px;   /* smaller button */
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.fs-plus{
  font-size:16px;
}
/* =========================
   BUY PDF — Layout Overrides
   Paste at END of style.css
========================= */

/* 4 columns: Filters | Units | Presets | Cart */
.books-layout.pdf-4col{
  display:grid;
  grid-template-columns: 240px 1.05fr 1.05fr 420px; /* ✅ cart wider */
  gap:12px;
}

/* Slightly tighter padding for left + units */
#pdfUnitsPanel, .books-filter{
  padding:10px !important;
}
/* Preset image box: center + smaller */
#pdfPresetsPanel .fs-imgWrap{
  height:110px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px !important;
  background: rgba(0,0,0,.22) !important;
}

/* Image itself smaller and centered (no full cover) */
#pdfPresetsPanel .fs-img{
  width:auto !important;
  height:100% !important;
  max-height:94px !important;
  object-fit:contain !important;
  border-radius:10px !important;
}
/* Units list grid tighter */
#pdfList.pdf-unit-grid{
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap:8px !important;
}

/* Unit card compact */
.pdf-unit-card{
  border-radius:14px !important;
  padding:10px !important;
}

.pdf-unit-title{
  font-size:13px !important;
  margin-bottom:4px !important;
}

.pdf-unit-sub{
  font-size:11px !important;
  opacity:.75 !important;
  margin-bottom:8px !important;
}

.pdf-unit-select{
  padding:7px 8px !important;
  border-radius:10px !important;
  font-size:11px !important;
}
.pdf-chip-sub2{
  font-size: 11px;
  opacity: .78;
  margin-top: 4px;
}

/* =========================
   Global Add-to-cart Button (Elegant Compact)
========================= */

.fp-addcart-btn{
  width:100%;
  border:none;
  cursor:pointer;
  background:#D4AF37;
  color:#000;
  font-weight:600;

  border-radius:8px;
  padding:7px 10px;
  font-size:13px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  box-shadow:0 4px 10px rgba(0,0,0,.22);
  transition:all .15s ease;
}

.fp-addcart-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.fp-addcart-plus{
  font-size:14px;
  line-height:1;
  font-weight:700;
}
.fp-addcart-btn{
  background:#D4AF37;
  color:#000;
  font-weight:600;
  font-size:13px;
  padding:8px 12px;
  border-radius:8px;
  box-shadow:none;
}
/* Add-to-cart success state */

.fp-addcart-btn.added{
  background:#2ecc71;
  color:#fff;
}

.fp-addcart-btn.added .fp-addcart-plus{
  display:none;
}
/* ===== GP Quick Presets ===== */
.gp-direct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gp-direct-btn {
  background: #151515;
  color: #f3f3f3;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  transition: all 0.18s ease;
}

.gp-direct-btn:hover {
  background: #222;
  border-color: #d4af37;
  color: #ffd86b;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.18);
}

.gp-direct-btn.active {
  background: linear-gradient(135deg, #f4d465, #b99018);
  color: #111;
  border-color: #f4d465;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}
.gp-live-calc{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(212,175,55,.22);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  font-size:13px;
  line-height:1.45;
}

.gp-live-calc strong{
  color:#f4d465;
}
/* =========================
   MISCELLANEOUS – FINAL COMPACT PROFESSIONAL UI
   ========================= */

/* ===== Main layout ===== */
.misc-layout{
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr) 365px; /* slightly bigger left panel */
  gap:10px;
  align-items:flex-start;
  margin-top:8px;
}

/* ===== Left filter panel ===== */
.misc-layout .books-filter{
  padding:10px 8px;
  border-radius:16px;
  background:linear-gradient(180deg,#0b0b0b,#070707);
  border:1px solid rgba(212,175,55,0.15);
  box-shadow:
    0 0 6px rgba(255,215,120,0.12),
    0 0 14px rgba(255,215,120,0.12);
}

.misc-layout .books-filter .b{
  margin-bottom:6px;
  font-size:14px;
}

.misc-layout .books-filter label{
  font-size:11px;
  color:#d0d0d0;
  margin-bottom:3px;
}

.misc-layout .books-filter .lbl{
  font-size:12px;
}

.misc-layout .books-filter .input,
.misc-layout .books-filter select,
.misc-layout .books-filter input{
  font-size:12.5px;
  padding:7px 9px;
  border-radius:10px;
  border:1px solid #2a2a2a;
  background:#080808;
  color:#fff;
}

.misc-layout .books-filter .btn{
  padding:9px 10px;
  font-size:13px;
  border-radius:12px;
}

/* ===== Middle items grid ===== */
.misc-layout #misc_items.books-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap:4px;
  padding:2px;
  justify-items:start;
  align-items:start;
}

/* ===== Item card ===== */
.misc-book-style{
  position:relative;
  z-index:0;
  width:188px;
  min-width:188px;
  min-height:224px;
  padding:10px 10px 10px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.05);
  background:#050607;
  box-shadow:
    0 0 12px rgba(255,255,255,0.45),
    0 0 20px rgba(255,215,0,0.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.misc-book-style:hover{
  transform:translateY(-3px);
  border-color:rgba(255,215,120,0.20);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.45),
    0 0 18px rgba(255,215,120,0.25),
    0 0 38px rgba(255,215,120,0.15);
}

/* ===== Shimmer border effect ===== */
.misc-book-style::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(
    120deg,
    rgba(255,215,120,0.0) 20%,
    rgba(255,215,120,0.35) 50%,
    rgba(255,215,120,0.0) 80%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transform:translateX(-120%);
  transition:opacity .25s ease;
}

.misc-book-style:hover::after{
  opacity:1;
  animation:cardShimmer 1.6s ease forwards;
}

/* ===== Image ===== */
.misc-book-style .book-thumb{
  width:100%;
  height:126px;
  border-radius:14px;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  overflow:hidden;
}

.misc-book-style .book-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  display:block;
}

.book-thumb-placeholder{
  width:100%;
  height:126px;
  border-radius:14px;
  background:#111;
  color:#aaa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}

/* ===== Text area compact ===== */
.misc-book-style .book-title{
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.24;
  margin-bottom:3px;
  min-height:28px;
}

.misc-book-style .book-sub{
  color:#b1b8c2;
  font-size:10.8px;
  line-height:1.28;
  min-height:20px;
  margin-bottom:4px;
  font-weight:500;
}

.misc-book-style .book-meta-line{
  color:#8f97a2;
  font-size:10px;
  line-height:1.22;
  min-height:14px;
  margin-bottom:7px;
}

/* ===== Price row ===== */
.misc-book-style .book-price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  margin-bottom:6px;
}

.misc-book-style .book-price{
  color:#fff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.1px;
  line-height:1.15;
}

/* ===== Free delivery pill ===== */
.misc-book-style .book-free-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  min-width:72px;
  padding:0 8px;
  font-size:8px;
  font-weight:700;
  border-radius:999px;
  background:linear-gradient(90deg,#baff9e,#7cf08b);
  color:#111;
  white-space:nowrap;
  line-height:1;
  box-shadow:0 0 6px rgba(126,240,137,0.18);
  animation:miscPulse 2s ease-in-out infinite;
  overflow:hidden;
}

.misc-book-style .book-free-pill::after{
  content:"";
  position:absolute;
  top:0;
  left:-45%;
  width:36%;
  height:100%;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.45),
    rgba(255,255,255,0)
  );
  transform:skewX(-20deg);
  animation:miscShine 2.5s linear infinite;
}

/* ===== Add button ===== */
.misc-book-style .book-add-btn{
  width:100%;
  border:none;
  border-radius:10px;
  height:30px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
  background:linear-gradient(180deg,#f2cf4d,#d9b33a);
  color:#111;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(217,179,58,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s ease;
}

.misc-book-style .book-add-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(217,179,58,0.28);
}

.misc-book-style .book-add-btn:active{
  transform:scale(.98);
}

/* ===== Right panel compact ===== */
.misc-layout .books-side{
  width:100%;
  max-width:365px;
  padding:12px !important;
  border-radius:16px;
}

.misc-layout .books-side #cartBox{
  font-size:13px;
  padding:10px !important;
  margin-bottom:10px !important;
  border-radius:14px;
}

.misc-layout .books-side fieldset.card{
  padding:10px 12px !important;
  margin-top:10px !important;
  border-radius:14px;
}

.misc-layout .books-side legend.lbl{
  font-size:12px;
  padding:0 4px;
}

.misc-layout .books-side .b.mb4{
  margin-bottom:5px !important;
  font-size:14px;
}

.misc-layout .books-side .lbl-small{
  font-size:12px;
  display:block;
  margin-bottom:0;
}

.misc-layout .books-side .lbl-small .input,
.misc-layout .books-side .lbl-small input{
  margin-top:4px;
  padding:8px 10px;
  font-size:13px;
  border-radius:10px;
}

.misc-layout .books-side .mt16{ margin-top:10px !important; }
.misc-layout .books-side .mt12{ margin-top:8px !important; }
.misc-layout .books-side .mt8{ margin-top:5px !important; }
.misc-layout .books-side .mb12{ margin-bottom:8px !important; }
.misc-layout .books-side .mb8{ margin-bottom:6px !important; }
.misc-layout .books-side .mb4{ margin-bottom:4px !important; }
.misc-layout .books-side .mt6{ margin-top:4px !important; }

.misc-layout .books-side .payment-options label,
.misc-layout .books-side .delivery-options label{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:4px 0;
  line-height:1.25;
  font-size:13px;
}

.misc-layout .books-side .muted.small{
  font-size:11px;
  line-height:1.3;
}

.misc-layout .books-side .proceed-btn{
  width:100%;
  padding:10px 12px;
  font-size:14px;
  border-radius:12px;
}

/* ===== Cart summary row tightening ===== */
.misc-layout .books-side #cartBox .row,
.misc-layout .books-side #cartBox .sum-row,
.misc-layout .books-side #cartBox .cart-row,
.misc-layout .books-side #cartBox .line,
.misc-layout .books-side #cartBox .kv{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
}

.misc-layout .books-side #cartBox .row > :first-child,
.misc-layout .books-side #cartBox .sum-row > :first-child,
.misc-layout .books-side #cartBox .cart-row > :first-child,
.misc-layout .books-side #cartBox .line > :first-child,
.misc-layout .books-side #cartBox .kv > :first-child{
  white-space:nowrap;
  flex:0 1 auto;
}

.misc-layout .books-side #cartBox .row > :last-child,
.misc-layout .books-side #cartBox .sum-row > :last-child,
.misc-layout .books-side #cartBox .cart-row > :last-child,
.misc-layout .books-side #cartBox .line > :last-child,
.misc-layout .books-side #cartBox .kv > :last-child{
  white-space:nowrap;
  text-align:right;
  flex:0 0 auto;
}

/* ===== Animations ===== */
@keyframes miscPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 8px rgba(126,240,137,0.20);
  }
  50%{
    transform:scale(1.04);
    box-shadow:0 0 14px rgba(126,240,137,0.34);
  }
}

@keyframes miscShine{
  0%{ left:-45%; }
  100%{ left:120%; }
}

@keyframes cardShimmer{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(120%); }
}

/* ===== Responsive ===== */
@media (max-width:1400px){
  .misc-layout #misc_items.books-grid{
    grid-template-columns:repeat(3,minmax(170px,1fr));
  }
}

@media (max-width:1100px){
  .misc-layout{
    grid-template-columns:205px minmax(0,1fr);
  }

  .misc-layout .books-side{
    grid-column:1 / -1;
    max-width:none;
  }
}

@media (max-width:768px){
  .misc-layout{
    grid-template-columns:1fr;
  }

  .misc-layout #misc_items.books-grid{
    justify-items:center;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  }
}
.misc-layout .books-side #cartBox .row,
.misc-layout .books-side #cartBox .sum-row{
  align-items:center;
}

.misc-layout .books-side #cartBox .row > :first-child,
.misc-layout .books-side #cartBox .sum-row > :first-child{
  white-space:nowrap;        /* 🔥 force single line */
  overflow:hidden;
  text-overflow:ellipsis;    /* safety */
}
.misc-layout .books-side #cartBox{
  word-break:keep-all;
}
.misc-layout{
  grid-template-columns: 220px minmax(0, 1fr) 390px;
}

.misc-layout .books-side{
  max-width:390px;
}
.misc-book-style .book-title{
  text-align:center;     /* 🔥 center title */
}
.misc-book-style .book-sub,
.misc-book-style .book-meta-line{
  text-align:center;
}
.misc-layout .books-filter{
  transition:all .25s ease;
}

.misc-layout .books-filter:hover{
  box-shadow:
    0 0 10px rgba(255,215,120,0.18),
    0 0 28px rgba(255,215,120,0.20);
  transform:translateY(-2px);
}
.misc-layout .books-filter select,
.misc-layout .books-filter input{
  transition:all .18s ease;
}

.misc-layout .books-filter select:hover,
.misc-layout .books-filter input:hover{
  border-color:rgba(255,215,120,0.35);
  box-shadow:0 0 6px rgba(255,215,120,0.18);
}

.misc-layout .books-filter select:focus,
.misc-layout .books-filter input:focus{
  border-color:#d9b33a;
  box-shadow:0 0 8px rgba(217,179,58,0.35);
  outline:none;
}
#misc_new_order{
  transition:all .2s ease;
}

#misc_new_order:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:
    0 6px 16px rgba(217,179,58,0.35),
    0 0 18px rgba(255,215,120,0.35);
}
#misc_clear_filters{
  transition:all .18s ease;
}

#misc_clear_filters:hover{
  background:#fff;
  color:#000;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(255,255,255,0.15);
}
.misc-layout .books-filter::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  background:linear-gradient(
    120deg,
    transparent 20%,
    rgba(255,215,120,0.2) 50%,
    transparent 80%
  );
  opacity:0;
  transform:translateX(-120%);
  transition:opacity .3s ease;
  pointer-events:none;
}

.misc-layout .books-filter:hover::after{
  opacity:1;
  animation:filterShimmer 1.5s ease forwards;
}

@keyframes filterShimmer{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(120%); }
}
/* =========================
   STATIONERY – COMPACT CATALOG UI
   ========================= */

.stationery-layout{
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr) 365px;
  gap:10px;
  align-items:flex-start;
  margin-top:8px;
}

.stationery-layout .books-filter{
  padding:10px 8px;
  border-radius:16px;
}

.stationery-layout #st_grid.books-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap:6px;
  padding:2px;
  justify-items:start;
  align-items:start;
}

.st-card{
  position:relative;
  width:188px;
  min-width:188px;
  min-height:250px;
  padding:10px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.05);
  background:#050607;
  box-shadow:
    0 0 12px rgba(255,255,255,0.45),
    0 0 20px rgba(255,215,0,0.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  transition:.18s ease;
}

.st-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,215,120,0.20);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.45),
    0 0 18px rgba(255,215,120,0.25),
    0 0 38px rgba(255,215,120,0.15);
}

.st-card .book-thumb{
  width:100%;
  height:126px;
  border-radius:14px;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  overflow:hidden;
}

.st-card .book-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  display:block;
}

.st-card .book-title{
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.24;
  margin-bottom:3px;
  text-align:center;
}

.st-card .book-sub,
.st-card .book-meta-line{
  text-align:center;
}

.st-card .book-sub{
  color:#b1b8c2;
  font-size:10.8px;
  line-height:1.28;
  margin-bottom:4px;
  font-weight:500;
}

.st-card .book-meta-line{
  color:#8f97a2;
  font-size:10px;
  line-height:1.22;
  margin-bottom:7px;
}

.st-mrp{
  font-size:10px;
  text-align:center;
  margin-bottom:3px;
  color:#ff6b6b;   /* 🔥 more attractive */
  font-weight:600;
}

.st-mrp-strike{
  text-decoration:line-through;
  color:#ff3b3b;
  font-weight:700;

  text-shadow:0 0 6px rgba(255,60,60,0.4);
}
.st-our-price{
  font-size:11px;
  color:#ddd;
  text-align:center;
}

.st-our-price-val{
  color:#fff;
  font-weight:800;
}

.st-save{
  font-size:10px;
  color:#7ef08b;
  text-align:center;
  margin-top:2px;

  font-weight:700;
  text-shadow:0 0 6px rgba(126,240,137,0.4);
}

.st-card .book-price-row{
  justify-content:flex-start;   /* no space-between anymore */
}

.st-card .book-price{
  color:#fff;
  font-weight:800;
  font-size:12px;
}

.st-card .book-free-pill{
  position:absolute;
  top:8px;
  right:8px;

  height:20px;
  padding:0 8px;

  font-size:8px;
  font-weight:700;

  border-radius:999px;
  background:linear-gradient(90deg,#baff9e,#7cf08b);
  color:#111;

  white-space:nowrap;

  box-shadow:0 0 6px rgba(126,240,137,0.25);
  z-index:2;
}

.st-card .book-add-btn{
  width:100%;
  border:none;
  border-radius:10px;
  height:30px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
  background:linear-gradient(180deg,#f2cf4d,#d9b33a);
  color:#111;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(217,179,58,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s ease;
}

.st-card .book-add-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(217,179,58,0.28);
}

/* remove double-box look */
.stationery-layout .books-cart #cartBox{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:6px 0 10px !important;
  margin-bottom:10px !important;
  border-radius:0;
}

@media (max-width:1100px){
  .stationery-layout{
    grid-template-columns: 205px minmax(0, 1fr);
  }

  .stationery-layout .books-cart{
    grid-column:1 / -1;
    max-width:none;
  }
}

@media (max-width:768px){
  .stationery-layout{
    grid-template-columns:1fr;
  }

  .stationery-layout #st_grid.books-grid{
    justify-items:center;
  }
}
/* =========================
   STATIONERY – COMPACT CATALOG UI
   ========================= */

/* =========================
   STATIONERY – CLEAN COMPACT UI
   ========================= */

.stationery-layout{
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr) 420px;
  gap:8px;
  align-items:flex-start;
  margin-top:8px;
}

/* left filter */
.stationery-layout .books-filter{
  padding:10px 8px;
  border-radius:16px;
}

/* middle panel: no separate heavy frame */
.stationery-layout > section.card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* tighter card spacing */
.stationery-layout #st_grid.books-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap:4px;
  padding:2px;
  justify-items:start;
  align-items:start;
}

/* stationery cards */
.st-card{
  position:relative;
  width:188px;
  min-width:188px;
  min-height:235px;
  padding:10px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.05);
  background:#050607;
  box-shadow:
    0 0 12px rgba(255,255,255,0.45),
    0 0 20px rgba(255,215,0,0.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  transition:.18s ease;
}

.st-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,215,120,0.20);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.45),
    0 0 18px rgba(255,215,120,0.25),
    0 0 38px rgba(255,215,120,0.15);
}

.st-card .book-thumb{
  width:100%;
  height:126px;
  border-radius:14px;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  overflow:hidden;
}

.st-card .book-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  display:block;
}

.st-card .book-title{
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.24;
  margin-bottom:3px;
  text-align:center;
}

.st-card .book-sub,
.st-card .book-meta-line{
  text-align:center;
}

.st-card .book-sub{
  color:#b1b8c2;
  font-size:10.8px;
  line-height:1.28;
  margin-bottom:4px;
  font-weight:500;
}

.st-card .book-meta-line{
  color:#8f97a2;
  font-size:10px;
  line-height:1.22;
  margin-bottom:6px;
}

.st-mrp{
  font-size:10px;
  color:#aab1bb;
  margin-bottom:2px;
  text-align:center;
}

.st-mrp-strike{
  text-decoration:line-through;
  opacity:.8;
}

.st-our-price{
  font-size:11px;
  color:#ddd;
  text-align:center;
}

.st-our-price-val{
  color:#ffffff;
  font-weight:900;
  font-size:13px;
}

.st-save{
  font-size:10px;
  color:#7ef08b;
  text-align:center;
  margin-top:2px;
}

/* remove duplicate bottom price row price */
.st-card .book-price-row{
  justify-content:flex-start;   /* no space-between anymore */
}
.st-card .book-price{
  display:none;
}

.st-card .book-free-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  min-width:72px;
  padding:0 8px;
  font-size:8px;
  font-weight:700;
  border-radius:999px;
  background:linear-gradient(90deg,#baff9e,#7cf08b);
  color:#111;
  white-space:nowrap;
  line-height:1;
  box-shadow:0 0 6px rgba(126,240,137,0.18);
}

.st-card .book-add-btn{
  width:100%;
  border:none;
  border-radius:10px;
  height:30px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
  background:linear-gradient(180deg,#f2cf4d,#d9b33a);
  color:#111;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(217,179,58,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s ease;
}

.st-card .book-add-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(217,179,58,0.28);
}

/* right cart panel wider */
.stationery-layout .books-cart{
  width:100%;
  max-width:420px;
  border-radius:18px;
  background:linear-gradient(180deg,#0a0a0a,#060606);
  border:1px solid rgba(255,215,120,0.12);
  box-shadow:
    0 0 10px rgba(255,215,120,0.12),
    0 0 25px rgba(255,215,120,0.08);
  transition:all .25s ease;
}

.stationery-layout .books-cart:hover{
  transform:translateY(-2px);
  border-color:rgba(255,215,120,0.30);
  box-shadow:
    0 0 18px rgba(255,215,120,0.25),
    0 0 40px rgba(255,215,120,0.18),
    0 10px 30px rgba(0,0,0,0.45);
}

/* remove inner double-box */
.stationery-layout .books-cart #cartBox{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:6px 0 10px !important;
  margin-bottom:10px !important;
  border-radius:0;
}

/* clean fieldsets */
.stationery-layout .books-cart fieldset.card{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  background:#0c0c0c;
}

/* no horizontal scroll */
.stationery-layout .books-cart,
.stationery-layout .books-cart *{
  box-sizing:border-box;
}

.stationery-layout .books-cart{
  overflow-x:hidden;
}

@media (max-width:1100px){
  .stationery-layout{
    grid-template-columns:205px minmax(0, 1fr);
  }

  .stationery-layout .books-cart{
    grid-column:1 / -1;
    max-width:none;
  }
}

@media (max-width:768px){
  .stationery-layout{
    grid-template-columns:1fr;
  }

  .stationery-layout #st_grid.books-grid{
    justify-items:center;
  }
}
.st-offer-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:4px;
  min-height:24px;
}

.st-save{
  font-size:10px;
  color:#7ef08b;
  text-align:center;
  font-weight:700;
  text-shadow:0 0 6px rgba(126,240,137,0.25);
  animation:stSavePulse 2s ease-in-out infinite;
}

.st-card .book-free-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:20px;
  min-width:74px;
  padding:0 8px;
  font-size:8px;
  font-weight:700;
  border-radius:999px;
  background:linear-gradient(90deg,#baff9e,#7cf08b);
  color:#111;
  white-space:nowrap;
  line-height:1;
  box-shadow:0 0 6px rgba(126,240,137,0.18);
  animation:stFreePulse 2.2s ease-in-out infinite;
}

/* remove old duplicate bottom price line spacing if still present */
.st-card .book-price-row{
  display:none;
}

@keyframes stSavePulse{
  0%,100%{
    transform:scale(1);
    text-shadow:0 0 6px rgba(126,240,137,0.18);
  }
  50%{
    transform:scale(1.04);
    text-shadow:0 0 10px rgba(126,240,137,0.35);
  }
}

@keyframes stFreePulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 6px rgba(126,240,137,0.18);
  }
  50%{
    transform:scale(1.04);
    box-shadow:0 0 10px rgba(126,240,137,0.30);
  }
}
.st-card .book-free-pill{
  position:relative;
  top:-4px;        /* 🔼 move UP */
  left:6px;        /* ➡️ move RIGHT */

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

  height:20px;
  min-width:74px;
  padding:0 8px;

  font-size:8px;
  font-weight:700;

  border-radius:999px;
  background:linear-gradient(90deg,#baff9e,#7cf08b);
  color:#111;

  white-space:nowrap;
  line-height:1;

  box-shadow:0 0 6px rgba(126,240,137,0.18);

  animation:stFreePulse 2.2s ease-in-out infinite;
}
.st-card .book-free-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:20px;
  min-width:74px;
  padding:0 8px;

  font-size:8px;
  font-weight:700;

  border-radius:999px;
  background:linear-gradient(90deg,#baff9e,#7cf08b);
  color:#111;

  white-space:nowrap;
  line-height:1;

  box-shadow:0 0 6px rgba(126,240,137,0.20);

  /* 🔥 subtle premium pulse */
  animation:stFreePulse 2.2s ease-in-out infinite;

  overflow:hidden;
}
.st-card .book-free-pill::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:30%;
  height:100%;

  background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.45),
    rgba(255,255,255,0)
  );

  transform:skewX(-20deg);

  animation:stFreeShine 2.8s linear infinite;
}
@keyframes stFreePulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 6px rgba(126,240,137,0.18);
  }
  50%{
    transform:scale(1.05);
    box-shadow:0 0 12px rgba(126,240,137,0.35);
  }
}

@keyframes stFreeShine{
  0%{ left:-40%; }
  100%{ left:120%; }
}
.st-card:hover .book-free-pill{
  animation-duration:1.5s;
}
.book-free-pill{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#103b12;

  background:linear-gradient(180deg,#b8ff9e,#8ef17f);

  overflow:hidden; /* needed for woosh */

  box-shadow:
    0 0 8px rgba(130,255,130,0.25),
    0 2px 8px rgba(0,0,0,0.18);

  animation: fpGlow 2.2s ease-in-out infinite;
}

.sp2-offer-row{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin:8px 0 10px;
}
.book-free-pill::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );

  transform:skewX(-25deg);
  animation: fpWoosh 2.8s linear infinite;
}
@keyframes fpGlow{
  0%{
    transform:scale(1);
    box-shadow:0 0 8px rgba(130,255,130,0.25), 0 2px 8px rgba(0,0,0,0.18);
  }
  50%{
    transform:scale(1.04);
    box-shadow:0 0 16px rgba(130,255,130,0.45), 0 2px 10px rgba(0,0,0,0.2);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 8px rgba(130,255,130,0.25), 0 2px 8px rgba(0,0,0,0.18);
  }
}
@keyframes fpWoosh{
  0%{
    left:-120%;
  }
  60%{
    left:120%;
  }
  100%{
    left:120%;
  }
}
/* =========================
   BUY PDF – FINAL COMPACT + WOOSH READY
========================= */

/* ===== PRESET GRID ===== */
.pdf-presets-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  align-items:start;
}

@media (max-width:1200px){
  .pdf-presets-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:700px){
  .pdf-presets-grid{ grid-template-columns:1fr; }
}

/* ===== PRESET CARD ===== */
.pdf-preset-card{
  background:linear-gradient(180deg,#111,#0b0b0b);
  border:1px solid rgba(212,175,55,0.55);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 10px rgba(212,175,55,0.10);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.pdf-preset-card:hover{
  transform:translateY(-2px) scale(1.005);
  box-shadow:0 0 16px rgba(212,175,55,0.18);
}

/* ===== THUMB ===== */
.pdf-preset-thumbWrap{
  position:relative;
  height:102px;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0f0f0f;
}

.pdf-preset-thumb{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  transition:transform .20s ease;
}

.pdf-preset-card:hover .pdf-preset-thumb{
  transform:scale(1.04);
}

/* ===== BADGES ===== */
.pdf-preset-badge,
.pdf-preset-ribbon{
  position:absolute;
  top:8px;
  border-radius:999px;
  font-size:10.5px;
  line-height:1;
  white-space:nowrap;
}

.pdf-preset-badge{
  left:8px;
  background:rgba(212,175,55,0.15);
  color:#f0c85a;
  border:1px solid rgba(212,175,55,0.45);
  padding:4px 9px;
  font-weight:700;
}

.pdf-preset-ribbon{
  right:8px;
  background:linear-gradient(180deg,#ff7a18,#ffb347);
  color:#111;
  padding:4px 9px;
  font-weight:800;
  box-shadow:0 0 8px rgba(255,179,71,.22);
  z-index:2;
}

/* ===== BODY ===== */
.pdf-preset-body{
  padding:10px 10px 11px;
  text-align:center;
}

.pdf-preset-title{
  color:#fff;
  font-size:13.5px;
  font-weight:800;
  line-height:1.18;
  margin:0;
}

.pdf-preset-subline{
  color:#c8c8c8;
  font-size:11.5px;
  line-height:1.28;
  margin-top:2px;
}

.pdf-preset-includes{
  margin-top:3px;
  font-size:11.5px;
  color:#9fd3ff;
  font-weight:600;
  text-align:center;
  line-height:1.2;
}

.pdf-preset-units{
  margin-top:1px;
  font-size:10.8px;
  color:#d7d7d7;
  text-align:center;
  line-height:1.22;
}

/* ===== PRICE ===== */
.pdf-preset-priceBox{
  margin-top:4px;
}

.pdf-preset-old{
  color:#ff6b6b;
  font-size:11.5px;
  text-decoration:line-through;
  margin-bottom:1px;
  line-height:1.15;
}

.pdf-preset-priceRow{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  margin-top:1px;
  flex-wrap:nowrap;
}

.pdf-preset-new{
  font-size:13.5px;
  font-weight:800;
  color:#fff;
  line-height:1.1;
}

.pdf-preset-saveInline{
  color:#32d96b;
  font-size:11.5px;
  font-weight:800;
  white-space:nowrap;
  line-height:1.1;
}

/* ===== BUTTON ===== */
.pdf-preset-btn{
  margin-top:6px;
  width:100%;
  background:linear-gradient(180deg,#f4d465,#c79b20);
  color:#111;
  font-weight:800;
  padding:8px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-size:14px;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.pdf-preset-btn:hover{
  filter:brightness(1.02);
}

.pdf-preset-btn:active{
  transform:scale(.985);
}

/* ===== UNIT LIST CARDS ===== */
.pdf-chip{
  background:linear-gradient(180deg,#111,#0b0b0b);
  border:1px solid rgba(212,175,55,0.35);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.pdf-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 0 10px rgba(212,175,55,0.12);
}

.pdf-chip.is-on{
  border-color:#f0c85a;
  box-shadow:0 0 12px rgba(240,200,90,0.18);
}

.pdf-chip-name{
  color:#fff;
  font-size:13.5px;
  font-weight:700;
  line-height:1.18;
  margin-bottom:3px;
}

.pdf-chip-sub2{
  color:#cfcfcf;
  font-size:10.8px;
  line-height:1.22;
  margin-bottom:1px;
}

.pdf-chip-sub{
  color:#e8d28a;
  font-size:10.8px;
  line-height:1.22;
  margin-bottom:3px;
}

.pdf-chip-medium{
  color:#f0c85a;
  font-weight:700;
}

.pdf-chip-price{
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1.1;
}

/* ===== WOOSH EFFECT ===== */
.cart-woosh-clone{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 0 18px rgba(212,175,55,0.28);
  transition:
    left .55s cubic-bezier(.2,.8,.2,1),
    top .55s cubic-bezier(.2,.8,.2,1),
    width .55s cubic-bezier(.2,.8,.2,1),
    height .55s cubic-bezier(.2,.8,.2,1),
    opacity .55s ease,
    transform .55s ease;
}

.cart-pulse{
  animation:cartPulse .45s ease;
}

@keyframes cartPulse{
  0%   { box-shadow:0 0 0 rgba(240,200,90,0); }
  35%  { box-shadow:0 0 18px rgba(240,200,90,.35); }
  100% { box-shadow:0 0 0 rgba(240,200,90,0); }
}
.pdf-chip.is-on{
  border-color: #32d96b;
  box-shadow: 0 0 14px rgba(50,217,107,0.28);
  background: linear-gradient(180deg, #0f1511, #0a120d);
}

.pdf-chip.is-on .pdf-chip-name{
  color: #ffffff;
}

.pdf-chip.is-on .pdf-chip-price{
  color: #32d96b;
}
.pdf-chip{
  transition: all .18s ease;
}
.pdf-chip{
  position: relative;
}

.pdf-chip-tick{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #32d96b;
  color: #07110a;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(50,217,107,0.30);
}
.pdf-chip.is-on{
  border-color: #32d96b;
  box-shadow: 0 0 14px rgba(50,217,107,0.25);
  background: linear-gradient(180deg, #111, #0d1410);
}
.cart-woosh-clone{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(50,217,107,0.25);
  transition:
    left .55s cubic-bezier(.2,.8,.2,1),
    top .55s cubic-bezier(.2,.8,.2,1),
    width .55s cubic-bezier(.2,.8,.2,1),
    height .55s cubic-bezier(.2,.8,.2,1),
    opacity .55s ease,
    transform .55s ease;
}

.cart-pulse{
  animation: cartPulse .75s ease;
}

@keyframes cartPulse{
  0%   { box-shadow: 0 0 0 rgba(50,217,107,0); }
  55%  { box-shadow: 0 0 22px rgba(50,217,107,.35); }
  100% { box-shadow: 0 0 0 rgba(50,217,107,0); }
}
.cart-woosh-clone{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(50,217,107,0.25);
  transition:
    left .75s cubic-bezier(.2,.8,.2,1),
    top .75s cubic-bezier(.2,.8,.2,1),
    width .75s cubic-bezier(.2,.8,.2,1),
    height .75s cubic-bezier(.2,.8,.2,1),
    opacity .75s ease,
    transform .75s ease;
}

.cart-pulse{
  animation: cartPulse .75s ease;
}

@keyframes cartPulse{
  0%   { box-shadow: 0 0 0 rgba(50,217,107,0); }
  35%  { box-shadow: 0 0 22px rgba(50,217,107,.35); }
  100% { box-shadow: 0 0 0 rgba(50,217,107,0); }
}

/* ===== teaching materials ===== */
/* =========================================================
   TEACHING MATERIAL PRINTING - FINAL CLEAN CSS
   Replace old TM CSS with this single block
========================================================= */

/* full width view */
.view{
  max-width:none !important;
}

/* ---------- main 4-column layout ---------- */
.tm-layout{
  display:grid !important;
  grid-template-columns: 240px 400px 380px 420px;
  gap:16px;
  align-items:start;
  max-width:1600px;
  margin:0 auto;
}

.tm-left,
.tm-units,
.tm-mid,
.tm-right{
  min-width:0;
  width:100%;
}

/* ---------- responsive ---------- */
@media (max-width: 1500px){
  .tm-layout{
    grid-template-columns: 230px 380px 420px 380px;
  }
}

@media (max-width: 1280px){
  .tm-layout{
    grid-template-columns: 1fr 1fr;
  }

  .tm-left,
  .tm-units,
  .tm-mid,
  .tm-right{
    max-width:none !important;
  }
}

@media (max-width: 900px){
  .tm-layout{
    grid-template-columns: 1fr;
  }
}

/* ---------- panels ---------- */
.tm-left{
  max-width:240px;
}

.tm-units{
  max-width:420px;
}

.tm-mid{
  max-width:460px;
  padding:14px !important;
}

.tm-right{
  max-width:420px;
  position:sticky;
  top:90px;
  align-self:start;
  max-height:calc(100vh - 110px);
  overflow:auto;
}

.books-side.tm-right{
  width:100%;
}

/* ---------- common inputs ---------- */
.tm-left .input,
.tm-mid .input,
.tm-right .input,
.tm-left select.input,
.tm-mid select.input,
.tm-right select.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(180deg,#111,#0b0b0b) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  box-shadow:none !important;
}

.tm-left select.input option,
.tm-mid select.input option,
.tm-right select.input option{
  background:#111 !important;
  color:#fff !important;
}

#tm_qty{
  text-align:left;
}

/* ---------- left action buttons ---------- */
.tm-left-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}

.tm-left-actions .btn{
  width:100%;
}

#tm_add_left{
  grid-column:1 / -1;
  font-weight:700;
}

/* compact TM button sizing */
#tmAddSelected,
#tmClearSelected,
#tm_add_left,
#tm_refresh_left,
#tm_new_order{
  padding:8px 12px !important;
  min-height:36px !important;
  height:36px !important;
  line-height:1 !important;
  border-radius:10px !important;
  font-size:13px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

#tmAddSelected{
  font-weight:700 !important;
}

#tmClearSelected{
  background:#f3f4f6 !important;
  color:#111 !important;
  border:1px solid #d1d5db !important;
}

/* ---------- calc box ---------- */
#tm_calc{
  border-radius:14px !important;
  border:1px solid rgba(212,175,55,.16);
  background:linear-gradient(180deg,#141414,#101010);
  font-size:13px;
  line-height:1.45;
}

#tm_calc .b{
  color:#fff;
}

#tm_calc b{
  color:#f5d46b;
}

/* ---------- units header ---------- */
.tm-units-head{
  position:sticky;
  top:0;
  z-index:5;
  background:#111;
  padding-bottom:10px;
  margin-bottom:8px;
}

.tm-units-head-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.tm-units-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.tm-units-head-sub{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.tm-units-legend{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:12px;
}

#tmSelectedCount{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  font-weight:600;
}

/* ---------- units list ---------- */
.tm-units #tm_units{
  min-height:420px;
  max-height:560px;
  overflow:auto;
  padding:4px;
}

.tm-units-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.tm-unit-chip{
  border:1px solid rgba(212,175,55,.25);
  border-radius:14px;
  padding:12px;
  background:#111;
  cursor:pointer;
  position:relative;
  transition:0.2s ease;
  min-height:88px;
}

.tm-unit-chip:hover{
  border-color:#D4AF37;
  box-shadow:0 0 10px rgba(212,175,55,.12);
}

.tm-unit-chip.is-on{
  border-color:#22c55e !important;
  background:linear-gradient(180deg, rgba(34,197,94,.18), rgba(22,163,74,.10)) !important;
  box-shadow:0 0 0 1px rgba(34,197,94,.35) inset, 0 0 14px rgba(34,197,94,.18) !important;
}

.tm-unit-chip .tick{
  position:absolute;
  top:8px;
  right:10px;
  color:#22c55e;
  font-weight:700;
}

.tm-unit-chip .name{
  font-weight:700;
  line-height:1.35;
  margin-bottom:6px;
  color:#fff;
}

.tm-unit-chip .sub{
  font-size:12px;
  line-height:1.45;
  color:#bcc4cf;
}

.tm-unit-chip .sub:first-of-type{
  color:#ffd76a;
  font-weight:600;
}

.tm-unit-chip.is-on .name{
  color:#d9ffe7 !important;
}

/* ---------- print option cards ---------- */
.tm-grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.tm-grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.tm-card{
  border:1px solid rgba(212,175,55,.22);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg,#161616,#101010);
}

.tm-card + .tm-card{
  margin-top:10px;
}

.tm-card-h{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

.tm-card-h .b{
  font-size:14px;
}

.tm-card-h .muted{
  font-size:12px;
  opacity:.75;
}

.tm-radio-card{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border:1px solid #2a2a2a;
  border-radius:12px;
  background:#111;
  cursor:pointer;
  min-height:60px;
  line-height:1.25;
}

.tm-radio-card input{
  accent-color:#D4AF37;
}

.tm-mode-panel{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:10px;
}

.tm-advanced{
  padding:8px 10px;
  border:1px dashed #444;
  border-radius:10px;
  background:rgba(255,255,255,.02);
}

.tm-inline-check{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ---------- finishes ---------- */
#tm_finishes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  max-height:210px;
  overflow:auto;
}

.tm-chip{
  min-width:0;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,215,0,.16);
  background:rgba(255,255,255,.03);
  color:#fff;
  cursor:pointer;
  text-align:left;
  user-select:none;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.tm-chip:hover{
  border-color:rgba(255,215,0,.28);
}

.tm-chip.is-on{
  border-color:#D4AF37;
  box-shadow:0 0 0 1px rgba(212,175,55,.25) inset;
  background:rgba(212,175,55,.06);
}

.tm-chip-name{
  font-weight:600;
  font-size:13px;
}

.tm-chip-sub{
  font-size:11px;
  opacity:.75;
}

/* ---------- right side ---------- */
#cartBox{
  display:block !important;
}

.tm-order-preview{
  border:1px solid rgba(212,175,55,.18);
  border-radius:14px;
  background:linear-gradient(180deg,#161616,#101010);
}

.tm-preview-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  font-size:13px;
}

.tm-preview-line span:first-child{
  color:#b8c0cc;
}

.tm-preview-total{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
  font-weight:700;
  color:#22c55e;
}

.tm-right #cartBox{
  border-radius:14px;
  padding:12px !important;
}

.tm-right #cartBox table,
.tm-right #cartBox .tbl{
  font-size:13px;
}

.tm-right .card{
  width:100%;
  border-radius:14px;
}

.tm-right fieldset.card,
.tm-right .mt16,
.tm-right #cartBox,
.tm-right .tm-order-preview{
  margin-bottom:12px;
}

/* ensure proceed buttons stay clickable */
#btnSaveOrderTeach,
#btnSaveOrder{
  pointer-events:auto !important;
  position:relative;
  z-index:5;
}
/* =========================================================
   TM UNIT CARD - ELEGANT COMPACT STYLE
========================================================= */

.tm-units-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}

.tm-unit-chip{
  border:1px solid rgba(212,175,55,.22);
  border-radius:14px;
  padding:10px 12px;
  background:#111;
  cursor:pointer;
  position:relative;
  transition:0.2s ease;
  min-height:74px;   /* reduced height */
}

.tm-unit-chip:hover{
  border-color:#d4af37;
  box-shadow:0 0 10px rgba(212,175,55,.10);
}

/* selected */
.tm-unit-chip.is-on{
  border-color:#22c55e !important;
  background:linear-gradient(180deg, rgba(34,197,94,.16), rgba(22,163,74,.08)) !important;
  box-shadow:0 0 0 1px rgba(34,197,94,.30) inset, 0 0 12px rgba(34,197,94,.14) !important;
}

.tm-unit-chip .tick{
  position:absolute;
  top:8px;
  right:10px;
  color:#22c55e;
  font-weight:700;
  font-size:15px;
}

/* title */
.tm-unit-chip .name{
  font-weight:700;
  line-height:1.25;
  margin-bottom:6px;
  color:#ffffff;
  font-size:13px;
  padding-right:52px; /* leave space for pages badge */
}

/* shared sub text */
.tm-unit-chip .sub{
  font-size:12px;
  line-height:1.35;
  margin-bottom:2px;
}

/* first line: Grade */
.tm-unit-chip .sub.grade-line{
  color:#f2d06b;
  font-weight:600;
}

/* medium different color */
.tm-unit-chip .sub.medium-line{
  color:#8ec5ff;
  font-weight:600;
}

/* term softer elegant color */
.tm-unit-chip .sub.term-line{
  color:#c8d2e0;
}

/* pages badge moved to top right */
.tm-unit-chip .pages-badge{
  position:absolute;
  top:10px;
  right:12px;
  font-size:11px;
  font-weight:700;
  color:#9ee7c2;
  background:rgba(158,231,194,.10);
  border:1px solid rgba(158,231,194,.22);
  padding:3px 8px;
  border-radius:999px;
  line-height:1;
}

/* selected text tune */
.tm-unit-chip.is-on .name{
  color:#e8fff1;
}

.tm-unit-chip.is-on .sub.grade-line{
  color:#ffe79a;
}

.tm-unit-chip.is-on .sub.medium-line{
  color:#b9ddff;
}

.tm-unit-chip.is-on .sub.term-line{
  color:#d7e2ee;
}

.tm-unit-chip.is-on .pages-badge{
  color:#dfffea;
  background:rgba(223,255,234,.10);
  border-color:rgba(223,255,234,.28);
}
/* =========================================================
   TM UNIT CARD - USER PREFERRED FORMAT
========================================================= */

.tm-unit-chip{
  border:1px solid rgba(212,175,55,.22);
  border-radius:14px;
  padding:12px;
  background:#111;
  cursor:pointer;
  position:relative;
  transition:0.2s ease;
  min-height:92px;
}

.tm-unit-chip:hover{
  border-color:#d4af37;
  box-shadow:0 0 10px rgba(212,175,55,.10);
}

.tm-unit-chip.is-on{
  border-color:#22c55e !important;
  background:linear-gradient(180deg, rgba(34,197,94,.16), rgba(22,163,74,.08)) !important;
  box-shadow:0 0 0 1px rgba(34,197,94,.30) inset, 0 0 12px rgba(34,197,94,.14) !important;
}

.tm-unit-chip .tick{
  position:absolute;
  top:8px;
  right:10px;
  color:#22c55e;
  font-weight:700;
  font-size:15px;
}

.tm-unit-chip .name{
  font-weight:700;
  font-size:13px;
  line-height:1.3;
  margin-bottom:6px;
  color:#ffffff;
  padding-right:20px;
}

.tm-unit-chip .sub{
  font-size:12px;
  line-height:1.35;
  margin-bottom:3px;
}

.tm-unit-chip .meta-line{
  color:#f2d06b;
  font-weight:600;
}

.tm-unit-chip .subject-line{
  color:#ffffff;
  font-weight:600;
}

.tm-bottom-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:2px;
}

.tm-unit-chip .medium-line{
  color:#8ec5ff;
  font-weight:600;
}

.pages-inline{
  font-size:12px;
  font-weight:700;
  color:#9ee7c2;
  white-space:nowrap;
}

.tm-unit-chip.is-on .name{
  color:#e8fff1;
}

.tm-unit-chip.is-on .meta-line{
  color:#ffe79a;
}

.tm-unit-chip.is-on .subject-line{
  color:#f4fff8;
}

.tm-unit-chip.is-on .medium-line{
  color:#b9ddff;
}

.tm-unit-chip.is-on .pages-inline{
  color:#dfffea;
}

/* ===== GP PRICE MODE BUTTONS ===== */
.gp-price-mode-wrap{
  margin-top: 10px;
}

.gp-price-mode{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.gp-price-btn{
  background: #151515;
  color: #f3f3f3;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}

.gp-price-btn:hover{
  background: #222;
  border-color: #d4af37;
  color: #ffd86b;
  box-shadow: 0 0 10px rgba(212,175,55,.18);
}

.gp-price-btn.active{
  background: linear-gradient(135deg, #f4d465, #b99018);
  color: #111;
  border-color: #f4d465;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(212,175,55,.35);
}

.gp-price-note{
  margin-top: 8px;
  font-size: 12px;
  color: #d6d6d6;
  opacity: .9;
}

.gp-customer-status{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,.18);
  background: rgba(255,255,255,.02);
  font-size: 12px;
  line-height: 1.35;
}

.gp-customer-status strong{
  color: #f4d465;
}

.gp-inline-msg{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.22);
  color: #ffd86b;
  font-size: 12px;
}

@media (max-width: 900px){
  .gp-price-mode{
    grid-template-columns: 1fr;
  }
}
/* ===== GP COMPACT LIVE CALC ===== */
/* ===== GP ULTRA COMPACT LIVE CALC ===== */

.gp-calc-compact{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.gp-calc-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}

.gp-calc-title{
  font-size:12px;
  font-weight:700;
  color:#f4d465;
  letter-spacing:.2px;
}

.gp-calc-pill{
  font-size:10px;
  font-weight:700;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(244,212,101,.12);
  border:1px solid rgba(244,212,101,.25);
  color:#f4d465;
}

.gp-calc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.gp-calc-item{
  padding:6px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(212,175,55,.10);
  min-height:46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.gp-calc-label{
  font-size:10px;
  color:#a8a8a8;
  margin-bottom:2px;
}

.gp-calc-value{
  font-size:15px;
  font-weight:700;
  color:#fff;
}

.gp-calc-foot{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#aaa;
  border-top:1px solid rgba(212,175,55,.10);
  padding-top:4px;
}
/* ===== COST SECTION ===== */

.gp-calc-cost{
  margin-top:4px;
  padding-top:6px;
  border-top:1px solid rgba(212,175,55,.12);
  display:flex;
  flex-direction:column;
  gap:3px;
}

.gp-cost-row{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#cfcfcf;
}

.gp-cost-row strong{
  font-size:11px;
  color:#fff;
}

.gp-cost-total{
  display:flex;
  justify-content:space-between;
  margin-top:3px;
  font-size:12px;
  font-weight:700;
  color:#f4d465;
}
/* ===== GP BUSINESS LIVE CALC PANEL ===== */
.gp-pos-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.gp-pos-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}

.gp-pos-title{
  font-size:13px;
  font-weight:700;
  color:#f4d465;
  letter-spacing:.2px;
}

.gp-pos-sub{
  margin-top:2px;
  font-size:10px;
  color:#a8a8a8;
}

.gp-pos-badge{
  font-size:10px;
  font-weight:700;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(244,212,101,.12);
  border:1px solid rgba(244,212,101,.24);
  color:#f4d465;
  white-space:nowrap;
}

.gp-pos-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.gp-pos-card{
  padding:7px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(212,175,55,.10);
  min-height:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.gp-pos-label{
  font-size:10px;
  color:#aaaaaa;
  margin-bottom:2px;
}

.gp-pos-value{
  font-size:15px;
  font-weight:700;
  color:#ffffff;
  line-height:1.1;
}

.gp-pos-summary{
  border-top:1px solid rgba(212,175,55,.10);
  padding-top:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.gp-pos-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:#d0d0d0;
}

.gp-pos-row strong{
  font-size:11px;
  color:#ffffff;
}

.gp-pos-total{
  margin-top:2px;
  padding-top:5px;
  border-top:1px dashed rgba(212,175,55,.14);
  font-size:12px;
  font-weight:700;
  color:#f4d465;
}

.gp-pos-total strong{
  font-size:13px;
  color:#f4d465;
}

.gp-pos-foot{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:10px;
  color:#aaaaaa;
}

.gp-pos-empty{
  font-size:12px;
  color:#aaaaaa;
}

@media (max-width: 900px){
  .gp-pos-grid{
    grid-template-columns:1fr 1fr;
  }
}

.gp-calc-empty{
  font-size:12px;
  color:#bdbdbd;
  padding:2px 0 0;
}

@media (max-width: 900px){
  .gp-calc-grid{
    grid-template-columns:1fr;
  }
}
#gp_live_calc{
  padding:8px 10px !important;
}
.gp-pos-card{
  padding:6px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(212,175,55,.10);

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

  min-height:36px;
}
.gp-pos-label{
  font-size:10px;
  color:#aaaaaa;
}

.gp-pos-value{
  font-size:13px;
  font-weight:700;
  color:#ffffff;
}
.gp-left .gp-live-calc{
  margin-top: 10px;
}

.gp-left .gp-recommend-box{
  margin-top: 8px;
}

.gp-left .gp-pos-wrap,
.gp-left .gp-rec-wrap{
  padding: 8px 10px;
}
.gp-live-mini-wrap{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.gp-live-mini-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.gp-live-mini-title{
  font-size:12px;
  font-weight:700;
  color:#f4d465;
}

.gp-live-mini-badge{
  font-size:10px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(244,212,101,.12);
  border:1px solid rgba(244,212,101,.24);
  color:#f4d465;
}

.gp-live-mini-sub{
  font-size:10px;
  color:#a8a8a8;
  line-height:1.2;
}

.gp-live-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.gp-live-mini-card{
  padding:6px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(212,175,55,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:34px;
}

.gp-live-mini-label{
  font-size:10px;
  color:#b8b8b8;
}

.gp-live-mini-value{
  font-size:13px;
  color:#fff;
  font-weight:700;
}

.gp-live-mini-costs{
  padding-top:6px;
  border-top:1px dashed rgba(212,175,55,.14);
  display:flex;
  flex-direction:column;
  gap:4px;
}

.gp-live-mini-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:#d6d6d6;
}

.gp-live-mini-row strong{
  font-size:11px;
  color:#ffffff;
}

.gp-live-mini-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:5px;
  margin-top:2px;
  border-top:1px dashed rgba(212,175,55,.10);
  font-size:11px;
  color:#f4d465;
  font-weight:700;
}

.gp-live-mini-total strong{
  font-size:13px;
  color:#f4d465;
}

.gp-live-mini-foot{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:10px;
  color:#aaaaaa;
}

.gp-live-mini-empty{
  font-size:11px;
  color:#aaa;
  padding:4px 0;
}
.gp-rec-empty{
  padding:10px 12px;
}

.gp-rec-empty-text{
  font-size:11px;
  color:#9f9f9f;
  margin-top:4px;
}
.gp-direct-btn.suggested{
  border-color:#f4d465;
  box-shadow:0 0 10px rgba(212,175,55,.18);
  position:relative;
}

.gp-direct-btn.suggested::after{
  content:"Suggested";
  position:absolute;
  top:6px;
  right:8px;
  font-size:10px;
  font-weight:700;
  color:#f4d465;
  opacity:.9;
}
.mkt-actions{
  display:flex;
  gap:4px;
  justify-content:flex-end;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow-x:auto;
}

.ibtn{
  min-width:30px;
  height:30px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  font-size:12px;
  line-height:1;
}
.ibtn:hover{ filter:brightness(1.08); }
.ibtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.ibtn.ok{ background:rgba(212,175,55,.18); border-color:rgba(212,175,55,.35); }
.ibtn.pay{ background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.35); }
.ibtn.wa{ background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.35); }
.ibtn.del{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); }
.tbl th:last-child,
.tbl td:last-child {
  min-width: 260px;   /* 🔥 IMPORTANT */
}
.mkt-actions{
  display:flex;
  flex-wrap:nowrap !important;
  white-space:nowrap;
  gap:4px;
  justify-content:flex-end;
  align-items:center;
}

.ibtn{
  min-width:28px;
  height:28px;
  padding:0 5px;
  font-size:11px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mkt-mid .tbl th,
.mkt-mid .tbl td{
  padding:4px 6px !important;
}
.fp-modal-backdrop{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-modal-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
/* stronger money block */
.tbl th:nth-child(5),
.tbl th:nth-child(6),
.tbl th:nth-child(7),
.tbl td:nth-child(5),
.tbl td:nth-child(6),
.tbl td:nth-child(7){
  background: rgba(255,215,0,.06);
}

/* stronger workflow block */
.tbl th:nth-child(8),
.tbl th:nth-child(11),
.tbl td:nth-child(8),
.tbl td:nth-child(11){
  background: rgba(255,255,255,.035);
}

/* clear separators */
.tbl th:nth-child(7),
.tbl td:nth-child(7){
  border-right: 1px solid rgba(255,215,0,.22);
}

.tbl th:nth-child(11),
.tbl td:nth-child(11){
  border-right: 1px solid rgba(255,255,255,.12);
}
.mkt-card .s{
  font-size:11px;
  opacity:.78;
  margin-top:4px;
  line-height:1.1;
}
.mkt-card .s{
  font-size:11px;
  opacity:.82;
  margin-top:5px;
  line-height:1.1;
  font-weight:600;
}
.mkt-top{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
}

/* prevent wrapping */
.mkt-top > .mkt-card{
  min-width:180px;
  flex:0 0 auto;
}
/* ===================== PRODUCTION TAB ===================== */
/* ===================== PRODUCTION FINAL CLEAN ===================== */
/* =========================
   PRODUCTION TAB - CLEAN
   ========================= */

/* ===== PAGE LAYOUT ===== */
#tabProduction{
  height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

body{
  overflow: hidden;
}

/* ===== KPI ROW ===== */
#prodKpiRow{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

#prodKpiRow .mkt-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

#prodKpiRow .mkt-k{
  font-size: 14px;
  margin-bottom: 6px;
}

#prodKpiRow .mkt-v{
  width: 100%;
  text-align: left;
}

.kpi-sale{
  border: 1px solid rgba(0,255,120,.35);
  box-shadow: 0 0 10px rgba(0,255,120,.15);
}

.kpi-sale .mkt-v{
  font-size: 22px;
  font-weight: 900;
  color: #00ff88;
}

.kpi-sale .mkt-k{
  color: rgba(255,255,255,.85);
}

/* ===== TOOLBAR ===== */
.prod-top{
  flex: 0 0 auto;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(18,18,18,0.98), rgba(8,8,8,0.98));
  border: 1px solid rgba(212,175,55,0.16);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.prod-toolbar{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.prod-title{
  min-width: 220px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}

.prod-toolbar-actions{
  display: flex;
  gap: 10px;
}

.prod-toolbar-btn{
  height: 42px;
  padding: 0 18px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(180deg, #f8fafc, #e5e7eb);
  color: #111827;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
}

.prod-toolbar-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.16);
}

.prod-toolbar-btn.ghost{
  background: linear-gradient(180deg, #334155, #1e293b);
  color: #fff;
}

#prodQ,
#prodStage,
#prodSort{
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  padding: 0 12px;
}

#prodQ{
  min-width: 360px;
  flex: 1 1 420px;
}

#prodStage{
  min-width: 160px;
}

#prodSort{
  min-width: 150px;
}

.prod-pri-btns{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.prod-pri-btn{
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #fff;
  color: #111827;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.prod-pri-btn:hover{
  transform: translateY(-1px);
}

.prod-pri-btn.active{
  background: linear-gradient(180deg, #f4d465, #b99018);
  color: #111;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(212,175,55,0.22);
}

/* ===== TABLE CARD ===== */
.prod-left-card{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.prod-head-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.prod-section-title{
  font-weight: 800;
}

/* ===== TABLE WRAP ===== */
.prod-table-wrap{
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
  max-width: 100%;
}

/* ===== TABLE ===== */
.prod-tbl{
  width: 100%;
   table-layout: fixed;
  border-collapse: collapse;
}

.prod-tbl th,
.prod-tbl td{
  padding: 6px 8px;
  font-size: 12px;
  vertical-align: middle;
}

.prod-tbl th{
  opacity: .9;
}

.prod-tbl th:nth-child(1),
.prod-tbl td:nth-child(1){ width: 80px; }

.prod-tbl th:nth-child(2),
.prod-tbl td:nth-child(2){ width: 140px; }

.prod-tbl th:nth-child(3),
.prod-tbl td:nth-child(3){ width: 200px; }

.prod-tbl th:nth-child(4),
.prod-tbl td:nth-child(4){ width: 110px; }

.prod-tbl th:nth-child(5),
.prod-tbl td:nth-child(5){ width: 160px; }

.prod-tbl th:nth-child(6),
.prod-tbl td:nth-child(6){ width: 70px; }

.prod-tbl th:nth-child(7),
.prod-tbl td:nth-child(7){ width: 80px; }

.prod-tbl th:nth-child(8),
.prod-tbl td:nth-child(8){ width: 80px; }

.prod-tbl th:nth-child(9),
.prod-tbl td:nth-child(9){ width: 70px; }

.prod-tbl th:nth-child(10),
.prod-tbl td:nth-child(10){ width: 160px; }

/* ===== TEXT ===== */
.prod-1line{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.prod-orderlink{
  font-weight: 800;
  color: #facc15;
  cursor: pointer;
  white-space: nowrap;
}

.prod-orderlink:hover{
  text-decoration: underline;
}

/* ===== BADGES ===== */
.prod-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255,215,0,.18);
  background: rgba(255,255,255,.03);
  white-space: nowrap;
}

.prod-badge.red{
  background: rgba(220,38,38,0.2);
  color: #fecaca;
  border-color: rgba(248,113,113,0.5);
}

.prod-badge.ylw{
  background: rgba(234,179,8,0.2);
  color: #fde68a;
  border-color: rgba(234,179,8,0.5);
}

.prod-badge.grn{
  background: rgba(34,197,94,0.2);
  color: #bbf7d0;
  border-color: rgba(34,197,94,0.5);
}

.prod-badge.red{
  animation: overduePulse 1.6s ease-in-out infinite;
}

@keyframes overduePulse{
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.25); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ===== MINI TAGS ===== */
.prod-mini-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  white-space: nowrap;
}

.prod-mini-tag .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.prod-mini-tag.warn{
  border-color: rgba(255,180,0,.35);
}

.prod-mini-tag.warn .dot{
  background: rgba(255,180,0,.9);
}

.prod-mini-tag.ok{
  border-color: rgba(0,200,120,.35);
}

.prod-mini-tag.ok .dot{
  background: rgba(0,200,120,.9);
}

/* ===== ROW STATES ===== */
.prod-row.stage-ready{
  background: rgba(0,180,255,.06);
  box-shadow: inset 3px 0 0 #facc15;
}

.prod-row.stage-overdue{
  background: linear-gradient(90deg, rgba(127,29,29,0.18), rgba(0,0,0,0));
  box-shadow: inset 4px 0 0 #ef4444;
}

.prod-row.stage-qcwarn{
  background: rgba(255,215,0,.06);
}

.prod-qc-required{
  outline: 1px solid rgba(255,215,0,.35);
}

.prod-urgent{
  background: linear-gradient(90deg, rgba(239,68,68,0.12), rgba(0,0,0,0));
  box-shadow: inset 4px 0 0 #ef4444;
}

.prod-due-soon{
  background: linear-gradient(90deg, rgba(245,158,11,0.10), rgba(0,0,0,0));
  box-shadow: inset 4px 0 0 #f59e0b;
}

.prod-urgent .prod-orderlink{
  color: #fca5a5;
}

.prod-due-soon .prod-orderlink{
  color: #fde68a;
}

tr.is-selected{
  outline: 2px solid rgba(0,200,255,.55);
  background: rgba(0,200,255,.10);
}

#prodRows tr,
.prod-stage-pill,
.prod-badge,
.prod-actions .ibtn{
  transition: all 0.22s ease;
}

#prodRows tr:hover{
  background: rgba(255,255,255,0.04);
  transform: scale(1.003);
}

/* ===== STAGE PILLS ===== */
.prod-stage-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #fff;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.prod-stage-pill.waiting  { background: #1e3a8a; color: #bfdbfe; }
.prod-stage-pill.printing { background: #3730a3; color: #c7d2fe; }
.prod-stage-pill.qc       { background: #581c87; color: #e9d5ff; }
.prod-stage-pill.ready    { background: #92400e; color: #fde68a; }
.prod-stage-pill.done     { background: #065f46; color: #bbf7d0; }

/* ===== ACTION BUTTONS IN TABLE ===== */
.prod-actions{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.prod-actions .ibtn{
  min-width: 110px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  color: #fff;
  transition: all 0.2s ease;
}

.prod-actions .ibtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

.ibtn.start   { background: #3b82f6; }
.ibtn.print   { background: #6366f1; }
.ibtn.qc      { background: #a855f7; }
.ibtn.ready   { background: #f59e0b; }
.ibtn.deliver { background: #22c55e; }
.ibtn.finance { background: linear-gradient(180deg,#f4d465,#b99018); color:#111; }

/* ===== DRAWER BACKDROP ===== */
.prod-drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 999;
}

.prod-drawer-backdrop.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ===== RIGHT DRAWER ===== */
#prodRightPanel.prod-drawer,
.prod-drawer{
  position: fixed;
  top: 0;
  right: 0;
  width: 560px;
  max-width: 96vw;
  height: 100vh;
  background: linear-gradient(180deg, #0b1630 0%, #0a1328 100%);
  border-left: 1px solid rgba(212,175,55,0.28);
  box-shadow: -12px 0 28px rgba(0,0,0,0.38);
  padding: 18px 18px 24px;
  overflow-y: auto;
  z-index: 1000;

  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
}

#prodRightPanel.prod-drawer.open{
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.prod-drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.prod-panel-title{
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.prod-box-title{
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.prod-soft-card{
  background: linear-gradient(180deg, rgba(21,34,67,0.95), rgba(13,24,49,0.95));
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.prod-selected-ord{
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
  margin-top: 4px;
}

.prod-selected-cust{
  font-size: 14px;
  font-weight: 600;
  color: #cbd5f5;
  margin-top: 4px;
}

.prod-mini-label,
.prod-phone,
.prod-fin-note,
.prod-box-note,
.muted{
  color: #c7d2fe;
  opacity: .85;
  font-size: 12px;
}

.prod-inline-row{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.prod-link-row{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===== DRAWER INPUTS ===== */
#prodRightPanel .inp,
#prodRightPanel .sel,
.prod-drawer .inp,
.prod-drawer .sel{
  width: 100%;
  max-width: 100%;
  height: 42px;
  margin-top: 6px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: #f8fafc;
  color: #0f172a;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.18s ease;
}

.prod-drawer textarea.inp,
#prodRightPanel textarea.inp{
  min-height: 90px;
  padding: 10px 12px;
  resize: vertical;
}

.prod-drawer .inp:focus,
.prod-drawer .sel:focus,
#prodRightPanel .inp:focus,
#prodRightPanel .sel:focus{
  outline: none;
  border-color: rgba(212,175,55,0.65);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}

/* ===== DRAWER BUTTON LAYOUT ===== */
.prod-btn-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.prod-btn-row .btn{
  width: 100%;
  min-width: 0;
  height: 48px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  padding: 0 12px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}

.prod-btn-row .btn:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.24);
}

.prod-btn-row .btn:disabled{
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
}

/* row 1 buttons */
#prodBtnSaveDispatch,
#prodBtnSendWA,
#prodBtnMarkDelivered{
  background: linear-gradient(180deg, #334155, #1e293b);
  color: #ffffff;
}

/* green delivered */
#prodBtnMarkDelivered,
.prod-drawer .btn.success{
  background: linear-gradient(180deg, #22c55e, #15803d);
  color: #ffffff;
}

/* full-width collected button */
#prodBtnCollected{
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #334155, #1e293b);
  color: #ffffff;
}

/* completion + finance buttons */
#prodBtnMarkCompleted,
#prodBtnMoveFinance{
  background: linear-gradient(180deg, #f4d465, #b99018);
  color: #171717;
  font-weight: 900;
}

#prodBtnMarkCompleted{
  height: 46px;
  border-radius: 16px;
  font-size: 15px;
}

#prodBtnMarkCompleted:hover:not(:disabled),
#prodBtnMoveFinance:hover:not(:disabled){
  box-shadow: 0 10px 20px rgba(212,175,55,0.28);
}

/* whatsapp mini button */
#prodBtnWhatsApp{
  min-width: 70px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, #25D366, #1fb958);
  color: #ffffff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 14px rgba(37,211,102,0.28);
}

#prodBtnWhatsApp:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(37,211,102,0.34);
}

#prodBtnWhatsApp:disabled{
  opacity: 0.45;
  background: linear-gradient(180deg, #64748b, #475569);
  box-shadow: none;
}

/* ===== DRAWER BADGES ===== */
#prodSelFinalDT,
#prodSelStage{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.1);
}

.prod-close-badge{
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.prod-close-badge.warn{
  background: rgba(234,179,8,0.16);
  color: #fde68a;
  border: 1px solid rgba(234,179,8,0.45);
}

.prod-close-badge.overdue{
  background: rgba(220,38,38,0.18);
  color: #fecaca;
  border: 1px solid rgba(248,113,113,0.55);
}

/* ===== KPI CLICK STYLE ===== */
.kpi.prod-kpi-card{
  cursor: pointer;
  transition: all 0.2s ease;
}

.kpi.prod-kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.2);
}

.kpi.prod-kpi-card.active{
  background: linear-gradient(180deg, #f4d465, #b99018) !important;
  color: #111 !important;
  border: 1px solid rgba(185,144,24,0.9) !important;
  box-shadow: 0 10px 22px rgba(212,175,55,0.28) !important;
}

.kpi.prod-kpi-card.active .kpi-title,
.kpi.prod-kpi-card.active .kpi-value,
.kpi.prod-kpi-card.active .small,
.kpi.prod-kpi-card.active *{
  color: #111 !important;
}
.prod-toolbar{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;      /* force one line */
  overflow-x: auto;       /* if screen smaller, horizontal scroll */
}

.prod-title{
  flex: 0 0 auto;
  min-width: 260px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.prod-toolbar-actions{
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.prod-search{
  flex: 1 1 420px;
  min-width: 320px;
  max-width: 520px;
  height: 44px;
  border-radius: 14px;
}

.prod-filter{
  flex: 0 0 auto;
  min-width: 160px;
  height: 44px;
  border-radius: 14px;
}

.prod-pri-btns{
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: nowrap;      /* keep All / Due Soon / Overdue in one line */
  align-items: center;
}

.prod-pri-btn{
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.prod-toolbar{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;      /* one line */
}

/* Title smaller */
.prod-title{
  flex: 0 0 auto;
  min-width: 180px;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

/* Buttons compact */
.prod-toolbar-btn{
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 10px;
}

/* Search - flexible but limited */
.prod-search{
  flex: 1 1 260px;
  min-width: 180px;
  max-width: 320px;
  height: 36px;
  font-size: 13px;
}

/* Dropdowns smaller */
.prod-filter{
  flex: 0 0 auto;
  min-width: 120px;
  height: 36px;
  font-size: 13px;
}

/* Priority buttons tight */
.prod-pri-btns{
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.prod-pri-btn{
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.prod-toolbar{
  gap: 8px;
}
.prod-1line{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-1line[title],
.prod-orderlink[title]{
  cursor: help;
}
.prod-tbl th{
  text-align: left;
  font-weight: 800;
  font-size: 12px;
  color: #e5e7eb;
  white-space: nowrap;
}

.prod-tbl td{
  text-align: left;
  vertical-align: middle;
}
.prod-docs{
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;   /* 🔥 KEY LINE */
}

.prod-doc-link{
  font-size: 12px;
  font-weight: 700;
  color: #60a5fa;
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(96,165,250,0.12);
  border: 1px solid rgba(96,165,250,0.3);
}

.prod-doc-link:hover{
  text-decoration: underline;
}
/* =========================================================
   FINANCE TAB
   ========================================================= */

.fp-finance-page{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fp-finance-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.fp-finance-title{
  margin:0;
  font-size:24px;
  font-weight:800;
}

.fp-finance-subtitle{
  margin-top:4px;
  color:var(--dim);
  font-size:14px;
}

.fp-finance-top-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.fp-fin-btn-nav{
  background:linear-gradient(180deg,#f3f3f3,#e5e5e5);
  color:#111;
  border:1px solid rgba(255,255,255,.3);
  font-weight:600;
  border-radius:16px;
  padding:10px 16px;
}

.fp-fin-btn-nav.active{
  background:linear-gradient(180deg,#fff5c8,#f1c93d);
  color:#111;
  box-shadow:0 0 18px rgba(212,175,55,.25);
}

.fp-fin-view{
  display:block;
}

.fp-fin-card-title{
  font-size:16px;
  font-weight:800;
  margin-bottom:10px;
}

.fp-fin-subnote{
  font-size:13px;
  color:var(--dim);
  margin-bottom:12px;
}

/* =========================
   KPI STRIP
   ========================= */
.fp-fin-kpi-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:12px;
}

.fp-fin-kpi-card{
  border:1px solid rgba(255,215,0,.15);
  border-radius:16px;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:all .15s ease;
}

.fp-fin-kpi-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,215,0,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

.fp-fin-kpi-card.active{
  border-color:rgba(255,215,0,.75);
  box-shadow:0 0 22px rgba(212,175,55,.18);
  background:linear-gradient(180deg, rgba(255,215,0,.10), rgba(255,255,255,.02));
}

.fp-fin-kpi-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  color:#f4e7a4;
  margin-bottom:8px;
}

.fp-fin-kpi-value{
  font-size:28px;
  line-height:1;
  font-weight:900;
  margin-bottom:8px;
}

.fp-fin-kpi-sub{
  font-size:12px;
  color:var(--dim);
}

/* =========================
   SUMMARY
   ========================= */
.fp-fin-summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}

.fp-fin-summary-card{
  border-radius:14px;
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,215,0,.12);
}

.fp-fin-summary-card.warn{
  border-color:rgba(255,120,120,.35);
}

.fp-fin-summary-card.info{
  border-color:rgba(120,180,255,.35);
}

.fp-fin-summary-k{
  font-size:12px;
  color:var(--dim);
  margin-bottom:6px;
}

.fp-fin-summary-v{
  font-size:22px;
  font-weight:900;
}

/* =========================
   FILTERS
   ========================= */
.fp-fin-filter-card{
  margin-top:2px;
}

.fp-fin-filter-grid{
  display:grid;
  grid-template-columns:1.4fr .9fr .9fr .9fr .9fr auto;
  gap:10px;
  align-items:center;
}

.fp-fin-commission-filters{
  margin-bottom:14px;
}

@media (max-width: 1200px){
  .fp-fin-filter-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width: 760px){
  .fp-fin-filter-grid{
    grid-template-columns:1fr;
  }

  .fp-finance-head{
    flex-direction:column;
  }
}

/* =========================
   TABLE
   ========================= */
.fp-fin-table-wrap{
  width:100%;
  overflow:auto;
}

.fp-fin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
  min-width:1100px;
}

.fp-fin-table thead th{
  text-align:left;
  font-size:13px;
  color:#e9e9e9;
  padding:0 12px 6px;
  white-space:nowrap;
}

.fp-fin-table tbody tr{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.fp-fin-table tbody td{
  padding:12px;
  font-size:13px;
  vertical-align:middle;
  border-top:1px solid rgba(255,215,0,.08);
  border-bottom:1px solid rgba(255,215,0,.08);
}

.fp-fin-table tbody td:first-child{
  border-left:1px solid rgba(255,215,0,.12);
  border-radius:14px 0 0 14px;
}

.fp-fin-table tbody td:last-child{
  border-right:1px solid rgba(255,215,0,.12);
  border-radius:0 14px 14px 0;
}

.fp-fin-small{
  font-size:12px;
  color:var(--dim);
  margin-top:3px;
}

.fp-fin-balance-out{
  color:#f5b301;
}

.ta-r{
  text-align:right !important;
}

.fp-empty-cell{
  padding:18px !important;
  text-align:center;
  color:var(--dim);
}

/* =========================
   STATUS PILLS
   ========================= */
.fp-fin-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  border:1px solid rgba(255,215,0,.18);
  background:rgba(255,255,255,.04);
}

.fp-fin-pill.ok{
  border-color:rgba(60,220,120,.40);
  color:#9ef0b5;
}

.fp-fin-pill.hold{
  border-color:rgba(255,160,60,.45);
  color:#ffc27a;
}

.fp-fin-pill.todo{
  border-color:rgba(255,215,0,.35);
  color:#ffe486;
}

.fp-fin-pill.due{
  border-color:rgba(120,180,255,.45);
  color:#b8d7ff;
}

/* =========================
   ACTION BUTTONS
   ========================= */
.fp-fin-actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.btn-mini{
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  cursor:pointer;
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  transition:all .12s ease;
}

.btn-mini:hover{
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

.btn-mini.verify{
  border-color:rgba(60,220,120,.45);
}

.btn-mini.hold{
  border-color:rgba(255,160,60,.50);
}

.btn-mini.adjust{
  border-color:rgba(120,170,255,.45);
}

/* =========================
   DASHBOARD MINI
   ========================= */
.fp-fin-mini-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-bottom:14px;
}

.fp-fin-mini-kpi{
  border-radius:14px;
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,215,0,.12);
}

.fp-fin-mini-kpi .k{
  font-size:12px;
  color:var(--dim);
  margin-bottom:6px;
}

.fp-fin-mini-kpi .v{
  font-size:22px;
  font-weight:900;
}

.fp-fin-dash-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

@media (max-width: 900px){
  .fp-fin-dash-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   MODALS
   ========================= */
.fp-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.58);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:18px;
}

.fp-modal{
  width:min(980px, 96vw);
  max-height:92vh;
  overflow:auto;
  border-radius:18px;
  padding:20px;
  background:linear-gradient(180deg, rgba(27,32,44,.98), rgba(12,15,22,.99));
  border:1px solid rgba(255,215,0,.28);
  box-shadow:
    0 30px 80px rgba(0,0,0,.7),
    0 0 30px rgba(212,175,55,.08);
}

.fp-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.fp-modal-title{
  font-size:18px;
  font-weight:900;
}

.fp-modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:14px;
}

.fp-inline-msg{
  font-size:13px;
  color:var(--dim);
}

/* =========================
   EXPENSE MODAL
   ========================= */
.fp-exp-modal{
  max-width:980px;
}

.fp-exp-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 760px){
  .fp-exp-grid{
    grid-template-columns:1fr;
  }
}

.fp-label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#f0f0f0;
  margin-bottom:6px;
}

/* =========================
   SMALL VISUAL POLISH
   ========================= */
#finTrackingView .card,
#finDashboardView .card,
#finCommissionView .card{
  background:linear-gradient(180deg, #121212, #0d0d0d);
}

#finRefresh,
#finCommRefresh,
#expSaveBtn{
  font-weight:700;
}

#expSaveBtn{
  background:linear-gradient(180deg, #f5d86d, #d8ab13);
  color:#111;
}

#expDeleteLastBtn{
  border-color:rgba(255,90,90,.38);
  color:#ffd6d6;
}

/* optional smoother selects in finance */
.fp-finance-page .input,
.fp-finance-page select{
  min-height:46px;
}
/* Commission table vertical scroll */
#finCommTableWrap {
  max-height: 420px;   /* adjust if needed */
  overflow-y: auto;
  overflow-x: auto;
  padding-right: 6px;
}

/* Optional: nice scrollbar */
#finCommTableWrap::-webkit-scrollbar {
  width: 8px;
}

#finCommTableWrap::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.5);
  border-radius: 6px;
}

#finCommTableWrap::-webkit-scrollbar-track {
  background: transparent;
}
#finCommTableWrap thead th {
  position: sticky;
  top: 0;
  background: #111;
  z-index: 2;
}
/* =========================================================
   FINANCE TAB SCROLL AREAS
   ========================================================= */

/* Main finance page can scroll naturally */
.fp-finance-page{
  min-height: 0;
}

/* Tracking table area */
#finTrackingTableCard{
  max-height: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#finTrackingTableCard .fp-fin-table-wrap{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding-right: 6px;
}

/* Dashboard main area */
#finDashboardCard{
  max-height: 78vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

/* Dashboard tables */
#finDashOutstandingWrap,
#finDashPendingWrap{
  max-height: 360px;
  overflow-y: auto;
  overflow-x: auto;
  padding-right: 6px;
}

/* Smooth gold scrollbars */
#finTrackingTableCard .fp-fin-table-wrap::-webkit-scrollbar,
#finDashboardCard::-webkit-scrollbar,
#finDashOutstandingWrap::-webkit-scrollbar,
#finDashPendingWrap::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

#finTrackingTableCard .fp-fin-table-wrap::-webkit-scrollbar-thumb,
#finDashboardCard::-webkit-scrollbar-thumb,
#finDashOutstandingWrap::-webkit-scrollbar-thumb,
#finDashPendingWrap::-webkit-scrollbar-thumb{
  background: rgba(212,175,55,0.5);
  border-radius: 8px;
}

#finTrackingTableCard .fp-fin-table-wrap::-webkit-scrollbar-track,
#finDashboardCard::-webkit-scrollbar-track,
#finDashOutstandingWrap::-webkit-scrollbar-track,
#finDashPendingWrap::-webkit-scrollbar-track{
  background: transparent;
}

/* Sticky headers for finance tables */
#finTrackingTableCard thead th,
#finDashOutstandingWrap thead th,
#finDashPendingWrap thead th,
#finCommTableWrap thead th{
  position: sticky;
  top: 0;
  background: #111;
  z-index: 2;
}
.fin-row-danger td{
  background: rgba(255, 70, 70, 0.08);
}

.fin-row-warning td{
  background: rgba(255, 215, 0, 0.06);
}

.fin-row-success td{
  background: rgba(60, 220, 120, 0.06);
}
.fin-row-hold td{
  background: rgba(255, 150, 50, 0.08);
}
/* ===== Finance dashboard cleaner layout ===== */

.fp-fin-dashboard-top{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:14px;
  margin-bottom:16px;
}

.fp-fin-dashboard-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}

.fp-fin-panel{
  min-height: 460px;
  display:flex;
  flex-direction:column;
}

#finDashOutstandingWrap,
#finDashPendingWrap{
  flex:1 1 auto;
  min-height:0;
  max-height:420px;
  overflow-y:auto;
  overflow-x:auto;
  padding-right:6px;
}

#finDashOutstandingWrap .fp-fin-table,
#finDashPendingWrap .fp-fin-table{
  min-width:100%;
}

@media (max-width: 1200px){
  .fp-fin-dashboard-top{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .fp-fin-dashboard-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px){
  .fp-fin-dashboard-top{
    grid-template-columns: 1fr;
  }
}
.fp-fin-dashboard-top .fp-fin-mini-kpi{
  min-height: 110px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px;
}

.fp-fin-dashboard-top .fp-fin-mini-kpi .k{
  font-size:14px;
  margin-bottom:10px;
}

.fp-fin-dashboard-top .fp-fin-mini-kpi .v{
  font-size:40px;
  line-height:1;
}
/* ===== Finance dashboard cleaner layout ===== */

.fp-fin-dashboard-top{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:14px;
  margin-bottom:16px;
}

.fp-fin-dashboard-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}

.fp-fin-panel{
  min-height: 460px;
  display:flex;
  flex-direction:column;
}

#finDashOutstandingWrap,
#finDashPendingWrap{
  flex:1 1 auto;
  min-height:0;
  max-height:420px;
  overflow-y:auto;
  overflow-x:auto;
  padding-right:6px;
}

#finDashOutstandingWrap .fp-fin-table,
#finDashPendingWrap .fp-fin-table{
  min-width:100%;
}

@media (max-width: 1200px){
  .fp-fin-dashboard-top{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .fp-fin-dashboard-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px){
  .fp-fin-dashboard-top{
    grid-template-columns: 1fr;
  }
}
.fp-fin-dashboard-top .fp-fin-mini-kpi{
  min-height: 110px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px;
}

.fp-fin-dashboard-top .fp-fin-mini-kpi .k{
  font-size:14px;
  margin-bottom:10px;
}

.fp-fin-dashboard-top .fp-fin-mini-kpi .v{
  font-size:40px;
  line-height:1;
}
/* ===== Finance dashboard final structure ===== */

.fp-fin-dash-section{
  margin-bottom: 20px;
}

.fp-fin-dash-section-title{
  font-size: 15px;
  font-weight: 800;
  color: #f5d86d;
  margin-bottom: 10px;
  letter-spacing: .2px;
}

.fp-fin-dashboard-top{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:14px;
}

.fp-fin-dashboard-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}

.fp-fin-panel{
  min-height: 460px;
  display:flex;
  flex-direction:column;
}

#finDashOutstandingWrap,
#finDashPendingWrap{
  flex:1 1 auto;
  min-height:0;
  max-height:420px;
  overflow-y:auto;
  overflow-x:auto;
  padding-right:6px;
}

#finDashOutstandingWrap .fp-fin-table,
#finDashPendingWrap .fp-fin-table{
  min-width:100%;
}

#finDashboardCard .fp-fin-summary-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:14px;
}

#finDashboardCard .fp-fin-kpi-strip{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:14px;
}

#finDashboardCard .fp-fin-mini-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:14px;
}

@media (max-width: 1200px){
  .fp-fin-dashboard-grid{
    grid-template-columns: 1fr;
  }

  #finDashboardCard .fp-fin-summary-grid,
  #finDashboardCard .fp-fin-kpi-strip,
  #finDashboardCard .fp-fin-mini-kpis,
  .fp-fin-dashboard-top{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 700px){
  #finDashboardCard .fp-fin-summary-grid,
  #finDashboardCard .fp-fin-kpi-strip,
  #finDashboardCard .fp-fin-mini-kpis,
  .fp-fin-dashboard-top{
    grid-template-columns: 1fr;
  }
}
body{
  overflow-x: hidden;
  overflow-y: auto;
}
.books-side{
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
/* =========================================
   BUY PDF – PROFESSIONAL QUICK PRESETS
   ========================================= */

/* panel grid */
#pdfPresetRow.pdf-presets-grid,
.pdf-presets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* card */
.pdf-preset-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, #111111 0%, #0c0c0c 100%);
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pdf-preset-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34);
}

/* image */
.pdf-preset-card img {
  width: 100%;
  height: 118px;
  object-fit: contain;
  display: block;
  background: #0a0a0a;
  padding: 10px 10px 0;
}

/* body */
.pdf-preset-body {
  padding: 12px 14px 14px;
  text-align: center;
}

/* mini top tags */
.pdf-preset-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pdf-mini-tag,
.pdf-preset-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pdf-mini-tag {
  color: #d4af37;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.22);
}

.pdf-preset-badge {
  color: #111;
  background: linear-gradient(180deg, #f0cf72 0%, #d4af37 100%);
  border: none;
  box-shadow: none;
}

/* title */
.pdf-preset-title {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  color: #f5f5f5;
}

/* meta lines */
.pdf-preset-medium,
.pdf-preset-meta,
.pdf-preset-desc {
  font-size: 13px;
  line-height: 1.4;
  color: #c8c8c8;
  margin-top: 3px;
}

.pdf-preset-meta strong,
.pdf-preset-desc strong {
  color: #e6c766;
  font-weight: 700;
}

/* old price */
.pdf-preset-price-old {
  margin-top: 10px;
  font-size: 13px;
  color: #8f8f8f;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* new price */
.pdf-preset-price-new {
  margin-top: 2px;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  color: #ffffff;
}

/* save text */
.pdf-preset-save {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #d4af37;
}

/* button */
.pdf-preset-card .btn,
.pdf-preset-add-btn {
  margin: 14px 14px 14px;
  width: calc(100% - 28px);
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 800;
  color: #111;
  background: linear-gradient(180deg, #f3d77f 0%, #d4af37 100%);
  box-shadow: 0 6px 14px rgba(212, 175, 55, 0.18);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.pdf-preset-card .btn:hover,
.pdf-preset-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(212, 175, 55, 0.22);
  filter: brightness(1.02);
}

/* remove extra colorful effects from older styles */
.pdf-preset-card *,
.pdf-preset-card *::before,
.pdf-preset-card *::after {
  text-shadow: none !important;
}

@media (max-width: 1180px) {
  #pdfPresetRow.pdf-presets-grid,
  .pdf-presets-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  #pdfPresetRow.pdf-presets-grid,
  .pdf-presets-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================
   BUY PDF – PROFESSIONAL QUICK PRESETS
   Black + Gold + White + Green highlight
   ========================================= */

#pdfPresetRow.pdf-presets-grid,
.pdf-presets-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

/* card */
.pdf-preset-card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(180deg, #111 0%, #0a0a0a 100%);
  border:1px solid rgba(212,175,55,.42);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.pdf-preset-card:hover{
  transform:translateY(-2px);
  border-color:rgba(212,175,55,.72);
  box-shadow:0 12px 24px rgba(0,0,0,.34);
}

/* top image */
.pdf-preset-card img{
  width:100%;
  height:118px;
  object-fit:contain;
  display:block;
  background:#0b0b0b;
  padding:10px 10px 0;
}

/* body */
.pdf-preset-body{
  padding:12px 14px 14px;
  text-align:center;
}

/* top tag row */
.pdf-preset-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.pdf-mini-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  color:#d4af37;
  background:rgba(212,175,55,.08);
  border:1px solid rgba(212,175,55,.24);
}

.pdf-preset-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:#111;
  background:linear-gradient(180deg, #f5d77e 0%, #d4af37 100%);
  border:none;
}

/* title */
.pdf-preset-title{
  margin:4px 0 6px;
  font-size:17px;
  line-height:1.22;
  font-weight:800;
  color:#fff;
}

/* info lines */
.pdf-preset-medium{
  font-size:13px;
  color:#d5d5d5;
  margin-top:2px;
}

.pdf-preset-meta{
  font-size:13px;
  color:#d5d5d5;
  margin-top:3px;
}

.pdf-preset-meta .green{
  color:#2fd16a;
  font-weight:700;
}

.pdf-preset-desc{
  font-size:13px;
  color:#2fd16a;
  font-weight:700;
  margin-top:4px;
}

/* old/new price */
.pdf-preset-price-old{
  margin-top:10px;
  font-size:13px;
  color:#a2a2a2;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}

.pdf-preset-price-new{
  margin-top:2px;
  font-size:28px;
  line-height:1.08;
  font-weight:800;
  color:#fff;
}

/* keep green save text */
.pdf-preset-save{
  margin-top:4px;
  font-size:14px;
  font-weight:800;
  color:#2fd16a;
}

/* button */
.pdf-preset-add-btn,
.pdf-preset-card .btn{
  margin:14px 14px 14px;
  width:calc(100% - 28px);
  border:none;
  border-radius:14px;
  padding:12px 14px;
  font-size:15px;
  font-weight:800;
  color:#111;
  background:linear-gradient(180deg, #f3d77f 0%, #d4af37 100%);
  box-shadow:0 6px 14px rgba(212,175,55,.16);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.pdf-preset-add-btn:hover,
.pdf-preset-card .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(212,175,55,.22);
  filter:brightness(1.02);
}

/* remove extra messy effects */
.pdf-preset-card,
.pdf-preset-card *{
  text-shadow:none !important;
}

/* mobile */
@media (max-width: 760px){
  #pdfPresetRow.pdf-presets-grid,
  .pdf-presets-grid{
    grid-template-columns:1fr;
  }
}

.pdf-mini-tag{
  padding:2px 8px;
  font-size:10px;
  font-weight:600;
  line-height:1.1;

  color:#f8f8f8;

  background:rgba(212,175,55,.10);
  border:1px solid rgba(212,175,55,.20);
  border-radius:999px;
}

.pdf-preset-badge{
  padding:2px 8px;
  font-size:10px;
  font-weight:700;
  line-height:1.1;

color:#f8f8f8;

  background:#c8a96b;
  border-radius:999px;
}
/* ===================================
   BUY PDF PREMIUM CARD UPGRADE
   =================================== */

./* ===== AUTO HEIGHT + SAME BUTTON LINE ===== */

.pdf-presets-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

.pdf-preset-card{
  display:flex;
  flex-direction:column;

  border-radius:16px;
  overflow:hidden;

  background:linear-gradient(180deg,#111 0%,#0a0a0a 100%);
  border:1px solid rgba(212,175,55,.22);

  box-shadow:0 8px 20px rgba(0,0,0,.22);
  transition:.18s ease;
}

.pdf-preset-card:hover{
  transform:translateY(-2px);
  border-color:rgba(212,175,55,.45);
  box-shadow:0 12px 24px rgba(0,0,0,.28);
}

/* image */
.pdf-preset-card img{
  width:100%;
  height:105px;
  object-fit:contain;
  background:#090909;
  padding:8px 8px 0;
}

/* body stretches */
.pdf-preset-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:10px 12px 12px;
  text-align:center;
}

/* title */
.pdf-preset-title{
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  color:#fff;
  margin:6px 0 8px;
}

/* content section */
.pdf-preset-content{
  min-height:92px;   /* keeps buttons aligned */
}

/* text lines */
.pdf-preset-medium,
.pdf-preset-meta{
  font-size:13px;
  color:#d7d7d7;
  line-height:1.35;
}

.pdf-preset-desc,
.pdf-preset-save{
  font-size:13px;
  color:#2fd16a;
  font-weight:700;
}

.pdf-preset-price-old{
  font-size:13px;
  color:#999;
  text-decoration:line-through;
  margin-top:4px;
}

.pdf-preset-price-new{
  font-size:28px;
  font-weight:800;
  color:#fff;
  line-height:1.1;
}

/* button always pushed bottom */
.pdf-preset-add-btn{
  margin-top:auto;
  width:100%;
  border:none;
  border-radius:14px;
  padding:12px;

  font-size:15px;
  font-weight:800;
  color:#111;

  background:linear-gradient(180deg,#e4ca88 0%,#d4af37 60%,#c29a4a 100%);
  cursor:pointer;
  transition:.16s ease;
}

.pdf-preset-add-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(212,175,55,.22);
}

/* mobile */
@media(max-width:900px){
  .pdf-presets-grid{
    grid-template-columns:1fr;
  }
}
.table-wrap {
  max-height: 240px;
  overflow: auto;
}
.dash-grid > div:last-child {
  position: sticky;
  top: 20px;
}
.kpis {
  gap: 12px;
}
.st-card{
  position:relative;
  width:188px;
  height:280px;   /* 🔥 FIXED HEIGHT (IMPORTANT) */
  padding:15px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.05);
  background:#050607;

  display:flex;
  flex-direction:column;
  justify-content:space-between; /* keeps button bottom aligned */
}
.st-card .book-title{
  height:32px;       /* fixed title area */
  overflow:hidden;
}
.st-card .book-sub{
  height:28px;       /* fixed subtitle area */
  overflow:hidden;
}
.stationery-layout #st_grid.books-grid{
  justify-items:center;   /* center cards in grid */
}
/* ✅ GLOBAL STICKY CART FIX - all shopping/order tabs */
.books-side,
.books-cart,
.tm-right,
.misc-layout .books-side,
.stationery-layout .books-cart,
#cartSide {
  position: sticky !important;
  top: 90px !important;
  align-self: flex-start !important;
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ✅ make parent layouts allow sticky */
.books-layout,
.tm-layout,
.misc-layout,
.stationery-layout,
.pdf-4col {
  align-items: flex-start !important;
}

/* ✅ mobile/tablet: disable sticky */
@media (max-width: 1100px) {
  .books-side,
  .books-cart,
  .tm-right,
  .misc-layout .books-side,
  .stationery-layout .books-cart,
  #cartSide {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
.tm-layout,
.misc-layout,
.stationery-layout,
.pdf-4col {
  min-height: 100vh;
}
.tm-grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  align-items:end;
}

@media(max-width:900px){
  .tm-grid3{
    grid-template-columns:1fr;
  }
}
/* ===== Awesome press animation for login buttons ===== */
.btn.gold.smart {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.4s ease;
  box-shadow:
    0 6px 0 #8f6f08,
    0 12px 22px rgba(212,175,55,.22);
}

.btn.gold.smart:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 #8f6f08,
    0 18px 32px rgba(212,175,55,.35);
  filter: brightness(1.05);
}

.btn.gold.smart:active,
.btn.gold.smart.is-pressed,
.btn.gold.smart[aria-pressed="true"] {
  transform: translateY(5px) scale(0.97);
  box-shadow:
    0 1px 0 #8f6f08,
    0 4px 10px rgba(212,175,55,.18),
    inset 0 4px 8px rgba(0,0,0,.25);
  filter: brightness(0.92);
}

/* shine sweep */
.btn.gold.smart::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -80%;
  width: 45%;
  height: 180%;
  background: rgba(255,255,255,.35);
  transform: rotate(25deg);
  transition: left .55s ease;
}

.btn.gold.smart:hover::after {
  left: 130%;
}

/* loading/pressed pulse */
.btn.gold.smart.is-pressed::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.16);
  animation: fpPressPulse .55s ease-out infinite alternate;
}

@keyframes fpPressPulse {
  from { opacity: .5; }
  to   { opacity: .5; }
}
.btn.smart {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}

@keyframes rippleEffect {
  to {
    transform: scale(15);
    opacity: 0;
  }
}
.btn.gold.smart {
  box-shadow:
    0 0 0 rgba(255,215,0,0),
    0 6px 20px rgba(212,175,55,0.3);
}

.btn.gold.smart:hover {
  box-shadow:
    0 0 20px rgba(255,215,0,0.6),
    0 10px 30px rgba(212,175,55,0.5);
}
.btn.success {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
  box-shadow: 0 0 20px rgba(76,175,80,0.6);
}
/* Wrong login shake */
.btn.error-shake,
.input.error-shake {
  animation: fpShake 0.38s ease;
  border-color: #ff4d4d !important;
  box-shadow: 0 0 16px rgba(255, 77, 77, 0.45) !important;
}

@keyframes fpShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
body {
  transition: opacity 0.5s ease, transform 0.9s ease;
}

body.page-exit {
  opacity: 0;
  transform: scale(0.785);
}
/* ✅ Production table: use black empty space and show more rows */
.prod-left-card {
  min-height: calc(100vh - 310px);
}

.prod-table-wrap {
  max-height: calc(100vh - 390px);
  overflow-y: auto;
}

.prod-tbl td,
.prod-tbl th {
  padding-top: 8px !important;
  padding-bottom: 3px !important;
}

.prod-tip {
  margin-top: 6px !important;
}
/* === PRINT TYPE PREMIUM ALIGN === */
.tm-grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

/* Card style */
.tm-radio-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:80px;
  padding:12px;
  border-radius:16px;
  cursor:pointer;

  border:1px solid rgba(212,175,55,0.25);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));

  transition:all .2s ease;
  text-align:center;
}
/* ===============================
   PRINT TYPE – PREMIUM CARDS
================================= */

/* Layout */
.tm-grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

/* Card */
.tm-radio-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:80px;
  padding:12px;
  border-radius:16px;
  cursor:pointer;
  overflow:hidden;

  border:1px solid rgba(212,175,55,0.25);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));

  transition:all .2s ease;
  text-align:center;
}

/* Text */
.tm-radio-card span{
  font-size:14px;
  font-weight:500;
  line-height:1.3;
}

/* Hide radio */
.tm-radio-card input{
  position:absolute;
  opacity:0;
}

/* Hover */
.tm-radio-card:hover{
  transform:translateY(-2px);
  border-color:rgba(212,175,55,0.6);
  box-shadow:0 0 19px rgba(212,175,55,0.2);
}

/* Click press */
.tm-radio-card:active{
  transform:scale(0.97);
}

/* Ripple effect */
.tm-radio-card::after{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  opacity:0;
  transform:scale(1);
  transition:transform .6s ease, opacity .5s ease;
}

.tm-radio-card:active::after{
  opacity:1;
  transform:scale(16);
}

/* Selected state */
.tm-radio-card:has(input:checked){
  border-color:#d4af37;
  background:linear-gradient(180deg, rgba(212,175,55,0.25), rgba(212,175,55,0.05));
  box-shadow:0 0 18px rgba(212,175,55,0.28);
  animation:tmGoldGlow 1.6s ease-in-out infinite alternate;
}

/* Indicator dot */
.tm-radio-card::before{
  content:"";
  position:absolute;
  top:10px;
  right:12px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#555;
  transition:all .9s ease;
}

.tm-radio-card:has(input:checked)::before{
  background:#d4af37;
  box-shadow:0 0 6px #d4af37;
}

/* Glow animation */
@keyframes tmGoldGlow{
  from{ box-shadow:0 0 15px rgba(212,175,55,.15); }
  to{ box-shadow:0 0 27px rgba(212,175,55,.35); }
}
/* ===============================
   PRODUCTION FULLSCREEN MODE
================================ */

/* ===============================
   PRODUCTION FULLSCREEN BUTTON
================================ */

#prodFullBtn{
  border:none;
  border-radius:12px;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;

  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color:#e5e5e5;

  border:1px solid rgba(212,175,55,0.25);
  transition:all .18s ease;
}

/* Hover */
#prodFullBtn:hover{
  transform:translateY(-1px);
  border-color:#d4af37;
  color:#fff;
  box-shadow:0 0 12px rgba(212,175,55,.35);
}

/* Click press */
#prodFullBtn:active{
  transform:scale(0.96);
}

/* Active fullscreen state */
body.prod-full-active #prodFullBtn{
  background:linear-gradient(180deg, #d4af37, #b8962e);
  color:#000;
  border-color:#d4af37;
  box-shadow:0 0 16px rgba(212,175,55,.5);
}

/* Icon animation */
#prodFullBtn::before{
  content:"⛶";
  margin-right:6px;
  transition:transform .2s ease;
}

#prodFullBtn:hover::before{
  transform:scale(1.2);
}
/* ===============================
   COMMON EXPAND BUTTON
================================ */
.fp-expand-btn{
  border:none;
  border-radius:12px;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color:#e5e5e5;
  border:1px solid rgba(212,175,55,0.25);
  transition:all .18s ease;
}

.fp-expand-btn:hover{
  transform:translateY(-1px);
  border-color:#d4af37;
  color:#fff;
  box-shadow:0 0 12px rgba(212,175,55,.35);
}

.fp-expand-btn:active{
  transform:scale(0.96);
}

.fp-expand-btn.is-active{
  background:linear-gradient(180deg, #d4af37, #b8962e);
  color:#000;
  border-color:#d4af37;
  box-shadow:0 0 16px rgba(212,175,55,.5);
}

/* Expanded panel */

body.fp-full-active{
  overflow:hidden;
}
.fp-tab-fullscreen{
  position:fixed !important;
  inset:8px !important;
  width:auto !important;
  height:auto !important;
  max-height:none !important;
  z-index:9998 !important;

  background:#050505 !important;
  border:1px solid rgba(212,175,55,.45) !important;
  border-radius:16px !important;
  padding:14px !important;
  overflow:auto !important;
  box-shadow:0 0 35px rgba(0,0,0,.85);
}
.fp-floating-exit{
  position:fixed !important;
  top:22px !important;
  right:36px !important;
  z-index:10000 !important;
}
.fp-tab-fullscreen .table-wrap,
.fp-tab-fullscreen .mkt-table-wrap,
.fp-tab-fullscreen .prod-table-wrap{
  height:calc(100vh - 90px) !important;
  max-height:none !important;
  overflow:auto !important;
}

.fp-tab-fullscreen table{
  width:100% !important;
}
/* =====================================================
   TAB ENLARGE / FULLSCREEN
===================================================== */

body.fp-full-active {
  overflow: hidden !important;
}

.fp-tab-fullscreen {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 14px 18px 20px !important;

  background: #080808 !important;

  overflow-x: auto !important;
  overflow-y: auto !important;

  z-index: 99990 !important;
}

/* Keep Finance heading/navigation visible */
#tabFinance.fp-tab-fullscreen .fp-finance-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;

  background: #080808 !important;
  padding-top: 4px !important;
  padding-bottom: 12px !important;
}

/* Exit button remains visible */
.fp-floating-exit {
  position: fixed !important;
  top: 12px !important;
  right: 18px !important;

  z-index: 100000 !important;

  background: linear-gradient(
    180deg,
    #ffe169,
    #e4b600
  ) !important;

  color: #000 !important;
  border-color: #ffd700 !important;

  font-weight: 800 !important;

  box-shadow:
    0 0 8px rgba(255, 215, 0, 0.45),
    0 0 18px rgba(255, 215, 0, 0.30) !important;
}

/* Give the enlarged Finance table enough space */
#tabFinance.fp-tab-fullscreen .fp-fin-view {
  width: 100% !important;
  max-width: none !important;
}

#tabFinance.fp-tab-fullscreen .fp-fin-table-wrap,
#tabFinance.fp-tab-fullscreen .table-wrap {
  width: 100% !important;
  max-width: none !important;
  overflow: auto !important;
}
/* ===============================
   PRODUCTION TABLE FINAL FIX
   overlap + thin rows + docs one line
================================ */

/* Give Priority and Actions more space */
.prod-tbl th:nth-child(5),
.prod-tbl td:nth-child(5){
  width: 190px !important;
}

.prod-tbl th:nth-child(10),
.prod-tbl td:nth-child(10){
  width: 190px !important;
}

/* Stop Action + Overdue overlap */
.prod-badge,
.prod-mini-tag,
.prod-stage-pill{
  white-space: nowrap !important;
}

.prod-tbl td:nth-child(5){
  overflow: visible !important;
}

.prod-actions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}

.prod-actions .ibtn{
  min-width:130px !important;
  height:34px !important;
  padding:0 18px !important;
}

/* Invoice + Address same line */
.prod-docs{
  display:flex !important;
  flex-direction:row !important;
  gap:8px !important;
  align-items:center !important;
  white-space:nowrap !important;
}

.prod-doc-link{
  display:inline-flex !important;
  align-items:center !important;
  font-size:11px !important;
  padding:2px 6px !important;
  line-height:1 !important;
}

/* Thinner rows */
.prod-tbl th,
.prod-tbl td{
  padding-top:4px !important;
  padding-bottom:4px !important;
  line-height:1.2 !important;
}

.prod-stage-pill,
.prod-badge{
  padding:4px 10px !important;
  font-size:11px !important;
}

/* Slightly smaller Ready button */
.prod-actions .ibtn.ready{
  min-width:120px !important;
  height:32px !important;
}
/* ===============================
   PRODUCTION PRIORITY CLEAN FIX
================================ */

/* Hide small Action tag */
.prod-tbl td:nth-child(5) .prod-mini-tag{
  display:none !important;
}

/* Give overdue badge clean space */
.prod-tbl th:nth-child(5),
.prod-tbl td:nth-child(5){
  width:130px !important;
  min-width:130px !important;
  text-align:center !important;
}

/* Make overdue badge compact */
.prod-tbl td:nth-child(5) .prod-badge{
  display:inline-flex !important;
  justify-content:center !important;
  padding:4px 10px !important;
  font-size:11px !important;
  min-width:82px !important;
}

/* Docs in one line */
.prod-docs{
  display:flex !important;
  flex-direction:row !important;
  gap:6px !important;
  white-space:nowrap !important;
}

/* Make row lines thinner */
.prod-tbl th,
.prod-tbl td{
  padding:4px 8px !important;
  line-height:1.15 !important;
}

/* Reduce Ready button size */
.prod-actions .ibtn{
  min-width:115px !important;
  height:30px !important;
  padding:0 12px !important;
  font-size:12px !important;
}
/* ===============================
   FINAL ALIGN + COMPACT FIX
================================ */

/* TOTAL column center aligned */
.prod-tbl th:nth-child(6),
.prod-tbl td:nth-child(6){
  text-align:center !important;
  width:70px !important;
}

/* DOCS → one line + centered */
.prod-tbl th:nth-child(7),
.prod-tbl td:nth-child(7){
  text-align:center !important;
  width:110px !important;
}

.prod-docs{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:6px !important;
  white-space:nowrap !important;
}

/* Make Invoice + Address inline tight */
.prod-doc-link{
  font-size:11px !important;
  padding:2px 6px !important;
  border-radius:6px !important;
}

/* ACTION column center aligned + compact */
.prod-tbl th:nth-child(10),
.prod-tbl td:nth-child(10){
  text-align:center !important;
  width:140px !important;
}

/* Ready button smaller + centered */
.prod-actions{
  justify-content:center !important;
}

.prod-actions .ibtn{
  min-width:100px !important;
  height:30px !important;
  font-size:12px !important;
  padding:0 10px !important;
  border-radius:20px !important;
}

/* Make whole table slightly tighter */
.prod-tbl th,
.prod-tbl td{
  padding-top:3px !important;
  padding-bottom:3px !important;
  font-size:12px !important;
}

/* Reduce row height feel */
.prod-stage-pill,
.prod-badge{
  padding:3px 8px !important;
  font-size:10.5px !important;
}
/* ===============================
   DOCS COLUMN - CLEAN TEXT VERSION
================================ */

.prod-tbl th:nth-child(7),
.prod-tbl td:nth-child(7){
  text-align:center !important;
  width:140px !important;
}

/* Keep both in ONE LINE */
.prod-docs{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  white-space:nowrap !important;
}

/* Make text cleaner */
.prod-doc-link{
  font-size:12px !important;
  font-weight:700 !important;
  color:#60a5fa !important;
  text-decoration:none !important;
  padding:3px 8px !important;
  border-radius:8px !important;
  background:rgba(96,165,250,0.10) !important;
  border:1px solid rgba(96,165,250,0.25) !important;
}

/* Optional: small icon spacing */
.prod-doc-link::before{
  margin-right:4px;
}

/* Remove line break issue */
.prod-docs a{
  display:inline-flex !important;
}
.prod-docs{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  white-space:nowrap !important;
}

.prod-doc-link.inv::before{ content:"📄"; }
.prod-doc-link.addr::before{ content:"📍"; }
/* ===============================
   READY BUTTON COMPACT
================================ */

.prod-actions .ibtn{
  min-width:90px !important;
  height:28px !important;
  padding:0 10px !important;
  font-size:11.5px !important;
  border-radius:18px !important;
}

/* Specific Ready style */
.prod-actions .ibtn.ready{
  min-width:85px !important;
  height:26px !important;
  font-size:11px !important;
}
/* ===============================
   ULTRA COMPACT ROW
================================ */

.prod-tbl th,
.prod-tbl td{
  padding-top:2px !important;
  padding-bottom:2px !important;
  line-height:1.1 !important;
}

/* Reduce badge height also */
.prod-stage-pill,
.prod-badge{
  padding:2px 8px !important;
  font-size:10px !important;
}
/* Docs color coding */
.prod-doc-link.inv{
  background:rgba(59,130,246,0.15) !important;
  border-color:rgba(59,130,246,0.4) !important;
  color:#60a5fa !important;
}

.prod-doc-link.addr{
  background:rgba(34,197,94,0.15) !important;
  border-color:rgba(34,197,94,0.4) !important;
  color:#4ade80 !important;
}
/* ===============================
   DELIVERY COLUMN CLEAN FORMAT
================================ */

.prod-delivery{
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  text-align:center;
}

.prod-delivery-time{
  font-size:10px;
  opacity:.7;
  margin-top:1px;
}
/* DELIVERY COLOR SYSTEM */
.prod-delivery.overdue{
  color:#f87171;
  font-weight:800;
}

.prod-delivery.today{
  color:#facc15;
  font-weight:800;
}

.prod-delivery.future{
  color:#4ade80;
}

.prod-delivery-time{
  font-size:10px;
  opacity:.7;
}
/* =====================================================
   FUTURE PRINT RESPONSIVE FULLSCREEN PATCH
   Desktop + Laptop + Tablet + Mobile
   Add at END of style.css
===================================================== */

html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
}

.appbar {
  z-index: 1000;
}

.tabs {
  position: sticky;
  top: 49px;
  z-index: 999;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

.view {
  width: 100%;
  min-height: calc(100dvh - 105px);
  padding: clamp(10px, 1.5vw, 18px);
}

/* Main ordering layouts */
.books-layout,
.gp-3col,
.tm-layout,
.misc-layout,
.stationery-layout,
.pdf-4col,
.sp-layout {
  width: 100%;
  max-width: 100%;
  min-height: calc(100dvh - 140px);
}

/* Desktop / large laptop */
.books-layout {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(320px, 380px);
}

.gp-3col {
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr) minmax(320px, 0.9fr);
}

/* Cards and forms should never overflow */
.card,
.input,
.btn,
select,
textarea,
table {
  max-width: 100%;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

/* Sticky cart only for desktop/laptop */
.books-filter,
.books-side,
.gp-right-compact {
  position: sticky;
  top: 115px;
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
}

/* Laptop */
@media (max-width: 1400px) {
  .gp-3col {
    grid-template-columns: minmax(280px, 0.85fr) minmax(340px, 1fr) minmax(300px, 0.85fr);
    gap: 12px;
  }

  .books-layout {
    grid-template-columns: 220px minmax(0, 1fr) 330px;
    gap: 12px;
  }
}

/* Tablet */
@media (max-width: 1100px) {
  .books-layout,
  .gp-3col,
  .tm-layout,
  .misc-layout,
  .stationery-layout,
  .pdf-4col,
  .sp-layout {
    grid-template-columns: 1fr !important;
  }

  .books-filter,
  .books-side,
  .gp-right-compact {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .view {
    min-height: auto;
  }
}

/* Mobile */
@media (max-width: 700px) {
  body {
    font-size: 14px;
  }

  .appbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .appbar .left,
  .appbar .right {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .tabs {
    top: 92px;
    padding: 8px;
  }

  .tab {
    padding: 9px 10px;
    font-size: 13px;
  }

  .view {
    padding: 10px;
  }

  .grid2,
  .gp-two,
  .gp-three,
  .gp-jobcat-row,
  .gp-method-row,
  .gp-direct-grid,
  .sp-toolbar,
  .tm-grid3 {
    grid-template-columns: 1fr !important;
  }

  .books-grid,
  .sp-grid {
    grid-template-columns: 1fr !important;
    justify-items: stretch;
  }

  .book-card,
  .st-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .btn,
  .btn.primary,
  .btn.secondary {
    width: 100%;
  }

  .mkt-grid,
  .dash-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Small mobile */
@media (max-width: 430px) {
  .card {
    padding: 12px;
    border-radius: 12px;
  }

  h2 {
    font-size: 18px;
  }

  .kpis {
    grid-template-columns: 1fr !important;
  }
}
.kpi-mini-lkr {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #d4af37;
}
.fin-inc-kpi-click {
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.fin-inc-kpi-click:hover {
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.75);
  box-shadow: 0 0 14px rgba(212,175,55,.25);
}
/* Delivered but not paid - separate from Collected */
.prod-stage-pill.unpaid{
  background: linear-gradient(180deg, #7a2e12, #4a1b0b) !important;
  color: #ffd7a3 !important;
  border: 1px solid rgba(255, 145, 77, 0.85) !important;
  box-shadow: 0 0 10px rgba(255, 120, 40, 0.35) !important;
}

/* Collected stays green */
.prod-stage-pill.done{
  background: linear-gradient(180deg, #047857, #065f46);
  color: #d1fae5;
  border: 1px solid rgba(16, 185, 129, 0.75);
}
/* ===============================
   DASHBOARD BOTTOM TABLE PANELS
================================= */

.dash-bottom-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:stretch;
}

.dash-panel{
  display:flex;
  flex-direction:column;
  min-height:380px;   /* same height for both cards */
}

.dash-panel-title{
  font-weight:700;
  font-size:15px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}

.dash-table-wrap{
  flex:1;
  min-height:0;
  max-height:320px;
  overflow-y:auto;
  overflow-x:auto;
  border-radius:12px;
}

.dash-table{
  width:100%;
  border-collapse:collapse;
}

.dash-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#0f0f0f;
  padding:10px 8px;
  text-align:left;
  font-weight:700;
}

.dash-table tbody td{
  padding:8px 8px;
  vertical-align:top;
}

.dash-table tbody tr td:last-child{
  white-space:nowrap;
}

.dash-table tbody tr:not(:last-child) td{
  border-bottom:1px solid rgba(255,255,255,.05);
}

/* no-items row */
.dash-empty{
  text-align:center;
  color:#9aa0a6;
  padding:24px 8px !important;
}

/* responsive */
@media (max-width: 1100px){
  .dash-bottom-grid{
    grid-template-columns:1fr;
  }

  .dash-panel{
    min-height:320px;
  }
}
/* ===== Customer Orders Modal inside Marketing ===== */

.mkt-customer-order-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.customer-orders-modal {
  width: min(1180px, 96vw) !important;
  max-height: 86vh;
  overflow: hidden;
}

.customer-orders-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.customer-orders-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  opacity: 0.9;
}

.customer-orders-counts span {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 8px;
  border-radius: 999px;
}

.customer-orders-body {
  max-height: 65vh;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
}

.customer-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.customer-orders-table th,
.customer-orders-table td {
  padding: 8px 7px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}

.customer-orders-table th {
  position: sticky;
  top: 0;
  background: #111;
  z-index: 1;
  color: #ffd54a;
  text-align: left;
}

.customer-orders-table td:nth-child(5) {
  max-width: 320px;
}
.ibtn.warn {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.45);
}

.ibtn.danger {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
}

.ibtn.ok {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.45);
}
.ibtn.wa {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.45);
}
/* ===== Customer intake duplicate badges ===== */

.cust-status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.cust-badge-normal {
  background: rgba(148, 163, 184, 0.16);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.cust-badge-warn {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.cust-badge-danger {
  background: rgba(239, 68, 68, 0.20);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.50);
}

.cust-badge-info {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.45);
}
.cust-badge-merge {
  background: rgba(168, 85, 247, 0.18);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.45);
}
#mktRefresh,
#btnCustomerOrders {
  white-space: nowrap;
}

#btnCustomerOrders {
  padding: 8px 10px;
}
.customer-edit-modal {
  width: min(760px, 96vw) !important;
  max-height: 88vh;
  overflow: auto;
}

.customer-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.ibtn.edit {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.45);
}

@media (max-width: 720px) {
  .customer-edit-grid {
    grid-template-columns: 1fr;
  }
}
.customer-items-modal {
  width: min(850px, 96vw) !important;
  max-height: 88vh;
  overflow: auto;
}

.customer-items-body {
  max-height: 55vh;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
}

.customer-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.customer-items-table th,
.customer-items-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: middle;
}

.customer-items-table th {
  position: sticky;
  top: 0;
  background: #111;
  color: #ffd54a;
  text-align: left;
  z-index: 1;
}

.ibtn.items {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.45);
}
/* ===== Customer Orders Modal - wider, no bottom scroll ===== */

#customerOrdersModal.fp-modal-backdrop {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(3px);
  align-items: flex-start;
  padding-top: 18px;
}

.customer-orders-modal {
  width: calc(100vw - 36px) !important;
  max-width: 1560px !important;
  max-height: 90vh !important;
  background: #111722 !important;
  border: 1px solid rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.18);
}

.customer-orders-body {
  max-height: 68vh;
  overflow-y: auto;
  overflow-x: hidden !important;   /* ✅ removes bottom scroll */
  border-radius: 12px;
  background: #0b1018;
}

.customer-orders-table {
  width: 100% !important;
  table-layout: fixed;             /* ✅ forces table to fit modal */
  border-collapse: collapse;
  font-size: 12px;
}

.customer-orders-table th,
.customer-orders-table td {
  padding: 8px 6px;
  white-space: normal !important;   /* ✅ allows wrapping */
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}

/* Column widths */
.customer-orders-table th:nth-child(1),
.customer-orders-table td:nth-child(1) {
  width: 42px;      /* Select */
}

.customer-orders-table th:nth-child(2),
.customer-orders-table td:nth-child(2) {
  width: 78px;      /* Temp No */
}

.customer-orders-table th:nth-child(3),
.customer-orders-table td:nth-child(3) {
  width: 90px;      /* Submitted */
}

.customer-orders-table th:nth-child(4),
.customer-orders-table td:nth-child(4) {
  width: 90px;      /* Customer */
}

.customer-orders-table th:nth-child(5),
.customer-orders-table td:nth-child(5) {
  width: 78px;      /* Phone */
}

.customer-orders-table th:nth-child(6),
.customer-orders-table td:nth-child(6) {
  width: auto;      /* Items - takes remaining space */
}

.customer-orders-table th:nth-child(7),
.customer-orders-table td:nth-child(7) {
  width: 68px;      /* Total */
  text-align: right;
}

.customer-orders-table th:nth-child(8),
.customer-orders-table td:nth-child(8),
.customer-orders-table th:nth-child(9),
.customer-orders-table td:nth-child(9) {
  width: 70px;      /* Payment / Delivery */
}

.customer-orders-table th:nth-child(10),
.customer-orders-table td:nth-child(10) {
  width: 120px;     /* Status */
}

/* Action button columns */
.customer-orders-table th:nth-child(n+11),
.customer-orders-table td:nth-child(n+11) {
  width: 54px;
  text-align: center;
  white-space: nowrap !important;
}

/* Make small action buttons fit nicely */
.customer-orders-table .ibtn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

/* Make item text easier to read */
.customer-orders-table td:nth-child(6) {
  line-height: 1.35;
}

/* Keep header visible */
.customer-orders-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #111;
  color: #ffd700;
}
/* ===== Customer Orders action buttons with names ===== */

.customer-orders-modal {
  width: calc(100vw - 28px) !important;
  max-width: 1680px !important;
}

.customer-orders-table {
  width: 100% !important;
  table-layout: fixed;
  font-size: 12px;
}

/* Main column widths */
.customer-orders-table th:nth-child(1),
.customer-orders-table td:nth-child(1) {
  width: 46px;
}

.customer-orders-table th:nth-child(2),
.customer-orders-table td:nth-child(2) {
  width: 86px;
}

.customer-orders-table th:nth-child(3),
.customer-orders-table td:nth-child(3) {
  width: 92px;
}

.customer-orders-table th:nth-child(4),
.customer-orders-table td:nth-child(4) {
  width: 118px;
}

.customer-orders-table th:nth-child(5),
.customer-orders-table td:nth-child(5) {
  width: 86px;
}

.customer-orders-table th:nth-child(6),
.customer-orders-table td:nth-child(6) {
  width: auto;
}

.customer-orders-table th:nth-child(7),
.customer-orders-table td:nth-child(7) {
  width: 70px;
  text-align: right;
}

.customer-orders-table th:nth-child(8),
.customer-orders-table td:nth-child(8),
.customer-orders-table th:nth-child(9),
.customer-orders-table td:nth-child(9) {
  width: 76px;
}

.customer-orders-table th:nth-child(10),
.customer-orders-table td:nth-child(10) {
  width: 140px;
}

/* Action columns: View to Reject */
.customer-orders-table th:nth-child(n+11),
.customer-orders-table td:nth-child(n+11) {
  width: 76px;
  text-align: center;
  white-space: normal !important;
}

/* Header readability */
.customer-orders-table th {
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
}

/* New labelled action buttons */
.cust-action-btn {
  width: 68px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  font-size: 11px;
  line-height: 1.05;
  padding: 5px 4px;
}

.cust-action-btn span {
  font-size: 14px;
  line-height: 1;
}

.cust-action-btn b {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.cust-action-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.cust-action-btn.view {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.35);
}

.cust-action-btn.edit {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.45);
}

.cust-action-btn.items {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.45);
}

.cust-action-btn.wa {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.45);
}

.cust-action-btn.ok {
  background: rgba(22, 163, 74, 0.22);
  border-color: rgba(34, 197, 94, 0.55);
}

.cust-action-btn.warn {
  background: rgba(245, 158, 11, 0.20);
  border-color: rgba(245, 158, 11, 0.50);
}

.cust-action-btn.danger {
  background: rgba(239, 68, 68, 0.20);
  border-color: rgba(239, 68, 68, 0.55);
}

/* Keep table inside modal without bottom scroll */
.customer-orders-body {
  overflow-x: hidden !important;
}

.customer-orders-table th,
.customer-orders-table td {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.mkt-hide-badge{
  display:inline-block;
  min-width:72px;
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-align:center;
  border:1px solid rgba(255,255,255,.12);
}

.mkt-hide-badge.normal{
  color:#aaa;
  background:rgba(255,255,255,.06);
}

.mkt-hide-badge.ok{
  color:#00ff99;
  background:rgba(0,255,150,.12);
  border-color:rgba(0,255,150,.3);
}

.mkt-hide-badge.warn{
  color:#ffd400;
  background:rgba(255,212,0,.12);
  border-color:rgba(255,212,0,.35);
}

.mkt-hide-badge.danger{
  color:#ff6b6b;
  background:rgba(255,0,0,.14);
  border-color:rgba(255,0,0,.35);
}

.mkt-hide-badge.hold{
  color:#ffcf70;
  background:rgba(255,180,0,.10);
}
/* Finance table column widths */
.fp-fin-table th:nth-child(1),
.fp-fin-table td:nth-child(1){
  width:120px;
  max-width:120px;
}

.fp-fin-table th:nth-child(2),
.fp-fin-table td:nth-child(2){
  width:90px;
  max-width:90px;
}

.fp-fin-table th:nth-child(3),
.fp-fin-table td:nth-child(3){
  width:230px;
  max-width:230px;
}

.fp-fin-table td:nth-child(3) b,
.fp-fin-table td:nth-child(3) .fp-fin-small{
  display:block;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Finance table - wider Created column */
.fp-fin-table th:nth-child(2),
.fp-fin-table td:nth-child(2){
  width:135px !important;
  min-width:135px !important;
  max-width:135px !important;
  white-space:nowrap;
}

/* Keep Created date/time neat */
.fp-fin-table td:nth-child(2) b,
.fp-fin-table td:nth-child(2) .fp-fin-small{
  display:block;
  white-space:nowrap;
}
/* =====================================================
   FINANCE ACTIONS — KEEP ALL BUTTONS ON ONE LINE
===================================================== */

#finTrackingTableCard .fp-fin-table {
  width: 100% !important;
  min-width: 1420px !important;
  table-layout: auto !important;
}

#finTrackingTableCard .fp-fin-table th:last-child,
#finTrackingTableCard .fp-fin-table td:last-child {
  width: 245px !important;
  min-width: 245px !important;
  white-space: nowrap !important;
}

#finTrackingTableCard .fp-fin-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

#finTrackingTableCard .fp-fin-actions .btn-mini {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
}

#finTrackingTableCard .fp-fin-table-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
}
/* =====================================================
   FINANCE ACTIONS — ONE LINE WITH CANCEL / RETURN
===================================================== */

#finTrackingTableCard .fp-fin-table {
  min-width: 1540px !important;
  table-layout: auto !important;
}

#finTrackingTableCard .fp-fin-table th:last-child,
#finTrackingTableCard .fp-fin-table td:last-child {
  width: 365px !important;
  min-width: 365px !important;
  white-space: nowrap !important;
}

#finTrackingTableCard .fp-fin-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

#finTrackingTableCard .fp-fin-actions .btn-mini {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 6px 7px !important;
  font-size: 11px !important;
}

#finTrackingTableCard .btn-mini.cancel {
  border-color: rgba(239, 68, 68, 0.65) !important;
}

#finTrackingTableCard .btn-mini.return {
  border-color: rgba(249, 115, 22, 0.65) !important;
}
/* =====================================================
   FINANCE VERIFICATION — COMPACT FILTER ROW
===================================================== */

#finTrackingFilterCard .fp-fin-filter-grid{
  display:grid !important;

  /* Search | Hotline | Stage | Method | Date | Refresh */
  grid-template-columns:
    minmax(300px, 420px)
    180px
    245px
    180px
    180px
    100px !important;

  gap:10px !important;
  align-items:center !important;
  justify-content:start !important;

  /* Prevent filters stretching across the whole screen */
  width:fit-content !important;
  max-width:100% !important;
}

#finTrackingFilterCard .fp-fin-filter-grid .input{
  width:100% !important;
  min-width:0 !important;
  height:44px !important;
}

#finTrackingFilterCard #finRefresh{
  width:100px !important;
  min-width:100px !important;
  height:44px !important;
  padding:8px 12px !important;
}

/* Medium screens */
@media (max-width:1450px){
  #finTrackingFilterCard .fp-fin-filter-grid{
    width:100% !important;

    grid-template-columns:
      minmax(260px, 1.4fr)
      minmax(150px, .7fr)
      minmax(200px, 1fr)
      minmax(150px, .7fr)
      minmax(150px, .7fr)
      100px !important;
  }
}

/* Tablet */
@media (max-width:1050px){
  #finTrackingFilterCard .fp-fin-filter-grid{
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

  #finTrackingFilterCard #finRefresh{
    width:100% !important;
    min-width:0 !important;
  }
}

/* Mobile */
@media (max-width:650px){
  #finTrackingFilterCard .fp-fin-filter-grid{
    grid-template-columns:1fr !important;
  }
}
/* =====================================================
   FINANCE TABLE — FIT ONE LAPTOP WINDOW
   KEEP THIS AS THE LAST BLOCK IN style.css
===================================================== */

@media (min-width: 1150px){

  /* No horizontal scroll on laptop */
  #finTrackingTableCard .fp-fin-table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding-right:4px !important;
  }

  #finTrackingTableCard .fp-fin-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  /* Compact cells */
  #finTrackingTableCard .fp-fin-table th,
  #finTrackingTableCard .fp-fin-table td{
    padding:8px 5px !important;
    font-size:11px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* 1 — Order */
  #finTrackingTableCard .fp-fin-table th:nth-child(1),
  #finTrackingTableCard .fp-fin-table td:nth-child(1){
    width:7% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* 2 — Created */
  #finTrackingTableCard .fp-fin-table th:nth-child(2),
  #finTrackingTableCard .fp-fin-table td:nth-child(2){
    width:7.5% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* 3 — Customer */
  #finTrackingTableCard .fp-fin-table th:nth-child(3),
  #finTrackingTableCard .fp-fin-table td:nth-child(3){
    width:14% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* Customer name and phone ellipsis */
  #finTrackingTableCard .fp-fin-table td:nth-child(3) b,
  #finTrackingTableCard .fp-fin-table td:nth-child(3) .fp-fin-small{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* 4 — Hotline */
  #finTrackingTableCard .fp-fin-table th:nth-child(4),
  #finTrackingTableCard .fp-fin-table td:nth-child(4){
    width:4.5% !important;
    min-width:0 !important;
    max-width:none !important;
    text-align:center !important;
  }

  /* 5 — Total */
  #finTrackingTableCard .fp-fin-table th:nth-child(5),
  #finTrackingTableCard .fp-fin-table td:nth-child(5){
    width:5.5% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* 6 — Paid */
  #finTrackingTableCard .fp-fin-table th:nth-child(6),
  #finTrackingTableCard .fp-fin-table td:nth-child(6){
    width:5.5% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* 7 — Balance */
  #finTrackingTableCard .fp-fin-table th:nth-child(7),
  #finTrackingTableCard .fp-fin-table td:nth-child(7){
    width:6% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* 8 — Method */
  #finTrackingTableCard .fp-fin-table th:nth-child(8),
  #finTrackingTableCard .fp-fin-table td:nth-child(8){
    width:5.5% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* 9 — PaidAt */
  #finTrackingTableCard .fp-fin-table th:nth-child(9),
  #finTrackingTableCard .fp-fin-table td:nth-child(9){
    width:8% !important;
    min-width:0 !important;
    max-width:none !important;
    white-space:normal !important;
    line-height:1.25 !important;
  }

  /* 10 — Auto Close Due */
  #finTrackingTableCard .fp-fin-table th:nth-child(10),
  #finTrackingTableCard .fp-fin-table td:nth-child(10){
    width:8.5% !important;
    min-width:0 !important;
    max-width:none !important;
    white-space:normal !important;
    line-height:1.25 !important;
  }

  /* 11 — Status */
  #finTrackingTableCard .fp-fin-table th:nth-child(11),
  #finTrackingTableCard .fp-fin-table td:nth-child(11){
    width:8% !important;
    min-width:0 !important;
    max-width:none !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  /* Smaller status pill */
  #finTrackingTableCard .fp-fin-pill{
    padding:4px 7px !important;
    font-size:10px !important;
    max-width:100% !important;
  }

  /* 12 — Actions */
  #finTrackingTableCard .fp-fin-table th:nth-child(12),
  #finTrackingTableCard .fp-fin-table td:nth-child(12){
    width:20% !important;
    min-width:0 !important;
    max-width:none !important;
    text-align:right !important;
    overflow:visible !important;
  }

  /* Actions stay in one line */
  #finTrackingTableCard .fp-fin-actions{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:3px !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  /* Smaller action buttons */
  #finTrackingTableCard .fp-fin-actions .btn-mini{
    flex:0 0 auto !important;
    min-width:0 !important;
    padding:5px 5px !important;
    font-size:9px !important;
    border-radius:8px !important;
    white-space:nowrap !important;
  }
}

/* =====================================================
   FINANCE VERIFICATION — REDUCE VERTICAL SPACE
   KEEP AS LAST CSS BLOCK
===================================================== */

#finTrackingFilterCard{
  padding:10px 14px !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  border-radius:16px !important;
}

/* Smaller heading area */
#finTrackingFilterCard .fp-fin-card-title{
  margin:0 0 7px 0 !important;
  padding:0 !important;
  font-size:15px !important;
  line-height:1.15 !important;
}

/* Compact filter spacing */
#finTrackingFilterCard .fp-fin-filter-grid{
  gap:8px !important;
  align-items:center !important;
}

/* Compact search and dropdowns */
#finTrackingFilterCard .input,
#finTrackingFilterCard select.input{
  height:3px !important;
  min-height:38px !important;
  padding:6px 10px !important;
  border-radius:10px !important;
  font-size:13px !important;
}

/* Compact refresh button */
#finTrackingFilterCard #finRefresh{
  height:38px !important;
  min-height:38px !important;
  padding:6px 12px !important;
  border-radius:10px !important;
  font-size:13px !important;
}

/* Reduce gap before Finance Queue */
#finTrackingTableCard{
  margin-top:0 !important;
}
/* Finance Verification → Finance Queue spacing */
#finTrackingFilterCard{
  margin-bottom:10px !important;
}

#finTrackingTableCard{
  margin-top:0 !important;
}
/* Finance Queue title → table headings compact spacing */
#finTrackingTableCard{
  padding-top:12px !important;
}

#finTrackingTableCard .fp-fin-card-title{
  margin:0 0 2px 0 !important;
  padding:0 !important;
  line-height:1.15 !important;
}

#finTrackingTableCard .fp-fin-table-wrap{
  margin-top:0 !important;
}

#finTrackingTableCard .fp-fin-table{
  border-spacing:0 6px !important;
}

#finTrackingTableCard .fp-fin-table thead th{
  padding-top:0 !important;
  padding-bottom:3px !important;
}
/* ===== PRODUCTION START BUTTON - ATTENTION PULSE ===== */

.prod-actions .ibtn.start{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow:
    0 0 0 0 rgba(59,130,246,.45),
    0 6px 14px rgba(59,130,246,.22);
  animation: prodStartPulse 1.8s ease-in-out infinite;
}

@keyframes prodStartPulse{
  0%,100%{
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(59,130,246,.35),
      0 6px 14px rgba(59,130,246,.22);
  }

  50%{
    transform: scale(1.045);
    box-shadow:
      0 0 0 7px rgba(59,130,246,0),
      0 9px 20px rgba(59,130,246,.38);
  }
}

.prod-actions .ibtn.start:hover{
  animation-play-state: paused;
  transform: translateY(-2px) scale(1.04);
}
/* ===== PRINT DONE BUTTON ===== */

.prod-actions .ibtn.print{
  position: relative;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 6px 14px rgba(99,102,241,.24);
}

.prod-actions .ibtn.print::before{
  content: "✓";
  margin-right: 6px;
  font-weight: 900;
}

.prod-actions .ibtn.print:hover{
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(99,102,241,.38);
}
/* =====================================================
   PRODUCTION START — URGENT ATTENTION
===================================================== */

.prod-actions .ibtn.start{
  position: relative;
  overflow: visible;

  background: linear-gradient(
    135deg,
    #ff2d2d 0%,
    #e50914 55%,
    #b80000 100%
  ) !important;

  color: #fff !important;
  border: 1px solid #ff5b5b !important;

  font-weight: 900 !important;

  box-shadow:
    0 0 0 0 rgba(255, 30, 30, .70),
    0 0 12px rgba(255, 20, 20, .65),
    0 6px 15px rgba(0,0,0,.35);

  animation: productionStartUrgent 1.15s ease-in-out infinite;
}


/* Urgent pulse */
@keyframes productionStartUrgent{

  0%{
    transform: scale(1);

    box-shadow:
      0 0 0 0 rgba(255,40,40,.75),
      0 0 8px rgba(255,30,30,.55),
      0 5px 12px rgba(0,0,0,.35);
  }

  50%{
    transform: scale(1.07);

    background: linear-gradient(
      135deg,
      #ff4747,
      #ff1010,
      #d00000
    );

    box-shadow:
      0 0 0 7px rgba(255,30,30,.12),
      0 0 22px rgba(255,20,20,.90),
      0 8px 18px rgba(0,0,0,.45);
  }

  100%{
    transform: scale(1);

    box-shadow:
      0 0 0 0 rgba(255,40,40,0),
      0 0 8px rgba(255,30,30,.55),
      0 5px 12px rgba(0,0,0,.35);
  }
}


/* Hover */
.prod-actions .ibtn.start:hover{
  animation-play-state: paused;

  background: #ff1717 !important;

  transform: scale(1.08);

  box-shadow:
    0 0 24px rgba(255,30,30,.95),
    0 8px 18px rgba(0,0,0,.45);
}
/* =====================================================
   FUTURE SOLUTIONS DIRECT — HOME SCREEN
   Mobile first
===================================================== */

.fsd-home{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:4px 0 28px;
}

.fsd-home-hero{
  padding:10px 2px 16px;
}

.fsd-home-kicker{
  color:#d4af37;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  margin-bottom:5px;
}

.fsd-home-hero h1{
  margin:0;
  color:#fff;
  font-size:25px;
  line-height:1.15;
}

.fsd-home-tagline{
  margin-top:7px;
  color:#9aa0a6;
  font-size:13px;
}

.fsd-home-section{
  margin-top:18px;
}

.fsd-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.fsd-section-head h2{
  margin:0;
  font-size:16px;
  color:#fff;
}


/* Featured — phone: 1 column */

.fsd-feature-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}


/* Regular categories — phone: 2 columns */

.fsd-category-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}


/* Category card */

.fsd-cat-card{
  min-width:0;
  min-height:128px;
  padding:14px;
  text-align:left;

  border-radius:16px;
  border:1px solid rgba(212,175,55,.20);

  background:
    linear-gradient(
      145deg,
      #171717,
      #0d0d0d
    );

  color:#fff;
  cursor:pointer;

  box-shadow:
    0 6px 18px rgba(0,0,0,.28);

  -webkit-tap-highlight-color:transparent;
}

.fsd-cat-card:active{
  transform:scale(.98);
}

.fsd-cat-featured{
  min-height:150px;
}

.fsd-cat-icon{
  font-size:29px;
  line-height:1;
  margin-bottom:12px;
}

.fsd-cat-featured .fsd-cat-icon{
  font-size:34px;
}

.fsd-cat-title{
  color:#f1ce68;
  font-size:15px;
  line-height:1.25;
  font-weight:800;
}

.fsd-cat-featured .fsd-cat-title{
  font-size:18px;
}

.fsd-cat-sub{
  margin-top:6px;
  color:#a6abb2;
  font-size:11px;
  line-height:1.35;
}


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

@media (min-width:700px){

  .fsd-home{
    padding:10px 8px 34px;
  }

  .fsd-home-hero h1{
    font-size:34px;
  }

  .fsd-feature-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .fsd-category-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .fsd-cat-card{
    min-height:145px;
    padding:18px;
  }

}


/* =========================
   DESKTOP
========================= */

@media (min-width:1050px){

  .fsd-category-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .fsd-cat-featured{
    min-height:175px;
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   HOME V2 — MOBILE FIRST MARKETPLACE
========================================================= */

.fsd-home-v2{
  --fsd-gold:#e7bd43;
  --fsd-gold-soft:#f4d978;
  --fsd-bg:#090909;
  --fsd-card:#121212;
  --fsd-card-2:#181818;
  --fsd-border:rgba(231,189,67,.22);
  --fsd-muted:#9ea3aa;

  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:2px 0 90px;
  color:#fff;
}


/* =========================
   SEARCH
========================= */

.fsd-search-wrap{
  position:sticky;
  top:58px;
  z-index:20;
  padding:8px 0 10px;
  background:rgba(9,9,9,.94);
  backdrop-filter:blur(10px);
}

.fsd-search-box{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;

  min-height:48px;
  padding:5px 6px 5px 12px;

  background:#151515;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
}

.fsd-search-icon{
  font-size:20px;
  color:var(--fsd-gold);
}

.fsd-search-box input{
  min-width:0;
  width:100%;

  border:0 !important;
  outline:0;
  box-shadow:none !important;

  background:transparent !important;
  color:#fff;
  padding:8px 2px;

  /* prevents mobile browser zoom */
  font-size:16px;
}

.fsd-search-box input::placeholder{
  color:#777d84;
}

.fsd-search-box button{
  min-height:38px;
  padding:0 13px;

  border:0;
  border-radius:11px;

  background:linear-gradient(
    135deg,
    #f4dd86,
    #d7aa2f
  );

  color:#151515;
  font-weight:800;
}


/* =========================
   HERO
========================= */

.fsd-market-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  margin-top:6px;
  padding:20px 17px;

  overflow:hidden;

  border:1px solid var(--fsd-border);
  border-radius:20px;

  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(231,189,67,.18),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #181818,
      #0c0c0c
    );
}

.fsd-hero-copy{
  min-width:0;
}

.fsd-hero-kicker{
  margin-bottom:6px;

  color:var(--fsd-gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.fsd-market-hero h1{
  margin:0;

  font-size:24px;
  line-height:1.15;
  color:#fff;
}

.fsd-market-hero p{
  margin:9px 0 0;

  max-width:560px;

  color:var(--fsd-muted);
  font-size:12px;
  line-height:1.45;
}

.fsd-hero-art{
  flex:0 0 auto;

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

  font-size:27px;
}

.fsd-hero-art span{
  color:var(--fsd-gold);
  font-size:18px;
}


/* =========================
   SECTIONS
========================= */

.fsd-home-v2-section{
  margin-top:24px;
}

.fsd-v2-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;

  margin-bottom:10px;
}

.fsd-v2-section-title{
  color:#fff;
  font-size:17px;
  line-height:1.2;
  font-weight:850;
}

.fsd-v2-section-sub{
  margin-top:3px;

  color:var(--fsd-muted);
  font-size:11px;
}


/* =========================
   MAIN SHOP
========================= */

.fsd-main-shop-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.fsd-main-shop-card{
  width:100%;
  min-width:0;
  min-height:84px;

  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;

  padding:13px;

  text-align:left;

  border:1px solid var(--fsd-border);
  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #171717,
      #101010
    );

  color:#fff;

  -webkit-tap-highlight-color:transparent;
}

.fsd-main-shop-card:active{
  transform:scale(.985);
}

.fsd-main-shop-icon{
  width:52px;
  height:52px;

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

  border-radius:14px;

  background:rgba(231,189,67,.09);

  font-size:29px;
}

.fsd-main-shop-text{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.fsd-main-shop-text strong{
  color:var(--fsd-gold-soft);
  font-size:15px;
  line-height:1.25;
}

.fsd-main-shop-text small{
  margin-top:5px;

  color:var(--fsd-muted);
  font-size:11px;
  line-height:1.35;
}

.fsd-main-shop-arrow{
  color:var(--fsd-gold);
  font-size:27px;
}


/* =========================
   PRODUCT SWIPE ROW
========================= */

.fsd-product-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:145px;

  gap:11px;

  overflow-x:auto;
  overflow-y:hidden;

  padding:2px 2px 9px;

  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;

  scrollbar-width:none;
}

.fsd-product-strip::-webkit-scrollbar{
  display:none;
}

.fsd-mini-product{
  scroll-snap-align:start;

  width:145px;
  min-width:145px;

  display:flex;
  flex-direction:column;

  padding:9px;

  text-align:left;

  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;

  background:
    linear-gradient(
      160deg,
      #171717,
      #0d0d0d
    );

  color:#fff;

  overflow:hidden;

  -webkit-tap-highlight-color:transparent;
}

.fsd-mini-product:active{
  transform:scale(.975);
}

.fsd-mini-product-image{
  width:100%;
  height:120px;

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

  overflow:hidden;

  border-radius:11px;

  background:#f4f4f4;
}

.fsd-mini-product-image img{
  width:100%;
  height:100%;

  object-fit:contain;
}

.fsd-mini-placeholder{
  font-size:36px;
}

.fsd-mini-product-title{
  margin-top:9px;

  min-height:35px;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  color:#f5f5f5;
  font-size:12px;
  line-height:1.35;
  font-weight:700;
}

.fsd-mini-product-price{
  margin-top:6px;

  color:var(--fsd-gold-soft);
  font-size:13px;
  font-weight:900;
}

.fsd-mini-product-link{
  margin-top:auto;
  padding-top:7px;

  color:#9ea3aa;
  font-size:10px;
}

.fsd-home-loading{
  min-width:180px;

  padding:18px;

  border:1px dashed rgba(255,255,255,.12);
  border-radius:14px;

  color:#979da5;
  font-size:12px;
}


/* =========================
   PLAY & LEARN
========================= */

.fsd-play-card{
  width:100%;
  min-width:0;

  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;

  padding:16px;

  text-align:left;

  border:1px solid rgba(231,189,67,.30);
  border-radius:19px;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(231,189,67,.17),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #1a1811,
      #101010
    );

  color:#fff;
}

.fsd-play-icon{
  width:58px;
  height:58px;

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

  border-radius:16px;

  background:#222018;

  font-size:31px;
}

.fsd-play-copy{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.fsd-play-label{
  margin-bottom:3px;

  color:var(--fsd-gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}

.fsd-play-copy strong{
  font-size:15px;
}

.fsd-play-copy small{
  margin-top:4px;

  color:var(--fsd-muted);
  font-size:11px;
  line-height:1.35;
}

.fsd-play-arrow{
  color:var(--fsd-gold);
  font-size:28px;
}


/* =========================
   HUB CARDS
========================= */

.fsd-hub-card{
  width:100%;
  min-width:0;

  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;

  min-height:78px;
  padding:13px 14px;

  text-align:left;

  border:1px solid rgba(255,255,255,.09);
  border-radius:17px;

  background:#141414;
  color:#fff;
}

.fsd-hub-icon{
  width:48px;
  height:48px;

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

  border-radius:13px;

  background:#1d1d1d;

  font-size:26px;
}

.fsd-hub-copy{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.fsd-hub-copy strong{
  color:#f4d978;
  font-size:15px;
}

.fsd-hub-copy small{
  margin-top:4px;

  color:var(--fsd-muted);
  font-size:11px;
  line-height:1.35;
}

.fsd-hub-arrow{
  color:#c4c4c4;
  font-size:25px;
}


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

@media (min-width:650px){

  .fsd-home-v2{
    padding-left:8px;
    padding-right:8px;
  }

  .fsd-main-shop-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .fsd-product-strip{
    grid-auto-columns:175px;
    gap:14px;
  }

  .fsd-mini-product{
    width:175px;
    min-width:175px;
  }

  .fsd-mini-product-image{
    height:150px;
  }

  .fsd-market-hero{
    padding:25px;
  }

  .fsd-market-hero h1{
    font-size:31px;
  }

  .fsd-hero-art{
    font-size:40px;
  }

}


/* =========================
   LARGE TABLET / DESKTOP
========================= */

@media (min-width:1000px){

  .fsd-home-v2{
    padding-bottom:40px;
  }

  .fsd-product-strip{
    grid-auto-columns:190px;
  }

  .fsd-mini-product{
    width:190px;
    min-width:190px;
  }

  .fsd-mini-product-image{
    height:165px;
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   PRODUCT DETAIL — MOBILE FIRST
========================================================= */

.fsd-product-detail{
  --pd-gold:#e7bd43;
  --pd-gold-soft:#f4d978;
  --pd-bg:#090909;
  --pd-card:#131313;
  --pd-card-soft:#181818;
  --pd-border:rgba(231,189,67,.22);
  --pd-muted:#9da2aa;

  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 0 95px;
  color:#fff;
}


/* =========================
   LOADING
========================= */

.fsd-product-loading{
  padding:40px 20px;
  text-align:center;
  color:#a9adb4;
  font-size:14px;
}


/* =========================
   TOP BAR
========================= */

.fsd-product-topbar{
  position:sticky;
  top:0;
  z-index:30;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:10px 4px;

  background:rgba(9,9,9,.94);
  backdrop-filter:blur(12px);

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

.fsd-product-back{
  min-height:40px;
  padding:0 14px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;

  background:#171717;
  color:#fff;

  font-size:13px;
  font-weight:700;
}

.fsd-product-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.fsd-product-icon-btn{
  width:40px;
  height:40px;

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

  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;

  background:#171717;
  color:#fff;

  font-size:17px;
}


/* =========================
   IMAGE GALLERY
========================= */

.fsd-product-gallery{
  margin-top:10px;
}

.fsd-product-main-image{
  width:100%;
  min-height:300px;
  height:min(105vw, 470px);

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

  overflow:hidden;

  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;

  background:#fff;
}

.fsd-product-main-image img{
  width:100%;
  height:100%;

  object-fit:contain;

  display:block;
}

.fsd-product-no-image{
  height:320px;

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

  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;

  background:#f4f4f4;

  font-size:55px;
}


/* Thumbnail strip */

.fsd-product-thumbs{
  display:flex;
  gap:9px;

  margin-top:10px;
  padding:2px 1px 6px;

  overflow-x:auto;

  scrollbar-width:none;
}

.fsd-product-thumbs::-webkit-scrollbar{
  display:none;
}

.fsd-product-thumb{
  flex:0 0 68px;

  width:68px;
  height:68px;

  padding:3px;

  overflow:hidden;

  border:2px solid transparent;
  border-radius:12px;

  background:#fff;
}

.fsd-product-thumb.active{
  border-color:var(--pd-gold);
}

.fsd-product-thumb img{
  width:100%;
  height:100%;

  object-fit:contain;
}


/* =========================
   MAIN PRODUCT INFO
========================= */

.fsd-product-info{
  padding:18px 2px 5px;
}

.fsd-product-code{
  margin-bottom:8px;

  color:#8e949d;
  font-size:11px;
  letter-spacing:.05em;
}

.fsd-product-info h1{
  margin:0;

  color:#fff;

  font-size:25px;
  line-height:1.18;
  font-weight:850;
}

.fsd-product-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:12px;
}

.fsd-product-meta span{
  padding:6px 9px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;

  background:#161616;

  color:#c3c6cb;
  font-size:11px;
}

.fsd-product-price{
  margin-top:17px;

  color:var(--pd-gold-soft);

  font-size:26px;
  line-height:1;
  font-weight:900;
}

.fsd-product-delivery{
  display:inline-flex;
  align-items:center;

  margin-top:10px;
  padding:6px 10px;

  border-radius:999px;

  background:rgba(38,190,93,.13);
  border:1px solid rgba(38,190,93,.28);

  color:#72ef9c;

  font-size:11px;
  font-weight:800;
}


/* =========================
   ADD TO CART
========================= */

.fsd-product-add-cart{
  width:100%;
  min-height:50px;

  margin-top:17px;

  border:0;
  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #f4dd86,
      #d6a92d
    );

  color:#131313;

  font-size:15px;
  font-weight:900;

  box-shadow:
    0 8px 24px rgba(231,189,67,.17);
}

.fsd-product-add-cart:active{
  transform:scale(.985);
}


/* =========================
   CONTENT SECTIONS
========================= */

.fsd-product-section{
  margin-top:18px;
  padding:17px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      #151515,
      #101010
    );
}

.fsd-product-section h2{
  margin:0 0 12px;

  color:#fff;

  font-size:17px;
  line-height:1.25;
}

.fsd-product-section p{
  margin:0;

  color:#c4c7cc;

  font-size:13px;
  line-height:1.65;
}

.fsd-product-description{
  margin-top:12px !important;

  color:#9ea3aa !important;
}


/* =========================
   FEATURES
========================= */

.fsd-feature-list{
  display:grid;
  gap:9px;
}

.fsd-feature-list > div{
  padding:10px 12px;

  border-radius:11px;

  background:#1b1b1b;

  color:#e8e8e8;

  font-size:13px;
  line-height:1.4;
}

.fsd-feature-list > div::first-letter{
  color:var(--pd-gold);
}


/* =========================
   PACKAGE CONTENTS
========================= */

.fsd-package-list{
  display:grid;
  gap:7px;
}

.fsd-package-list > div{
  color:#d4d6d9;

  font-size:13px;
  line-height:1.5;
}


/* =========================
   SPECIFICATIONS
========================= */

.fsd-spec-table{
  overflow:hidden;

  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
}

.fsd-spec-row{
  display:grid;
  grid-template-columns:minmax(110px,.75fr) minmax(0,1fr);

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

.fsd-spec-row:last-child{
  border-bottom:0;
}

.fsd-spec-name,
.fsd-spec-value{
  padding:11px 12px;

  font-size:12px;
  line-height:1.4;
}

.fsd-spec-name{
  background:#191919;

  color:#92979e;

  font-weight:700;
}

.fsd-spec-value{
  background:#121212;

  color:#f0f0f0;
}


/* =========================
   COUNTRY / SMALL DETAILS
========================= */

.fsd-product-origin{
  margin-top:18px;
  padding:14px 16px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;

  background:#111;

  color:#bbbfc5;

  font-size:12px;
}

.fsd-product-origin strong{
  color:#fff;
}


/* =========================
   BUTTON INTERACTION
========================= */

.fsd-product-back,
.fsd-product-icon-btn,
.fsd-product-thumb,
.fsd-product-add-cart{
  cursor:pointer;

  -webkit-tap-highlight-color:transparent;
}


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

@media (min-width:700px){

  .fsd-product-detail{
    display:grid;

    grid-template-columns:
      minmax(0, .95fr)
      minmax(0, 1.05fr);

    gap:22px;

    padding-left:14px;
    padding-right:14px;
  }

  .fsd-product-topbar{
    grid-column:1 / -1;
  }

  .fsd-product-gallery{
    grid-column:1;
  }

  .fsd-product-info{
    grid-column:2;

    padding-top:25px;
  }

  .fsd-product-main-image{
    height:500px;
  }

  .fsd-product-info h1{
    font-size:30px;
  }

  .fsd-product-price{
    font-size:31px;
  }

  .fsd-product-section,
  .fsd-product-origin{
    grid-column:1 / -1;
  }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:1050px){

  .fsd-product-detail{
    gap:32px;
  }

  .fsd-product-main-image{
    height:560px;
  }

  .fsd-product-info{
    padding-top:35px;
  }

  .fsd-product-info h1{
    font-size:35px;
  }

  .fsd-feature-list{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   PRODUCT DETAIL — MOBILE FIRST
========================================================= */

.fsd-product-detail{
  --pd-gold:#e7bd43;
  --pd-gold-soft:#f4d978;
  --pd-bg:#090909;
  --pd-card:#131313;
  --pd-card-soft:#181818;
  --pd-border:rgba(231,189,67,.22);
  --pd-muted:#9da2aa;

  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 0 95px;
  color:#fff;
}


/* =========================
   LOADING
========================= */

.fsd-product-loading{
  padding:40px 20px;
  text-align:center;
  color:#a9adb4;
  font-size:14px;
}


/* =========================
   TOP BAR
========================= */

.fsd-product-topbar{
  position:sticky;
  top:0;
  z-index:30;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:10px 4px;

  background:rgba(9,9,9,.94);
  backdrop-filter:blur(12px);

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

.fsd-product-back{
  min-height:40px;
  padding:0 14px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;

  background:#171717;
  color:#fff;

  font-size:13px;
  font-weight:700;
}

.fsd-product-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.fsd-product-icon-btn{
  width:40px;
  height:40px;

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

  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;

  background:#171717;
  color:#fff;

  font-size:17px;
}


/* =========================
   IMAGE GALLERY
========================= */

.fsd-product-gallery{
  margin-top:10px;
}

.fsd-product-main-image{
  width:100%;
  min-height:300px;
  height:min(105vw, 470px);

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

  overflow:hidden;

  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;

  background:#fff;
}

.fsd-product-main-image img{
  width:100%;
  height:100%;

  object-fit:contain;

  display:block;
}

.fsd-product-no-image{
  height:320px;

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

  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;

  background:#f4f4f4;

  font-size:55px;
}


/* Thumbnail strip */

.fsd-product-thumbs{
  display:flex;
  gap:9px;

  margin-top:10px;
  padding:2px 1px 6px;

  overflow-x:auto;

  scrollbar-width:none;
}

.fsd-product-thumbs::-webkit-scrollbar{
  display:none;
}

.fsd-product-thumb{
  flex:0 0 68px;

  width:68px;
  height:68px;

  padding:3px;

  overflow:hidden;

  border:2px solid transparent;
  border-radius:12px;

  background:#fff;
}

.fsd-product-thumb.active{
  border-color:var(--pd-gold);
}

.fsd-product-thumb img{
  width:100%;
  height:100%;

  object-fit:contain;
}


/* =========================
   MAIN PRODUCT INFO
========================= */

.fsd-product-info{
  padding:18px 2px 5px;
}

.fsd-product-code{
  margin-bottom:8px;

  color:#8e949d;
  font-size:11px;
  letter-spacing:.05em;
}

.fsd-product-info h1{
  margin:0;

  color:#fff;

  font-size:25px;
  line-height:1.18;
  font-weight:850;
}

.fsd-product-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:12px;
}

.fsd-product-meta span{
  padding:6px 9px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;

  background:#161616;

  color:#c3c6cb;
  font-size:11px;
}

.fsd-product-price{
  margin-top:17px;

  color:var(--pd-gold-soft);

  font-size:26px;
  line-height:1;
  font-weight:900;
}

.fsd-product-delivery{
  display:inline-flex;
  align-items:center;

  margin-top:10px;
  padding:6px 10px;

  border-radius:999px;

  background:rgba(38,190,93,.13);
  border:1px solid rgba(38,190,93,.28);

  color:#72ef9c;

  font-size:11px;
  font-weight:800;
}


/* =========================
   ADD TO CART
========================= */

.fsd-product-add-cart{
  width:100%;
  min-height:50px;

  margin-top:17px;

  border:0;
  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #f4dd86,
      #d6a92d
    );

  color:#131313;

  font-size:15px;
  font-weight:900;

  box-shadow:
    0 8px 24px rgba(231,189,67,.17);
}

.fsd-product-add-cart:active{
  transform:scale(.985);
}


/* =========================
   CONTENT SECTIONS
========================= */

.fsd-product-section{
  margin-top:18px;
  padding:17px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      #151515,
      #101010
    );
}

.fsd-product-section h2{
  margin:0 0 12px;

  color:#fff;

  font-size:17px;
  line-height:1.25;
}

.fsd-product-section p{
  margin:0;

  color:#c4c7cc;

  font-size:13px;
  line-height:1.65;
}

.fsd-product-description{
  margin-top:12px !important;

  color:#9ea3aa !important;
}


/* =========================
   FEATURES
========================= */

.fsd-feature-list{
  display:grid;
  gap:9px;
}

.fsd-feature-list > div{
  padding:10px 12px;

  border-radius:11px;

  background:#1b1b1b;

  color:#e8e8e8;

  font-size:13px;
  line-height:1.4;
}

.fsd-feature-list > div::first-letter{
  color:var(--pd-gold);
}


/* =========================
   PACKAGE CONTENTS
========================= */

.fsd-package-list{
  display:grid;
  gap:7px;
}

.fsd-package-list > div{
  color:#d4d6d9;

  font-size:13px;
  line-height:1.5;
}


/* =========================
   SPECIFICATIONS
========================= */

.fsd-spec-table{
  overflow:hidden;

  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
}

.fsd-spec-row{
  display:grid;
  grid-template-columns:minmax(110px,.75fr) minmax(0,1fr);

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

.fsd-spec-row:last-child{
  border-bottom:0;
}

.fsd-spec-name,
.fsd-spec-value{
  padding:11px 12px;

  font-size:12px;
  line-height:1.4;
}

.fsd-spec-name{
  background:#191919;

  color:#92979e;

  font-weight:700;
}

.fsd-spec-value{
  background:#121212;

  color:#f0f0f0;
}


/* =========================
   COUNTRY / SMALL DETAILS
========================= */

.fsd-product-origin{
  margin-top:18px;
  padding:14px 16px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;

  background:#111;

  color:#bbbfc5;

  font-size:12px;
}

.fsd-product-origin strong{
  color:#fff;
}


/* =========================
   BUTTON INTERACTION
========================= */

.fsd-product-back,
.fsd-product-icon-btn,
.fsd-product-thumb,
.fsd-product-add-cart{
  cursor:pointer;

  -webkit-tap-highlight-color:transparent;
}


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

@media (min-width:700px){

  .fsd-product-detail{
    display:grid;

    grid-template-columns:
      minmax(0, .95fr)
      minmax(0, 1.05fr);

    gap:22px;

    padding-left:14px;
    padding-right:14px;
  }

  .fsd-product-topbar{
    grid-column:1 / -1;
  }

  .fsd-product-gallery{
    grid-column:1;
  }

  .fsd-product-info{
    grid-column:2;

    padding-top:25px;
  }

  .fsd-product-main-image{
    height:500px;
  }

  .fsd-product-info h1{
    font-size:30px;
  }

  .fsd-product-price{
    font-size:31px;
  }

  .fsd-product-section,
  .fsd-product-origin{
    grid-column:1 / -1;
  }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:1050px){

  .fsd-product-detail{
    gap:32px;
  }

  .fsd-product-main-image{
    height:560px;
  }

  .fsd-product-info{
    padding-top:35px;
  }

  .fsd-product-info h1{
    font-size:35px;
  }

  .fsd-feature-list{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}
/* =====================================================
   FSD — PRODUCT CARD ACTIONS
===================================================== */

.fsd-card-actions{
  display:flex;
  flex-direction:column;
  gap:7px;
  width:100%;
  margin-top:8px;
}


/* Secondary action — deliberately NOT a big button */
.fsd-view-link{
  width:auto !important;
  min-height:0 !important;

  padding:4px 1px !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  box-shadow:none !important;

  color:#e7bd43 !important;

  font-size:12px !important;
  font-weight:750 !important;

  text-align:left !important;

  cursor:pointer;
}

.fsd-view-link:hover{
  text-decoration:underline;
}


/* Primary commercial action */
.book-card .misc_add_btn{
  width:100% !important;
  min-height:44px !important;

  border:0 !important;
  border-radius:12px !important;

  background:
    linear-gradient(
      135deg,
      #f4d978,
      #d9ad2e
    ) !important;

  color:#111 !important;

  font-weight:850 !important;
}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   PRODUCT DETAIL V2 — SIMPLE HOME STYLE
========================================================= */

.fsd-product-detail-v2{
  padding-left:10px;
  padding-right:10px;
}


/* Main image is prominent but not overwhelming */
.fsd-product-detail-v2 .fsd-product-main-image{
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1 / 1;

  padding:16px;

  border-radius:20px;

  background:#f7f7f7;
}

.fsd-product-detail-v2 .fsd-product-main-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}


/* Product information */
.fsd-product-detail-v2 .fsd-product-info{
  padding:16px 2px 6px;
}

.fsd-product-detail-v2 .fsd-product-code{
  margin-bottom:6px;

  font-size:10px;
  color:#858991;
}

.fsd-product-detail-v2 .fsd-product-info h1{
  margin:0;

  font-size:23px;
  line-height:1.2;
}


/* Metadata pills */
.fsd-product-detail-v2 .fsd-product-meta{
  gap:6px;
  margin-top:10px;
}

.fsd-product-detail-v2 .fsd-product-meta span{
  padding:5px 9px;

  background:#151515;

  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;

  font-size:11px;
}


/* Price + delivery */
.fsd-product-buy-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:10px;

  margin-top:16px;
}

.fsd-product-detail-v2 .fsd-product-price{
  margin:0;

  font-size:25px;
}

.fsd-product-price-muted{
  color:#bbb !important;
  font-size:16px !important;
}


/* Add to cart remains the clear primary action */
.fsd-product-detail-v2 .fsd-product-add-cart{
  margin-top:14px;
  min-height:50px;

  border-radius:14px;

  font-size:15px;
}


/* Short description */
.fsd-product-quick-description{
  margin-top:14px;
  padding:0 2px;

  color:#b4b8bf;

  font-size:13px;
  line-height:1.55;
}


/* Compact expandable sections */
.fsd-detail-accordion{
  margin-top:10px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;

  background:#121212;

  overflow:hidden;
}

.fsd-detail-accordion summary{
  min-height:50px;

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

  padding:0 15px;

  cursor:pointer;

  color:#fff;

  font-size:13px;
  font-weight:750;

  list-style:none;
}

.fsd-detail-accordion summary::-webkit-details-marker{
  display:none;
}

.fsd-accordion-arrow{
  color:#e7bd43;

  font-size:20px;

  transition:transform .18s ease;
}

.fsd-detail-accordion[open]
.fsd-accordion-arrow{
  transform:rotate(90deg);
}

.fsd-detail-accordion-body{
  padding:4px 15px 15px;

  color:#bfc2c7;

  font-size:12px;
  line-height:1.6;
}


/* Specifications inside accordion */
.fsd-detail-accordion .fsd-spec-table{
  margin-top:4px;
}


/* Country of origin */
.fsd-product-origin-v2{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:12px;

  margin-top:10px;
  padding:14px 15px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;

  background:#111;

  color:#93979d;

  font-size:12px;
}

.fsd-product-origin-v2 strong{
  color:#fff;
}


/* Mobile thumbnails */
.fsd-product-detail-v2 .fsd-product-thumbs{
  margin-top:8px;
}

.fsd-product-detail-v2 .fsd-product-thumb{
  width:58px;
  height:58px;
  flex-basis:58px;
}


/* Tablet */
@media (min-width:700px){

  .fsd-product-detail-v2{
    padding-left:18px;
    padding-right:18px;
  }

  .fsd-product-detail-v2 .fsd-product-main-image{
    aspect-ratio:auto;
    height:450px !important;
  }

}
/* =========================================================
   FSD PRODUCT GALLERY V2 — FINAL MOBILE FIX
========================================================= */

.fsd-product-gallery{
  width:100%;
  min-width:0;
  overflow:hidden;
}

#fsdGalleryTrack.fsd-gallery-track{
  display:flex !important;

  width:100% !important;
  max-width:100% !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  scroll-snap-type:x mandatory !important;
  scroll-behavior:smooth;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

#fsdGalleryTrack.fsd-gallery-track::-webkit-scrollbar{
  display:none;
}

#fsdGalleryTrack .fsd-gallery-slide{
  flex:0 0 100% !important;

  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;

  aspect-ratio:1 / 1;

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

  overflow:hidden;

  scroll-snap-align:start;
  scroll-snap-stop:always;

  background:#f7f7f7;
}

#fsdGalleryTrack .fsd-gallery-slide > img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  max-width:100% !important;
  max-height:100% !important;

  padding:14px;

  object-fit:contain !important;
}
/* =========================================================
   FSD PRODUCT GALLERY — LAZY VIDEO
========================================================= */

.fsd-gallery-video-lazy{
  width:100%;
  height:100%;

  border:0;
  padding:20px;

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

  gap:8px;

  background:
    radial-gradient(
      circle at center,
      rgba(212,175,55,.11),
      transparent 48%
    ),
    #090909;

  color:#fff;

  cursor:pointer;
}

.fsd-gallery-video-lazy-icon{
  width:68px;
  height:68px;

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

  padding-left:4px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #f4d465,
      #d4af37
    );

  color:#111;

  font-size:27px;
  font-weight:900;

  box-shadow:
    0 8px 25px
    rgba(212,175,55,.25);
}

.fsd-gallery-video-lazy strong{
  margin-top:5px;

  font-size:15px;
}

.fsd-gallery-video-lazy small{
  max-width:240px;

  color:#999;

  font-size:11px;
  text-align:center;
}

.fsd-gallery-video-lazy:active
.fsd-gallery-video-lazy-icon{
  transform:scale(.95);
}
/* YouTube thumbnail inside small media button */
.fsd-video-thumb{
  position:relative;
  width:100%;
  height:100%;
  display:block;
  overflow:hidden;
  border-radius:7px;
  background:#080808;
}

.fsd-video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.fsd-video-thumb-play{
  position:absolute;
  inset:0;

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

  background:rgba(0,0,0,.22);

  color:#fff;
  font-size:20px;
  text-shadow:0 2px 8px #000;
}


/* Large YouTube preview */
.fsd-gallery-video-lazy{
  position:relative;
  overflow:hidden;
}

.fsd-gallery-video-poster{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
}

.fsd-gallery-video-overlay{
  position:absolute;
  inset:0;

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

  gap:8px;

  background:
    linear-gradient(
      rgba(0,0,0,.20),
      rgba(0,0,0,.55)
    );

  color:#fff;
}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   STEP 2G — UNIFIED MARKETPLACE PRODUCT CARDS
   Books + Machines / Misc
========================================================= */


/* ---------- PRODUCT GRIDS ---------- */

#booksList.books-grid,
#misc_items.books-grid{
  display:grid !important;

  grid-template-columns:
    repeat(auto-fit, minmax(210px, 1fr)) !important;

  gap:14px !important;

  width:100% !important;
  padding:4px !important;

  align-items:stretch;
}


/* ---------- COMMON CARD ---------- */

#booksList .book-card,
#misc_items .book-card{
  width:100% !important;

  min-width:0 !important;
  max-width:none !important;

  box-sizing:border-box !important;

  display:flex !important;
  flex-direction:column !important;

  padding:12px !important;

  border:
    1px solid
    rgba(212,175,55,.22) !important;

  border-radius:17px !important;

  background:
    linear-gradient(
      180deg,
      #121212 0%,
      #0b0b0b 100%
    ) !important;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.34) !important;

  overflow:hidden !important;

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


#booksList .book-card:hover,
#misc_items .book-card:hover{
  transform:translateY(-2px);

  border-color:
    rgba(231,189,67,.55) !important;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.42) !important;
}


/* ---------- PRODUCT IMAGE ---------- */

#booksList .book-img-wrap,
#misc_items .book-img-wrap{
  width:100% !important;
  height:180px !important;

  flex:0 0 180px;

  margin:0 0 12px !important;

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

  overflow:hidden;

  border-radius:13px !important;

  background:#f6f6f6 !important;

  cursor:pointer;
}


#booksList .book-img-wrap img,
#misc_items .book-img-wrap img{
  width:100% !important;
  height:100% !important;

  max-width:100% !important;
  max-height:100% !important;

  padding:9px;

  object-fit:contain !important;

  border-radius:0 !important;

  display:block;
}


/* ---------- PRODUCT INFORMATION ---------- */

#booksList .book-main,
#misc_items .book-main{
  flex:1 1 auto;

  display:flex;
  flex-direction:column;

  min-height:82px;

  cursor:pointer;
}


#booksList .book-subject,
#misc_items .book-main .b{
  color:#fff;

  font-size:15px !important;
  font-weight:750 !important;

  line-height:1.3;

  margin-bottom:4px;
}


#booksList .book-meta,
#misc_items .book-main .small{
  color:#92979f !important;

  font-size:11px !important;
  line-height:1.4;
}


/* ---------- PRICE ---------- */

#booksList .book-price-row{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap;

  gap:7px !important;

  margin-top:11px !important;
}


#booksList .book-price{
  color:#fff;

  font-size:16px !important;
  font-weight:850 !important;
}


/* Misc price */

#misc_items .price-tag{
  margin-top:10px;

  color:#fff !important;

  font-size:16px !important;
  font-weight:850 !important;
}


#misc_items .price-tag.free{
  color:#8effa7 !important;
}


/* ---------- FREE DELIVERY ---------- */

#booksList .badge-free,
#misc_items .badge-free-del{
  display:inline-flex;
  align-items:center;

  width:max-content;

  padding:4px 8px !important;

  border-radius:999px !important;

  background:
    linear-gradient(
      90deg,
      #d8ffb5,
      #7cff9c
    ) !important;

  color:#101010 !important;

  font-size:10px !important;
  font-weight:800 !important;

  box-shadow:none !important;
}


/* ---------- VIEW DETAILS ---------- */

#booksList .fsd-view-link,
#misc_items .fsd-view-link{
  width:max-content !important;

  min-height:0 !important;

  margin-top:10px !important;
  margin-bottom:5px !important;

  padding:2px 0 !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  box-shadow:none !important;

  color:#e7bd43 !important;

  font-size:12px !important;
  font-weight:800 !important;

  text-align:left !important;

  cursor:pointer;
}


#booksList .fsd-view-link:hover,
#misc_items .fsd-view-link:hover{
  text-decoration:underline;
}


/* ---------- BOOK ACTION AREA ---------- */

#booksList .book-actions{
  width:100% !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;

  gap:5px !important;

  margin-top:auto !important;
}


/* ---------- PRIMARY ADD TO CART ---------- */

#booksList .fp-addcart-btn,
#misc_items .misc_add_btn{
  width:100% !important;

  min-height:46px !important;

  margin-top:4px !important;

  border:0 !important;
  border-radius:13px !important;

  background:
    linear-gradient(
      135deg,
      #f5da76 0%,
      #e8bd3c 55%,
      #d6a928 100%
    ) !important;

  color:#111 !important;

  font-size:14px !important;
  font-weight:850 !important;

  box-shadow:
    0 4px 12px
    rgba(212,175,55,.12) !important;

  cursor:pointer;
}


#booksList .fp-addcart-btn:active,
#misc_items .misc_add_btn:active{
  transform:scale(.98);
}


/* =========================================================
   PHONE
========================================================= */

@media (max-width:600px){

  #booksList.books-grid,
  #misc_items.books-grid{
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap:9px !important;

    padding:2px !important;
  }


  #booksList .book-card,
  #misc_items .book-card{
    width:100% !important;

    min-width:0 !important;
    max-width:none !important;

    padding:8px !important;

    border-radius:14px !important;
  }


  /* compact product image */
  #booksList .book-img-wrap,
  #misc_items .book-img-wrap{
    height:125px !important;

    flex-basis:125px;

    margin-bottom:7px !important;
  }


  #booksList .book-img-wrap img,
  #misc_items .book-img-wrap img{
    padding:5px !important;
  }


  /* title */
  #booksList .book-subject,
  #misc_items .book-main .b{
    font-size:13px !important;

    line-height:1.25 !important;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
  }


  /* secondary details */
  #booksList .book-meta,
  #misc_items .book-main .small{
    font-size:9.5px !important;

    line-height:1.25 !important;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
  }


  /* price */
  #booksList .book-price,
  #misc_items .price-tag{
    font-size:13px !important;
  }


  /* compact delivery badge */
  #booksList .badge-free,
  #misc_items .badge-free-del{
    font-size:8.5px !important;

    padding:3px 5px !important;
  }


  /* small secondary action */
  #booksList .fsd-view-link,
  #misc_items .fsd-view-link{
    font-size:10px !important;

    margin-top:6px !important;
  }


  /* compact primary button */
  #booksList .fp-addcart-btn,
  #misc_items .misc_add_btn{
    min-height:38px !important;

    padding:7px 6px !important;

    border-radius:10px !important;

    font-size:11px !important;
  }

}


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

@media (min-width:601px) and (max-width:1024px){

  #booksList.books-grid,
  #misc_items.books-grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  #booksList .book-img-wrap,
  #misc_items .book-img-wrap{
    height:175px !important;

    flex-basis:175px;
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   GLOBAL SEARCH — MOBILE FIRST
========================================================= */

.fsd-global-search{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 10px 100px;
  box-sizing:border-box;
  color:#fff;
}


/* =========================
   TOP BAR
========================= */

.fsd-gs-topbar{
  position:sticky;
  top:0;
  z-index:40;

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

  padding:10px 0;

  background:rgba(9,9,9,.94);
  backdrop-filter:blur(12px);

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


.fsd-gs-back{
  width:42px;
  height:42px;

  flex:0 0 42px;

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

  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;

  background:#171717;
  color:#fff;

  font-size:20px;
  font-weight:800;

  cursor:pointer;
}


.fsd-gs-heading{
  display:flex;
  flex-direction:column;
  min-width:0;
}


.fsd-gs-heading strong{
  font-size:16px;
  line-height:1.15;
}


.fsd-gs-heading small{
  margin-top:3px;
  color:#92979f;
  font-size:11px;
}


/* =========================
   SEARCH BOX
========================= */

.fsd-gs-search-wrap{
  padding:14px 0 10px;
}


.fsd-gs-search-box{
  display:grid;

  grid-template-columns:
    34px
    minmax(0,1fr)
    auto;

  align-items:center;

  min-height:52px;

  border:1px solid rgba(231,189,67,.38);
  border-radius:16px;

  background:#151515;

  overflow:hidden;
}


.fsd-gs-search-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  color:#e7bd43;

  font-size:21px;
}


.fsd-gs-search-box input{
  width:100%;
  min-width:0;

  height:50px;

  border:0;
  outline:none;

  background:transparent;
  color:#fff;

  font-size:14px;
}


.fsd-gs-search-box input::placeholder{
  color:#787d84;
}


.fsd-gs-search-box button{
  height:38px;

  margin-right:6px;
  padding:0 15px;

  border:0;
  border-radius:11px;

  background:#e7bd43;
  color:#111;

  font-size:12px;
  font-weight:900;

  cursor:pointer;
}


/* =========================
   SOURCE CHIPS
========================= */

.fsd-gs-chips{
  display:flex;
  gap:7px;

  width:100%;

  padding:2px 0 12px;

  overflow-x:auto;

  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}


.fsd-gs-chips::-webkit-scrollbar{
  display:none;
}


.fsd-gs-chip{
  flex:0 0 auto;

  min-height:36px;

  padding:0 12px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;

  background:#161616;
  color:#aeb2b9;

  font-size:11px;
  font-weight:700;

  white-space:nowrap;

  cursor:pointer;
}


.fsd-gs-chip.active{
  border-color:rgba(231,189,67,.70);

  background:rgba(231,189,67,.14);
  color:#f1d36d;
}


/* =========================
   RESULT HEADING
========================= */

.fsd-gs-result-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  gap:10px;

  padding:6px 2px 12px;
}


.fsd-gs-result-head > div{
  display:flex;
  flex-direction:column;
  min-width:0;
}


.fsd-gs-result-head strong{
  font-size:16px;
  line-height:1.25;
}


.fsd-gs-result-head small{
  margin-top:4px;

  color:#8e939a;

  font-size:11px;
}


/* =========================
   RESULTS
========================= */

.fsd-gs-results{
  display:grid;
  grid-template-columns:1fr;

  gap:10px;
}


/* =========================
   PRODUCT CARD
========================= */

.fsd-gs-card{
  display:grid;

  grid-template-columns:
    92px
    minmax(0,1fr);

  gap:11px;

  padding:9px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #151515,
      #101010
    );

  box-shadow:
    0 8px 24px rgba(0,0,0,.16);

  overflow:hidden;
}


.fsd-gs-card-media{
  width:92px;
  height:116px;

  overflow:hidden;

  border-radius:12px;

  background:#fff;
}


.fsd-gs-card-media img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
}


.fsd-gs-placeholder{
  width:100%;
  height:100%;

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

  background:#202020;

  font-size:27px;
}


.fsd-gs-card-body{
  min-width:0;

  display:flex;
  flex-direction:column;
}


.fsd-gs-source{
  align-self:flex-start;

  margin-bottom:5px;

  padding:3px 7px;

  border-radius:999px;

  background:rgba(231,189,67,.10);
  color:#e7bd43;

  font-size:9px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.35px;
}


.fsd-gs-card h3{
  margin:0;

  color:#fff;

  font-size:14px;
  line-height:1.28;

  font-weight:800;
}


.fsd-gs-code{
  margin-top:4px;

  color:#777d85;

  font-size:9px;
}


.fsd-gs-category{
  margin-top:5px;

  color:#b5b8bd;

  font-size:10px;
}


.fsd-gs-detail{
  margin-top:4px;

  color:#858a91;

  font-size:10px;
  line-height:1.35;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

  overflow:hidden;
}


.fsd-gs-card-bottom{
  margin-top:auto;
  padding-top:8px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:8px;
}


.fsd-gs-price{
  color:#f1d36d;

  font-size:15px;
  font-weight:900;

  white-space:nowrap;
}


.fsd-gs-price-soft{
  color:#aaaeb4;

  font-size:11px;
}


.fsd-gs-actions{
  display:flex;
  align-items:center;
  gap:5px;
}


.fsd-gs-open,
.fsd-gs-pdf{
  min-height:32px;

  padding:0 10px;

  border-radius:9px;

  font-size:10px;
  font-weight:800;

  cursor:pointer;
}


.fsd-gs-open{
  border:1px solid rgba(231,189,67,.50);

  background:#e7bd43;
  color:#111;
}


.fsd-gs-pdf{
  border:1px solid rgba(255,255,255,.14);

  background:#1c1c1c;
  color:#fff;
}


.fsd-gs-availability{
  margin-top:6px;

  color:#6fd891;

  font-size:9px;
}


/* =========================
   EMPTY STATE
========================= */

.fsd-gs-empty{
  min-height:210px;

  display:flex;
  flex-direction:column;

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

  gap:7px;

  padding:25px;

  border:1px dashed rgba(255,255,255,.12);
  border-radius:18px;

  color:#858a91;

  text-align:center;
}


.fsd-gs-empty-icon{
  margin-bottom:4px;

  font-size:30px;
}


.fsd-gs-empty strong{
  color:#d7d9dc;

  font-size:14px;
}


.fsd-gs-empty span{
  max-width:260px;

  font-size:11px;
  line-height:1.5;
}


/* =========================
   LOADING
========================= */

.fsd-gs-loading{
  min-height:190px;

  display:flex;
  flex-direction:column;

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

  gap:12px;

  color:#92979f;

  font-size:11px;
}


.fsd-gs-spinner{
  width:28px;
  height:28px;

  border:3px solid rgba(255,255,255,.10);
  border-top-color:#e7bd43;

  border-radius:50%;

  animation:
    fsdGsSpin .75s linear infinite;
}


@keyframes fsdGsSpin{
  to{
    transform:rotate(360deg);
  }
}


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

@media (min-width:700px){

  .fsd-global-search{
    padding-left:16px;
    padding-right:16px;
  }


  .fsd-gs-results{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .fsd-gs-card{
    grid-template-columns:
      105px
      minmax(0,1fr);
  }


  .fsd-gs-card-media{
    width:105px;
    height:132px;
  }

}


@media (min-width:1050px){

  .fsd-gs-results{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   CATEGORIES HUB
========================================================= */

.fsd-categories-page{
  width:100%;
  max-width:1000px;

  margin:0 auto;

  padding:
    0
    10px
    100px;

  box-sizing:border-box;

  color:#fff;
}


/* =========================
   HEADER
========================= */

.fsd-cat-header{
  position:sticky;
  top:0;
  z-index:40;

  display:flex;
  align-items:center;

  gap:10px;

  padding:10px 0;

  background:
    rgba(9,9,9,.95);

  backdrop-filter:
    blur(12px);

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


.fsd-cat-back{
  width:42px;
  height:42px;

  flex:0 0 42px;

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

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:13px;

  background:#171717;

  color:#fff;

  font-size:20px;
  font-weight:900;

  cursor:pointer;
}


.fsd-cat-heading{
  display:flex;
  flex-direction:column;

  min-width:0;
}


.fsd-cat-heading strong{
  font-size:17px;
  line-height:1.15;
}


.fsd-cat-heading small{
  margin-top:3px;

  color:#8d9299;

  font-size:11px;
}


/* =========================
   SEARCH CTA
========================= */

.fsd-cat-search{
  width:100%;

  display:grid;

  grid-template-columns:
    42px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:10px;

  margin-top:14px;
  padding:12px;

  border:
    1px solid rgba(
      231,
      189,
      67,
      .34
    );

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      #171717,
      #111
    );

  text-align:left;

  cursor:pointer;
}


.fsd-cat-search-icon{
  width:42px;
  height:42px;

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

  border-radius:12px;

  background:
    rgba(
      231,
      189,
      67,
      .12
    );

  color:#e7bd43;

  font-size:23px;
}


.fsd-cat-search-copy{
  display:flex;
  flex-direction:column;

  min-width:0;
}


.fsd-cat-search-copy strong{
  color:#fff;

  font-size:13px;
}


.fsd-cat-search-copy small{
  margin-top:4px;

  color:#858a91;

  font-size:10px;
  line-height:1.35;
}


.fsd-cat-arrow{
  color:#e7bd43;

  font-size:24px;
}


/* =========================
   SECTIONS
========================= */

.fsd-cat-section{
  margin-top:23px;
}


.fsd-cat-section-title{
  display:flex;
  flex-direction:column;

  margin-bottom:10px;

  padding:0 2px;
}


.fsd-cat-section-title > span{
  color:#e7bd43;

  font-size:10px;
  font-weight:900;

  letter-spacing:.8px;
}


.fsd-cat-section-title small{
  margin-top:4px;

  color:#888d94;

  font-size:11px;
}


/* =========================
   GRID
========================= */

.fsd-cat-grid{
  display:grid;

  grid-template-columns:1fr;

  gap:9px;
}


/* =========================
   CATEGORY CARD
========================= */

.fsd-cat-card{
  width:100%;

  display:grid;

  grid-template-columns:
    48px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:11px;

  min-height:78px;

  padding:11px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .08
    );

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      #161616,
      #101010
    );

  text-align:left;

  box-shadow:
    0 7px 20px
    rgba(
      0,
      0,
      0,
      .13
    );

  cursor:pointer;
}


.fsd-cat-card:active{
  transform:
    scale(.985);
}


.fsd-cat-icon{
  width:48px;
  height:48px;

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

  border-radius:13px;

  background:#202020;

  font-size:24px;
}


.fsd-cat-copy{
  display:flex;
  flex-direction:column;

  min-width:0;
}


.fsd-cat-copy strong{
  color:#fff;

  font-size:13px;

  line-height:1.25;
}


.fsd-cat-copy small{
  margin-top:4px;

  color:#8c9198;

  font-size:10px;

  line-height:1.35;
}


.fsd-cat-card-arrow{
  color:#a8acb1;

  font-size:23px;
}


/* TEACHER CARD */

.fsd-cat-card-teacher{
  border-color:
    rgba(
      231,
      189,
      67,
      .18
    );
}


.fsd-cat-card-teacher
.fsd-cat-icon{
  background:
    rgba(
      231,
      189,
      67,
      .10
    );
}


/* =========================
   DISCOVERY
========================= */

.fsd-cat-discover{
  margin-top:24px;

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

  gap:12px;

  padding:14px;

  border:
    1px solid rgba(
      231,
      189,
      67,
      .24
    );

  border-radius:17px;

  background:
    rgba(
      231,
      189,
      67,
      .055
    );
}


.fsd-cat-discover > div{
  display:flex;
  align-items:center;

  gap:9px;

  min-width:0;
}


.fsd-cat-discover > div > span{
  font-size:24px;
}


.fsd-cat-discover > div > div{
  display:flex;
  flex-direction:column;
}


.fsd-cat-discover strong{
  color:#fff;

  font-size:12px;
}


.fsd-cat-discover small{
  margin-top:3px;

  color:#8f949b;

  font-size:10px;
}


.fsd-cat-discover button{
  min-height:36px;

  padding:0 13px;

  border:0;
  border-radius:10px;

  background:#e7bd43;

  color:#111;

  font-size:11px;
  font-weight:900;

  cursor:pointer;
}


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

@media (min-width:700px){

  .fsd-categories-page{
    padding-left:16px;
    padding-right:16px;
  }


  .fsd-cat-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   STEP 2D-1 — BOOKS STOREFRONT
========================================================= */


/* =========================
   PAGE HEADER
========================= */

.fsd-books-head{
  width:100%;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:12px;
}


.fsd-books-kicker{
  margin-bottom:3px;

  color:#e7bd43;

  font-size:10px;
  font-weight:900;

  letter-spacing:.9px;
}


.fsd-books-head h2{
  margin:0;

  color:#fff;

  font-size:22px;
}


.fsd-books-head p{
  margin:5px 0 0;

  color:#91969d;

  font-size:11px;
}


.fsd-books-back{
  flex:0 0 auto;

  min-height:36px;

  padding:0 12px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:10px;

  background:#171717;

  color:#ddd;

  font-size:11px;
  font-weight:700;

  cursor:pointer;
}


/* =========================
   BROWSE PANEL
========================= */

.fsd-books-browse{
  width:100%;

  margin-bottom:14px;

  padding:13px;

  border:
    1px solid rgba(
      231,
      189,
      67,
      .18
    );

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #151515,
      #0e0e0e
    );
}


.fsd-books-browse-group
+
.fsd-books-browse-group{
  margin-top:14px;

  padding-top:13px;

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


.fsd-books-browse-label{
  display:flex;
  align-items:center;

  gap:9px;

  margin-bottom:9px;
}


.fsd-books-browse-label
> span{
  width:26px;
  height:26px;

  flex:0 0 26px;

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

  border-radius:50%;

  background:
    rgba(
      231,
      189,
      67,
      .14
    );

  color:#e7bd43;

  font-size:11px;
  font-weight:900;
}


.fsd-books-browse-label
> div{
  display:flex;
  flex-direction:column;

  min-width:0;
}


.fsd-books-browse-label strong{
  color:#fff;

  font-size:12px;
}


.fsd-books-browse-label small{
  margin-top:2px;

  color:#858a91;

  font-size:9px;
}


/* =========================
   CHIPS
========================= */

.fsd-books-chips{
  display:flex;

  gap:7px;

  width:100%;

  overflow-x:auto;

  padding-bottom:2px;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;
}


.fsd-books-chips::-webkit-scrollbar{
  display:none;
}


.fsd-books-chip{
  flex:0 0 auto;

  min-height:35px;

  padding:0 12px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:999px;

  background:#191919;

  color:#b7bbc1;

  font-size:11px;
  font-weight:700;

  white-space:nowrap;

  cursor:pointer;
}


.fsd-books-chip.active{
  border-color:
    rgba(
      231,
      189,
      67,
      .72
    );

  background:
    rgba(
      231,
      189,
      67,
      .14
    );

  color:#f3d672;
}


.fsd-books-medium-chip.active{
  background:
    linear-gradient(
      135deg,
      #e7bd43,
      #c99e25
    );

  color:#111;

  border-color:#e7bd43;
}


.fsd-books-chip-loading{
  color:#858a91;

  font-size:10px;
}


/* =========================
   RESULT / FILTER ROW
========================= */

.fsd-books-browse-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:13px;

  padding-top:11px;

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


#fsdBooksBrowseCount{
  color:#a9adb3;

  font-size:10px;
}


.fsd-books-more-filter{
  min-height:32px;

  padding:0 10px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:9px;

  background:#1a1a1a;

  color:#ddd;

  font-size:10px;
  font-weight:700;

  cursor:pointer;
}


/* =========================================================
   CUSTOMER MOBILE
   Hide old detailed filters until requested.
========================================================= */

@media (max-width:900px){

  body.fsd-customer
  .fsd-books-storefront-layout
  .fsd-books-filter-panel{

    display:none;

  }


  body.fsd-customer
  .fsd-books-storefront-layout
  .fsd-books-filter-panel.is-open{

    display:block;

  }


  .fsd-books-head{
    align-items:center;
  }


  .fsd-books-head h2{
    font-size:19px;
  }


  .fsd-books-head p{
    max-width:230px;
  }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:901px){

  .fsd-books-more-filter{
    display:none;
  }


  .fsd-books-browse{
    padding:15px 17px;
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   STEP 2D-2 — MISC STOREFRONT
========================================================= */


/* =========================
   HEADER
========================= */

.fsd-misc-head{
  width:100%;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:12px;
}


.fsd-misc-kicker{
  margin-bottom:3px;

  color:#e7bd43;

  font-size:10px;
  font-weight:900;

  letter-spacing:.8px;
}


.fsd-misc-head h2{
  margin:0;

  color:#fff;

  font-size:22px;
}


.fsd-misc-head p{
  margin:5px 0 0;

  color:#91969d;

  font-size:11px;
}


.fsd-misc-back{
  flex:0 0 auto;

  min-height:36px;

  padding:0 12px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:10px;

  background:#171717;

  color:#ddd;

  font-size:11px;
  font-weight:700;

  cursor:pointer;
}


/* =========================
   CATEGORY BROWSE PANEL
========================= */

.fsd-misc-browse{
  width:100%;

  margin-bottom:14px;

  padding:13px;

  border:
    1px solid rgba(
      231,
      189,
      67,
      .18
    );

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #151515,
      #0e0e0e
    );
}


.fsd-misc-browse-label{
  display:flex;
  align-items:center;

  gap:9px;

  margin-bottom:10px;
}


.fsd-misc-browse-label
> span{
  width:26px;
  height:26px;

  flex:0 0 26px;

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

  border-radius:50%;

  background:
    rgba(
      231,
      189,
      67,
      .14
    );

  color:#e7bd43;

  font-size:11px;
  font-weight:900;
}


.fsd-misc-browse-label
> div{
  display:flex;
  flex-direction:column;

  min-width:0;
}


.fsd-misc-browse-label strong{
  color:#fff;

  font-size:12px;
}


.fsd-misc-browse-label small{
  margin-top:2px;

  color:#858a91;

  font-size:9px;
}


/* =========================
   CATEGORY CHIPS
========================= */

.fsd-misc-chips{
  display:flex;

  gap:7px;

  width:100%;

  overflow-x:auto;

  padding-bottom:2px;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;
}


.fsd-misc-chips::-webkit-scrollbar{
  display:none;
}


.fsd-misc-chip{
  flex:0 0 auto;

  min-height:36px;

  padding:0 13px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:999px;

  background:#191919;

  color:#b7bbc1;

  font-size:11px;
  font-weight:700;

  white-space:nowrap;

  cursor:pointer;
}


.fsd-misc-chip.active{
  border-color:
    rgba(
      231,
      189,
      67,
      .72
    );

  background:
    linear-gradient(
      135deg,
      #e7bd43,
      #c99e25
    );

  color:#111;
}


.fsd-misc-chip-loading{
  color:#858a91;

  font-size:10px;
}


/* =========================
   RESULT ROW
========================= */

.fsd-misc-browse-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:13px;

  padding-top:11px;

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


#fsdMiscBrowseCount{
  color:#a9adb3;

  font-size:10px;
}


.fsd-misc-more-filter{
  min-height:32px;

  padding:0 10px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:9px;

  background:#1a1a1a;

  color:#ddd;

  font-size:10px;
  font-weight:700;

  cursor:pointer;
}


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

@media (max-width:900px){

  body.fsd-customer
  .fsd-misc-storefront-layout
  .fsd-misc-filter-panel{

    display:none;

  }


  body.fsd-customer
  .fsd-misc-storefront-layout
  .fsd-misc-filter-panel.is-open{

    display:block;

  }


  .fsd-misc-head{
    align-items:center;
  }


  .fsd-misc-head h2{
    font-size:19px;
  }


  .fsd-misc-head p{
    max-width:230px;
  }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:901px){

  .fsd-misc-more-filter{
    display:none;
  }


  .fsd-misc-browse{
    padding:15px 17px;
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   STEP 2D-3 — EDUCATION RESOURCE STOREFRONT
   Teaching Materials + Buy PDF
========================================================= */


/* =========================
   HEADER
========================= */

.fsd-resource-head{
  width:100%;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:12px;
}


.fsd-resource-kicker{
  margin-bottom:3px;

  color:#e7bd43;

  font-size:10px;
  font-weight:900;

  letter-spacing:.8px;
}


.fsd-resource-head h2{
  margin:0;

  color:#fff;

  font-size:22px;
}


.fsd-resource-head p{
  margin:5px 0 0;

  color:#91969d;

  font-size:11px;
}


.fsd-resource-back{
  flex:0 0 auto;

  min-height:36px;

  padding:0 12px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:10px;

  background:#171717;

  color:#ddd;

  font-size:11px;
  font-weight:700;

  cursor:pointer;
}


/* =========================
   BROWSE PANEL
========================= */

.fsd-resource-browse{
  width:100%;

  margin-bottom:14px;

  padding:13px;

  border:
    1px solid rgba(
      231,
      189,
      67,
      .18
    );

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #151515,
      #0e0e0e
    );
}


.fsd-resource-group
+
.fsd-resource-group{
  margin-top:14px;

  padding-top:13px;

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


.fsd-resource-label{
  display:flex;
  align-items:center;

  gap:9px;

  margin-bottom:9px;
}


.fsd-resource-label
> span{
  width:26px;
  height:26px;

  flex:0 0 26px;

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

  border-radius:50%;

  background:
    rgba(
      231,
      189,
      67,
      .14
    );

  color:#e7bd43;

  font-size:11px;
  font-weight:900;
}


.fsd-resource-label
> div{
  display:flex;
  flex-direction:column;

  min-width:0;
}


.fsd-resource-label strong{
  color:#fff;

  font-size:12px;
}


.fsd-resource-label small{
  margin-top:2px;

  color:#858a91;

  font-size:9px;
}


/* =========================
   CHIPS
========================= */

.fsd-resource-chips{
  display:flex;

  gap:7px;

  width:100%;

  overflow-x:auto;

  padding-bottom:2px;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;
}


.fsd-resource-chips::-webkit-scrollbar{
  display:none;
}


.fsd-resource-chip{
  flex:0 0 auto;

  min-height:35px;

  padding:0 12px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:999px;

  background:#191919;

  color:#b7bbc1;

  font-size:11px;
  font-weight:700;

  white-space:nowrap;

  cursor:pointer;
}


.fsd-resource-chip.active{
  border-color:
    rgba(
      231,
      189,
      67,
      .72
    );

  background:
    rgba(
      231,
      189,
      67,
      .14
    );

  color:#f3d672;
}


.fsd-resource-medium.active{
  background:
    linear-gradient(
      135deg,
      #e7bd43,
      #c99e25
    );

  border-color:#e7bd43;

  color:#111;
}


.fsd-resource-loading{
  color:#858a91;

  font-size:10px;
}


/* =========================
   FOOT
========================= */

.fsd-resource-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:13px;

  padding-top:11px;

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


#fsdTmBrowseCount,
#fsdPdfBrowseCount{
  color:#a9adb3;

  font-size:10px;
}


.fsd-resource-more{
  min-height:32px;

  padding:0 10px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:9px;

  background:#1a1a1a;

  color:#ddd;

  font-size:10px;
  font-weight:700;

  cursor:pointer;
}


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

@media (max-width:900px){

  body.fsd-customer
  .fsd-tm-storefront-layout
  .fsd-tm-filter-panel,

  body.fsd-customer
  .fsd-pdf-storefront-layout
  .fsd-pdf-filter-panel{

    display:none;

  }


  body.fsd-customer
  .fsd-tm-storefront-layout
  .fsd-tm-filter-panel.is-open,

  body.fsd-customer
  .fsd-pdf-storefront-layout
  .fsd-pdf-filter-panel.is-open{

    display:block;

  }


  .fsd-resource-head{
    align-items:center;
  }


  .fsd-resource-head h2{
    font-size:19px;
  }


  .fsd-resource-head p{
    max-width:230px;
  }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:901px){

  .fsd-resource-more{
    display:none;
  }


  .fsd-resource-browse{
    padding:15px 17px;
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   STEP 2E — UNIFIED CART ACTION FEEDBACK
========================================================= */


/* Temporary success state after adding */

button.fsd-added,
.fsd-product-add-cart.fsd-added,
#booksList .fp-addcart-btn.fsd-added,
#misc_items .misc_add_btn.fsd-added,
.st_add_btn.fsd-added,
.sp2-addBtn.fsd-added,
#tm_add_left.fsd-added,
#pdfAddSelectedBtn.fsd-added{

  background:
    linear-gradient(
      135deg,
      #4bd478,
      #249b4e
    ) !important;

  color:#fff !important;

  border-color:
    rgba(
      75,
      212,
      120,
      .45
    ) !important;

  box-shadow:
    0 5px 16px
    rgba(
      36,
      155,
      78,
      .22
    ) !important;

}


/* Disabled only during the short Added animation */

button.fsd-added:disabled{

  opacity:1 !important;

  cursor:default !important;

}


/* Stationery primary action */

.st_add_btn{
  width:100%;

  min-height:38px;

  border-radius:10px !important;

  font-weight:800 !important;
}


/* Teaching + PDF primary actions */

#tm_add_left,
#pdfAddSelectedBtn{

  font-weight:800;

  transition:
    transform .15s ease,
    background .15s ease;

}


#tm_add_left:active,
#pdfAddSelectedBtn:active{

  transform:scale(.98);

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   PHASE 3A — UNIFIED CART
========================================================= */

.fsd-cart-page{
  width:100%;
  max-width:1100px;

  margin:0 auto;

  padding:
    10px
    10px
    105px;

  box-sizing:border-box;

  color:#fff;
}


/* =========================
   HEADER
========================= */

.fsd-cart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:15px;
}


.fsd-cart-kicker{
  margin-bottom:3px;

  color:#e7bd43;

  font-size:10px;
  font-weight:900;

  letter-spacing:.8px;
}


.fsd-cart-head h2{
  margin:0;

  font-size:22px;
}


.fsd-cart-head p{
  margin:5px 0 0;

  color:#8d9299;

  font-size:11px;
}


.fsd-cart-back{
  min-height:36px;

  padding:0 12px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .11
    );

  border-radius:10px;

  background:#171717;

  color:#ddd;

  font-size:10px;
  font-weight:700;

  cursor:pointer;
}


/* =========================
   MAIN LAYOUT
========================= */

.fsd-cart-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    320px;

  gap:14px;

  align-items:start;
}


/* =========================
   ITEMS
========================= */

.fsd-cart-items,
.fsd-cart-summary{
  border:
    1px solid rgba(
      255,
      255,
      255,
      .08
    );

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #151515,
      #0d0d0d
    );
}


.fsd-cart-items{
  padding:12px;
}


.fsd-cart-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-bottom:10px;
}


.fsd-cart-section-head > div{
  display:flex;
  flex-direction:column;
}


.fsd-cart-section-head strong{
  font-size:14px;
}


.fsd-cart-section-head small{
  margin-top:2px;

  color:#858a91;

  font-size:9px;
}


.fsd-cart-clear{
  min-height:31px;

  padding:0 10px;

  border:
    1px solid rgba(
      255,
      110,
      110,
      .25
    );

  border-radius:9px;

  background:
    rgba(
      255,
      80,
      80,
      .06
    );

  color:#ff9c9c;

  font-size:9px;

  cursor:pointer;
}


/* =========================
   CART LINE
========================= */

.fsd-cart-line{
  display:grid;

  grid-template-columns:
    42px
    minmax(0,1fr)
    auto;

  gap:10px;

  padding:11px 0;

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


.fsd-cart-line:first-child{
  border-top:0;
}


.fsd-cart-line-icon{
  width:42px;
  height:42px;

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

  border-radius:11px;

  background:#202020;

  font-size:21px;
}


.fsd-cart-line-main{
  min-width:0;
}


.fsd-cart-line-type{
  margin-bottom:3px;

  color:#e7bd43;

  font-size:8px;
  font-weight:900;

  text-transform:uppercase;

  letter-spacing:.4px;
}


.fsd-cart-line-title{
  display:block;

  font-size:12px;
  line-height:1.35;
}


.fsd-cart-line-code{
  margin-top:3px;

  color:#777d84;

  font-size:8px;
}


.fsd-cart-line-meta{
  margin-top:4px;

  color:#989da4;

  font-size:9px;

  line-height:1.4;
}


.fsd-cart-digital{
  margin-top:5px;

  color:#69d68d;

  font-size:8px;
}


/* =========================
   QUANTITY
========================= */

.fsd-cart-line-controls{
  display:flex;
  align-items:center;

  gap:8px;

  margin-top:8px;
}


.fsd-cart-qty{
  display:flex;
  align-items:center;

  gap:6px;
}


.fsd-cart-qty button{
  width:28px;
  height:28px;

  padding:0;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .12
    );

  border-radius:8px;

  background:#191919;

  color:#fff;

  font-size:15px;

  cursor:pointer;
}


.fsd-cart-qty span{
  min-width:22px;

  text-align:center;

  font-size:11px;
  font-weight:800;
}


.fsd-cart-fixed-qty{
  min-height:28px;

  display:flex;
  align-items:center;

  padding:0 9px;

  border-radius:8px;

  background:#181818;

  color:#aaaeb4;

  font-size:9px;
}


.fsd-cart-remove{
  min-height:28px;

  padding:0 8px;

  border:0;

  background:transparent;

  color:#df8888;

  font-size:9px;

  cursor:pointer;
}


/* =========================
   LINE PRICE
========================= */

.fsd-cart-line-price{
  min-width:95px;

  display:flex;
  flex-direction:column;

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


.fsd-cart-line-price small{
  margin-bottom:3px;

  color:#7f848b;

  font-size:8px;
}


.fsd-cart-line-price strong{
  color:#f1d36d;

  font-size:12px;

  white-space:nowrap;
}


/* =========================
   SUMMARY
========================= */

.fsd-cart-summary{
  position:sticky;

  top:80px;

  padding:14px;
}


.fsd-cart-summary-title{
  margin-bottom:13px;

  color:#fff;

  font-size:14px;
  font-weight:900;
}


.fsd-cart-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-top:9px;

  color:#9499a0;

  font-size:10px;
}


.fsd-cart-summary-row strong{
  color:#ddd;

  font-size:10px;
}


.fsd-cart-summary-divider{
  height:1px;

  margin:13px 0;

  background:
    rgba(
      255,
      255,
      255,
      .07
    );
}


.fsd-cart-delivery-note{
  margin-top:12px;

  padding:10px;

  border-radius:10px;

  background:
    rgba(
      231,
      189,
      67,
      .07
    );

  color:#b8b09a;

  font-size:9px;

  line-height:1.45;
}


.fsd-cart-summary-total{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-top:14px;
  padding-top:12px;

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


.fsd-cart-summary-total span{
  font-size:10px;
}


.fsd-cart-summary-total strong{
  color:#f1d36d;

  font-size:16px;
}


.fsd-cart-checkout{
  width:100%;

  min-height:46px;

  margin-top:14px;

  border:0;

  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #e7bd43,
      #c99e25
    );

  color:#111;

  font-size:12px;
  font-weight:900;

  cursor:pointer;
}


.fsd-cart-checkout-hint{
  display:block;

  margin-top:7px;

  color:#7e838a;

  font-size:8px;

  line-height:1.4;

  text-align:center;
}


.fsd-cart-checkout-hint.is-ready-next{
  color:#e7bd43;
}


/* =========================
   EMPTY STATE
========================= */

.fsd-cart-empty{
  min-height:330px;

  display:flex;
  flex-direction:column;

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

  gap:8px;

  padding:25px;

  border:
    1px dashed rgba(
      255,
      255,
      255,
      .13
    );

  border-radius:18px;

  text-align:center;
}


.fsd-cart-empty-icon{
  font-size:36px;
}


.fsd-cart-empty strong{
  font-size:15px;
}


.fsd-cart-empty span{
  max-width:310px;

  color:#8b9097;

  font-size:10px;

  line-height:1.5;
}


.fsd-cart-empty button{
  min-height:38px;

  margin-top:6px;

  padding:0 14px;

  border:0;

  border-radius:10px;

  background:#e7bd43;

  color:#111;

  font-size:10px;
  font-weight:900;

  cursor:pointer;
}


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

@media (max-width:800px){

  .fsd-cart-layout{
    grid-template-columns:1fr;
  }


  .fsd-cart-summary{
    position:static;
  }


  .fsd-cart-head{
    align-items:center;
  }


  .fsd-cart-head h2{
    font-size:19px;
  }


  .fsd-cart-line{
    grid-template-columns:
      38px
      minmax(0,1fr);
  }


  .fsd-cart-line-icon{
    width:38px;
    height:38px;

    font-size:19px;
  }


  .fsd-cart-line-price{
    grid-column:
      2 / 3;

    align-items:flex-start;

    margin-top:4px;
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   PHASE 3B — CHECKOUT
========================================================= */

.fsd-checkout-page{
  width:100%;
  max-width:1050px;
  margin:0 auto;
  padding:10px 10px 105px;
  box-sizing:border-box;
}


/* HEADER */

.fsd-checkout-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:15px;
}


.fsd-checkout-kicker{
  color:#e7bd43;
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
  margin-bottom:3px;
}


.fsd-checkout-head h2{
  margin:0;
  font-size:22px;
}


.fsd-checkout-head p{
  margin:5px 0 0;
  color:#8d9299;
  font-size:11px;
}


.fsd-checkout-back{
  min-height:36px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  background:#171717;
  color:#ddd;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}


/* LAYOUT */

.fsd-checkout-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:14px;
  align-items:start;
}


.fsd-checkout-main{
  display:flex;
  flex-direction:column;
  gap:12px;
}


/* CARDS */

.fsd-checkout-card,
.fsd-checkout-summary{
  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;
  background:
    linear-gradient(
      145deg,
      #151515,
      #0d0d0d
    );
}


.fsd-checkout-card{
  padding:14px;
}


.fsd-checkout-card-title{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;
}


.fsd-checkout-card-title > span{
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(231,189,67,.14);
  color:#e7bd43;
  font-size:11px;
  font-weight:900;
}


.fsd-checkout-card-title > div{
  display:flex;
  flex-direction:column;
}


.fsd-checkout-card-title strong{
  font-size:13px;
}


.fsd-checkout-card-title small{
  margin-top:2px;
  color:#858a91;
  font-size:9px;
}


/* CUSTOMER FIELDS */

.fsd-checkout-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}


.fsd-checkout-fields label{
  display:flex;
  flex-direction:column;
  gap:5px;
}


.fsd-checkout-fields label > span{
  color:#b9bdc3;
  font-size:10px;
  font-weight:700;
}


.fsd-checkout-fields label > span em{
  margin-left:5px;
  color:#777c83;
  font-size:8px;
  font-style:normal;
  font-weight:500;
}


.fsd-checkout-fields input,
.fsd-checkout-fields textarea{
  width:100%;
  border:1px solid #2a2a2a;
  border-radius:10px;
  background:#090909;
  color:#fff;
  padding:10px 11px;
  font:inherit;
  font-size:11px;
  outline:none;
}


.fsd-checkout-fields textarea{
  resize:vertical;
  min-height:70px;
}


.fsd-checkout-fields input:focus,
.fsd-checkout-fields textarea:focus{
  border-color:rgba(231,189,67,.65);
  box-shadow:0 0 0 2px rgba(231,189,67,.08);
}


.fsd-checkout-field-full{
  grid-column:1 / -1;
}


/* PAYMENT + DELIVERY */

.fsd-checkout-options{
  display:grid;
  gap:8px;
}


.fsd-checkout-option{
  display:grid;
  grid-template-columns:18px 36px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:#111;
  cursor:pointer;
}


.fsd-checkout-option:has(input:checked){
  border-color:rgba(231,189,67,.55);
  background:rgba(231,189,67,.07);
}


.fsd-checkout-option input{
  accent-color:#e7bd43;
}


.fsd-checkout-option-icon{
  font-size:20px;
  text-align:center;
}


.fsd-checkout-option > span:last-child{
  display:flex;
  flex-direction:column;
}


.fsd-checkout-option strong{
  font-size:11px;
}


.fsd-checkout-option small{
  margin-top:2px;
  color:#858a91;
  font-size:8px;
}


.fsd-checkout-option.is-disabled{
  opacity:.42;
  cursor:not-allowed;
}


/* DIGITAL */

.fsd-checkout-digital-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid rgba(73,210,121,.2);
  border-radius:12px;
  background:rgba(73,210,121,.06);
}


.fsd-checkout-digital-box > span{
  font-size:25px;
}


.fsd-checkout-digital-box > div{
  display:flex;
  flex-direction:column;
}


.fsd-checkout-digital-box strong{
  font-size:11px;
}


.fsd-checkout-digital-box small{
  margin-top:3px;
  color:#8fae99;
  font-size:9px;
}


/* SUMMARY */

.fsd-checkout-summary{
  position:sticky;
  top:80px;
  padding:14px;
}


.fsd-checkout-summary-title{
  margin-bottom:12px;
  font-size:14px;
  font-weight:900;
}


.fsd-checkout-mini-items{
  display:flex;
  flex-direction:column;
  gap:8px;
}


.fsd-checkout-mini-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  font-size:9px;
}


.fsd-checkout-mini-line > span{
  color:#aaaeb4;
}


.fsd-checkout-mini-line small{
  color:#747980;
}


.fsd-checkout-mini-line strong{
  flex:0 0 auto;
  color:#ddd;
  font-size:9px;
}


.fsd-checkout-summary-divider{
  height:1px;
  margin:13px 0;
  background:rgba(255,255,255,.07);
}


.fsd-checkout-summary-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:9px;
  color:#969ba2;
  font-size:10px;
}


.fsd-checkout-summary-row strong{
  color:#ddd;
}


.fsd-checkout-summary-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.09);
}


.fsd-checkout-summary-total span{
  font-size:11px;
  font-weight:800;
}


.fsd-checkout-summary-total strong{
  color:#f1d36d;
  font-size:18px;
}


.fsd-checkout-digital-note{
  margin-top:9px;
  color:#69d68d;
  font-size:8px;
}


/* BUTTON */

.fsd-checkout-continue{
  width:100%;
  min-height:47px;
  margin-top:14px;
  border:0;
  border-radius:12px;
  background:
    linear-gradient(
      135deg,
      #e7bd43,
      #c99e25
    );
  color:#111;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}


.fsd-checkout-summary-hint{
  display:block;
  margin-top:7px;
  color:#777d84;
  font-size:8px;
  line-height:1.4;
  text-align:center;
}


/* MESSAGE */

.fsd-checkout-message{
  min-height:18px;
  color:#ff9f9f;
  font-size:10px;
}


.fsd-checkout-ready{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px;
  border:1px solid rgba(73,210,121,.24);
  border-radius:12px;
  background:rgba(73,210,121,.07);
  color:#c8f5d6;
}


.fsd-checkout-ready strong{
  font-size:11px;
}


.fsd-checkout-ready span,
.fsd-checkout-ready small{
  font-size:9px;
  line-height:1.4;
}


/* MOBILE */

@media (max-width:800px){

  .fsd-checkout-layout{
    grid-template-columns:1fr;
  }


  .fsd-checkout-summary{
    position:static;
  }


  .fsd-checkout-fields{
    grid-template-columns:1fr;
  }


  .fsd-checkout-field-full{
    grid-column:auto;
  }


  .fsd-checkout-head{
    align-items:center;
  }


  .fsd-checkout-head h2{
    font-size:19px;
  }

}
/* =========================================================
   FUTURE SOLUTIONS DIRECT
   PHASE 3C — ORDER SUBMISSION / SUCCESS
========================================================= */

.fsd-checkout-error{
  display:flex;
  flex-direction:column;
  gap:4px;

  padding:12px;

  border:
    1px solid
    rgba(255,95,95,.25);

  border-radius:12px;

  background:
    rgba(255,70,70,.07);

  color:#ffb3b3;
}


.fsd-checkout-error strong{
  font-size:11px;
}


.fsd-checkout-error span,
.fsd-checkout-error small{
  font-size:9px;
  line-height:1.45;
}


.fsd-order-success{
  width:100%;
  max-width:520px;

  margin:25px auto 110px;

  padding:28px 18px;

  box-sizing:border-box;

  border:
    1px solid
    rgba(72,210,121,.23);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      #151515,
      #0b0b0b
    );

  text-align:center;

  color:#fff;
}


.fsd-order-success-icon{
  width:58px;
  height:58px;

  margin:0 auto 12px;

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

  border-radius:50%;

  background:
    rgba(72,210,121,.13);

  color:#55db83;

  font-size:27px;
  font-weight:900;
}


.fsd-order-success-kicker{
  color:#55db83;

  font-size:9px;
  font-weight:900;

  letter-spacing:1px;
}


.fsd-order-success h2{
  margin:6px 0 4px;

  font-size:20px;
}


.fsd-order-success > p{
  margin:0 0 18px;

  color:#92979e;

  font-size:10px;
}


.fsd-order-success-number,
.fsd-order-success-total{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:8px;

  padding:12px;

  border-radius:11px;

  background:#111;

  font-size:10px;
}


.fsd-order-success-number strong{
  color:#f1d36d;

  font-size:15px;
}


.fsd-order-success-total strong{
  color:#fff;

  font-size:14px;
}


.fsd-order-success-actions{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:7px;

  margin-top:15px;
}


.fsd-order-success-actions button{
  min-height:39px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:10px;

  background:#191919;

  color:#ddd;

  font-size:9px;
  font-weight:700;

  cursor:pointer;
}


.fsd-order-success-continue{
  width:100%;

  min-height:45px;

  margin-top:12px;

  border:0;

  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #e7bd43,
      #c99e25
    );

  color:#111;

  font-size:11px;
  font-weight:900;

  cursor:pointer;
}


@media (max-width:520px){

  .fsd-order-success-actions{
    grid-template-columns:1fr;
  }

}
/* =========================================================
   PHASE 3D — ORDER CONFIRMATION / TRACKING HANDOFF
========================================================= */

.fsd-order-track{
  margin-top:16px;
  padding:14px;
  border-radius:14px;
  background:#101010;
  text-align:left;
}

.fsd-order-track-title{
  margin-bottom:11px;
  font-size:12px;
  font-weight:900;
}

.fsd-order-track-step{
  display:grid;
  grid-template-columns:14px 1fr;
  gap:9px;
  padding:8px 0;
  opacity:.42;
}

.fsd-order-track-step > span{
  width:10px;
  height:10px;
  margin-top:3px;
  border-radius:50%;
  border:2px solid #666;
}

.fsd-order-track-step.is-active{
  opacity:1;
}

.fsd-order-track-step.is-active > span{
  border-color:#55db83;
  background:#55db83;
  box-shadow:0 0 10px rgba(85,219,131,.35);
}

.fsd-order-track-step strong{
  display:block;
  font-size:10px;
}

.fsd-order-track-step small{
  display:block;
  margin-top:2px;
  color:#858a91;
  font-size:8px;
}

.fsd-order-review-note{
  margin-top:13px;
  padding:10px;
  border-radius:10px;
  background:rgba(231,189,67,.07);
  color:#b9b09b;
  font-size:9px;
  line-height:1.45;
}

.fsd-order-success-secondary{
  width:100%;
  min-height:42px;
  margin-top:8px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  background:#161616;
  color:#ddd;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}

.fsd-orders-handoff{
  width:100%;
  max-width:600px;
  margin:0 auto;
  padding:16px 12px 110px;
  box-sizing:border-box;
}

.fsd-orders-kicker{
  color:#e7bd43;
  font-size:9px;
  font-weight:900;
  letter-spacing:.8px;
}

.fsd-orders-handoff h2{
  margin:5px 0 14px;
}

.fsd-orders-card{
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:#111;
}

.fsd-orders-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  font-size:10px;
}

.fsd-orders-row strong{
  color:#f1d36d;
}

.fsd-orders-status{
  display:grid;
  grid-template-columns:14px 1fr;
  gap:9px;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.07);
}

.fsd-orders-status > span{
  width:10px;
  height:10px;
  margin-top:3px;
  border-radius:50%;
  background:#55db83;
}

.fsd-orders-status strong{
  display:block;
  font-size:10px;
}

.fsd-orders-status small{
  display:block;
  margin-top:2px;
  color:#8b9097;
  font-size:9px;
}

.fsd-orders-next-note{
  margin-top:12px;
  padding:10px;
  border-radius:10px;
  background:rgba(231,189,67,.06);
  color:#979184;
  font-size:9px;
  line-height:1.45;
}
/* =========================================================
   PHASE 4 — MY ORDERS
========================================================= */

.fsd-orders-page{
  width:100%;
  max-width:620px;
  margin:0 auto;
  padding:18px 12px 110px;
  box-sizing:border-box;
}

.fsd-orders-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.fsd-orders-head h2{
  margin:3px 0;
}

.fsd-orders-head p{
  margin:0;
  color:#888e95;
  font-size:9px;
}

.fsd-orders-refresh{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:9px;
  background:#171717;
  color:#ddd;
  font-size:9px;
  cursor:pointer;
}

.fsd-orders-list{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.fsd-orders-loading{
  padding:24px;
  text-align:center;
  color:#90959c;
  font-size:10px;
}

.fsd-my-order-card{
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      #151515,
      #0d0d0d
    );
}

.fsd-my-order-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.fsd-my-order-top small{
  display:block;
  color:#858b92;
  font-size:8px;
}

.fsd-my-order-top strong{
  display:block;
  margin-top:3px;
  color:#f0ce59;
  font-size:13px;
}

.fsd-order-status-badge{
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#aaa;
  font-size:8px;
  font-weight:800;
  white-space:nowrap;
}

.fsd-order-status-badge.order-received,
.fsd-order-status-badge.under-review{
  background:rgba(231,189,67,.10);
  color:#e7bd43;
}

.fsd-order-status-badge.confirmed{
  background:rgba(67,178,231,.10);
  color:#65c4ef;
}

.fsd-order-status-badge.production{
  background:rgba(177,114,255,.10);
  color:#bd8cff;
}

.fsd-order-status-badge.ready-dispatched{
  background:rgba(72,210,121,.10);
  color:#55db83;
}

.fsd-order-status-badge.delivered{
  background:rgba(72,210,121,.15);
  color:#66e290;
}

.fsd-my-order-temp,
.fsd-my-order-date{
  margin-top:7px;
  color:#777d84;
  font-size:8px;
}

.fsd-my-order-summary{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.06);
}

.fsd-my-order-summary span{
  display:block;
  color:#858a91;
  font-size:8px;
}

.fsd-my-order-summary strong{
  display:block;
  margin-top:3px;
  font-size:10px;
}

.fsd-my-order-items{
  margin-top:11px;
  color:#aaaeb4;
  font-size:9px;
  line-height:1.5;
}

.fsd-my-order-actions{
  display:flex;
  gap:7px;
  margin-top:13px;
}

.fsd-my-order-actions button{
  flex:1;
  min-height:36px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:#191919;
  color:#ddd;
  font-size:9px;
  font-weight:700;
  cursor:pointer;
}

.fsd-my-order-actions button.is-primary{
  border:0;
  background:#dfb52f;
  color:#111;
}

.fsd-orders-empty{
  padding:35px 18px;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:16px;
  text-align:center;
}

.fsd-orders-empty-icon{
  font-size:28px;
}

.fsd-orders-empty h3{
  margin:10px 0 4px;
}

.fsd-orders-empty p{
  color:#8e939a;
  font-size:9px;
}

.fsd-orders-empty button{
  margin-top:10px;
  padding:10px 16px;
  border:0;
  border-radius:10px;
  background:#e1b631;
  color:#111;
  font-weight:800;
}
/* =========================================================
   PHASE 5 — BASIC CRM
========================================================= */

.fsd-crm-panel{
  margin:12px 0 14px;
  padding:14px;
  border:1px solid rgba(255,215,0,.18);
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      rgba(255,215,0,.035),
      rgba(255,255,255,.015)
    );
}

.fsd-crm-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.fsd-crm-head h3{
  margin:3px 0;
}

.fsd-crm-head small{
  opacity:.65;
}

.fsd-crm-kicker{
  color:#f5c542;
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
}

.fsd-crm-kpis{
  display:grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
  gap:8px;
  margin-top:13px;
}

.fsd-crm-kpi{
  padding:10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:#101010;
}

.fsd-crm-kpi span{
  display:block;
  color:#979ca3;
  font-size:10px;
}

.fsd-crm-kpi strong{
  display:block;
  margin-top:4px;
  font-size:17px;
}

.fsd-crm-toolbar{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    190px;
  gap:8px;
  margin-top:12px;
}

.fsd-crm-results{
  display:grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );
  gap:9px;
  margin-top:12px;
}

.fsd-crm-customer{
  padding:11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  background:#0d0d0d;
}

.fsd-crm-customer-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.fsd-crm-customer-top strong{
  display:block;
  font-size:12px;
}

.fsd-crm-customer-top small{
  display:block;
  margin-top:3px;
  color:#8c9198;
  font-size:9px;
}

.fsd-crm-type{
  height:max-content;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#a7abb1;
  font-size:8px;
  font-weight:800;
}

.fsd-crm-type.is-returning{
  background:rgba(85,219,131,.10);
  color:#55db83;
}

.fsd-crm-customer-stats{
  display:grid;
  grid-template-columns:
    repeat(
      3,
      1fr
    );
  gap:5px;
  margin-top:10px;
}

.fsd-crm-customer-stats div{
  padding:6px;
  border-radius:8px;
  background:#141414;
}

.fsd-crm-customer-stats span{
  display:block;
  color:#777d84;
  font-size:8px;
}

.fsd-crm-customer-stats strong{
  display:block;
  margin-top:2px;
  font-size:9px;
}

.fsd-crm-last{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
}

.fsd-crm-last span,
.fsd-crm-last small{
  display:block;
  color:#858a91;
  font-size:8px;
}

.fsd-crm-last strong{
  display:block;
  margin:2px 0;
  color:#f1d36d;
  font-size:10px;
}

.fsd-crm-actions{
  display:flex;
  margin-top:9px;
}

.fsd-crm-actions button{
  width:100%;
  min-height:32px;
  border:1px solid rgba(85,219,131,.22);
  border-radius:8px;
  background:rgba(85,219,131,.08);
  color:#63dd8d;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}

.fsd-crm-loading,
.fsd-crm-empty,
.fsd-crm-more{
  grid-column:1/-1;
  padding:16px;
  text-align:center;
  color:#8c9198;
  font-size:10px;
}

@media(max-width:900px){

  .fsd-crm-kpis{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .fsd-crm-results{
    grid-template-columns:
      1fr;
  }

  .fsd-crm-toolbar{
    grid-template-columns:
      1fr;
  }

  .fsd-crm-head{
    flex-direction:column;
  }

}
/* =========================================================
   PHASE 5 — CRM COLLAPSED MODE
========================================================= */

.fsd-crm-body[hidden]{
  display:none !important;
}

.fsd-crm-head-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.fsd-crm-panel.is-collapsed{
  padding:10px 14px;
  margin:8px 0 12px;
}

.fsd-crm-panel.is-collapsed
.fsd-crm-head{
  align-items:center;
}

.fsd-crm-panel.is-collapsed
.fsd-crm-head h3{
  margin:1px 0;
  font-size:14px;
}

.fsd-crm-panel.is-collapsed
.fsd-crm-head small{
  display:none;
}

.fsd-crm-panel.is-collapsed
#fsdCrmRefresh{
  display:none;
}

@media(max-width:700px){

  .fsd-crm-head-actions{
    width:100%;
  }

  .fsd-crm-head-actions
  #fsdCrmToggle{
    width:100%;
  }

}
/* =========================================================
   MARKETING — STACK FILTERS ABOVE TABLE / FULL WIDTH
========================================================= */

.mkt-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  align-items:start !important;
}

/* Filter panel becomes full width */
.mkt-grid > .card:first-child{
  min-width:0 !important;
  max-width:none !important;
  width:100% !important;
}

/* Orders table uses full width */
.mkt-grid > .card:last-child{
  min-width:0 !important;
  width:100% !important;
}

/* Make filter controls more compact horizontally */
.mkt-filters{
  display:grid !important;
  grid-template-columns:
    minmax(180px,1fr)
    minmax(160px,1fr)
    auto
    auto !important;
  gap:8px !important;
  align-items:center !important;
}

/* Mobile / smaller screens */
@media(max-width:800px){

  .mkt-filters{
    grid-template-columns:1fr !important;
  }

}
/* =========================================================
   MARKETING — ULTRA COMPACT FILTER TOOLBAR
========================================================= */

.mkt-compact-filter{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  display:grid !important;

  grid-template-columns:
    minmax(300px, 2.4fr)
    minmax(150px, .8fr)
    minmax(140px, .75fr)
    auto
    auto;

  gap:8px;

  align-items:center;

  padding:8px !important;
}


/* Remove excessive field height */
.mkt-compact-filter .input{
  min-height:38px !important;
  height:38px !important;
  padding:6px 10px !important;
  margin:0 !important;
}


.mkt-compact-search{
  width:100%;
}


.mkt-compact-auto{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  white-space:nowrap;

  font-size:12px;
}


.mkt-compact-auto input{
  margin:0;
}


.mkt-compact-refresh{
  min-height:38px !important;
  height:38px !important;

  padding:6px 16px !important;

  white-space:nowrap;
}


/* Orders card directly underneath */
.mkt-grid{
  gap:8px !important;
}


/* Tablet */
@media(max-width:1000px){

  .mkt-compact-filter{

    grid-template-columns:
      minmax(220px,1.5fr)
      1fr
      1fr
      auto
      auto;

  }

}


/* Mobile */
@media(max-width:700px){

  .mkt-compact-filter{

    grid-template-columns:
      1fr
      1fr;

  }


  .mkt-compact-search{
    grid-column:1 / -1;
  }


  .mkt-compact-refresh{
    width:100%;
  }

}
/* =========================================================
   PHASE 6 — PLAY & LEARN GAME HUB
========================================================= */

.fsd-play-page{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:14px 12px 110px;
  box-sizing:border-box;
}

.fsd-play-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:20px;
  border:1px solid rgba(255,215,0,.20);
  border-radius:18px;
  background:
    linear-gradient(
      135deg,
      #16130a,
      #0b0b0b
    );
}

.fsd-play-kicker{
  color:#f3c637;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

.fsd-play-hero h1{
  margin:5px 0;
  font-size:28px;
}

.fsd-play-hero p{
  margin:0;
  color:#9ca1a8;
  font-size:12px;
}

.fsd-play-hero-icon{
  font-size:48px;
}

.fsd-play-section-head{
  margin-top:18px;
}

.fsd-play-section-head h2{
  margin:0;
  font-size:18px;
}

.fsd-play-section-head p{
  margin:4px 0 0;
  color:#8b9097;
  font-size:10px;
}

.fsd-play-subjects{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px 0 4px;
}

.fsd-play-subject{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:#111;
  color:#ddd;
  cursor:pointer;
}

.fsd-play-subject.is-active{
  border-color:#e3b929;
  background:rgba(227,185,41,.10);
  color:#f3cd55;
}

.fsd-play-games{
  display:grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );
  gap:12px;
  margin-top:10px;
}

.fsd-game-card{
  display:flex;
  gap:12px;
  padding:15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      #151515,
      #0c0c0c
    );
}

.fsd-game-card.is-coming{
  opacity:.68;
}

.fsd-game-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  min-width:52px;
  height:52px;
  border-radius:14px;
  background:rgba(255,215,0,.08);
  font-size:28px;
}

.fsd-game-content{
  flex:1;
  min-width:0;
}

.fsd-game-badges{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}

.fsd-game-tier,
.fsd-game-coming{
  padding:3px 6px;
  border-radius:999px;
  font-size:7px;
  font-weight:900;
}

.fsd-game-tier.is-free{
  background:rgba(85,219,131,.10);
  color:#55db83;
}

.fsd-game-tier.is-premium{
  background:rgba(255,196,49,.12);
  color:#f2c43e;
}

.fsd-game-coming{
  background:rgba(255,255,255,.06);
  color:#999;
}

.fsd-game-content h3{
  margin:7px 0 4px;
  font-size:14px;
}

.fsd-game-content p{
  min-height:34px;
  margin:0;
  color:#8c9198;
  font-size:9px;
  line-height:1.45;
}

.fsd-game-meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}

.fsd-game-meta span{
  padding:3px 6px;
  border-radius:7px;
  background:#171717;
  color:#a4a8ae;
  font-size:8px;
}

.fsd-game-content button{
  width:100%;
  min-height:36px;
  margin-top:10px;
  border:0;
  border-radius:10px;
  background:#e4b92e;
  color:#111;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.fsd-game-content button:disabled{
  background:#1b1b1b;
  color:#666;
  cursor:not-allowed;
}

.fsd-play-loading,
.fsd-play-empty{
  grid-column:1/-1;
  padding:30px;
  text-align:center;
  color:#8d9299;
}

@media(max-width:850px){

  .fsd-play-games{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}

@media(max-width:600px){

  .fsd-play-page{
    padding-left:10px;
    padding-right:10px;
  }

  .fsd-play-hero{
    padding:16px;
  }

  .fsd-play-hero h1{
    font-size:23px;
  }

  .fsd-play-hero-icon{
    font-size:36px;
  }

  .fsd-play-games{
    grid-template-columns:1fr;
  }

}
/* =========================================================
   PHASE 6B — MCQ GAME ENGINE
========================================================= */

.fsd-quiz-page{
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:14px 12px 110px;
  box-sizing:border-box;
}

.fsd-quiz-shell{
  padding:16px;
  border:1px solid rgba(255,215,0,.16);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      #141414,
      #090909
    );
}

.fsd-quiz-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.fsd-quiz-back{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:#151515;
  color:#ddd;
  cursor:pointer;
}

.fsd-quiz-score{
  display:flex;
  align-items:center;
  gap:7px;
  color:#8e949b;
  font-size:10px;
}

.fsd-quiz-score strong{
  color:#f1c83e;
  font-size:18px;
}

.fsd-quiz-game-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
}

.fsd-quiz-game-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:12px;
  background:rgba(255,215,0,.08);
  font-size:24px;
}

.fsd-quiz-game-title small,
.fsd-quiz-game-title strong{
  display:block;
}

.fsd-quiz-game-title small{
  color:#8d9299;
  font-size:8px;
}

.fsd-quiz-game-title strong{
  margin-top:2px;
  font-size:13px;
}

.fsd-quiz-progress-row{
  display:flex;
  justify-content:space-between;
  margin-top:16px;
  color:#8c9198;
  font-size:9px;
}

.fsd-quiz-progress{
  height:5px;
  margin-top:6px;
  border-radius:999px;
  background:#1c1c1c;
  overflow:hidden;
}

.fsd-quiz-progress > div{
  height:100%;
  border-radius:999px;
  background:#e2b72e;
  transition:width .25s ease;
}

.fsd-quiz-question{
  margin-top:20px;
}

.fsd-quiz-unit{
  display:inline-block;
  margin-bottom:8px;
  padding:4px 7px;
  border-radius:7px;
  background:rgba(255,215,0,.08);
  color:#d9b739;
  font-size:8px;
}

.fsd-quiz-question h2{
  margin:0;
  line-height:1.4;
  font-size:20px;
}

.fsd-quiz-options{
  display:grid;
  gap:9px;
  margin-top:18px;
}

.fsd-quiz-option{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:52px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:#111;
  color:#eee;
  text-align:left;
  cursor:pointer;
}

.fsd-quiz-option:hover{
  border-color:rgba(255,215,0,.30);
}

.fsd-quiz-letter{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  min-width:30px;
  height:30px;
  border-radius:9px;
  background:#1d1d1d;
  color:#e6bd38;
  font-weight:900;
}

.fsd-quiz-option.is-correct{
  border-color:rgba(69,212,120,.55);
  background:rgba(69,212,120,.10);
}

.fsd-quiz-option.is-correct
.fsd-quiz-letter{
  background:#1c6d3a;
  color:#fff;
}

.fsd-quiz-option.is-wrong{
  border-color:rgba(244,92,92,.55);
  background:rgba(244,92,92,.09);
}

.fsd-quiz-option.is-wrong
.fsd-quiz-letter{
  background:#722b2b;
  color:#fff;
}

.fsd-quiz-option:disabled{
  cursor:default;
}

.fsd-quiz-feedback{
  margin-top:14px;
  padding:12px;
  border-radius:12px;
}

.fsd-quiz-feedback.is-correct{
  border:1px solid rgba(68,212,119,.30);
  background:rgba(68,212,119,.08);
  color:#67df91;
}

.fsd-quiz-feedback.is-wrong{
  border:1px solid rgba(241,93,93,.26);
  background:rgba(241,93,93,.07);
  color:#ff9999;
}

.fsd-quiz-feedback strong{
  display:block;
  font-size:12px;
}

.fsd-quiz-feedback p{
  margin:6px 0 0;
  color:#c7c9cc;
  font-size:10px;
  line-height:1.5;
}

.fsd-quiz-next,
.fsd-quiz-primary{
  width:100%;
  min-height:46px;
  margin-top:14px;
  border:0;
  border-radius:11px;
  background:#e2b72e;
  color:#111;
  font-weight:900;
  cursor:pointer;
}

.fsd-quiz-secondary{
  width:100%;
  min-height:43px;
  margin-top:8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  background:#151515;
  color:#ddd;
  font-weight:700;
  cursor:pointer;
}

.fsd-quiz-result{
  padding:28px 18px;
  border:1px solid rgba(255,215,0,.18);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      #151515,
      #090909
    );
  text-align:center;
}

.fsd-quiz-result-icon{
  font-size:50px;
}

.fsd-quiz-result h1{
  margin:7px 0 12px;
  font-size:24px;
}

.fsd-quiz-final-score{
  color:#efc43e;
  font-size:48px;
  font-weight:900;
}

.fsd-quiz-final-score span{
  color:#888e95;
  font-size:20px;
}

.fsd-quiz-percent{
  margin-top:4px;
  color:#aaa;
  font-size:16px;
}

.fsd-quiz-result-stats{
  display:grid;
  grid-template-columns:
    repeat(
      3,
      1fr
    );
  gap:8px;
  margin-top:18px;
}

.fsd-quiz-result-stats div{
  padding:10px;
  border-radius:11px;
  background:#111;
}

.fsd-quiz-result-stats span{
  display:block;
  color:#7f858c;
  font-size:8px;
}

.fsd-quiz-result-stats strong{
  display:block;
  margin-top:3px;
  font-size:13px;
}

.fsd-quiz-empty,
.fsd-quiz-loading{
  padding:40px 20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:#101010;
  text-align:center;
}

.fsd-quiz-big-icon{
  font-size:45px;
}

.fsd-quiz-empty button{
  margin-top:15px;
  padding:10px 16px;
  border:0;
  border-radius:10px;
  background:#e2b72e;
  color:#111;
  font-weight:800;
}

@media(max-width:600px){

  .fsd-quiz-page{
    padding-left:9px;
    padding-right:9px;
  }

  .fsd-quiz-shell{
    padding:13px;
  }

  .fsd-quiz-question h2{
    font-size:18px;
  }

  .fsd-quiz-option{
    min-height:50px;
  }

}
/* =========================================================
   PHASE 6C — PLAY & LEARN POLISH / PROGRESS
========================================================= */

.fsd-play-progress-strip{
  display:grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:8px;

  margin-top:10px;
}


.fsd-play-progress-strip > div{
  padding:10px 12px;

  border:1px solid rgba(255,255,255,.07);

  border-radius:12px;

  background:
    linear-gradient(
      145deg,
      #131313,
      #0c0c0c
    );
}


.fsd-play-progress-strip span{
  display:block;

  color:#7f858c;

  font-size:8px;
}


.fsd-play-progress-strip strong{
  display:block;

  margin-top:3px;

  color:#e7c34b;

  font-size:17px;
}


/* Game card score */
.fsd-game-progress{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:8px;

  min-height:22px;

  margin-top:9px;

  padding-top:8px;

  border-top:
    1px solid
    rgba(255,255,255,.06);

  color:#8d9298;

  font-size:8px;
}


.fsd-game-progress b{
  color:#ddd;
}


.fsd-game-best{
  color:#e1bd42;
}


.fsd-game-best b{
  color:#f0cd58;
}


.fsd-game-new{
  color:#75da96;
}


/* Slightly nicer live cards */
.fsd-game-card:not(.is-coming){
  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}


.fsd-game-card:not(.is-coming):hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(255,215,0,.24);

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.20);
}


/* Mobile */
@media(max-width:600px){

  .fsd-play-progress-strip{
    grid-template-columns:
      repeat(
        3,
        1fr
      );

    gap:6px;
  }


  .fsd-play-progress-strip > div{
    padding:
      8px 6px;

    text-align:center;
  }


  .fsd-play-progress-strip strong{
    font-size:15px;
  }

}
/* =========================================================
   PHASE 7B — ORDER REVIEW MODAL
========================================================= */

.fsd-my-order-actions
.is-review{
  border-color:
    rgba(255,205,65,.30) !important;

  background:
    rgba(255,205,65,.08) !important;

  color:
    #f1c94b !important;
}


.fsd-review-backdrop{
  position:fixed;
  inset:0;

  z-index:99999;

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

  padding:16px;

  background:
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(5px);
}


.fsd-review-modal{
  width:min(
    430px,
    100%
  );

  padding:18px;

  border:
    1px solid
    rgba(255,215,0,.22);

  border-radius:18px;

  background:
    #101010;

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.45);
}


.fsd-review-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}


.fsd-review-kicker{
  color:#e7be37;
  font-size:9px;
  font-weight:900;
  letter-spacing:.8px;
}


.fsd-review-modal h3{
  margin:3px 0 0;
  font-size:17px;
}


.fsd-review-close{
  width:34px;
  height:34px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:9px;

  background:#181818;
  color:#ddd;

  font-size:20px;
  cursor:pointer;
}


.fsd-review-question{
  margin-top:18px;

  text-align:center;

  color:#ddd;

  font-size:12px;
  font-weight:700;
}


.fsd-review-stars{
  display:flex;
  justify-content:center;
  gap:6px;

  margin-top:10px;
}


.fsd-review-stars button{
  padding:2px;

  border:0;
  background:transparent;

  color:#474747;

  font-size:34px;

  cursor:pointer;
}


.fsd-review-stars button.is-active{
  color:#f1c33c;
}


.fsd-review-rating-text{
  margin-top:4px;

  text-align:center;

  color:#e7c04a;

  font-size:10px;
}


.fsd-review-comment{
  display:block;

  margin-top:16px;
}


.fsd-review-comment > span{
  display:block;

  margin-bottom:6px;

  color:#ddd;

  font-size:10px;
  font-weight:700;
}


.fsd-review-comment small{
  margin-left:4px;

  color:#777;
  font-weight:400;
}


.fsd-review-comment textarea{
  width:100%;

  box-sizing:border-box;

  padding:10px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:10px;

  outline:none;

  resize:vertical;

  background:#0b0b0b;
  color:#eee;

  font:inherit;
}


.fsd-review-comment textarea:focus{
  border-color:
    rgba(255,215,0,.35);
}


.fsd-review-msg{
  min-height:18px;

  margin-top:9px;

  color:#ff9999;

  font-size:9px;
}


.fsd-review-msg.is-success{
  color:#61dc8c;
}


.fsd-review-submit{
  width:100%;
  min-height:44px;

  margin-top:8px;

  border:0;
  border-radius:10px;

  background:#e4bb33;
  color:#111;

  font-weight:900;

  cursor:pointer;
}


.fsd-review-submit:disabled{
  opacity:.65;
  cursor:wait;
}
/* =========================================================
   PHASE 7D — VERIFIED CUSTOMER RATING
========================================================= */

.fsd-mini-rating{
  display:flex;
  align-items:center;
  gap:3px;

  margin-top:5px;

  color:#e5bd3e;

  font-size:9px;
  font-weight:800;
}

.fsd-mini-rating span{
  color:#f0c63d;
}

.fsd-mini-rating small{
  color:#858a90;
  font-weight:500;
}


.fsd-product-review-summary{
  display:flex;
  align-items:center;
  gap:6px;

  width:max-content;

  margin-top:9px;
  padding:6px 9px;

  border:
    1px solid
    rgba(255,205,65,.16);

  border-radius:9px;

  background:
    rgba(255,205,65,.06);
}

.fsd-product-review-summary > span{
  color:#efc543;
  font-size:16px;
}

.fsd-product-review-summary strong{
  color:#efc543;
  font-size:13px;
}

.fsd-product-review-summary small{
  color:#9a9fa5;
  font-size:9px;
}
/* =====================================================
   PHASE 9E — PREMIUM SHARED BOTTOM NAVIGATION
   Public / Customer / Staff
===================================================== */

.fsd-bottom-nav{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 9999;

  width: min(94%, 520px);
  height: 68px;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;

  padding: 7px 8px;

  background:
    linear-gradient(
      180deg,
      rgba(30,30,28,.97) 0%,
      rgba(13,13,13,.98) 100%
    );

  border: 1px solid rgba(244,211,125,.25);
  border-radius: 22px;

  box-shadow:
    0 14px 40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.025),
    0 0 24px rgba(212,175,55,.08);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


/* ---------- NAV BUTTON ---------- */

.fsd-bottom-nav button{
  position: relative;

  min-width: 0;
  height: 54px;

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

  gap: 2px;

  padding: 4px 2px;

  border: 0;
  border-radius: 15px;

  background: transparent;
  color: #a9a9a9;

  font-family: inherit;
  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}


/* ---------- ICON ---------- */

.fsd-bottom-nav button > span{
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 25px;

  font-size: 21px;
  line-height: 1;

  transition:
    transform .18s ease,
    color .18s ease;
}


/* ---------- LABEL ---------- */

.fsd-bottom-nav button > small{
  display: block;

  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 10px;
  line-height: 1.15;
  font-weight: 600;

  letter-spacing: .01em;
}


/* ---------- HOVER ---------- */

.fsd-bottom-nav button:hover{
  color: #f4d37d;
  background: rgba(244,211,125,.07);
}

.fsd-bottom-nav button:hover > span{
  transform: translateY(-1px);
}


/* ---------- ACTIVE PAGE ---------- */

.fsd-bottom-nav button.active,
.fsd-bottom-nav button[aria-current="page"]{
  color: #f6d66f;

  background:
    linear-gradient(
      180deg,
      rgba(244,211,125,.16),
      rgba(212,175,55,.06)
    );

  box-shadow:
    inset 0 0 0 1px rgba(244,211,125,.12),
    0 5px 14px rgba(0,0,0,.18);
}

.fsd-bottom-nav button.active > span,
.fsd-bottom-nav button[aria-current="page"] > span{
  color: #ffd85a;
  transform: translateY(-1px);
}


/* ---------- CART ---------- */

.fsd-cart-nav > span{
  font-size: 22px !important;
}


/* ---------- CART BADGE ---------- */

#fsdCartBadge{
  position: absolute;

  top: 2px;
  left: calc(50% + 8px);

  min-width: 18px;
  height: 18px;

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

  padding: 0 5px;

  border: 2px solid #151515;
  border-radius: 999px;

  background: #f5c542;
  color: #111;

  font-size: 9px;
  line-height: 1;
  font-weight: 800;

  box-shadow:
    0 2px 8px rgba(0,0,0,.35),
    0 0 10px rgba(245,197,66,.25);
}

#fsdCartBadge[hidden]{
  display: none !important;
}


/* ---------- CLICK FEEDBACK ---------- */

.fsd-bottom-nav button:active{
  transform: scale(.94);
}


/* ---------- PREVENT CONTENT HIDING BEHIND NAV ---------- */

body{
  padding-bottom: 96px;
}


/* ---------- SMALL PHONES ---------- */

@media (max-width: 420px){

  .fsd-bottom-nav{
    width: calc(100% - 18px);
    bottom: 9px;

    height: 64px;

    padding: 6px;
    border-radius: 19px;
  }

  .fsd-bottom-nav button{
    height: 50px;
    border-radius: 13px;
  }

  .fsd-bottom-nav button > span{
    font-size: 19px;
  }

  .fsd-bottom-nav button > small{
    font-size: 9px;
  }

}


/* ---------- VERY SMALL PHONES ---------- */

@media (max-width: 350px){

  .fsd-bottom-nav button > small{
    font-size: 8px;
  }

}
/* =====================================================
   PHASE 9E — PREMIUM MORE SHEET
   Customer + Staff
===================================================== */

.fsd-sheet-backdrop{
  position: fixed;
  inset: 0;
  z-index: 10020;

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

  padding: 18px 12px 94px;

  background: rgba(0,0,0,.58);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  animation: fsdSheetFadeIn .18s ease-out;
}


/* =====================================================
   SHEET
===================================================== */

.fsd-sheet{
  width: min(100%, 500px);
  max-height: min(72vh, 650px);

  overflow-y: auto;
  overscroll-behavior: contain;

  padding:
    10px
    14px
    16px;

  border:
    1px solid
    rgba(244,211,125,.24);

  border-radius:
    24px
    24px
    20px
    20px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(244,211,125,.10),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #181816 0%,
      #0c0c0c 100%
    );

  box-shadow:
    0 -12px 45px rgba(0,0,0,.55),
    0 0 30px rgba(212,175,55,.08);

  animation:
    fsdSheetSlideUp .22s ease-out;
}


/* =====================================================
   DRAG HANDLE
===================================================== */

.fsd-sheet-handle{
  width: 42px;
  height: 4px;

  margin:
    1px auto
    10px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.24);
}


/* =====================================================
   TITLE
===================================================== */

.fsd-sheet-title{
  margin:
    0
    2px
    16px;

  color: #fff;

  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;

  letter-spacing: -.02em;
}


/* =====================================================
   SECTION LABEL
===================================================== */

.fsd-sheet-section-label{
  margin:
    13px
    3px
    8px;

  color: #e9bd3e;

  font-size: 10px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: .11em;
}


/* =====================================================
   ROUTE BUTTONS
===================================================== */

.fsd-sheet button[data-route]{
  width: 100%;
  min-height: 49px;

  display: flex;
  align-items: center;

  margin-bottom: 7px;

  padding:
    10px
    14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    );

  color: #f4f4f4;

  text-align: left;

  font-family: inherit;
  font-size: 14px;
  font-weight: 650;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);

transition:
  border-color .18s ease,
  background .18s ease,
  color .18s ease,
  transform .18s ease,
  box-shadow .18s ease,
  text-shadow .18s ease;
}


.fsd-sheet button[data-route]:hover{
  color: #ffe78f;

  border-color:
    rgba(255,215,75,.62);

  background:
    linear-gradient(
      100deg,
      rgba(255,215,70,.18) 0%,
      rgba(244,211,125,.10) 48%,
      rgba(255,255,255,.055) 100%
    );

  box-shadow:
    0 5px 18px rgba(0,0,0,.22),
    0 0 16px rgba(255,205,45,.10),
    inset 3px 0 0 rgba(255,214,70,.85),
    inset 0 1px 0 rgba(255,255,255,.07);

  transform:
    translateX(3px);

  text-shadow:
    0 0 10px rgba(255,215,80,.16);
}


.fsd-sheet button[data-route]:active{
  transform: scale(.985);
}


/* =====================================================
   STAFF OPERATION BUTTONS
   First section receives slightly stronger treatment
===================================================== */

body.fsd-staff
.fsd-sheet-section-label:first-of-type{
  color: #ffd85a;
}


body.fsd-staff
.fsd-sheet-section-label:first-of-type
~ button[data-route]{
  border-color:
    rgba(244,211,125,.12);
}


/* =====================================================
   DIVIDER
===================================================== */

.fsd-sheet-divider{
  height: 1px;

  margin:
    13px
    2px
    15px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244,211,125,.30),
      transparent
    );
}


/* =====================================================
   CLOSE BUTTON
===================================================== */

#fsdSheetClose{
  width: 100%;
  min-height: 46px;

  margin-top: 10px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 14px;

  background:
    rgba(255,255,255,.045);

  color: #c8c8c8;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease;
}


#fsdSheetClose:hover{
  background:
    rgba(255,255,255,.08);

  color: #fff;
}


/* =====================================================
   SCROLLBAR
===================================================== */

.fsd-sheet{
  scrollbar-width: thin;
  scrollbar-color:
    rgba(244,211,125,.28)
    transparent;
}


.fsd-sheet::-webkit-scrollbar{
  width: 4px;
}


.fsd-sheet::-webkit-scrollbar-track{
  background: transparent;
}


.fsd-sheet::-webkit-scrollbar-thumb{
  border-radius: 999px;

  background:
    rgba(244,211,125,.28);
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes fsdSheetFadeIn{
  from{
    opacity: 0;
  }

  to{
    opacity: 1;
  }
}


@keyframes fsdSheetSlideUp{
  from{
    opacity: 0;
    transform: translateY(24px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}


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

@media (max-width: 420px){

  .fsd-sheet-backdrop{
    padding:
      12px
      9px
      86px;
  }


  .fsd-sheet{
    max-height: 69vh;

    padding:
      9px
      11px
      13px;

    border-radius:
      21px
      21px
      17px
      17px;
  }


  .fsd-sheet-title{
    margin-bottom: 13px;

    font-size: 20px;
  }


  .fsd-sheet button[data-route]{
    min-height: 46px;

    margin-bottom: 6px;

    padding:
      9px
      12px;

    font-size: 13px;
  }

}
/* =====================================================
   PHASE 9E — MOBILE HEADER POLISH
   Change 1: compact responsive app bar
===================================================== */

@media (max-width: 700px) {

  .appbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 12px;

    padding: 10px 14px 12px;

    background:
      linear-gradient(
        180deg,
        #111 0%,
        #0b0b0b 100%
      );

    border-bottom:
      1px solid rgba(212, 175, 55, 0.22);

    position: sticky;
    top: 0;
    z-index: 100;
  }


  /* LEFT — logo + brand */
  .appbar .left {
    display: flex;
    align-items: center;
    min-width: 0;
  }


  .brand-mini {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    margin-right: 9px;

    border-radius: 8px;

    border:
      1px solid rgba(255, 215, 0, 0.35);
  }
.appbar {
  .appbar .sub {
  white-space: nowrap;
}
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

  gap: 8px 12px;

  padding: 10px 14px 12px;

  background:
    linear-gradient(
      180deg,
      #111 0%,
      #0b0b0b 100%
    );

  border-bottom:
    1px solid rgba(212, 175, 55, 0.22);

  position: sticky;
  top: 0;
  z-index: 100;
}
}
/* =====================================================
   PHASE 9E — MOBILE STAFF HEADER
   Change 2: clean 3-row staff header
===================================================== */

@media (max-width: 700px) {

  body.fsd-staff .appbar {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 6px 10px;

    padding:
      10px 14px 11px;
  }


  /* -----------------------------------------------
     ROW 1 + ROW 2
     Brand area
  ------------------------------------------------ */

  body.fsd-staff .appbar .left {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
      34px
      minmax(0, 1fr);

    grid-template-rows:
      auto
      auto;

    column-gap: 9px;
    row-gap: 2px;

    align-items: center;

    width: 100%;
  }


  body.fsd-staff .appbar .brand-mini {
    grid-column: 1;
    grid-row: 1 / 3;

    width: 32px;
    height: 32px;

    margin: 0;
  }


  body.fsd-staff .appbar .left b {
    grid-column: 2;
    grid-row: 1;

    font-size: 15px;
    line-height: 1.2;

    font-weight: 700;

    color: #fff;
  }


  body.fsd-staff .appbar .sub {
    grid-column: 2;
    grid-row: 2;

    margin: 0;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 600;

    color: #e8c954;

    white-space: nowrap;
  }


  /* -----------------------------------------------
     ROW 3
     Staff identity + hotline + logout
  ------------------------------------------------ */

  body.fsd-staff .appbar .right {
    grid-column: 1 / -1;

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    min-width: 0;

    margin-top: 3px;
  }


  body.fsd-staff #who {
    flex:
      1 1 auto;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 650;
  }


  body.fsd-staff #hotlineWrap {
    flex:
      0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;

    font-size: 11px;

    color: #aaa;
  }


  body.fsd-staff #selHotline {
    width: 62px;
    min-width: 62px;

    height: 34px;

    padding:
      5px 8px;

    border-radius: 18px;
  }


  /* Logout becomes compact on mobile */

  body.fsd-staff .appbar .btn.pill {
    flex:
      0 0 auto;

    width: auto;

    min-width: 62px;

    height: 34px;

    padding:
      5px 10px;

    margin: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    font-size: 11px;

    line-height: 1;

    color: #eee;

    border:
      1px solid
      rgba(
        255,
        215,
        0,
        0.14
      );

    background:
      linear-gradient(
        180deg,
        #202020,
        #171717
      );
  }


  body.fsd-staff .appbar .btn.pill:hover {
    color: #ffd84d;

    border-color:
      rgba(
        255,
        215,
        0,
        0.42
      );

    background:
      linear-gradient(
        180deg,
        #292516,
        #191919
      );
  }

}
/* =====================================================
   PHASE 9E — MOBILE NAVIGATION CLEANUP
   Change 3: bottom nav replaces old tab strip
===================================================== */

@media (max-width: 700px) {

  /* Hide legacy horizontal navigation on mobile */
  body.fsd-customer .tabs,
  body.fsd-staff .tabs {
    display: none !important;
  }

}
/* =====================================================
   PHASE 9E — MISC FILTER COLLAPSE
===================================================== */

.fsd-misc-filter-panel.fsd-misc-filter-hidden {
  display: none !important;
}
/* =====================================================
   PHASE 9E — PRINT & COPY STOREFRONT HEADER
===================================================== */

.fsd-print-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.fsd-print-kicker {
  margin-bottom: 5px;
  color: #e8c954;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.fsd-print-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
}

.fsd-print-head p {
  margin: 6px 0 0;
  color: #999;
  font-size: 13px;
  line-height: 1.45;
}

.fsd-print-back {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 13px;

  border: 1px solid rgba(232, 201, 84, .30);
  border-radius: 999px;

  background: #171717;
  color: #e8c954;

  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.fsd-print-back:hover {
  border-color: rgba(232, 201, 84, .65);
  background: #211e13;
}


/* MOBILE */
@media (max-width: 700px) {

  .fsd-print-head {
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .fsd-print-kicker {
    font-size: 9px;
    letter-spacing: .06em;
  }

  .fsd-print-head h2 {
    font-size: 21px;
  }

  .fsd-print-head p {
    max-width: 270px;
    font-size: 12px;
  }

  .fsd-print-back {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 11px;
  }

}
/* =====================================================
   PHASE 9E — PRINT & COPY
   Mobile Job Category — compact 2 x 2 selector
===================================================== */

@media (max-width: 700px) {

  .gp-jobcat-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .gp-jobcat-row .gp-jobcat-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px;
    padding: 10px 8px !important;

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

    white-space: normal;
    text-align: center;
    line-height: 1.2;

    border-radius: 12px;
  }

}
/* =====================================================
   PHASE 9E — GP STAFF PRICE TYPE
===================================================== */

.gp-price-type-wrap {
  margin-top: 10px;
}

.gp-price-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 5px;
}

.gp-price-type-grid .gp-price-type-btn {
  width: 100%;
  min-width: 0;
  padding: 9px 6px;
  border-radius: 10px;
  font-size: 12px;
}

@media (max-width: 700px) {

  .gp-price-type-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .gp-price-type-grid .gp-price-type-btn {
    width: 100% !important;
  }

}
/* =====================================================
   GENERAL PRINTING — COMPACT PRINTING METHOD
===================================================== */

@media (max-width: 700px) {

  .gp-method-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .gp-method-row .gp-method-pill {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px;
    margin: 0 !important;
    padding: 9px 10px !important;

    display: flex !important;
    align-items: center;
    gap: 7px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    box-sizing: border-box;
  }

  .gp-method-row .gp-method-pill input[type="radio"] {
    margin: 0 !important;
    flex: 0 0 auto;
  }

  .gp-method-row .gp-method-pill span {
    line-height: 1.15;
  }
}
/* =====================================================
   GENERAL PRINTING — COMPACT JOB DETAILS
===================================================== */

@media (max-width: 700px) {

  .gp-job-details .gp-two {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .gp-job-details .lbl-small {
    min-width: 0 !important;
    margin: 0 !important;
  }

  .gp-job-details .input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .gp-job-details .gp-two.mt6 {
    margin-top: 8px !important;
  }
}
/* =====================================================
   GENERAL PRINTING — COMPACT EXTRA SERVICES
===================================================== */

@media (max-width: 700px) {

  .gp-extra-services .gp-three {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .gp-extra-services .lbl-small {
    min-width: 0 !important;
    margin: 0 !important;
  }

  .gp-extra-services .input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .gp-extra-services .lbl {
    font-size: 12px !important;
    line-height: 1.15;
  }
}
/* =====================================================
   GENERAL PRINTING — COMPACT FINISHING OPTIONS
===================================================== */

@media (max-width: 700px) {

  .gp-finishes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .gp-finishes .gp-fin-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 10px !important;

    box-sizing: border-box !important;
    border-radius: 12px !important;

    display: flex !important;
    flex-direction: column;
    justify-content: center;

    cursor: pointer;
  }

  .gp-finishes .gp-fin-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
  }

  .gp-finishes .gp_fin_chk {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 1px 0 0 0 !important;
  }

  .gp-finishes .gp-fin-name {
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700;

    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .gp-finishes .gp-fin-meta {
    margin-top: 6px !important;
    margin-left: 23px !important;

    font-size: 11px !important;
    line-height: 1.2;
    opacity: .78;
  }

  /* selected finishing option */
  .gp-finishes .gp-fin-item:has(.gp_fin_chk:checked) {
    border-color: rgba(255, 204, 0, .65) !important;
    background: rgba(255, 204, 0, .07) !important;
    box-shadow: 0 0 0 1px rgba(255, 204, 0, .10);
  }
}
.gp-finishes .gp-fin-name {
  font-size: 12px !important;
}

.gp-finishes .gp-fin-meta {
  font-size: 10px !important;
  margin-left: 20px !important;
}
.gp-finishes .gp-fin-item {
  min-height: 64px !important;
  padding: 8px !important;
}


/* =====================================================
   GENERAL PRINTING — QUICK PRESETS
===================================================== */

@media (max-width: 700px) {

  .gp-direct-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .gp-direct-grid .gp-direct-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 9px 8px !important;

    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
    font-size: 12px !important;

    border-radius: 12px !important;
  }

  .gp-direct-grid .gp-direct-btn.active {
    border-color: rgba(255, 204, 0, .75) !important;
    background: rgba(255, 204, 0, .10) !important;
    box-shadow: 0 0 0 1px rgba(255, 204, 0, .12) !important;
  }
}
/* =====================================================
   GENERAL PRINTING — MOBILE BOTTOM NAV SAFE SPACE
===================================================== */

@media (max-width: 700px) {

  .gp-layout-print {
    padding-bottom: 105px !important;
  }
}
/* =====================================================
   MOBILE CART — PREVENT QTY / AMOUNT OVERLAP
===================================================== */

@media (max-width: 700px) {

  #cartBox table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  #cartBox th:nth-child(1),
  #cartBox td:nth-child(1) {
    width: 46% !important;
  }

  #cartBox th:nth-child(2),
  #cartBox td:nth-child(2) {
    width: 34% !important;
    text-align: center !important;
  }

  #cartBox th:nth-child(3),
  #cartBox td:nth-child(3) {
    width: 20% !important;
    text-align: right !important;
  }

  #cartBox .cart-qty-container {
    white-space: nowrap !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  #cartBox .cart-qty-container button {
    width: 22px !important;
    min-width: 22px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 1px !important;
    font-size: 11px !important;
  }

  #cartBox .cart-qty-container span {
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
  }
}
/* =====================================================
   PHASE 9E — MOBILE SALES TABS
   Use dedicated bottom Cart instead of stacked side cart
===================================================== */

@media (max-width: 700px) {

  /* Books + Misc side cart */
  #view .books-layout > .books-side {
    display: none !important;
  }

  /* Stationery */
  #view .stationery-layout > #st_cart_column {
    display: none !important;
  }

  /* Teaching Materials */
  #view .tm-layout > .tm-right {
    display: none !important;
  }

  /* PDF */
  #view .pdf-4col > #pdfRightPanel {
    display: none !important;
  }

  /* Special Printing */
  #view .sp-layout > .sp-right {
    display: none !important;
  }

  /* General Printing */
  #view .gp-layout-print > .gp-right {
    display: none !important;
  }

}
/* =====================================================
   SALES PAGES — COMMON HEADER / BACK BUTTON
===================================================== */

.fsd-sales-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.fsd-sales-page-head h2{
  margin:0 !important;
}

.fsd-sales-back{
  min-height:40px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.40);
  background:#151515;
  color:#f4d465;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

@media (max-width:700px){

  .fsd-sales-page-head{
    align-items:center;
  }

  .fsd-sales-page-head h2{
    font-size:20px;
  }

  .fsd-sales-back{
    min-height:38px;
    padding:7px 11px;
    font-size:12px;
  }
}
/* =====================================================
   STATIONERY — COMPACT MOBILE CATALOG
===================================================== */

@media (max-width:700px){

  .stationery-grid{
    display:grid !important;
    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;
    gap:7px !important;
    padding:0 !important;
  }

  .stationery-grid .st-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    padding:7px !important;
    border-radius:10px !important;
  }

  .stationery-grid
  .book-img-wrap{
    height:75px !important;
    margin-bottom:5px !important;
  }

  .stationery-grid
  .st-card > .b{
    font-size:11px !important;
    line-height:1.15 !important;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .stationery-grid
  .muted.small{
    font-size:9px !important;
    line-height:1.15 !important;
  }

  .stationery-grid
  .st-mrp,
  .stationery-grid
  .st-our-price,
  .stationery-grid
  .st-save{
    font-size:9px !important;
    line-height:1.2 !important;
  }

  .stationery-grid
  .st-our-price-val{
    font-size:11px !important;
  }

  .stationery-grid .btn{
    min-height:34px !important;
    padding:6px 4px !important;
    font-size:10px !important;
  }
}
/* =====================================================
   TEACHING MATERIAL — MOBILE ACTION BUTTONS
===================================================== */

@media (max-width:700px){

  .tm-left .row.g8.mt12{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  #tm_add_left,
  #tm_refresh_left{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    flex:none !important;
  }
}
/* =====================================================
   STATIONERY — EXTRA COMPACT MOBILE CARDS
===================================================== */

@media (max-width:700px){

  .stationery-grid{
    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .stationery-grid .st-card{
    min-height:0 !important;
    height:auto !important;
    padding:6px !important;
    gap:3px !important;
  }

  /* Smaller image */
  .stationery-grid .book-img-wrap{
    height:58px !important;
    min-height:58px !important;
    margin-bottom:3px !important;
  }

  .stationery-grid .book-img-wrap img{
    max-height:56px !important;
  }

  /* Product name */
  .stationery-grid .st-card > .b{
    font-size:10.5px !important;
    line-height:1.1 !important;
    margin-top:2px !important;
    margin-bottom:2px !important;

    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  /* Brand / unit */
  .stationery-grid .st-card .muted.small{
    font-size:8.5px !important;
    line-height:1.05 !important;
    margin-top:1px !important;
    margin-bottom:2px !important;
  }

  /* Price area */
  .stationery-grid .st-card .mt6{
    margin-top:3px !important;
  }

  .stationery-grid .st-mrp,
  .stationery-grid .st-our-price,
  .stationery-grid .st-save{
    font-size:8.5px !important;
    line-height:1.15 !important;
    margin:1px 0 !important;
  }

  .stationery-grid .st-our-price-val{
    font-size:10px !important;
  }

  /* Add button */
  .stationery-grid .st-card .btn{
    min-height:30px !important;
    height:30px !important;
    padding:4px 3px !important;
    margin-top:4px !important;
    font-size:9.5px !important;
    line-height:1 !important;
    border-radius:9px !important;
  }

}
/* =====================================================
   FSD ANNOUNCEMENT — PILOT
===================================================== */

.fsd-announcement{
  display:flex;
  align-items:center;
  gap:10px;

  margin:8px 14px 10px;
  padding:10px 12px;

  background:
    linear-gradient(
      135deg,
      #151515,
      #0b0b0b
    );

  border:
    1px solid
    rgba(212,175,55,.45);

  border-radius:12px;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.30);

  color:#eee;

  position:relative;
  z-index:80;
}


.fsd-ann-icon{
  flex:0 0 auto;
  font-size:18px;
}


.fsd-ann-content{
  flex:1;
  min-width:0;
}


.fsd-ann-title{
  color:#f4d465;
  font-size:13px;
  font-weight:800;
  margin-bottom:2px;
}


.fsd-ann-message{
  font-size:12px;
  line-height:1.35;
  color:#ddd;
}


.fsd-ann-action{
  flex:0 0 auto;

  border:
    1px solid
    rgba(212,175,55,.55);

  background:#1b1b1b;
  color:#f4d465;

  border-radius:999px;

  padding:7px 11px;

  font-size:11px;
  font-weight:700;

  cursor:pointer;
}


.fsd-ann-close{
  flex:0 0 auto;

  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border:0;
  background:transparent;

  color:#aaa;

  font-size:22px;
  line-height:1;

  cursor:pointer;
}


@media (max-width:700px){

  .fsd-announcement{
    margin:7px 8px 9px;
    padding:9px 10px;
    gap:8px;
  }

  .fsd-ann-icon{
    font-size:16px;
  }

  .fsd-ann-title{
    font-size:12px;
  }

  .fsd-ann-message{
    font-size:11px;
  }

  .fsd-ann-action{
    padding:6px 8px;
    font-size:10px;
  }

}