/* NEGO responsive polish · mobile + tablet · 23/09/2026 */

/* ---------- TABLET ---------- */
@media (min-width:681px) and (max-width:1024px){
  .wrap{width:min(100% - 34px,1280px)!important}

  .headerMain{
    min-height:62px!important;
    height:auto!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-rows:56px 44px!important;
    column-gap:14px!important;
    padding-bottom:8px!important;
  }
  .headerBrand{grid-column:1!important;grid-row:1!important}
  .headerMain .nav{display:none!important}
  .headerMain .headerActions{grid-column:3!important;grid-row:1!important}
  .headerMain .searchStrip{
    grid-column:1/-1!important;grid-row:2!important;
    width:100%!important;margin:0!important;padding:0!important;
  }
  .headerMain .searchBox{height:42px!important;border-radius:15px!important}

  .hero{padding:4px 0 10px!important}
  .negoHeroShell{width:min(100% - 28px,1280px)!important}
  .negoHeroViewport{aspect-ratio:2.65/1!important;border-radius:18px!important}
  .negoHeroDesignSlide img{object-fit:cover!important;object-position:center!important}
  .negoHeroLiveCta{left:4%!important;bottom:11%!important;min-height:36px!important;padding:0 14px!important;font-size:10px!important}
  .negoHeroLiveCategory{left:4%!important;top:7%!important;font-size:9px!important}
  .negoHeroCommerce{right:3.2%!important;bottom:8.5%!important;width:22%!important}
  .negoHeroCommerce .negoHeroProductTitle{font-size:9.5px!important}
  .negoHeroCommerce .negoHeroPriceNow{font-size:31px!important}
  .negoHeroCommerce .negoHeroLiveOld{font-size:10.5px!important}
  .negoHeroArrow{width:34px!important;height:34px!important}

  .trustStripReference .referenceTrustGrid{
    width:min(100% - 28px,1280px)!important;
    grid-template-columns:repeat(4,minmax(165px,1fr))!important;
    overflow-x:auto!important;
    scroll-snap-type:x proximity!important;
  }
  .trustStripReference .referenceTrustSignature{display:none!important}
  .trustStripReference .referenceTrustItem{min-width:165px!important;min-height:56px!important;padding:7px 12px!important;scroll-snap-align:start}
  .trustStripReference .referenceTrustItem b{font-size:10.4px!important}
  .trustStripReference .referenceTrustItem span{font-size:8.8px!important}

  .negoNationalBuyer{padding:28px 0!important}
  .negoNationalBuyerBox{
    grid-template-columns:1fr 1fr!important;
    gap:20px!important;
    padding:22px!important;
    border-radius:22px!important;
  }
  .negoNationalBuyerCopy h2{font-size:clamp(30px,4.8vw,44px)!important}
  .negoNationalBuyerCopy p{font-size:12px!important;line-height:1.52!important}
  .negoNationalBuyerStep{padding:10px 11px!important}
}

