:root { --brand:#6f42c1; --brand-2:#20c997; }
    [data-bs-theme="dark"]{
      --bs-body-color:#e9ecef; --bs-secondary-color:rgba(255,255,255,.72);
      --bs-link-color:#e9ecef; --bs-link-hover-color:#fff; --bs-border-color:rgba(255,255,255,.15);
    }
    .btn-brand{background:var(--brand);color:#fff}.btn-brand:hover{background:#5c36a3;color:#fff}
    .btn-outline-brand{background:transparent;border:1px solid var(--brand);color:var(--brand)}
    .btn-outline-brand:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
    [data-bs-theme="dark"] .btn-outline-brand{border-color:#f8f9fa;color:#f8f9fa}
    [data-bs-theme="dark"] .btn-outline-brand:hover{background:#f8f9fa;color:#212529;border-color:#f8f9fa}

    .navbar-blur{backdrop-filter:saturate(180%) blur(10px);background:rgba(var(--bs-body-bg-rgb),.85);border-bottom:1px solid rgba(var(--bs-body-color-rgb),.06)}
    [data-bs-theme="dark"] .navbar-blur{background:rgba(16,19,22,.85)}
    [data-bs-theme="dark"] .navbar .btn-outline-secondary{color:#e9ecef;border-color:rgba(255,255,255,.35)}
    [data-bs-theme="dark"] .navbar .btn-outline-secondary:hover{background:rgba(255,255,255,.08)}

    .hero{background:radial-gradient(1000px 500px at 10% -10%, rgba(111,66,193,.12), transparent 60%), linear-gradient(180deg, #fff, #f8f9fa 60%)}
    [data-bs-theme="dark"] .hero{background:radial-gradient(1000px 500px at 10% -10%, rgba(111,66,193,.22), transparent 60%), linear-gradient(180deg, #1b1f22, #0f1113 60%)}

    /* Desktop floating search */
    @media (min-width: 992px){
      #searchDrawer{position:fixed;left:0;right:0;top:72px;bottom:auto;height:auto;max-height:70vh;max-width:780px;margin:0 auto;border-radius:1rem;}
      #searchDrawer.offcanvas-bottom{transform:translateY(-100%);} #searchDrawer.show{transform:none}
      #searchDrawer .offcanvas-header{border-bottom:1px solid var(--bs-border-color)}
    }
    @media (max-width: 991.98px){ #searchDrawer{height:68vh;border-top-left-radius:1rem;border-top-right-radius:1rem} }

    .suggest-wrap{max-width:760px;margin-inline:auto}
    .input-elevated .form-control{border-left:0}
    .input-elevated .input-group-text{border-right:0}
    .input-elevated{border-radius:.9rem;overflow:hidden;box-shadow:0 .5rem 1.25rem rgba(0,0,0,.06)}
    .suggest-list{list-style:none;margin:.5rem 0 0;padding:0;border:1px solid var(--bs-border-color);border-radius:.9rem;overflow:hidden;box-shadow:0 .75rem 1.5rem rgba(0,0,0,.06)}
    .suggest-list .item{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;cursor:pointer}
    .suggest-list .item:hover,.suggest-list .item.active{background:rgba(255,255,255,.06)}
    [data-bs-theme="light"] .suggest-list .item:hover,[data-bs-theme="light"] .suggest-list .item.active{background:rgba(13,110,253,.08)}

    .mobile-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1060;backdrop-filter:saturate(180%) blur(8px);background:rgba(var(--bs-body-bg-rgb),.9);border-top:1px solid rgba(var(--bs-body-color-rgb),.08);padding-bottom:max(env(safe-area-inset-bottom), .25rem)}
    [data-bs-theme="dark"] .mobile-tabbar{background:rgba(16,19,22,.92);border-top-color:rgba(255,255,255,.12)}
    .mobile-tabbar .tab-btn{flex:1;text-decoration:none;color:var(--bs-body-color);padding:.55rem .25rem .4rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;background:transparent;border:0}
    .mobile-tabbar .tab-btn .bi{font-size:1.35rem}
    .mobile-tabbar .tab-btn.active,.mobile-tabbar .tab-btn:hover{color:var(--brand)}
    [data-bs-theme="dark"] .mobile-tabbar .tab-btn.active,[data-bs-theme="dark"] .mobile-tabbar .tab-btn:hover{color:#e9ecef}

    #accountDrawer{height:50vh;border-top-left-radius:1rem;border-top-right-radius:1rem}
    .nofocus:focus{box-shadow:none!important;outline:0!important}
    .btn-login{background:var(--brand);color:#fff;border:none}
    [data-bs-theme="dark"] .btn-login{background:#f8f9fa;color:#212529}

    /* Homepage banner */
    /* HERO */
    :root { --brand: #6f42c1; --brand-2: #20c997; }

    .hero-oi {
    position: relative;
    background:
        radial-gradient(800px 400px at 0% -10%, rgba(111,66,193, .12), transparent 60%),
        radial-gradient(800px 400px at 110% 20%, rgba(32,201,151, .10), transparent 60%),
        linear-gradient(180deg, #fff, #f8f9fa 60%);
    }
    [data-bs-theme="dark"] .hero-oi {
    background:
        radial-gradient(800px 400px at 0% -10%, rgba(111,66,193, .22), transparent 60%),
        radial-gradient(800px 400px at 110% 20%, rgba(32,201,151, .18), transparent 60%),
        linear-gradient(180deg, #1b1f22, #0f1113 60%);
    }

    .text-gradient {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    }

    .hero-visual-inner {
    background:
        repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 8px, transparent 8px 16px);
    }
    [data-bs-theme="dark"] .hero-visual-inner {
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px);
    }

    /* Buttons already defined in your project; included here in case they aren't */
    .btn-brand{ background: var(--brand); color: #fff; }
    .btn-brand:hover{ filter: brightness(0.96); color: #fff; }
    .btn-outline-brand{ border:1px solid var(--brand); color: var(--brand); background: transparent; }
    .btn-outline-brand:hover{ background: var(--brand); color:#fff; }
    [data-bs-theme="dark"] .btn-outline-brand{ border-color:#f8f9fa; color:#f8f9fa; }
    [data-bs-theme="dark"] .btn-outline-brand:hover{ background:#f8f9fa; color:#212529; }
    /* Homepage banner end */

/* Custom Modal */
/* ---------------- Generic modal: overlay + card ---------------- */

/* overlay - full screen centered container */
.bg-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 1050; /* matches bootstrap modal-ish stacking */
  padding: 20px; /* safe gap around modal on small screens */
  overflow-y: auto; /* allow overlay scroll on very small viewports */
}

/* modal card (generic) */
.bg-modal {
  /* margin-top: 60px; */
  background: #fdf6e3;       /* light mode paper */
  color: #4b3d2a;
  border: 1px solid #d2b48c;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 4px 6px 18px rgba(0,0,0,0.28);
  position: relative;
  z-index: 1060;
  width: 720px;             /* default desktop width (can be overridden) */
  max-width: 100%;
  box-sizing: border-box;
  animation: popupEffect .28s ease-out;
  outline: none;            /* we'll handle focus states separately */
  max-height: calc(100vh - 48px); 
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

/* small paper texture and worn edge touches (keeps decorative) */
.bg-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(210,180,140,0.06) 0px,
    rgba(210,180,140,0.06) 1px,
    transparent 1px,
    transparent 8px
  );
  opacity: 0.16;
  pointer-events: none;
  border-radius: 8px;
}
.bg-modal::after {
  content: "";
  position: absolute;
  inset: 0;
  /* border: 2px dashed rgba(139,69,19,0.12); */
  border-radius: 8px;
  pointer-events: none;
}

/* popup animation */
@keyframes popupEffect {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* focus-visible accessible outline */
.bg-modal:focus-visible {
  box-shadow: 0 0 0 4px rgba(100,120,160,0.12);
}

/* responsive defaults - smaller modal on wide but not huge screens */
@media (min-width: 1200px) {
  .bg-modal { width: 820px; }
}
@media (min-width: 1400px) {
  .bg-modal { width: 920px; }
}

/* ---------- Table responsiveness inside modal ---------- */


/* increase checkbox / input touch-targets inside modal */
.bg-modal .form-check-input,
.bg-modal input[type="checkbox"],
.bg-modal input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- Mobile optimizations ---------- */
@media (max-width: 480px) {
  .bg-overlay { align-items: flex-start; padding-top: 18px; padding-bottom: 18px; }
  .bg-modal {
    width: 100%;
    margin: 0 6px;
    padding: 12px 14px;
    border-radius: 10px;
    min-height: 0;
    box-shadow: 0 10px 28px rgba(0,0,0,0.36);
    max-height: calc(100vh - 36px);
  }
  .bg-modal img.img-fluid, .bg-modal video.img-fluid { max-height: 110px; }
  .bg-modal .table th, .bg-modal .table td { padding: .35rem .4rem; font-size: .88rem; }
}

/* medium screens adjustments */
@media (min-width: 481px) and (max-width: 992px) {
  .bg-modal { padding: 16px 18px; width: 640px; max-width: 92%; }
}

/* subtle custom scrollbar inside modal (WebKit only) */
.bg-modal::-webkit-scrollbar { width: 10px; height: 8px; }
.bg-modal::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }
.bg-modal::-webkit-scrollbar-track { background: transparent; }

/* ---------- Dark mode (Bootstrap 5.3+ style) ---------- */
[data-bs-theme="dark"] .bg-overlay { background: rgba(0,0,0,0.55); }
[data-bs-theme="dark"] .bg-modal {
  background: #1b1b1b;
  color: #e6dcc6;
  border-color: #333;
  box-shadow: 0 6px 22px rgba(0,0,0,0.6);
}
[data-bs-theme="dark"] .bg-modal::before {
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 8px
  );
  opacity: 0.12;
}
[data-bs-theme="dark"] .bg-modal::after { border-color: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .bg-modal .table th,
[data-bs-theme="dark"] .bg-modal .table td { color: #e6e6e6; }

/* ---------- Body scroll lock class (toggle on open) ---------- */
.modal-open-no-scroll {
  height: 100vh;
  overflow: hidden;
  touch-action: none;
}
/* product options on variants */
/* Product options — responsive mobile optimizations */
.product_options_container .row {
  --po-gap-vertical: 0.375rem; /* tweak spacing easily */
  margin-bottom: var(--po-gap-vertical);
}

/* tag style (if .tag-ui already exists this softens it for compact lists) */
.product_options_container .tag-ui {
  display: inline-block;
  margin: 0 0.35rem 0.35rem 0;
  padding: 0.28rem 0.6rem;
  font-size: 0.82rem;
  line-height: 1;
  border-radius: 14px;
  background: #f1f3f5;
  color: #495057;
  border: 1px solid rgba(0,0,0,0.04);
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* row that holds one product option (keep selector broad so it works with your markup) */
.product_options_container > .row > .row,
.product_options_container .row.mb-2 {
  align-items: center;
}

/* Desktop / default keeps your columns as-is */
.product_options_container .col-3,
.product_options_container .col-5,
.product_options_container .col-4 {
  min-height: 1px;
}

/* MOBILE: stack columns vertically and adjust sizing */
@media (max-width: 576px) {
  .product_options_container .row.mb-2,
  .product_options_container > .row > .row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 6px;
    border-radius: 8px;
    background: transparent; /* keep neutral; override if you want a card look */
  }

  /* name becomes first line with bold small text */
  .product_options_container .col-3 {
    flex: 0 0 auto;
    width: 100%;
  }
  .product_options_container .col-3 p {
    margin-bottom: 0;
    font-size: 0.95rem;
    white-space: normal;
    word-break: break-word;
  }

  /* tags: allow wrap and use a horizontal scroller if overflow */
  .product_options_container .col-5 {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .product_options_container .col-5 .tag-ui {
    font-size: 0.82rem;
    padding: 0.26rem 0.5rem;
    margin-right: 0.4rem;
    max-width: none;
  }

  /* actions: stack buttons and make them full-width for tap targets */
  .product_options_container .col-4 {
    width: 100%;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .product_options_container .col-4 .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.42rem 0.6rem;
    font-size: 0.88rem;
  }

  /* when buttons are too many, allow them to wrap under each other */
  .product_options_container .col-4 {
    flex-wrap: wrap;
  }
  .product_options_container .col-4 .btn + .btn {
    margin-left: 0;
  }

  /* visual separation between option rows on mobile */
  .product_options_container .row.mb-2 + .row.mb-2 {
    margin-top: 6px;
  }
}

/* Optional: subtle focus states for keyboard users */
.product_options_container .btn:focus {
  box-shadow: 0 0 0 3px rgba(100,120,160,0.12);
  outline: none;
}

/* Media dropzone styles (matches your label classes exactly) */
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.25rem;
  min-height: 150px;
  cursor: pointer;
  text-align: center;
  user-select: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .08s ease;
  border-style: dashed;
  border-width: 2px;
  /* fallback palette if your theme variables are absent */
  --u-bg: #f8faf9;
  --u-border: rgba(0,0,0,0.08);
  --u-primary: #0d6efd;
  --u-text: #374151;
  background: var(--u-bg);
  border-color: var(--u-border);
  color: var(--u-text);
  position: relative;
  overflow: hidden;
}

/* icon inside */
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative .bi {
  font-size: 2.0rem;
  line-height: 1;
  display: block;
}

/* title text */
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative strong {
  display: block;
  font-size: .95rem;
  letter-spacing: .2px;
}

/* subtle hover & press feedback */
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* drag active: your inline handlers add .border-primary — make that obvious */
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative.border-primary {
  border-color: var(--u-primary) !important;
  box-shadow: 0 0 0 6px rgba(13,110,253,0.08);
  background: linear-gradient(180deg, rgba(13,110,253,0.02), transparent);
}

/* focus-within for keyboard + accessibility */
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative:focus-within {
  outline: none;
  border-color: rgba(13,110,253,0.9);
  box-shadow: 0 0 0 6px rgba(13,110,253,0.06);
}

/* keep file input hidden but keyboard accessible */
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* small helper to show a hint when hovering on desktop */
@media (hover: hover) and (pointer: fine) {
  label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative::after {
    content: "Click or drop files here";
    font-size: .78rem;
    color: rgba(55,65,81,0.65);
    position: absolute;
    bottom: 8px;
    left: 12px;
    right: 12px;
    text-align: center;
    pointer-events: none;
  }
}

/* small screens: slightly smaller paddings and icon */
@media (max-width: 576px) {
  label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative {
    padding: 0.9rem;
    min-height: 120px;
  }
  label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative .bi {
    font-size: 1.6rem;
  }
  label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative::after {
    bottom: 6px;
    font-size: .72rem;
  }
}

/* disabled / loading state — if you add a class like .disabled while uploading */
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative[aria-busy="true"],
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative.disabled {
  opacity: 0.7;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Dark mode overrides (Bootstrap data-bs-theme) */
[data-bs-theme="dark"] label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative {
  --u-bg: #141414;
  --u-border: rgba(255,255,255,0.06);
  --u-primary: #66a8ff;
  --u-text: #e6dcc6;
  background: #1a1a1a;
  border-color: var(--u-border);
  color: var(--u-text);
}
[data-bs-theme="dark"] label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative.border-primary {
  border-color: var(--u-primary) !important;
  box-shadow: 0 0 0 6px rgba(102,168,255,0.06);
  background: linear-gradient(180deg, rgba(102,168,255,0.02), transparent);
}

/* optional: style the small glyph inside the label wrapper if using .text-primary wrapper */
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative .text-primary {
  color: var(--u-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* make sure the label content wraps nicely on narrow screens */
label.w-100.border-2.card.shadow-sm.rounded.text-center.bg-tertiary.position-relative strong {
  word-break: break-word;
}

@media (max-width: 576px) {
  .media-drop-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .media-drop-row > .col-md-6 {
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .media-drop-row > .col-md-6 > label {
    padding: 10px;
    min-height: 100px;
    gap: .35rem;
  }
  .media-drop-row > .col-md-6 > label .bi { font-size: 1.4rem; }
  .media-drop-row > .col-md-6 > label strong { font-size: .88rem; }
  .media-drop-row > .col-md-6 > label::after { font-size: .68rem; }
}



/* full screen overlay */
.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* semi-transparent dark */
    z-index: 9998; /* sits below modal */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* modal card */
.bg-modal {
    background: #fdf6e3; /* warm paper color */
    /* border: 1px solid #d2b48c; */
    border-radius: 6px;
    padding: 20px 25px;
    box-shadow: 4px 6px 15px rgba(0, 0, 0, 0.3);
    color: #4b3d2a;
    position: relative; /* relative to itself */
    z-index: 9999;
    /* width: 500px; */
    max-width: 90%;
    overflow: hidden;
    max-height: calc(100vh - 48px); 
  overflow-y: auto;
    animation: popupEffect 0.3s ease-out forwards;
}

/* subtle paper texture using gradient */
.bg-modal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        rgba(210, 180, 140, 0.1) 0px,
        rgba(210, 180, 140, 0.1) 1px,
        transparent 1px,
        transparent 8px
    );
    opacity: 0.2;
    pointer-events: none;
}

/* slight worn edges effect */
.bg-modal::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* border: 2px dashed rgba(139, 69, 19, 0.3); */
    border-radius: 6px;
    pointer-events: none;
}

/* popup animation */
@keyframes popupEffect {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* wishlist css */
button.wishlistToggleBtn i {position: relative; top: 1px !important;}