@media (max-width: 768px) {

    /* art page css */

    .cartpage_block .product-info {
      flex-direction: column;
      align-items: flex-start;
    }

    .cartpage_block .product-info img {
      width: 100%;
      max-width: 100px;
    }

    .cartpage_block thead {
      display: none;
    }

    .cartpage_block table,
    .cartpage_block tbody,
    .cartpage_block tr,
    .cartpage_block td {
      display: block;
      width: 100%;
    }

    .cartpage_block tbody tr {
      margin-bottom: 20px;
    }

    .cartpage_block tbody td {
      border: none;
      display: flex;
      justify-content: space-between;
    }

    /* checkout page css */
    .checkout_pblock .section-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .checkout_pblock .checkout-card {
      padding: 20px;
    }

    /* help page css */
    .help_pblock .help-card {
      flex-direction: column;
      text-align: center;
    }

    .help_pblock .help-img {
      margin-top: 15px;
    }

    .help_pblock .help-text {
      margin-right: 0;
    }

    /* store detail page css */
    .storedetail_pblock .store-info {
      flex-direction: column;
      align-items: flex-start;
    }

    .storedetail_pblock .store-info>div {
      width: 100%;
      margin-bottom: 10px;
    }

    .storedetail_pblock .store-info h5 {
      font-size: 18px;
    }

    .storedetail_pblock .store-header img {
      height: 220px;
    }

  }


  @media (max-width: 576px) {

    /* Order Summary Page css */
    .summary_pblock .info-row div {
      width: 100%;
    }

    .summary_pblock .shop-info {
      flex-direction: column;
      align-items: flex-start;
    }

    .summary_pblock .shop-info img {
      width: 100%;
      max-width: 100px;
      height: auto;
    }

    /* payment page css */
    .payment_pblock .payment-section {
      padding: 25px 18px;
    }

    .btn_w {
      width: auto;
    }

    /* edite page css */
    .eprofile_pblock .profile-img img {
      width: 100px;
      height: 100px;
    }

    /* delivery time page css */
    .deliverytime_block .calendar-table td {
      width: 35px;
      height: 35px;
      font-size: 0.9rem;
    }

    /* notification page css */
    .notification_pblock .notification-item {
      flex-direction: column;
      align-items: flex-start;
    }

    .notification_pblock .time {
      margin-top: 6px;
    }

    /* tracking page css */

    .tracking_pblock .driver-details img {
      width: 42px;
      height: 42px;
    }

    .tracking_pblock .shipping-card {
      padding: 20px;
    }

    .tracking_pblock .driver-text h6 {
      font-size: 14px;
    }

    .tracking_pblock .info-item {
      font-size: 13px;
    }
  }

  /* ==========================================================================
     PREMIUM MOBILE & TABLET UX OVERRIDES
     ========================================================================== */

  @media (max-width: 991.98px) {
    /* Mobile Drawer/Collapse Navbar Styling */
    .navbar-collapse {
        background-color: #ffffff !important;
        border-radius: 8px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.08);
        padding: 15px 20px !important;
        margin-top: 15px;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .navbar-collapse .nav-link {
        padding: 10px 12px !important;
        border-bottom: 1px solid rgba(0,0,0,0.03);
        display: block;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: #333333 !important;
        letter-spacing: 0.5px;
    }
    .navbar-collapse .nav-link:last-child {
        border-bottom: none;
    }
    .navbar-collapse .nav-link.active {
        color: var(--primary-maroon) !important;
    }
  }

  @media (max-width: 768px) {
    /* Glassmorphism Hero Banner Card */
    .hero-banner {
        min-height: 420px !important;
        background-position: center center !important;
    }
    .hero-overlay-card {
        background: rgba(255, 255, 255, 0.88) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        border-radius: 12px !important;
        padding: 35px 25px !important;
        max-width: 90% !important;
        width: 100% !important;
        box-shadow: 0 10px 30px rgba(128, 0, 0, 0.05) !important;
    }
    .hero-overlay-card .hero-title {
        font-size: 1.8rem !important;
        margin-bottom: 20px !important;
    }
    .hero-overlay-card .hero-badge {
        font-size: 0.75rem !important;
        letter-spacing: 2.5px !important;
        margin-bottom: 12px !important;
    }
    .hero-overlay-card .btn-hero-cta {
        font-size: 0.78rem !important;
        padding: 10px 30px !important;
    }

    /* Typography scaling for Playfair headings */
    .serif-font {
        font-size: 1.6rem !important;
    }
    h1.serif-font, h2.serif-font {
        font-size: 1.8rem !important;
    }
    h3.serif-font {
        font-size: 1.45rem !important;
    }

    /* Product card details sizing */
    .card-body {
        padding: 12px !important;
    }
    .card-body h5 {
        font-size: 0.85rem !important;
        margin-bottom: 5px !important;
    }
    .card-body span {
        font-size: 0.8rem !important;
    }
    .wishlist-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 10px !important;
    }
    .wishlist-btn i {
        font-size: 0.8rem !important;
    }
  }

  @media (max-width: 576px) {
    /* Shop By Collections Circle Scroll Sizing */
    .collection-scroll-track > div {
        width: 100px !important;
    }
    .collection-circle-border {
        width: 85px !important;
        height: 85px !important;
        margin-bottom: 8px !important;
    }
    .collection-scroll-track h5 {
        font-size: 0.72rem !important;
    }

    /* Layout Paddings and Margins scaling */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    .mb-5 {
        margin-bottom: 2.2rem !important;
    }
    .my-5 {
        margin-top: 2.2rem !important;
        margin-bottom: 2.2rem !important;
    }

    /* Video Carousel mobile sizing */
    .video-container-card {
        width: 145px !important;
        height: 230px !important;
        border-radius: 8px !important;
    }
    .video-container-card h6 {
        font-size: 0.78rem !important;
        margin-bottom: 0px !important;
    }
    .video-container-card span {
        font-size: 0.72rem !important;
    }
    .video-container-card .badge {
        font-size: 0.58rem !important;
        padding: 3px 6px !important;
        margin-bottom: 4px !important;
    }
  }