
/* =========================================================
   DHUMS FRONTEND FINAL UI SYSTEM — FOOTER AS MASTER REFERENCE
   2026-08-25
   Applies to BN + EN public frontend on every page.
   Footer, header, main content and page shells share one geometry.
========================================================= */

:root{
  --dh-final-page-width:1200px;
  --dh-final-gutter:20px;
  --dh-final-radius:8px;
  --dh-final-border:#e5e7eb;
  --dh-final-row-height:52px;
  --dh-final-control-height:40px;
}

/* 1. PAGE WIDTH — one master content edge */
.dhums-main > .dhums-container,
.dhums-category-page > .dhums-container,
.dhums-search-page > .dhums-container,
.dhums-single-page > .dhums-container,
.dhums-news-page > .dhums-container,
.dhums-static-page > .dhums-static-container,
.dhums-footer-grocery > .dhums-container,
.dhums-brand-inner,
.dhums-trending .dhums-container{
  width:min(var(--dh-final-page-width),calc(100% - (var(--dh-final-gutter) * 2))) !important;
  max-width:var(--dh-final-page-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Footer is full-bleed; only its inner content follows the page grid. */
.dhums-footer-grocery{
  width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
.dhums-footer-grocery > .dhums-container{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* 2. HEADING ALIGNMENT + 3. HEADING MARGIN/PADDING */
.dhums-footer-grocery .dhums-footer-grid{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:40px 0 32px !important;
  display:grid !important;
  align-items:start !important;
  box-sizing:border-box !important;
}
.dhums-footer-grocery .dhums-footer-col,
.dhums-footer-grocery .dhums-footer-brand{
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  align-self:start !important;
}
.dhums-footer-grocery .dhums-footer-col h3{
  margin:0 0 12px !important;
  padding:0 !important;
  min-height:21px !important;
  display:flex !important;
  align-items:center !important;
  text-align:left !important;
  color:#202124 !important;
  font-size:14px !important;
  line-height:21px !important;
  font-weight:700 !important;
}
.dhums-footer-grocery .dhums-footer-col ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.dhums-footer-grocery .dhums-footer-col li{
  margin:0 !important;
  padding:0 !important;
  min-height:32px !important;
  display:flex !important;
  align-items:center !important;
}
.dhums-footer-grocery .dhums-footer-col li a{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:32px !important;
  margin:0 !important;
  padding:4px 0 !important;
  color:#667085 !important;
  font-size:13px !important;
  line-height:22px !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
}

/* Brand heading/logo follows the same left edge and vertical rhythm. */
.dhums-footer-grocery .dhums-footer-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:auto !important;
  max-width:100% !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}
.dhums-footer-grocery .dhums-footer-brand > p{
  margin:14px 0 0 !important;
  padding:0 !important;
}
.dhums-footer-grocery .dhums-footer-brand .footer-contact{
  margin:8px 0 0 !important;
  padding:0 !important;
}

/* 4. TABLE GEOMETRY — any public/frontend table uses the same rhythm. */
.dhums-main table,
.dhums-static-page table,
.dhums-footer-grocery table{
  width:100% !important;
  max-width:100% !important;
  border-collapse:collapse !important;
  border-spacing:0 !important;
  table-layout:auto !important;
  box-sizing:border-box !important;
}
.dhums-main table th,
.dhums-static-page table th,
.dhums-footer-grocery table th{
  height:44px !important;
  padding:10px 14px !important;
  vertical-align:middle !important;
  text-align:left !important;
  font-weight:700 !important;
  line-height:20px !important;
  white-space:nowrap !important;
}
.dhums-main table td,
.dhums-static-page table td,
.dhums-footer-grocery table td{
  min-height:var(--dh-final-row-height) !important;
  padding:10px 14px !important;
  vertical-align:middle !important;
  line-height:20px !important;
  box-sizing:border-box !important;
}

/* 5. ROW HEIGHT — footer links and common action rows stay stable. */
.dhums-footer-grocery .dhums-footer-bottom{
  width:100% !important;
  max-width:none !important;
  min-height:56px !important;
  margin:0 !important;
  padding:14px 0 !important;
  box-sizing:border-box !important;
  border-top:1px solid #eceff1 !important;
}
.dhums-footer-grocery .dhums-footer-bottom > *{
  min-width:0 !important;
}

/* 6. BUTTON SIZE — public controls use one compact 40px baseline. */
.dhums-main button,
.dhums-main .dhums-btn,
.dhums-main a.dhums-btn,
.dhums-main input[type="submit"],
.dhums-main input[type="button"]{
  min-height:var(--dh-final-control-height) !important;
  box-sizing:border-box !important;
  border-radius:var(--dh-final-radius) !important;
}
.dhums-footer-grocery .dhums-social a{
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

/* 7. BORDER/RADIUS — consistent, restrained frontend language. */
.dhums-main input,
.dhums-main select,
.dhums-main textarea{
  border-radius:var(--dh-final-radius) !important;
}
.dhums-footer-grocery,
.dhums-footer-grocery .dhums-footer-bottom{
  border-radius:0 !important;
}
.dhums-footer-grocery .dhums-footer-custom{
  border-top:1px solid #eceff1 !important;
  padding:16px 0 !important;
  margin:0 !important;
}

/* 8. ACTION-COLUMN ALIGNMENT — common action groups stay on one edge. */
.dhums-main .actions,
.dhums-main .action-column,
.dhums-main .table-actions,
.dhums-main .card-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  min-width:0 !important;
}
.dhums-main table th:last-child,
.dhums-main table td:last-child{
  text-align:right !important;
}
.dhums-main table td:last-child .actions,
.dhums-main table td:last-child .action-column,
.dhums-main table td:last-child .table-actions{
  justify-content:flex-end !important;
}

/* 9. RESPONSIVE BEHAVIOR — exact same content edge as primary pages. */
@media (max-width:991px){
  :root{--dh-final-gutter:16px}
  .dhums-footer-grocery .dhums-footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:24px 20px !important;
    padding:32px 0 26px !important;
  }
  .dhums-footer-grocery .dhums-footer-brand{
    grid-column:1 / -1 !important;
  }
  .dhums-footer-grocery .dhums-footer-bottom{
    flex-wrap:wrap !important;
  }
}

@media (max-width:767px){
  :root{--dh-final-gutter:14px}
  .dhums-footer-grocery .dhums-footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px 16px !important;
    padding:28px 0 22px !important;
  }
  .dhums-footer-grocery .dhums-footer-brand{
    grid-column:1 / -1 !important;
  }
  .dhums-footer-grocery .dhums-footer-col h3{
    font-size:13px !important;
    line-height:20px !important;
    min-height:20px !important;
    margin-bottom:8px !important;
  }
  .dhums-footer-grocery .dhums-footer-col li,
  .dhums-footer-grocery .dhums-footer-col li a{
    min-height:30px !important;
    line-height:20px !important;
  }
  .dhums-footer-grocery .dhums-footer-bottom{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:8px !important;
    padding:14px 0 !important;
  }
  .dhums-footer-grocery .dhums-footer-legal{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px 12px !important;
  }
  .dhums-footer-grocery .dhums-footer-bottom a{
    margin-left:0 !important;
  }
}

@media (max-width:420px){
  .dhums-footer-grocery .dhums-footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:18px 12px !important;
  }
  .dhums-footer-grocery .dhums-footer-brand > p{
    font-size:13px !important;
    line-height:1.7 !important;
  }
  .dhums-footer-grocery .dhums-footer-col li a{
    font-size:12px !important;
  }
}

/* BN/EN parity: never let language-specific text change component geometry. */
.dhums-footer-grocery [lang="bn"],
.dhums-footer-grocery [lang="en"]{
  box-sizing:border-box !important;
}
