
/*
 * Honar Market FA — Responsive / Elementor compatibility layer
 * v2.1.0
 * Elementor breakpoints: tablet <=1024px, mobile <=767px
 */

/* Prevent horizontal overflow caused by Elementor columns/widgets and animated artwork */
html, body { max-width:100%; overflow-x:hidden; }
body.elementor-editor-active { overflow-x:hidden; }
.elementor, .elementor-page { max-width:100%; overflow-x:clip; }
.elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap,
.elementor-widget-container { min-width:0; }
.elementor img, .elementor-widget-image img { max-width:100%; height:auto; }

/* Theme containers */
.hm-container {
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:20px;
}
.hm-main > .elementor { width:100%; }

/* Avoid oversized headings/content in Elementor on narrow screens */
.elementor h1, .elementor h2, .elementor h3, .elementor h4,
.elementor p { overflow-wrap:anywhere; }
.elementor .elementor-widget-text-editor,
.elementor .elementor-widget-heading { min-width:0; }

/* Elementor buttons and forms should never create horizontal overflow */
.elementor .elementor-button,
.elementor input,
.elementor textarea,
.elementor select { max-width:100%; }
.elementor .elementor-button { white-space:normal; }

/* Hero artwork stays inside its column */
.hm-hero-grid > *,
.hm-band-grid > *,
.hm-w-grid > * { min-width:0; }
.hm-hero-art { width:100%; max-width:560px; margin-inline:auto; }

/* =========================
   TABLET — Elementor 1024
   ========================= */
@media (max-width:1024px) {
  .hm-container { padding-inline:18px; }

  .hm-header-in { gap:10px; }
  .hm-logo-txt { font-size:20px; }
  .hm-actions { gap:7px; }
  .hm-chip-wallet { padding-inline:10px; }

  .hm-hero-grid {
    grid-template-columns:1fr;
    gap:26px;
    padding:48px 0 58px;
  }
  .hm-hero-copy { text-align:center; }
  .hm-hero-copy .hm-chips { justify-content:center; }
  .hm-hero-art { height:360px; }

  ul.products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .hm-cats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .hm-stats,
  .hm-features,
  .hm-features--cols-3,
  .hm-features--cols-4,
  .hm-features--cols-5,
  .hm-features--cols-6,
  .elementor-widget-hm-features .hm-features { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hm-blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hm-band-grid, .hm-w-grid { grid-template-columns:1fr; }
  .hm-footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* WooCommerce single product */
  .hm-shop div.product { gap:26px; }
  .hm-shop div.product .woocommerce-product-gallery,
  .hm-shop div.product .summary { flex:1 1 calc(50% - 13px); max-width:none; min-width:0; }

  /* Elementor columns: let their own responsive settings control stacking */
  .elementor-section .elementor-container { width:100%; }
}

/* =========================
   MOBILE — Elementor 767
   ========================= */
@media (max-width:767px) {
  .hm-container { padding-inline:14px; }

  .hm-header-in { height:64px; gap:8px; }
  .hm-logo-mark { width:38px; height:38px; font-size:19px; }
  .hm-logo-txt { font-size:18px; }
  .hm-logo-txt small { font-size:9px; }
  .hm-actions { margin-inline-start:auto; }
  .hm-chip-wallet { display:none; }
  .hm-actions .hm-btn { padding:6px 10px; font-size:12px; }
  .hm-cart { width:38px; height:38px; }

  .hm-hero-grid { padding:34px 0 42px; gap:18px; }
  .hm-hero-art { height:290px; }
  .hm-float { width:145px; border-radius:14px; }
  .hm-float.f2 { width:165px; }
  .hm-float.f4 { width:125px; }
  .f1 { right:3%; }
  .f2 { left:0; }
  .f3 { right:8%; }
  .f4 { left:15%; }

  .hm-sec-head { margin-bottom:24px; gap:10px; }
  .hm-sec-head h2 { font-size:clamp(24px,7vw,32px); }

  ul.products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  ul.products li.product { min-width:0; }
  .hm-cats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .hm-stats,
  .hm-features,
  .hm-features[class*="hm-features--cols-"],
  .elementor-widget-hm-features .hm-features { grid-template-columns:1fr; }
  .hm-blog-grid { grid-template-columns:1fr; }
  .hm-footer-grid { grid-template-columns:1fr; padding-top:42px; }

  .hm-feature { border-right:0 !important; border-top:1px solid var(--line); padding:20px 18px; }
  .hm-feature:first-child { border-top:0; }
  .hm-feature-ico { width:38px; height:38px; min-width:38px; }
  .hm-feature-ico svg { width:18px; height:18px; }
  .hm-feature h3 { font-size:15px; }
  .hm-feature p { font-size:12.5px; }

  .hm-band { padding:22px 18px; border-radius:16px; }
  .hm-band-grid { grid-template-columns:1fr; gap:14px; text-align:center; }
  .hm-band-action { justify-self:center; }
  .hm-band::after { font-size:56px; bottom:-12px; }
  .hm-cats--cols-3,.hm-cats--cols-4,.hm-cats--cols-5,.hm-cats--cols-6 { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .hm-box { padding:20px 16px; }
  .hm-w-balance { padding:24px 20px; }

  .hm-address { align-items:flex-start; flex-wrap:wrap; }
  .hm-address code { min-width:0; width:100%; }

  .hm-shop { padding-top:24px; }
  .hm-shop div.product { display:block; }
  .hm-shop div.product .woocommerce-product-gallery,
  .hm-shop div.product .summary { width:100%; max-width:none; margin-bottom:24px; }
  .hm-shop .woocommerce-tabs .panel { padding:18px 14px; }

  .hm-single { padding:36px 14px; }
  .hm-comments { padding:20px 16px; }
  .hm-404 { padding:60px 14px; }
  .hm-404 .big { font-size:88px; }

  /* Elementor editor/frontend safety */
  .elementor-section > .elementor-container,
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width:100%;
  }
  .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
    padding:10px;
  }
}

/* Very small phones */
@media (max-width:420px) {
  .hm-logo-txt { display:none; }
  .hm-actions .hm-btn { display:none; }
  ul.products { gap:10px; }
  .hm-cats { gap:10px; }
  .hm-hero-art { height:250px; }
  .hm-float { width:120px; }
  .hm-float.f2 { width:140px; }
  .hm-float.f4 { width:105px; }
}
/* Elementor-friendly responsive — no hard-coded element IDs */
@media (max-width:1024px){
	.hm-hero-art{margin-top:30px}
	.elementor-section .elementor-container{flex-wrap:wrap}
}
@media (max-width:767px){
	.hm-hero-art{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
	.hm-float{position:static;transform:none;animation:none;width:100%}
	.hm-float img,.hm-float span{width:100%;height:120px;object-fit:cover;border-radius:12px;display:block}
	.hm-cats{grid-template-columns:1fr 1fr;gap:10px}
	.hm-cat figcaption b{font-size:13px}
	.hm-cat figcaption em{font-size:11px}
	.elementor-heading-title{word-break:break-word}
}
@media (max-width:400px){
	.hm-hero-art{grid-template-columns:1fr 1fr}
	.hm-float img,.hm-float span{height:100px}
}
