/* ============================================================
   FSB MOBILE RESPONSIVE OVERRIDES
   Fixes the Wix-exported 980px fixed-width layout for mobile
   Strategy: reset margins/offsets that use calc((100%-980px)/2),
   override widths and position, keep position:relative on sections
   so background layers still work.
   ============================================================ */

@media (max-width: 767px) {

  /* ==================== SITE-WIDE ==================== */

  :root {
    --site-width: 0px;
  }

  /* Prevent horizontal scroll at the outermost level only */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Remove the 980px min-width; DON'T set overflow on site-root (causes double scroll) */
  body:not(.responsive) #site-root {
    min-width: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* overflow-x:clip clips without creating a scroll context (unlike hidden which forces overflow-y:auto) */
  #SITE_CONTAINER,
  #masterPage,
  #PAGES_CONTAINER,
  #SITE_PAGES,
  .Y3K28_ {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  /* Background: no min-width */
  ._7xVID {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* All images: always responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ==================== RESET THE WIXGRID MARGIN TRICK ==================== */
  /*
     Wix positions elements using:
       margin: Ypx 0 Zpx calc((100% - 980px) * 0.5);
       left: Xpx;
     On screens < 980px, the calc gives a negative margin.
     We reset margin-left to 0 and left to 0 on all children
     of grid containers, WITHOUT changing position:relative (which
     sections need for their background layers).
  */

  /* Top-level page sections: only fix the negative margin-left */
  [data-mesh-id$="inlineContent-gridContainer"] > *,
  [data-mesh-id$="inlineContent-gridContainer"] > interact-element > * {
    margin-left: 0 !important;
    margin-top: 0 !important;    /* reset desktop vertical positioning (e.g. 80px, 150px spacers) */
    left: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Give gridContainers a small top padding to compensate for zeroed margins */
  [data-mesh-id$="inlineContent-gridContainer"] {
    padding-top: 8px !important;
  }

  /* Sections: no min-width, full width, auto height to collapse blank gray spaces */
  .Le88gL,
  .wixui-section {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    left: 0 !important;
  }

  /* Columns that contain only a background image (no real content):
     need a minimum height so the image is visible; truly empty ones collapse to 0 */
  .FDI5TK:has(wow-image) {
    min-height: 220px !important;
  }

  /* ==================== HEADER ==================== */

  #SITE_HEADER,
  #SITE_HEADER .YmWgf4,
  #SITE_HEADER .XgJ1FR {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Header grid container: display:flex is set below with higher specificity (#SITE_HEADER prefix) */

  /* Header elements: take out of the overlay grid */
  [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] > *,
  [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] > interact-element > * {
    position: static !important;
    margin: 0 !important;
    left: 0 !important;
    grid-area: unset !important;
    width: auto !important;
    justify-self: unset !important;
    align-self: unset !important;
  }

  /* Logo: smaller */
  #comp-lao38n68,
  #comp-lao38n68 .apPOZK {
    width: 60px !important;
    height: auto !important;
  }

  #img_comp-lao38n68 {
    width: 60px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* "Semillas FSB" title */
  #comp-lao3hkwp {
    width: auto !important;
    min-height: 0 !important;
    text-align: center !important;
  }

  /* Navigation container */
  #comp-lao2zdj1 {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    min-width: 0 !important;
  }

  #comp-lao2zdj1navContainer {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Nav items: horizontal wrapping row */
  #comp-lao2zdj1itemsContainer {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    height: auto !important;
  }

  .CSt_RJ.CUYeWp,
  .wixui-dropdown-menu__item {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
  }

  .wGxoBM {
    padding: 6px 10px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  /* Expand arrow: visible accordion affordance next to "Productos"
     (index.css hides it with clip-path and positions it absolute) */
  li[data-index="0"] > .H4AHlN {
    display: inline-block !important;
    position: static !important;
    clip-path: none !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle !important;
    transform: none !important;
    transition: transform .2s ease !important;
  }

  /* index.css da width:100% al enlace, lo que empujaría la flecha a otra línea */
  li[data-index="0"] > a.qMvpu5 {
    width: auto !important;
    vertical-align: middle !important;
  }

  li[data-index="0"].fsb-nav-open > .H4AHlN {
    transform: rotate(180deg) !important;
  }

  /* display:contents sube el enlace, la flecha y el submenú a items del flex del
     nav, así "Productos" comparte fila con Calculadoras / Acerca de / Novedades.
     El submenú lleva order:1 + ancho completo para envolver a su propia línea
     por debajo de los cuatro enlaces. */
  #comp-lao2zdj1itemsContainer > li[data-index="0"] {
    display: contents !important;
  }

  li[data-index="0"] > a.qMvpu5,
  li[data-index="0"] > .H4AHlN {
    order: 0 !important;
  }

  /* Productos submenu: colapsado por defecto en móvil */
  li[data-index="0"] > ul {
    display: none !important;
  }

  /* Abierto: inline, no dropdown flotante */
  li[data-index="0"].fsb-nav-open > ul {
    order: 1 !important;
    flex-basis: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  li[data-index="0"] > ul li {
    display: inline-block !important;
  }

  li[data-index="0"] > ul li a {
    display: inline-block !important;
    padding: 3px 7px !important;
    color: rgb(85, 85, 85) !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  /* Desktop floating dropdown: hide */
  .dva_z0 {
    display: none !important;
  }

  /* Horizontal separator: full width */
  #comp-lao2zdf3 {
    width: 100% !important;
  }

  /* ==================== CONTENT SECTIONS ==================== */

  /* Column strips: reset desktop positioning margins + auto height */
  .CeUMmm,
  .wixui-column-strip {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* Column strips: stack vertically */
  .Ak0vpt {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Each column: full width, auto height (collapses empty columns) */
  .FDI5TK,
  .wixui-column-strip__column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Image wrappers: full width inside content sections.
     The header logo (#comp-lao38n68 .apPOZK) stays at 60px via its higher-specificity rule. */
  .W4V2qg,
  .wixui-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .apPOZK {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .gRkIq0 {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Text containers */
  .N8MGzv,
  .UwkEpO,
  .JykKzs,
  .V3wkP4,
  .wixui-rich-text {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Reduce large font sizes from Wix rich text */
  h1.wixui-rich-text__text,
  h2.wixui-rich-text__text {
    font-size: clamp(22px, 6vw, 40px) !important;
    line-height: 1.2 !important;
  }

  h3.wixui-rich-text__text {
    font-size: clamp(18px, 5vw, 28px) !important;
    line-height: 1.3 !important;
  }

  .font_0 { font-size: clamp(22px, 6vw, 40px) !important; line-height: 1.2 !important; }
  .font_2 { font-size: clamp(20px, 5.5vw, 36px) !important; line-height: 1.2 !important; }
  .font_3 { font-size: clamp(18px, 5vw, 28px) !important; }

  /* Horizontal lines */
  .nJiBti {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Wix buttons */
  .StylableButton2545352419__root {
    width: auto !important;
    min-width: min(260px, 80vw) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    display: block !important;
    margin: 8px auto !important;
    box-sizing: border-box !important;
  }

  /* ==================== INNER SECTION GRID CONTAINERS ==================== */
  /*
     Inside sections, elements (images, text, buttons) are positioned
     within inner gridContainers using the same calc trick + left:Xpx.
     We already reset margin-left and left above, but we also need to
     make these elements flow properly and take readable widths.
  */

  /* Wix inlineContent wrappers have min-height set in per-page CSS (e.g. min-height:342px).
     Reset so empty columns collapse to 0 and don't leave blank gray spaces. */
  [data-mesh-id$="inlineContent"] {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Wix grid wedge divs: invisible placeholders in the original grid layout,
     but in block flow they become large blank spaces (e.g. 435px). Hide them. */
  [data-mesh-id*="wedge"] {
    display: none !important;
  }

  /* All Wix grid containers: switch from grid (all items same cell) to block flow.
     margin-top: 0 resets negative offsets like comp-lfa3op052's -48px and
     comp-lfa3op0e's -37px that Wix uses for desktop overlap positioning. */
  [data-mesh-id$="inlineContent-gridContainer"] {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
  }

  /* Header/footer override — higher specificity (1,1,0) beats general (0,1,0) above */
  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 12px 0 12px !important;
    gap: 4px !important;
    min-height: 0 !important;
    height: auto !important;
    position: static !important;
  }

  #SITE_FOOTER [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px 12px !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    position: static !important;
  }

  /* ==================== FOOTER ==================== */

  #SITE_FOOTER {
    height: auto !important;
    min-height: 0 !important;
  }

  #SITE_FOOTER .YmWgf4,
  #SITE_FOOTER .XgJ1FR {
    height: auto !important;
  }

  /* Footer grid container: display:flex is set below with higher specificity (#SITE_FOOTER prefix) */

  [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] > *,
  [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] > interact-element > * {
    position: static !important;
    margin: 0 !important;
    left: 0 !important;
    grid-area: unset !important;
    width: auto !important;
    /* Wix fija align-self:start por componente para su grid de escritorio, lo
       que dejaba el correo y los iconos pegados a la izquierda. */
    align-self: center !important;
    justify-self: center !important;
  }

  #comp-lao2zdlm1 {
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .tN_ggS {
    white-space: normal !important;
  }

  /* ==================== CALCULADORAS PAGE ==================== */

  /* Two buttons side-by-side → stack them */
  #comp-mc89afoo,
  #comp-mc89cs6z {
    width: auto !important;
    min-width: min(260px, 80vw) !important;
    height: auto !important;
    min-height: 50px !important;
    position: static !important;
    margin: 8px auto !important;
    display: block !important;
    left: 0 !important;
  }

  #roi-section {
    padding: 20px 16px 40px !important;
  }

  #roi-section-btn {
    display: block !important;
    text-align: center !important;
    width: auto !important;
  }

  #roi-title {
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  /* ==================== PRODUCT PAGES — FLUID-COLUMNS-REPEATER ==================== */
  /*
     Wix uses <fluid-columns-repeater> (custom element, class TypO4) with
     display:flex; flex-direction:row; width:1940px — 10 items × 417px each.
     On mobile this creates a 4170px-wide overflow and a huge blank gray section.
     Fix: switch to column layout, make every wrapper 100% wide,
     and reset the Wix calc(margin-left) / left offsets on each item.
  */

  fluid-columns-repeater,
  .TypO4 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;     /* eliminates Wix's --margin-inline-start:-37.5px gutter offset */
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  .wixui-repeater,
  .wngi8 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;     /* eliminates Wix's wngi8 margin-left:-20px gutter offset */
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Each item: reset Wix's calc(margin) / absolute left offset */
  .wixui-repeater__item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
  }

  /* Inside repeater cards: all direct children of the grid take full width */
  .wixui-repeater__item [data-mesh-id$="inlineContent-gridContainer"] > * {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* Product images in cards: full width, auto height to avoid squish */
  .wixui-repeater__item .wixui-image,
  .wixui-repeater__item .W4V2qg,
  .wixui-repeater__item .apPOZK {
    width: 100% !important;
    height: auto !important;
  }

  .wixui-repeater__item .gRkIq0,
  .wixui-repeater__item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* ==================== HERO PRODUCT ICONS ==================== */
  /*
     The general .W4V2qg / .gRkIq0 rules set width:100% which would stretch
     the narrow onion icon (natural size: 153×278px) to full viewport width.
     Cap and center it; larger icons (pepper ~335px, melon ~371px) fill
     their column naturally and don't need this override.
  */

  #comp-lhl5voz2,
  #comp-li0mvgxp,
  #comp-li0my1d6 {
    width: auto !important;
    max-width: 153px !important;
    margin: 16px auto !important;
    display: block !important;
  }

  #comp-lhl5voz2 .apPOZK,
  #comp-li0mvgxp .apPOZK,
  #comp-li0my1d6 .apPOZK {
    width: auto !important;
    max-width: 153px !important;
  }

  #img_comp-lhl5voz2,
  #img_comp-li0mvgxp,
  #img_comp-li0my1d6 {
    width: auto !important;
    max-width: 153px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* ==================== LOGOS DE PROVEEDORES (index) ==================== */
  /*
     Franja de logos: BASF/Nunhems, Lark Seeds, United Genetics, Sakata y
     Bayer/Seminis. Las reglas generales .W4V2qg / .gRkIq0 les ponen
     width:100%, que los estiraba de sus 146–440px naturales a 485px
     (Lark Seeds llegaba a 485×452). Se limitan por altura para que todos
     queden a una escala pareja, con object-fit:contain porque el HTML trae
     object-fit:cover en línea.
  */

  #comp-lg2uwilb [data-mesh-id$="inlineContent-gridContainer"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px 20px !important;
    padding: 20px 12px !important;
  }

  #comp-lg2uwilb .wixui-image,
  #comp-lg2uwilb .apPOZK {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #comp-lg2uwilb img {
    width: auto !important;
    height: auto !important;
    max-width: min(46vw, 200px) !important;
    max-height: 56px !important;
    object-fit: contain !important;
  }

  /* ==================== CONTACTOS (index, bajo los logos) ==================== */
  /*
     Tres columnas (Phone / Email / Connect) que en móvil se apilan. Al pasar
     el gridContainer a block flow, el icono de 23px quedaba pegado al margen
     izquierdo mientras el título y el dato seguían centrados. Se centra la
     tarjeta completa y se compacta el espaciado vertical.
  */

  #comp-lfrdpbts [data-mesh-id$="inlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 14px 12px !important;
  }

  /* Wix fija align-self:start por componente para su grid de escritorio, y eso
     ganaba al align-items:center del flex (dejaba los iconos sociales a la
     izquierda). */
  #comp-lfrdpbts [data-mesh-id$="inlineContent-gridContainer"] > * {
    align-self: center !important;
    justify-self: center !important;
  }

  #comp-lfrdpbts .wixui-vector-image {
    width: 24px !important;
    height: 24px !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  /* Los bloques de texto ya vienen centrados; sólo hay que quitarles la
     altura fija que dejaba huecos entre el icono y el dato. */
  #comp-lfrdpbts .wixui-rich-text {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: center !important;
  }

  /* ==================== CALC-PULGADAS / METROS ==================== */

  /* Product selection grid items (crop images) */
  .wixui-image.cs40a3 {
    display: inline-block !important;
    vertical-align: top !important;
    margin: 8px !important;
  }

  /* ==================== ROI CALCULATOR ==================== */

  #roi-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
    padding: 0 8px !important;
  }

}


/* ==================== EXTRA SMALL (< 480px) ==================== */

@media (max-width: 480px) {

  .wGxoBM {
    padding: 4px 7px !important;
    font-size: 13px !important;
  }

  li[data-index="0"] > ul li a {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }

  h1.wixui-rich-text__text,
  h2.wixui-rich-text__text {
    font-size: clamp(20px, 6vw, 32px) !important;
  }

}