/* ---------- MOBILE ---------- */
@media (max-width:680px){
  html,body{overflow-x:hidden!important}
  body{padding-bottom:76px!important}
  .wrap{width:min(100% - 24px,1280px)!important}

  /* Header */
  .header{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)!important}
  .headerMain{
    min-height:102px!important;
    grid-template-columns:1fr auto!important;
    grid-template-rows:54px 40px!important;
    row-gap:4px!important;
    padding:0 0 8px!important;
  }
  .headerBrand{align-self:center!important}
  .logoImg{height:29px!important;max-width:124px!important}
  .headerMain .headerActions{gap:2px!important}
  .headerIconBtn{width:36px!important;height:36px!important;border-radius:11px!important}
  .headerIconBtn svg{width:19px!important;height:19px!important}
  .headerMain .searchStrip{width:100%!important}
  .headerMain .searchBox{
    height:40px!important;
    border-radius:14px!important;
    padding:0 12px!important;
    box-shadow:0 5px 16px rgba(27,22,45,.045)!important;
  }
  .headerMain .searchBox input{font-size:12.5px!important}

  /* Hero: keep banner readable instead of cropping it aggressively */
  .hero{padding:6px 0 8px!important}
  .negoHeroShell{width:calc(100% - 20px)!important}
  .negoHeroViewport{
    aspect-ratio:1080/620!important;
    border-radius:16px!important;
    background:#f7f5fb!important;
    box-shadow:0 7px 24px rgba(31,20,74,.06)!important;
  }
  .negoHeroDesignSlide img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#f7f5fb!important;
  }
  .negoHeroArrow{width:34px!important;height:34px!important;font-size:18px!important}
  .negoHeroArrow.prev{left:6px!important}
  .negoHeroArrow.next{right:6px!important}
  .negoHeroDots{left:14px!important;bottom:8px!important;gap:5px!important}
  .negoHeroDot{width:6px!important;height:6px!important}
  .negoHeroDot.active{width:18px!important}

  /* The artwork already carries most visual copy; keep live commerce compact */
  .negoHeroLiveCategory{display:none!important}
  .negoHeroLiveCta{
    left:4%!important;bottom:8%!important;
    min-height:32px!important;padding:0 12px!important;
    border-radius:9px!important;font-size:9px!important;
    box-shadow:0 5px 14px rgba(0,0,0,.12)!important;
  }
  .negoHeroCommerce{
    right:4%!important;bottom:7%!important;
    width:27%!important;gap:3px!important;
  }
  .negoHeroCommerce .negoHeroProductTitle{
    font-size:7.5px!important;line-height:1.05!important;
    max-width:100%!important;
  }
  .negoHeroCommerce .negoHeroLivePrice{gap:2px 4px!important}
  .negoHeroCommerce .negoHeroLiveOffer{
    min-height:16px!important;padding:0 5px!important;
    border-radius:5px!important;font-size:5.8px!important;
  }
  .negoHeroCommerce .negoHeroLiveOld{font-size:7.5px!important}
  .negoHeroCommerce .negoHeroPriceNow{
    font-size:20px!important;line-height:.95!important;letter-spacing:-.045em!important;
  }

  /* Benefits: two columns, no horizontal clipped row */
  .trustStrip.trustStripReference{padding:0!important}
  .trustStripReference .referenceTrustGrid{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:visible!important;
    border-top:1px solid #ece9ee!important;
    border-bottom:1px solid #ece9ee!important;
  }
  .trustStripReference .referenceTrustItem,
  .trustStripReference .referenceTrustItem:nth-child(1),
  .trustStripReference .referenceTrustItem:nth-child(2){
    min-width:0!important;
    min-height:54px!important;
    padding:8px 10px!important;
    gap:8px!important;
    border-right:1px solid #efedf1!important;
    border-bottom:1px solid #efedf1!important;
  }
  .trustStripReference .referenceTrustItem:nth-child(2n){border-right:0!important}
  .trustStripReference .referenceTrustItem:nth-child(n+3){border-bottom:0!important}
  .trustStripReference .referenceTrustIcon{
    width:23px!important;height:23px!important;flex-basis:23px!important;
  }
  .trustStripReference .referenceTrustIcon svg{width:18px!important;height:18px!important}
  .trustStripReference .referenceTrustItem b{
    font-size:9.6px!important;line-height:1.12!important;
    white-space:normal!important;
  }
  .trustStripReference .referenceTrustItem span{
    margin-top:2px!important;font-size:8px!important;white-space:normal!important;
  }
  .trustStripReference .referenceTrustSignature{display:none!important}

  /* National buyer block from screenshot */
  .negoNationalBuyer{padding:24px 0 20px!important}
  .negoNationalBuyer .wrap{width:min(100% - 24px,1280px)!important}
  .negoNationalBuyerBox{
    display:block!important;
    padding:20px!important;
    border-radius:20px!important;
    background:linear-gradient(145deg,#f4f0ff 0%,#fff 72%,#eefbfa 100%)!important;
    box-shadow:0 10px 30px rgba(20,18,30,.045)!important;
  }
  .negoNationalBuyerCopy .eyebrow{font-size:9px!important;letter-spacing:.13em!important}
  .negoNationalBuyerCopy h2{
    margin:7px 0 10px!important;
    font-size:clamp(30px,9.5vw,40px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
  .negoNationalBuyerCopy p{
    margin:0 0 14px!important;
    font-size:12.5px!important;
    line-height:1.52!important;
    color:#59555f!important;
  }
  .negoNationalBuyerSteps{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    margin-top:14px!important;
  }
  .negoNationalBuyerStep{
    grid-template-columns:26px minmax(0,1fr)!important;
    gap:7px!important;
    padding:9px!important;
    border-radius:12px!important;
  }
  .negoNationalBuyerStep strong{
    width:26px!important;height:26px!important;border-radius:8px!important;font-size:8px!important;
  }
  .negoNationalBuyerStep b{font-size:9.5px!important;margin-bottom:2px!important}
  .negoNationalBuyerStep span{font-size:8.5px!important;line-height:1.3!important}
  .negoNationalBuyerCta{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin-top:12px!important}
  .negoNationalBuyerCta button,.negoNationalBuyerCta a{
    min-height:40px!important;padding:0 12px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:12px!important;font-size:10px!important;
  }

  /* Fixed bottom nav: slimmer and less intrusive */
  .mobileBottom{
    left:8px!important;right:8px!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:5px!important;
    padding:5px!important;
    border-radius:16px!important;
    background:rgba(13,13,15,.94)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.20)!important;
  }
  .mobileBottom button,.mobileBottom a{
    min-height:42px!important;
    padding:0 7px!important;
    border-radius:11px!important;
    font-size:9.5px!important;
    line-height:1!important;
  }
  .mobileBottom .mobileCartNav span{
    min-width:20px!important;height:20px!important;font-size:9px!important;
  }

  /* General vertical rhythm */
  .discovery.discoveryNeo{padding:24px 0 22px!important}
  .negoPicksStory{padding-top:10px!important}
  .catalog{padding-top:28px!important}
}

/* Smaller phones */
@media (max-width:390px){
  .wrap{width:min(100% - 18px,1280px)!important}
  .headerMain{grid-template-rows:50px 38px!important;min-height:94px!important}
  .logoImg{height:27px!important}
  .headerIconBtn{width:34px!important;height:34px!important}
  .negoHeroShell{width:calc(100% - 12px)!important}
  .negoHeroViewport{aspect-ratio:1080/620!important;border-radius:14px!important}
  .negoHeroLiveCta{font-size:8.3px!important;min-height:29px!important;padding:0 9px!important}
  .negoHeroCommerce{width:29%!important}
  .negoHeroCommerce .negoHeroProductTitle{font-size:6.8px!important}
  .negoHeroCommerce .negoHeroPriceNow{font-size:18px!important}
  .trustStripReference .referenceTrustItem{padding:7px 8px!important}
  .trustStripReference .referenceTrustItem b{font-size:9px!important}
  .trustStripReference .referenceTrustItem span{font-size:7.6px!important}
  .negoNationalBuyerBox{padding:17px!important}
  .negoNationalBuyerCopy h2{font-size:30px!important}
  .negoNationalBuyerCopy p{font-size:11.7px!important}
  .negoNationalBuyerSteps{grid-template-columns:1fr!important}
  .mobileBottom button,.mobileBottom a{font-size:9px!important}
}

/* Landscape phone */
@media (max-width:820px) and (orientation:landscape){
  body{padding-bottom:62px!important}
  .headerMain{grid-template-rows:48px 38px!important;min-height:92px!important}
  .negoHeroViewport{aspect-ratio:3/1!important}
  .trustStripReference .referenceTrustGrid{grid-template-columns:repeat(4,minmax(150px,1fr))!important;overflow-x:auto!important}
  .trustStripReference .referenceTrustItem{min-width:150px!important;border-bottom:0!important}
  .negoNationalBuyerBox{display:grid!important;grid-template-columns:1fr 1fr!important}
}


/* Mobile Hero polish · precio ordenado + controles discretos */
@media (max-width:680px){
  .negoHeroArrow{
    width:28px!important;
    height:28px!important;
    font-size:14px!important;
    font-weight:700!important;
    background:rgba(255,255,255,.86)!important;
    color:#262329!important;
    box-shadow:0 3px 10px rgba(25,20,35,.09)!important;
    opacity:.88!important;
  }
  .negoHeroArrow.prev{left:8px!important}
  .negoHeroArrow.next{right:8px!important}

  .negoHeroCommerce{
    right:5%!important;
    bottom:6.5%!important;
    width:28%!important;
    max-width:132px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:3px!important;
    text-align:left!important;
    text-shadow:0 1px 1px rgba(255,255,255,.35)!important;
  }
  .negoHeroCommerce .negoHeroProductTitle{
    width:100%!important;
    margin:0!important;
    font-size:8px!important;
    line-height:1.08!important;
    font-weight:850!important;
    letter-spacing:-.01em!important;
    white-space:normal!important;
    text-wrap:balance!important;
  }
  .negoHeroCommerce .negoHeroLivePrice{
    position:static!important;
    width:auto!important;
    display:grid!important;
    grid-template-columns:max-content max-content!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    justify-content:start!important;
    gap:2px 5px!important;
    text-align:left!important;
  }
  .negoHeroCommerce .negoHeroLiveOffer{
    grid-column:1!important;
    grid-row:1!important;
    min-height:15px!important;
    padding:0 5px!important;
    border-radius:5px!important;
    font-size:5.8px!important;
    line-height:1!important;
  }
  .negoHeroCommerce .negoHeroLiveOld{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    margin:0!important;
    font-size:7.2px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .negoHeroCommerce .negoHeroPriceNow{
    grid-column:1/3!important;
    grid-row:2!important;
    justify-self:start!important;
    margin:0!important;
    font-size:22px!important;
    line-height:.92!important;
    font-weight:900!important;
    letter-spacing:-.055em!important;
    white-space:nowrap!important;
    font-variant-numeric:tabular-nums!important;
  }
}

@media (max-width:390px){
  .negoHeroArrow{
    width:26px!important;
    height:26px!important;
    font-size:13px!important;
  }
  .negoHeroArrow.prev{left:6px!important}
  .negoHeroArrow.next{right:6px!important}
  .negoHeroCommerce{
    right:4.5%!important;
    bottom:6%!important;
    width:29%!important;
    max-width:112px!important;
  }
  .negoHeroCommerce .negoHeroProductTitle{font-size:7.3px!important}
  .negoHeroCommerce .negoHeroPriceNow{font-size:20px!important}
}


/* Mobile header · logo + buscador + acciones en una sola fila */
@media(max-width:680px){
  .headerMain{
    min-height:58px!important;
    height:58px!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-rows:58px!important;
    column-gap:8px!important;
    row-gap:0!important;
    align-items:center!important;
    padding:0!important;
  }
  .headerBrand{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    min-width:0!important;
  }
  .logoImg{
    height:28px!important;
    max-width:104px!important;
  }
  .headerMain .searchStrip{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  .headerMain .searchBox{
    width:100%!important;
    max-width:none!important;
    height:36px!important;
    min-width:0!important;
    padding:0 10px!important;
    border-radius:12px!important;
    box-shadow:none!important;
  }
  .headerMain .searchBox input{
    min-width:0!important;
    font-size:11.2px!important;
    text-overflow:ellipsis!important;
  }
  .headerMain .searchIcon{
    flex:0 0 auto!important;
    font-size:14px!important;
  }
  .headerMain .headerActions{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    display:flex!important;
    gap:0!important;
    margin:0!important;
  }
  .headerIconBtn{
    width:32px!important;
    height:32px!important;
    border-radius:10px!important;
  }
  .headerIconBtn svg{
    width:18px!important;
    height:18px!important;
  }
}
@media(max-width:390px){
  .headerMain{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-rows:56px!important;
    min-height:56px!important;
    height:56px!important;
    column-gap:6px!important;
  }
  .logoImg{height:27px!important;max-width:94px!important}
  .headerMain .searchBox{height:34px!important;padding:0 8px!important}
  .headerMain .searchBox input{font-size:10.7px!important}
  .headerIconBtn{width:30px!important;height:30px!important}
}


/* Mobile hero position refinement · 25/09/2026
   Pull hero closer to header and keep live price clear of product artwork. */
@media(max-width:680px){
  .hero{padding-top:0!important}
  .negoHeroCommerce{
    right:2%!important;
    width:25%!important;
    max-width:118px!important;
  }
}
@media(max-width:390px){
  .negoHeroCommerce{
    right:1.5%!important;
    width:26%!important;
    max-width:106px!important;
  }
}


/* Mobile hero/header gap · 25/09/2026 */
@media(max-width:680px){
  .header{margin-bottom:0!important}
  .hero{
    margin-top:-10px!important;
    padding-top:0!important;
  }
}


/* Mobile trust strip compact · 25/09/2026 */
@media(max-width:680px){
  .trustStripReference .referenceTrustItem,
  .trustStripReference .referenceTrustItem:nth-child(1),
  .trustStripReference .referenceTrustItem:nth-child(2){
    min-height:44px!important;
    padding:5px 8px!important;
    gap:6px!important;
  }
  .trustStripReference .referenceTrustIcon{
    width:20px!important;
    height:20px!important;
    flex-basis:20px!important;
  }
  .trustStripReference .referenceTrustIcon svg{
    width:16px!important;
    height:16px!important;
  }
  .trustStripReference .referenceTrustItem b{
    font-size:9px!important;
    line-height:1.05!important;
  }
  .trustStripReference .referenceTrustItem span{
    margin-top:1px!important;
    font-size:7.5px!important;
    line-height:1.05!important;
  }
}


/* Mobile trust strip extra compact · 25/09/2026 */
@media(max-width:680px){
  .trustStripReference .referenceTrustItem,
  .trustStripReference .referenceTrustItem:nth-child(1),
  .trustStripReference .referenceTrustItem:nth-child(2){
    min-height:38px!important;
    padding:3px 7px!important;
    gap:5px!important;
  }
  .trustStripReference .referenceTrustIcon{
    width:18px!important;height:18px!important;flex-basis:18px!important;
  }
  .trustStripReference .referenceTrustIcon svg{width:15px!important;height:15px!important}
  .trustStripReference .referenceTrustItem b{font-size:8.6px!important}
  .trustStripReference .referenceTrustItem span{font-size:7px!important;margin-top:0!important}
}


/* Mobile trust strip ultra compact · 25/09/2026 */
@media(max-width:680px){
  .trustStripReference .referenceTrustItem,
  .trustStripReference .referenceTrustItem:nth-child(1),
  .trustStripReference .referenceTrustItem:nth-child(2){
    min-height:34px!important;
    padding:2px 6px!important;
    gap:4px!important;
  }
  .trustStripReference .referenceTrustIcon{
    width:17px!important;height:17px!important;flex-basis:17px!important;
  }
  .trustStripReference .referenceTrustIcon svg{width:14px!important;height:14px!important}
  .trustStripReference .referenceTrustItem b{font-size:8.2px!important;line-height:1!important}
  .trustStripReference .referenceTrustItem span{font-size:6.7px!important;line-height:1!important}
}


/* Mobile hero closer to header · 25/09/2026 */
@media(max-width:680px){
  .hero{margin-top:-18px!important;padding-top:0!important}
}


/* Mobile header/hero breathing room · 25/09/2026 */
@media(max-width:680px){
  .hero{margin-top:-14px!important;padding-top:0!important}
}


/* NEGO Trust Bar redesign · 25/09/2026 */
@media(max-width:680px){
  .trustStripReference{
    background:#fff!important;
    padding:7px 14px 9px!important;
    border:0!important;
  }
  .trustStripReference .referenceTrustGrid{
    width:100%!important;
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    padding:0 1px 3px!important;
    border:0!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
  }
  .trustStripReference .referenceTrustGrid::-webkit-scrollbar{display:none!important}
  .trustStripReference .referenceTrustItem,
  .trustStripReference .referenceTrustItem:nth-child(1),
  .trustStripReference .referenceTrustItem:nth-child(2){
    flex:0 0 auto!important;
    width:auto!important;
    min-width:190px!important;
    min-height:48px!important;
    padding:7px 12px!important;
    gap:9px!important;
    border:1px solid #e8e2f3!important;
    border-radius:15px!important;
    background:linear-gradient(135deg,#fff 0%,#faf8ff 100%)!important;
    box-shadow:0 3px 12px rgba(47,24,86,.055)!important;
    scroll-snap-align:start!important;
  }
  .trustStripReference .referenceTrustIcon{
    width:30px!important;height:30px!important;flex:0 0 30px!important;
    display:grid!important;place-items:center!important;
    border-radius:10px!important;
    background:#f0eaff!important;
    color:#673de6!important;
  }
  .trustStripReference .referenceTrustIcon svg{
    width:18px!important;height:18px!important;
    stroke:currentColor!important;
  }
  .trustStripReference .referenceTrustItem b{
    display:block!important;
    font-size:10px!important;line-height:1.12!important;
    color:#17131e!important;font-weight:800!important;
    white-space:nowrap!important;
  }
  .trustStripReference .referenceTrustItem span{
    display:block!important;
    margin-top:2px!important;
    font-size:8.2px!important;line-height:1.05!important;
    color:#77717f!important;white-space:nowrap!important;
  }
  .trustStripReference .referenceTrustSignature{display:none!important}
}