/* ============================================================
   Advice-style compact shell
   - ล็อกความกว้างเนื้อหาไว้ตรงกลาง (~1877px = 1632 + 15%)
   - จอใหญ่ / ซูมออก: มีขอบขาวข้าง ๆ ไม่ยืดการ์ดเต็มจอ
   - ซูมเข้า: ยังคงรูปทรงกะทัดรัด ไม่เพี้ยน
   ============================================================ */

:root {
  --dcsc-shell-max: 1877px;
  --dcsc-shell-pad: 24px;
  --dcsc-shell-width: min(calc(100% - (var(--dcsc-shell-pad) * 2)), var(--dcsc-shell-max));
}

@media (min-width: 992px) {
  /* --- Inner chrome: header / topbar / nav --- */
  html body .top-bar .container.top-bar-full-width,
  html body .top-bar .top-bar-full-width,
  html body .main-header-wrapper-v2 .container.main-header-full-width,
  html body .main-header-wrapper-v2 .main-header-full-width,
  html body .main-header-wrapper-v2 .header-layout-v2,
  html body .header-layout-v2,
  html body nav.main-nav .container.main-nav-full-width,
  html body nav.main-nav .main-nav-full-width,
  html body nav.main-nav #main-nav-container,
  html body nav#main-nav #main-nav-container.container.main-nav-full-width,
  html body #main-nav-container.container.main-nav-full-width,
  html body #main-nav-container {
    width: var(--dcsc-shell-width) !important;
    max-width: var(--dcsc-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* --- Banner slider = เต็มจอ / Category ยังอยู่ใน shell --- */
  html body .top-hero-row,
  html body .top-hero-row.pro-hero-shell,
  html body #top-hero-row {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body .top-hero-row .hero-section,
  html body .top-hero-row .hero-section-wrapper,
  html body .top-hero-row #main-hero-slider,
  html body .top-hero-row .main-hero-slider-container,
  html body .top-hero-row .swiper-slide,
  html body .top-hero-row .swiper-slide a,
  html body .top-hero-row .swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  html body #category-section,
  html body .category-section {
    width: var(--dcsc-shell-width) !important;
    max-width: var(--dcsc-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* --- Main row: left ads + content --- */
  html body .below-main-row {
    width: var(--dcsc-shell-width) !important;
    max-width: var(--dcsc-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }

  html body #main-content,
  html body #dynamic-content-wrapper,
  html body #dynamic-content-wrapper > .homepage-section,
  html body #dynamic-content-wrapper > section,
  html body #dynamic-content-wrapper > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* เมื่อมีแถบโฆษณาซ้าย ให้เนื้อหาหลักกินพื้นที่ที่เหลือ */
  html body .below-main-row > #main-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  html body .below-main-row > #left-ads-sidebar,
  html body .below-main-row > .ads-left-sidebar {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
  }

  /* --- Reviews / footer inner --- */
  html body .reviews-shell,
  html body .pro-reviews-shell,
  html body footer.main-footer .container,
  html body footer.main-footer .footer-rebuild__inner,
  html body .footer-rebuild .container {
    width: var(--dcsc-shell-width) !important;
    max-width: var(--dcsc-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* กริดสินค้าคงความหนาแน่น 5 คอลัมน์ภายใน shell */
  html body.desktop-locked .product-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* จอแคบกว่า shell: ใช้เต็มความกว้าง + padding เล็กน้อย */
@media (min-width: 992px) and (max-width: 1680px) {
  :root {
    --dcsc-shell-pad: 16px;
  }
}

/* มือถือ/แท็บเล็ต: ไม่บังคับ shell */
@media (max-width: 991.98px) {
  html body .below-main-row,
  html body .top-hero-row,
  html body #main-content,
  html body #dynamic-content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}