/* D&S 3D Printing — design system, ported 1:1 from the React app's styles.css */

:root {
  --ds-blue: #0470f4;
  --ds-blue-dark: #0352c9;
  --ds-dark: #0f172a;
  --ds-slate: #334155;
  --ds-accent: #f59e0b;

  --ds-bg: #f8fafc;
  --ds-border: #e2e8f0;
  --ds-border-light: #f1f5f9;
  --ds-muted: #64748b;
  --ds-muted-light: #94a3b8;

  --ds-success: #22c55e;
  --ds-success-dark: #166534;
  --ds-success-bg: #dcfce7;
  --ds-warning-dark: #92400e;
  --ds-warning-bg: #fef3c7;
  --ds-danger: #dc2626;
  --ds-danger-bg: #fee2e2;
  --ds-danger-dark: #991b1b;
  --ds-info-dark: #1e40af;
  --ds-info-bg: #dbeafe;
  --ds-purple: #8b5cf6;
  --ds-purple-light: #a78bfa;
  --ds-indigo: #6366f1;
  --ds-cyan: #22d3ee;
  --ds-pink: #f472b6;
  --ds-lightblue: #60a5fa;
  --ds-lightblue2: #3b82f6;
}

* { box-sizing: border-box; }

body {
  font-family: 'Archivo Black', system-ui, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  background: var(--ds-bg);
  color: var(--ds-slate);
}

.fw-black { font-weight: 900; }

a { text-decoration: none; }

/* ---- Buttons -------------------------------------------------------- */
.btn-ds {
  background: linear-gradient(135deg, var(--ds-blue), var(--ds-blue-dark));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.75rem;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(4, 112, 244, .25);
}
.btn-ds:hover, .btn-ds:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(4, 112, 244, .35);
}
.btn-ds-outline {
  background: transparent;
  color: var(--ds-blue);
  border: 2px solid var(--ds-blue);
  border-radius: 999px;
  padding: 0.65rem 1.7rem;
  font-weight: 700;
  transition: all .2s ease;
}
.btn-ds-outline:hover {
  background: var(--ds-blue);
  color: #fff;
}

/* ---- Navbar ----------------------------------------------------------- */
.ds-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  padding: .75rem 0;
}
.ds-navbar.is-scrolled {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--ds-border);
  box-shadow: 0 2px 18px rgba(15,23,42,.06);
}
.ds-brand-logo {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ds-blue), var(--ds-indigo));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 1.1rem;
}
.ds-brand-logo-img {
  width: 42px; height: 42px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.ds-nav-link {
  position: relative;
  color: var(--ds-dark);
  font-weight: 600;
  padding: .5rem .9rem;
}
.ds-nav-link::after {
  content: '';
  position: absolute;
  left: .9rem; right: .9rem; bottom: 0;
  height: 2px;
  background: var(--ds-blue);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.ds-nav-link:hover::after, .ds-nav-link.active::after { transform: scaleX(1); }
.ds-nav-link.active { color: var(--ds-blue); }
.ds-cta-signin {
  background: linear-gradient(135deg, var(--ds-blue), var(--ds-blue-dark));
  color: #fff; border: none; border-radius: 999px;
  padding: .55rem 1.4rem; font-weight: 700;
}
.ds-user-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--ds-border);
  border-radius: 999px; padding: .3rem .9rem .3rem .3rem;
  cursor: pointer;
}
.ds-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-blue), var(--ds-purple));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; position: relative; overflow: hidden;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar .online-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ds-success); border: 2px solid #fff;
}

