/* ============================================================
   RESPONSIVE — ≤ 992px (Tablet & Mobile)
============================================================ */
@media (max-width: 992px) {

  /* ===============================
     Variables
     =============================== */
  :root {
    --cover-height: 200px;
  }

  /* ===============================
     Grid helpers
     =============================== */
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* ===============================
     Dashboard / Preview layout
     =============================== */
  .preview-wrapper .preview-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .card-body.preview-card-body {
    padding: 0 !important;
  }


  .preview-footer-floating.text-center {
    padding: 20px;
  }

  .preview-bio {
    font-size: 10px;
    color: #666;
    padding: 20px;
  }

  .preview-wrapper {
    overflow: hidden !important;
  }

  /* ===============================
     Cover preview
     =============================== */
  .cover-preview-wrapper {
    border-radius: 12px 12px 0 0;
    background: #f1f1f1;
  }

  .cover-img-preview,
  .cover-image-unified {
    width: 100%;
    object-fit: cover;
    display: block;
  }

  /* ===============================
     Preview icon grid overrides
     =============================== */
  .preview .grid-icons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px 6px !important;
    padding: 0 !important;
    justify-items: center;
  }

  .preview .icon-label {
    font-size: 12px !important;
  }

  /* FORCE 4 icons per row inside dashboard preview iframe */
  .preview iframe .grid-icons,
  .preview .profile-preview-iframe .grid-icons,
  .preview-card .grid-icons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* ===============================
     Preview mode – smaller icons
     =============================== */
  body.is-preview.light .preview-card .icon-pill {
    width: 70px;
    height: 70px;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
  }

  body.is-preview.dark .preview-card .icon-pill {
    width: 60px;
    height: 60px;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
  }
  
    body.is-preview.dark .bg-white {
 background:#212529 !important;
  }


  .preview-card .icon-pill i {
    font-size: 20px !important;
  }

  .preview-card .icon-label {
    font-size: 11px !important;
    margin-top: 4px;
  }

  /* ===============================
     Buttons
     =============================== */
  .view-page-mobile-btn {
    padding: 4px 10px;
  }

  button#openCartBtnMobile {
    background: none !important;
    border: 0;
  }

  /* ===============================
     Typography & branding
     =============================== */
  h1.page-title.mb-1 {
    font-size: 24px;
  }

  img.logo-img {
    height: 30px !important;
  }

  /* ===============================
     Navbar
     =============================== */
  .navbar .btn.btn-warning {
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 50px;
    transition: all 0.3s ease;
  }

  .navbar .btn.btn-warning:hover {
    background: #ffe27a !important;
    color: #000 !important;
    transform: translateY(-1px);
  }

  /* ===============================
     Hero section
     =============================== */
  .hero-text {
    margin-top: -64% !important;
  }

  .hero-image {
    width: 80% !important;
    margin-top: -6% !important;
  }

  /* ===============================
     Header visibility
     =============================== */
  .desktop-header {
    display: none !important;
  }

  .mobile-header {
    display: flex !important;
  }
}

/* ============================================================
   RESPONSIVE — ≤ 768px (Mobile / Analytics / Tabs)
============================================================ */
@media (max-width: 768px) {

  /* ===============================
     Footer
     =============================== */
  .main-footer .container {
    flex-direction: column !important;
    text-align: center !important;
  }

  .main-footer .footer-left,
  .main-footer .footer-right {
    width: 100%;
    text-align: center !important;
    margin: 5px 0;
  }

  .main-footer .footer-right a {
    margin-right: 10px !important;
  }

  /* ===============================
     Preview layout
     =============================== */
  .preview-inner {
    padding: 8px;
  }

  .preview .icon-label {
    font-size: 11px !important;
  }

  /* ===============================
     Logo
     =============================== */
  img.logo-img {
    height: 30px !important;
  }

  /* ===============================
     Flex utilities
     =============================== */
  .d-flex.gap-3.flex-wrap {
    justify-content: center;
    text-align: center;
  }

  /* ===============================
     Tabs / Filters
     =============================== */
  .it-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .it-tabs h3 {
    order: -1;
    margin-bottom: 0;
    width: 100%;
  }

  .it-tabs .d-flex {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .it-tabs .d-flex select,
  .it-tabs .d-flex input,
  .it-tabs .d-flex button {
    flex: 1;
    width: 100%;
  }

  .it-tabs .d-flex select {
    max-width: 40%;
  }

  .it-tabs .d-flex button {
    max-width: 30%;
    white-space: nowrap;
  }

  /* ===============================
     Range input
     =============================== */
  input[type="range"] {
    height: 8px;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -10px;
  }

  input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
  }
}