/* Deva bd Furniture — mobile responsive safety layer
   Loaded after page CSS. Presentation-only rules; no API/data behavior changes. */

html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
a,
input,
select,
textarea {
  max-width: 100%;
}

@media (max-width: 767px) {
  body {
    min-width: 0;
    padding-top: 58px !important;
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }

  body.ks-drawer-open,
  body.ks-modal-open {
    overflow: hidden;
  }

  /* Header: keep all requested actions on one line at 320px. */
  .navbar,
  .nav-inner {
    width: 100%;
    min-width: 0;
  }

  .nav-inner {
    height: 58px !important;
    padding: 0 8px !important;
    gap: 2px !important;
  }

  .nav-left-actions,
  .nav-right {
    min-width: 0;
    flex: 0 0 auto;
    gap: 0 !important;
  }

  .nav-ham-left,
  .nav-search-icon,
  .nav-icon-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }

  .nav-ham-left span {
    width: 22px;
  }

  .nav-logo-center {
    left: 50% !important;
    max-width: 42vw;
    min-width: 0;
    gap: 0 !important;
  }

  .nav-logo-center .brand-logo-img {
    width: clamp(108px, 35vw, 150px) !important;
    max-width: 42vw !important;
    max-height: 44px !important;
    height: auto !important;
  }

  /* Two compact rows within the existing right action area keep the centered
     logo and all four header actions clear, including at 320px. */
  .navbar .nav-right {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: 22px 32px;
    height: 54px;
    align-items: center;
    justify-items: center;
  }

  .navbar .nav-right .ks-language-switcher-header-mobile {
    display: inline-flex !important;
    grid-column: 1 / -1;
    grid-row: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 88px;
    height: 22px;
    margin: 0;
    padding: 1px;
    border: 1px solid var(--gold, #C7A74D);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
  }

  .navbar .ks-language-switcher-header-mobile button {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    min-height: 18px;
    height: 18px;
    padding: 0 3px;
    border: 0;
    border-radius: 10px;
    font-size: 10px;
    line-height: 18px;
    white-space: nowrap;
    color: #171717;
  }

  .navbar .nav-right .nav-icon-btn {
    grid-row: 2;
    height: 32px !important;
    min-height: 32px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  .navbar .ks-language-switcher-desktop {
    display: none !important;
  }

  .nav-icon-btn-mobile-hide {
    display: flex !important;
  }

  .nav-icon-btn svg {
    width: 21px !important;
    height: 21px !important;
  }

  #mobileSearchBar {
    width: 100% !important;
    padding: 8px 10px !important;
  }

  #mobileSearchBar form {
    width: 100% !important;
    min-height: 44px;
  }

  #mobileSearchBar input,
  .nav-search input,
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .drawer {
    width: min(92vw, 360px) !important;
    max-width: 100% !important;
  }

  .drawer-head {
    padding: 12px 14px !important;
  }

  .drawer-brand-logo {
    width: min(205px, 67vw) !important;
  }

  /* Shared page containment. */
  main,
  header,
  footer,
  section,
  article,
  .page-content,
  .page-header,
  .wrap,
  .cart-layout,
  .checkout-layout,
  .shop-layout,
  .products-area,
  .auth-wrap,
  .oc-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .page-header {
    padding: 14px 12px !important;
    gap: 8px;
  }

  .page-header-left,
  .page-header-left h1,
  .breadcrumb {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .breadcrumb {
    flex-wrap: wrap;
  }

  /* Home / hero / search. */
  .hero,
  .shop-hero,
  .banner,
  .banner-track,
  .order-banner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body[data-popup-page="home"] .hero {
    border-radius: 0 0 22px 22px;
  }

  .slide {
    min-width: 100% !important;
    max-width: 100%;
    min-height: 250px !important;
    padding: 32px 18px !important;
  }

  .slide-content,
  .slide h1,
  .slide p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .slide h1 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }

  .slide-btns,
  .btn-row {
    flex-wrap: wrap;
  }

  .slide-btns > button,
  .slide-btns > a {
    min-height: 44px;
  }

  .home-search-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: -24px !important;
    padding: 0 10px !important;
  }

  .home-search,
  .home-search-wrap .home-search {
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 7px 8px 7px 12px !important;
  }

  .home-search input {
    min-width: 0 !important;
    width: 100% !important;
  }

  .home-search button {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 44px !important;
  }

  .trust,
  .trust-inner,
  .cat-section,
  .home-featured,
  .home-popular-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .trust {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .trust-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 8px 3px !important;
  }

  .trust-item {
    min-width: 0 !important;
    padding: 4px 3px !important;
    gap: 4px !important;
  }

  .trust-t {
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: .58rem !important;
    line-height: 1.2;
  }

  .cats,
  .filter-tabs,
  .tab-nav,
  .detail-tabs {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .cats,
  .filter-tabs,
  .tab-nav {
    flex-wrap: nowrap !important;
  }

  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }

  .featured-card,
  .featured-card-0 {
    min-width: 0 !important;
    min-height: 100px !important;
    padding: 12px !important;
  }

  .featured-card span,
  .featured-card-0 span {
    max-width: 80% !important;
    overflow-wrap: anywhere;
  }

  /* Product grids: remove the homepage negative-margin overflow. */
  .pgrid,
  body[data-popup-page="home"] .home-popular-shell .pgrid,
  .related-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .pcard,
  .related-grid .pcard {
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
  }

  .pthumb,
  .related-grid .pthumb {
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 1 / 1 !important;
    border-width: 4px !important;
  }

  .pinfo,
  .related-grid .pinfo,
  body[data-popup-page="home"] .home-popular-shell .pinfo {
    min-width: 0 !important;
    padding: 9px 8px 10px !important;
  }

  .pname,
  .home-card-meta,
  .pprice,
  .pcur,
  .pold,
  .pbadge {
    min-width: 0 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .pname {
    font-size: .82rem !important;
    line-height: 1.28 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  .home-card-meta {
    flex-wrap: wrap !important;
    white-space: normal !important;
    line-height: 1.2;
  }

  .pprice {
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 7px !important;
  }

  .pbtn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 9px 38px 9px 6px !important;
  }

  .pbtn-text {
    white-space: normal !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .pbtn-cart-icon {
    width: 32px !important;
    height: 32px !important;
    right: 4px !important;
  }

  /* Shop controls. */
  .shop-hero {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .shop-hero .shop-search,
  .shop-hero .search-box {
    width: 100% !important;
    min-width: 0 !important;
  }

  .shop-hero .shop-search {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .shop-hero .search-box input {
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
  }

  .shop-toolbar {
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .result-count,
  .toolbar-right {
    min-width: 0 !important;
    width: 100% !important;
  }

  .toolbar-right {
    justify-content: stretch !important;
  }

  .sort-select,
  .view-btn,
  .mobile-filter-btn {
    min-height: 44px !important;
  }

  .sort-select {
    flex: 1 1 auto;
    min-width: 0 !important;
  }

  .shop-layout,
  .products-area {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .filter-drawer {
    width: min(92vw, 360px) !important;
    max-width: 100% !important;
  }

  /* Product details. */
  .product-layout,
  .product-main,
  .product-gallery,
  .product-info,
  .detail-tabs,
  .description-canvas-stage {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .main-image {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    font-size: clamp(4rem, 25vw, 8rem) !important;
  }

  .main-product-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .thumb-row {
    max-width: 100% !important;
    overflow-x: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .thumb {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
  }

  .price-stock-line,
  .delivery-info .di-row,
  .variant-options,
  .product-actions,
  .sticky-actions,
  .product-voucher {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .product-title,
  .product-short-desc,
  .delivery-info,
  .warranty-details-content {
    overflow-wrap: anywhere;
  }

  .sticky-btn,
  .sticky-btn-g,
  .btn-buy,
  .btn-cart,
  .btn-wa {
    min-height: 44px !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .color-vopt {
    max-width: 100%;
  }

  /* Cart / checkout / order. */
  .cart-layout,
  .checkout-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .cart-left,
  .cart-right,
  .checkout-left,
  .checkout-right,
  .co-card,
  .order-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .cart-item {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ci-thumb {
    width: 86px !important;
    max-width: 86px !important;
  }

  .ci-body,
  .ci-footer,
  .ci-actions {
    min-width: 0 !important;
  }

  .ci-footer,
  .ci-actions {
    flex-wrap: wrap !important;
  }

  .ci-actions {
    grid-column: 1 / -1;
  }

  .ci-name,
  .ci-wood,
  .ci-total,
  .item-name,
  .item-info,
  .os-name,
  .os-price {
    overflow-wrap: anywhere;
  }

  .cart-drawer {
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
  }

  .cart-body,
  .cart-foot {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .checkout-page .checkout-right {
    order: -1 !important;
  }

  .checkout-page .checkout-layout,
  .checkout-page .checkout-left,
  .checkout-page .checkout-right,
  .checkout-page .checkout-section-card,
  .checkout-page .co-card-body,
  .checkout-page .co-card-head,
  .checkout-page .os-body,
  .checkout-page .os-totals {
    width: 100% !important;
    min-width: 0 !important;
  }

  .checkout-page .form-row,
  .checkout-page .area-boxes,
  .checkout-page .cust-grid {
    grid-template-columns: 1fr !important;
  }

  /* Delivery choices stay compact and side-by-side on phones.  This targeted
     rule intentionally does not change the payment-method grid. */
  .checkout-page #deliveryAreaBoxes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .checkout-page #deliveryAreaBoxes .area-box {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 5px 4px !important;
    gap: 1px !important;
    border-radius: 9px !important;
  }

  .checkout-page #deliveryAreaBoxes .area-emoji .ui-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .checkout-page #deliveryAreaBoxes .area-title {
    font-size: .76rem !important;
    line-height: 1.1 !important;
  }

  .checkout-page #deliveryAreaBoxes .area-sub {
    font-size: .58rem !important;
    line-height: 1.1 !important;
  }

  .checkout-page .form-group,
  .checkout-page .form-group input,
  .checkout-page .form-group select,
  .checkout-page .form-group textarea,
  .checkout-page .checkout-coupon-row,
  .checkout-page .checkout-coupon-row input,
  .checkout-page .coupon-row,
  .checkout-page .coupon-row input,
  .checkout-page .order-summary,
  .checkout-page .os-item,
  .checkout-page .os-main,
  .checkout-page .os-side {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .checkout-page .checkout-coupon-row,
  .checkout-page .coupon-row {
    flex-wrap: wrap !important;
  }

  .checkout-page .checkout-coupon-row input,
  .checkout-page .coupon-row input {
    flex: 1 1 150px !important;
    width: auto !important;
  }

  .checkout-page .checkout-coupon-row button,
  .checkout-page .coupon-row button {
    min-height: 44px !important;
  }

  .checkout-page .checkout-progress {
    width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .checkout-step,
  .checkout-step-line {
    min-width: 0 !important;
  }

  .checkout-step-line {
    flex: 1 1 auto !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  .checkout-page .place-order-btn {
    left: 10px !important;
    right: 10px !important;
    width: calc(100% - 20px) !important;
    min-height: 50px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }

  /* Specification/receipt tables scroll inside their own box only. */
  table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
  }

  .track-search,
  .order-card-head,
  .order-status-wrap,
  .history-head,
  .history-body,
  .complaint-card-head,
  .complaint-actions {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .track-search {
    grid-template-columns: 1fr !important;
  }

  .track-btn,
  .track-input,
  .track-result-action,
  .cancel-order-btn,
  .complaint-btn {
    width: 100% !important;
    min-height: 44px !important;
  }

  .order-card-head,
  .history-head,
  .history-body {
    align-items: flex-start !important;
  }

  .order-id,
  .history-id,
  .history-date,
  .order-date,
  .order-warranty-product,
  .complaint-id,
  .complaint-message,
  .complaint-text {
    overflow-wrap: anywhere !important;
  }

  /* Profile / authentication / confirmation. */
  .profile-top {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .profile-meta {
    min-width: 0 !important;
    flex: 1 1 170px !important;
  }

  .profile-name,
  .profile-phone,
  .profile-id-line {
    overflow-wrap: anywhere;
  }

  .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tab-nav {
    justify-content: flex-start !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .tab {
    flex: 0 0 auto !important;
    min-height: 44px !important;
  }

  .form-grid,
  .addr-grid,
  .cust-grid {
    grid-template-columns: 1fr !important;
  }

  .auth-wrap {
    padding: 20px 10px 90px !important;
  }

  .auth-card,
  .auth-body,
  .auth-tabs,
  .auth-form,
  .f-field,
  .f-field input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .auth-body {
    padding: 16px 12px 20px !important;
  }

  .auth-tab,
  .btn-auth {
    min-height: 44px !important;
  }

  .oc-wrap {
    padding: 12px 10px 90px !important;
  }

  .receipt,
  .receipt-head,
  .receipt-body,
  .receipt-meta,
  .oc-actions,
  .oc-btn {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .receipt-head,
  .oc-actions {
    flex-wrap: wrap !important;
  }

  .receipt-meta,
  .oc-btn {
    overflow-wrap: anywhere;
  }

  .oc-btn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center;
  }

  /* Modals, drawers, toasts and floating contact controls. */
  .modal-overlay,
  .modal-ov,
  .confirm-ov,
  .success-ov,
  .complaint-modal,
  .voucher-modal,
  .banner-popup,
  .voucher-image-popup,
  .a2hs-modal-ov {
    padding: 8px !important;
  }

  .modal-box,
  .confirm-box,
  .complaint-dialog,
  .voucher-modal-card,
  .a2hs-modal,
  .banner-popup-card,
  .voucher-image-popup-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    min-width: 0 !important;
  }

  .modal-body,
  .confirm-box,
  .complaint-dialog,
  .voucher-modal-card,
  .a2hs-modal {
    overflow-y: auto;
  }

  .toast,
  #toastArea {
    max-width: calc(100vw - 24px) !important;
  }

  .toast {
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }

  .ks-contact-bubbles,
  .home-chat-button {
    right: 10px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }

  .ks-contact-bubble,
  .ks-contact-toggle {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  .home-chat-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .ks-bottom-nav,
  .bottom-nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .ks-bnav-item,
  .bnav-item {
    min-width: 0 !important;
    min-height: 44px !important;
    overflow: hidden;
  }

  .ks-bnav-label,
  .bnav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .nav-inner,
  .shop-layout,
  .cart-layout,
  .checkout-layout,
  .page-content {
    min-width: 0;
    max-width: 100%;
  }

  .products-area,
  .checkout-layout,
  .cart-layout {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 390px) {
  .nav-inner {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .nav-ham-left,
  .nav-search-icon,
  .nav-icon-btn {
    width: 42px !important;
    min-width: 42px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .nav-logo-center .brand-logo-img {
    width: 106px !important;
    max-width: 39vw !important;
  }

  .pname {
    font-size: .78rem !important;
  }

  .pcur {
    font-size: .86rem !important;
  }

  .pbtn {
    font-size: .68rem !important;
  }
}

@media (max-width: 360px) {
  .nav-ham-left,
  .nav-search-icon,
  .nav-icon-btn {
    width: 40px !important;
    min-width: 40px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .nav-logo-center .brand-logo-img {
    width: 100px !important;
  }

  .pgrid,
  body[data-popup-page="home"] .home-popular-shell .pgrid,
  .related-grid {
    gap: 6px !important;
  }

  .pinfo,
  .related-grid .pinfo,
  body[data-popup-page="home"] .home-popular-shell .pinfo {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* Product cards should use the full mobile content width. Keep headings
   padded, but remove the homepage/shop product-section side gutters. */
@media (max-width: 767px) {
  body[data-popup-page="home"] .home-popular-shell {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-popup-page="home"] .home-popular-shell > .home-section-head {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body[data-popup-page="home"] .home-popular-shell #prodSections,
  body[data-popup-page="home"] .home-popular-shell #prodSections > .prod-sec,
  body[data-popup-page="home"] .home-popular-shell #prodSections .pgrid {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .shop-layout {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .shop-layout .products-area {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .shop-layout .products-area .pgrid {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}

/* Explicit header breakpoint pairing prevents duplicate language controls. */
@media (min-width: 768px) {
  .navbar .nav-right .ks-language-switcher-desktop { display: inline-flex; }
  .navbar .nav-right .ks-language-switcher-header-mobile { display: none !important; }
}