/* ---- Hero -------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: 85vh;
  background: linear-gradient(120deg, #0b1224, #0f172a 50%, #1e293b);
  background-size: 200% 200%;
  animation: ds-hero-pan 18s ease infinite;
  color: #fff;
  overflow: hidden;
  display: flex; align-items: center;
}
@keyframes ds-hero-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(4,112,244,.15); border: 1px solid rgba(4,112,244,.4);
  color: #93c5fd; border-radius: 999px; padding: .4rem 1rem; font-size: .85rem; font-weight: 700;
}
.hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; }
.gradient-text {
  background: linear-gradient(90deg, var(--ds-lightblue2), var(--ds-purple-light), var(--ds-lightblue2));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ds-gradient-move 4s linear infinite;
}
@keyframes ds-gradient-move { to { background-position: 200% center; } }
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.hero-shape { position: absolute; opacity: .5; pointer-events: none; }

/* ---- Cards --------------------------------------------------------------- */
.feature-card, .service-card, .gift-card {
  background: #fff; border: 1px solid var(--ds-border);
  border-radius: 1.1rem; padding: 1.75rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.feature-card:hover, .service-card:hover, .gift-card:hover {
  transform: translateY(-4px);
  border-color: var(--ds-blue);
  box-shadow: 0 14px 30px rgba(4,112,244,.12);
}
.app-area-card {
  position: relative; height: 200px; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 4px 14px rgba(15,23,42,.08);
}
.app-area-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.app-area-card:hover .app-area-img { transform: scale(1.1); }
.app-area-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.92), transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem; color: #fff; pointer-events: none;
}
.app-area-overlay i { font-size: 1.25rem; margin-bottom: .35rem; }
.app-area-overlay span { font-weight: 700; }
.order-card {
  background: #fff; border: 1px solid var(--ds-border);
  border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.order-card.gift { border-left: 4px solid var(--ds-accent); }
.address-card {
  background: #fff; border: 1px solid var(--ds-border);
  border-radius: .8rem; padding: .9rem 1.1rem;
  transition: border-color .15s ease, background .15s ease;
}
.address-card:has(input:checked) { border-color: var(--ds-blue); background: #f0f7ff; }
.gift-card-icon { height: 64px; width: auto; object-fit: contain; }

/* ---- Design review conversation thread --------------------------------------- */
.review-thread { display: flex; flex-direction: column; gap: .75rem; }
.review-msg {
  border: 1px solid var(--ds-border); border-radius: .75rem; padding: .75rem .9rem; max-width: 92%;
}
.review-msg.designer { background: #f0f7ff; border-color: #bae0ff; align-self: flex-start; }
.review-msg.customer { background: #fff7ed; border-color: #fed7aa; align-self: flex-end; }
.review-msg-head {
  display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; margin-bottom: .5rem;
}
.review-msg.designer .review-msg-head { color: var(--ds-info-dark); }
.review-msg.customer .review-msg-head { color: var(--ds-warning-dark); }
.review-msg-head .review-msg-time { margin-left: auto; font-weight: 500; color: var(--ds-muted); font-size: .7rem; }
.review-photos { display: flex; flex-wrap: wrap; gap: .4rem; }
.review-photos a { width: 72px; height: 72px; display: block; }
.review-photos img {
  width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; border: 1px solid var(--ds-border);
}
.review-photos a.review-file {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  padding: .3rem; border: 1px solid var(--ds-border); border-radius: .5rem; background: #fff;
  text-align: center; text-decoration: none; color: var(--ds-slate);
}
.review-photos a.review-file i { font-size: 1.5rem; color: var(--ds-danger); }
.review-photos a.review-file span { font-size: .58rem; line-height: 1.05; word-break: break-word; max-width: 100%; }
.final-file-row {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem;
  border: 1px solid var(--ds-border); border-radius: .6rem; margin-bottom: .5rem; background: #fff;
}
.final-file-row .bi { color: var(--ds-blue); font-size: 1.15rem; }

/* ---- Status badges --------------------------------------------------------- */
.status-badge {
  display: inline-block; padding: .3rem .85rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; text-transform: capitalize;
}
.status-placed              { background: var(--ds-info-bg);    color: var(--ds-info-dark); }
.status-reviewed            { background: #ede9fe;              color: #5b21b6; }
.status-payment             { background: var(--ds-warning-bg); color: var(--ds-warning-dark); }
.status-payment_confirmed   { background: var(--ds-success-bg); color: var(--ds-success-dark); }
.status-processing          { background: #cffafe;              color: #155e75; }
.status-completed           { background: var(--ds-success-bg); color: var(--ds-success-dark); }
.status-delivering          { background: #fce7f3;              color: #9d174d; }
.status-delivered           { background: var(--ds-success-bg); color: var(--ds-success-dark); }
.status-closed              { background: #f1f5f9;              color: #475569; }
.status-awaiting_payment    { background: var(--ds-warning-bg); color: var(--ds-warning-dark); }
.status-payment_uploaded    { background: var(--ds-info-bg);    color: var(--ds-info-dark); }
.status-modeling            { background: #ede9fe;              color: #5b21b6; }
.status-review              { background: #fce7f3;              color: #9d174d; }
.status-finalizing          { background: #cffafe;              color: #155e75; }

/* ---- Forms / modals --------------------------------------------------------- */
.modal-content { border-radius: 1.25rem; border: none; }
.upload-zone {
  border: 2px dashed var(--ds-border);
  border-radius: 1rem; padding: 2rem; text-align: center;
  cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--ds-blue); background: #f0f7ff; }
.form-control:focus, .form-select:focus {
  border-color: var(--ds-blue); box-shadow: 0 0 0 .2rem rgba(4,112,244,.15);
}

/* ---- Misc utility ------------------------------------------------------------ */
.highlight-box {
  border-left: 4px solid var(--ds-accent); background: #fff7ed;
  border-radius: .6rem; padding: 1rem 1.25rem;
}
.bank-box {
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: .6rem; padding: 1rem 1.25rem;
}
.color-swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ds-border);
  cursor: pointer; display: inline-block; transition: transform .15s ease, border-color .15s ease;
}
.color-swatch.selected { border-color: var(--ds-blue); transform: scale(1.15); }
.section-title {
  font-weight: 900; text-align: center; position: relative; margin-bottom: 2.5rem;
}
.section-title::after {
  content: '';
  display: block; width: 60px; height: 4px; margin: .75rem auto 0;
  background: linear-gradient(90deg, var(--ds-blue), var(--ds-purple)); border-radius: 999px;
}
.order-step-bar-scroll { overflow-x: auto; padding-bottom: .25rem; }
.order-step-bar { display: flex; align-items: flex-start; min-width: max-content; }
.step-cell { display: flex; flex-direction: column; align-items: center; width: 76px; flex-shrink: 0; }
.step-node {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ds-border); color: var(--ds-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.step-node.done { background: var(--ds-blue); color: #fff; }
.step-node.active { background: var(--ds-accent); color: #fff; }
.order-card.gift .step-node.done { background: var(--ds-accent); }
.step-label {
  font-size: .68rem; text-align: center; color: var(--ds-muted);
  margin-top: .35rem; line-height: 1.15; padding: 0 .15rem;
}
.step-cell.done .step-label, .step-cell.active .step-label { color: var(--ds-dark); font-weight: 600; }
.step-connector { flex: 1; height: 3px; background: var(--ds-border); margin-top: 13px; min-width: 14px; }
.step-connector.done { background: var(--ds-blue); }
.order-card.gift .step-connector.done { background: var(--ds-accent); }
.step-current-desc { margin-top: -.15rem; }

.filament-marquee {
  background: var(--ds-dark); color: #fff; padding: .6rem 0; overflow: hidden; white-space: nowrap;
}
.tech-chip {
  display: inline-block; background: var(--ds-border-light); color: var(--ds-slate);
  border-radius: 999px; padding: .25rem .8rem; font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---- DFM accordion (modeling.php) --------------------------------------------- */
.ds-accordion .accordion-item {
  border: 1px solid var(--ds-border); border-radius: .75rem !important; overflow: hidden; margin-bottom: 1rem;
}
.ds-accordion .accordion-button {
  font-weight: 800; color: var(--ds-dark); background: #fff; padding: 1.1rem 1.4rem;
}
.ds-accordion .accordion-button:not(.collapsed) {
  color: var(--ds-blue); background: #f0f7ff; box-shadow: none;
}
.ds-accordion .accordion-button:focus { box-shadow: none; }
.ds-accordion .accordion-button::after { flex-shrink: 0; }
.ds-accordion .accordion-body { padding: 1.4rem; background: #fff; }
.dfm-good, .dfm-bad {
  border-radius: .6rem; padding: .9rem 1.1rem; height: 100%;
}
.dfm-good { background: var(--ds-success-bg); border-left: 4px solid var(--ds-success); }
.dfm-bad { background: var(--ds-danger-bg); border-left: 4px solid var(--ds-danger); }
.dfm-mistake {
  border: 1px solid var(--ds-border); border-radius: .6rem; padding: 1rem 1.1rem; margin-bottom: .9rem;
}
.dfm-mistake:last-child { margin-bottom: 0; }
.dfm-fit-badge {
  display: inline-block; font-weight: 800; font-size: .78rem; padding: .25rem .7rem;
  border-radius: 999px; white-space: nowrap;
}

/* ---- Toasts ------------------------------------------------------------------- */
.ds-toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 2000;
  display: flex; flex-direction: column; gap: .6rem; max-width: 360px;
}
.ds-toast {
  background: #fff; border-radius: .75rem; box-shadow: 0 10px 30px rgba(15,23,42,.15);
  padding: .8rem 1rem; display: flex; align-items: center; gap: .6rem;
  font-size: .9rem; font-weight: 600; color: var(--ds-dark);
  border-left: 4px solid var(--ds-blue);
  animation: ds-toast-in .2s ease;
}
.ds-toast.success { border-left-color: var(--ds-success); }
.ds-toast.error { border-left-color: var(--ds-danger); }
@keyframes ds-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ---- Page fade ------------------------------------------------------------------ */
.ds-page-fade { animation: ds-fade-in .35s ease; }
@keyframes ds-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

footer.ds-footer {
  background: var(--ds-dark); color: #cbd5e1; padding: 3rem 0 1.5rem;
}
footer.ds-footer a { color: #cbd5e1; }
footer.ds-footer a:hover { color: #fff; }

/* ---- Responsive / mobile ------------------------------------------------------- */
/* Never let a stray wide element cause horizontal scrolling of the whole page. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }

/* Hamburger ↔ close icon swap (both breakpoints; button only shows under lg). */
.ds-nav-toggler { border: none; line-height: 1; color: var(--ds-dark); padding: .25rem .5rem; }
.ds-nav-toggler:focus { box-shadow: none; }
.ds-nav-toggler .ds-nav-icon-close { display: none; }
.ds-nav-toggler[aria-expanded="true"] .ds-nav-icon-open { display: none; }
.ds-nav-toggler[aria-expanded="true"] .ds-nav-icon-close { display: inline-block; }

/* Navbar: below the lg breakpoint the custom nav collapses into a full-width panel. */
@media (max-width: 991.98px) {
  /* Solid, readable bar + panel on mobile (no translucency over page content). */
  .ds-navbar, .ds-navbar.is-scrolled {
    background: #fff; border-bottom-color: var(--ds-border);
    box-shadow: 0 2px 18px rgba(15,23,42,.06);
  }
  .ds-navbar .container { position: relative; }
  /* The menu floats over the page as a dropdown card — it does not push content down. */
  #dsNavCollapse {
    position: absolute; top: calc(100% + .6rem); left: .5rem; right: .5rem;
    background: #fff; border: 1px solid var(--ds-border); border-radius: 1rem;
    box-shadow: 0 16px 40px rgba(15,23,42,.18);
    padding: .5rem .75rem .75rem; z-index: 1050;
    max-height: calc(100vh - 90px); overflow-y: auto;
  }

  #dsNavCollapse .navbar-nav {
    flex-direction: column !important; gap: 0;
    margin-top: 0 !important; padding-top: .15rem;
  }
  #dsNavCollapse .navbar-nav li { width: 100%; }
  .ds-nav-link {
    display: flex; align-items: center; min-height: 48px;
    padding: .65rem .5rem; border-radius: .5rem; font-size: 1.05rem;
  }
  .ds-nav-link::after { display: none; }
  .ds-nav-link:active, .ds-nav-link:hover { background: var(--ds-border-light); }
  .ds-nav-link.active { background: #eff6ff; color: var(--ds-blue); }

  #dsNavAuthArea {
    width: 100%; flex-direction: column; align-items: stretch !important;
    gap: .6rem !important; padding-top: .75rem; margin-top: .35rem;
    border-top: 1px solid var(--ds-border);
  }
  #dsNavAuthArea .ds-cta-signin { width: 100%; min-height: 48px; font-size: 1.05rem; }
  #dsNavAuthArea > .ds-nav-link { min-height: 48px; }

  /* Logged-in menu: show the account links inline instead of a floating dropdown. */
  #dsNavAuthArea .dropdown { width: 100%; }
  #dsNavAuthArea .ds-user-pill {
    width: 100%; justify-content: flex-start; cursor: default;
    background: var(--ds-border-light); border-color: transparent; pointer-events: none;
  }
  #dsNavAuthArea .dropdown-menu {
    display: block; position: static !important; transform: none !important;
    width: 100%; border: none; box-shadow: none; padding: .25rem 0 0; margin: .35rem 0 0;
  }
  #dsNavAuthArea .dropdown-menu .dropdown-item { min-height: 44px; display: flex; align-items: center; border-radius: .5rem; }
  #dsNavAuthArea .dropdown-divider { display: none; }
}

/* General spacing / layout tightening on phones. */
@media (max-width: 767.98px) {
  .hero-section { min-height: 68vh; }
  section.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .feature-card, .service-card, .gift-card { padding: 1.25rem; }
  .order-card { padding: 1rem 1.1rem; }
  .review-msg { max-width: 100%; }
  .section-title { margin-bottom: 1.75rem; }
  .ds-toast-container { left: 1rem; right: 1rem; max-width: none; }
  .app-area-card { height: 160px; }
}

/* ---- Floating WhatsApp button ------------------------------------------------- */
.ds-whatsapp-fab {
  position: fixed; bottom: 20px; right: 20px; z-index: 1040;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.8rem; text-decoration: none;
  box-shadow: 0 6px 20px rgba(15,23,42,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ds-whatsapp-fab:hover, .ds-whatsapp-fab:focus { color: #fff; transform: scale(1.08); box-shadow: 0 8px 26px rgba(15,23,42,.34); }
@media (max-width: 767.98px) {
  .ds-whatsapp-fab { bottom: 16px; right: 16px; width: 52px; height: 52px; font-size: 1.65rem; }
}

/* ---- Global busy overlay (blocks double-submit during requests/uploads) -------- */
.ds-busy-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(15,23,42,.45); backdrop-filter: blur(1px);
  display: none; align-items: center; justify-content: center;
}
.ds-busy-overlay.show { display: flex; }
.ds-busy-box {
  background: #fff; border-radius: 1rem; padding: 1.4rem 1.8rem;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  box-shadow: 0 16px 40px rgba(15,23,42,.28);
}
.ds-busy-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid var(--ds-border); border-top-color: var(--ds-blue);
  animation: ds-busy-spin .7s linear infinite;
}
.ds-busy-text { font-size: .9rem; font-weight: 700; color: var(--ds-dark); }
@keyframes ds-busy-spin { to { transform: rotate(360deg); } }

/* ===== Marketplace ===== */
.ds-market-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.ds-market-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,.12); }
.ds-market-thumb { position: relative; aspect-ratio: 1/1; background: var(--ds-light, #f1f5f9); overflow: hidden; }
.ds-market-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-market-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #cbd5e1; font-size: 2.4rem; }
.ds-market-badge { position: absolute; top: .5rem; left: .5rem; background: var(--ds-accent, #f97316); color: #fff; font-size: .7rem; font-weight: 800; padding: .2rem .5rem; border-radius: 999px; }
.ds-market-oos-badge { position: absolute; top: .5rem; right: .5rem; background: rgba(15,23,42,.85); color: #fff; font-size: .7rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; letter-spacing: .3px; }
.ds-out-of-stock .ds-market-thumb img, .ds-out-of-stock .ds-market-noimg { filter: grayscale(1); opacity: .55; }
.ds-market-short { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Product detail gallery */
.ds-pd-main { aspect-ratio: 1/1; border-radius: .8rem; overflow: hidden; background: var(--ds-light, #f1f5f9); }
.ds-pd-main img { width: 100%; height: 100%; object-fit: cover; }
.ds-pd-thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.ds-pd-thumbs img { width: 54px; height: 54px; object-fit: cover; border-radius: .5rem; cursor: pointer; border: 2px solid transparent; }
.ds-pd-thumbs img.active { border-color: var(--ds-blue); }

/* Qty stepper */
.ds-qty { display: inline-flex; align-items: center; gap: .25rem; }
.ds-qty .btn { width: 30px; padding: 0; line-height: 1.4; }

/* Cart FAB + rows */
.ds-cart-fab { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1045; width: 58px; height: 58px; border-radius: 50%; border: none; background: var(--ds-blue); color: #fff; font-size: 1.4rem; box-shadow: 0 10px 26px rgba(4,112,244,.4); }
.ds-cart-count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--ds-accent, #f97316); color: #fff; font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ds-cart-row { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--ds-border, #e2e8f0); }
.ds-cart-thumb { width: 56px; height: 56px; border-radius: .5rem; overflow: hidden; background: var(--ds-light, #f1f5f9); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #cbd5e1; }
.ds-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }