/**
 * DROPIFY RESPONSIVE LAYER (v1.5.2)
 * Every rule is scoped to Dropify classes. No global/universal selectors,
 * nothing that touches Elementor, the theme header/footer, or WP admin.
 * Breakpoints: 1024 (tablet landscape), 768 (tablet), 480 (mobile).
 */

/* Overflow safety inside Dropify blocks only */
.dropify-container,
.dropify-public-page,
.dropify-hero,
.dropify-single-product-main {
  max-width: 100%;
  box-sizing: border-box;
}
.dropify-public-page { overflow-x: clip; }
.dropify-container img,
.dropify-hero img,
.dropify-card img,
.dropify-product-card img,
.dropify-country-card img {
  max-width: 100%;
  height: auto;
}
/* Tables keep real table layout; dropify-responsive.js turns data tables into card lists on phones (see dropify-seller.css). */
.dropify-container table { max-width: 100%; }
.dropify-container h1,
.dropify-container h2,
.dropify-container h3,
.dropify-container p,
.dropify-container a { overflow-wrap: anywhere; }

/* Fluid heading defaults (overridden by Elementor controls, which use !important) */
.dropify-hero-title { font-size: clamp(1.9rem, 5vw + 0.5rem, 3.4rem); }

/* Tablet landscape */
@media (max-width: 1024px) {
  .dropify-container { padding-left: 24px; padding-right: 24px; }
  .dropify-hero { padding: 50px 0 60px; }
  .dropify-hero-grid { gap: 28px; }
  .dropify-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dropify-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .dropify-container { padding-left: 20px; padding-right: 20px; }
  .dropify-hero { padding: 40px 0 48px; }
  .dropify-hero-grid,
  .dropify-catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .dropify-hero-visual { order: -1; }
  .dropify-hero-visual > div { min-height: 260px !important; padding: 24px 12px !important; }
  .dropify-hero-visual > div > div:first-child { font-size: 72px !important; }
  .dropify-country-grid { grid-template-columns: minmax(0, 1fr); }
  .dropify-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .dropify-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .dropify-hero-actions { flex-wrap: wrap; }
  .dropify-float-card { position: static !important; margin-top: 12px; }
}

/* Mobile */
@media (max-width: 480px) {
  .dropify-container { padding-left: 16px; padding-right: 16px; }
  .dropify-hero { padding: 28px 0 36px; }
  .dropify-product-grid { grid-template-columns: minmax(0, 1fr); }
  .dropify-hero-actions { flex-direction: column; align-items: stretch; }
  .dropify-hero-actions .dropify-btn,
  .dropify-container .dropify-btn { min-height: 44px; }
  .dropify-hero-actions .dropify-btn { width: 100%; justify-content: center; box-sizing: border-box; }
  .dropify-hero-features { flex-direction: column; gap: 8px; }
  /* Legacy inline card/CTA padding that was too large on phones */
  .dropify-public-page section[style*="padding: 70px 20px"],
  .dropify-container[style*="padding: 70px 20px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  .dropify-container [style*="padding:60px 40px"] { padding: 32px 20px !important; }
  .dropify-container [style*="padding:48px 36px"] { padding: 28px 20px !important; }
  .dropify-container [style*="padding:40px"] { padding: 24px 16px !important; }
  .dropify-container h2[style*="font-size:2.25rem"] { font-size: 1.6rem !important; }
  .dropify-container h1[style*="font-size:2.25rem"] { font-size: 1.75rem !important; }
}


/* ==========================================================================
   v2.3.0 — Seller login & registration pages
   ========================================================================== */
.dropify-auth { max-width: 540px; padding-top: 60px; padding-bottom: 60px; }
.dropify-auth--login { max-width: 440px; }
.dropify-auth-card { padding: 40px; box-sizing: border-box; }
.dropify-auth-head { text-align: center; margin-bottom: 28px; }
.dropify-auth-logo { margin: 0 auto 12px; width: 44px; height: 44px; font-size: 22px; }
.dropify-auth-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; line-height: 1.2; }
.dropify-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.dropify-auth-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; font-size: 13px; }
.dropify-auth-submit { width: 100%; padding: 14px; font-size: 16px; min-height: 48px; box-sizing: border-box; justify-content: center; }
.dropify-auth--register .dropify-auth-submit { margin-top: 12px; }
.dropify-auth-foot { text-align: center; margin-top: 20px; font-size: 13px; color: var(--dropify-color-muted); }
.dropify-auth .dropify-form-control { min-height: 44px; }

@media (max-width: 768px) {
  .dropify-auth { padding-top: 40px; padding-bottom: 48px; }
}
@media (max-width: 600px) {
  .dropify-form-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .dropify-auth { padding: 24px 12px 40px; }
  .dropify-auth-card { padding: 24px 18px; }
  .dropify-auth-title { font-size: 1.4rem; }
  .dropify-auth-submit { font-size: 15px; }
  /* 16px stops iOS Safari zooming into the field on focus */
  .dropify-auth .dropify-form-control { font-size: 16px; }
}

/* ==========================================================================
   v2.3.0 — Plans (Starter / Growth / Pro Partner)
   ========================================================================== */
.dfy-ref-pricing-grid .dfy-ref-checklist li.dfy-ref-feature-no { color: #7A8A83; }
.dfy-ref-pricing-grid .dfy-ref-checklist li.dfy-ref-feature-no > span { color: #B42318; }


/* ==========================================================================
   v2.4.5 - Full-width Dropify pages on phones
   Top-level Dropify blocks break out of the Elementor column / theme content
   padding so they use the whole screen width; each block keeps its own small
   inner padding. (Phones have overlay scrollbars, so 100vw == screen width.)
   ========================================================================== */
@media (max-width: 767px) {
  :is(.elementor-widget-container, .elementor-widget, .entry-content, .page-content, .site-main, .elementor-shortcode) > :is(.dropify-seller-app, .dfy-pl, .dfy-cc, .dfs-shop, .dropify-container, .dropify-public-page, .dfy-seller-scope) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0;
    box-sizing: border-box;
  }
  /* inner side padding of the blocks that now touch the screen edge */
  :is(.elementor-widget-container, .elementor-widget, .entry-content, .page-content, .site-main, .elementor-shortcode) > :is(.dfy-pl, .dfy-cc, .dfs-shop, .dropify-container, .dropify-public-page) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html, body { overflow-x: clip; }
}