/* NEGO managed overrides */

/* Critical rendering safety: content must remain visible even if JavaScript is delayed or fails. */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Safe brand intro: visual only, never blocks interaction and defaults hidden if animation/CSS fails. */
#negoIntroBrand {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  background: #fbfaf7;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: negoIntroBrand .72s ease-out both;
}
#negoIntroBrand img {
  width: min(170px, 42vw);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(20,18,30,.05));
}
@keyframes negoIntroBrand {
  0% { opacity: 0; visibility: visible; }
  12%, 62% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* Legacy splash failsafe. The production build removes the blocking splash entirely. */
#negoSplash {
  animation: negoSplashFailsafeOut .35s ease .55s forwards !important;
  pointer-events: none !important;
}
#negoSplash.is-hiding {
  animation: none !important;
}
@keyframes negoSplashFailsafeOut {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Floating actions: aligned, separated and visually balanced on desktop */
@media (min-width: 761px) {
  .floatingWhatsApp {
    right: 20px !important;
    bottom: 24px !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 9901 !important;
    box-shadow: 0 12px 30px rgba(16,42,25,.24) !important;
  }

  .negoCartFab {
    right: 88px !important;
    bottom: 24px !important;
    min-height: 52px;
    padding: 0 16px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 12px 30px rgba(18,18,22,.20) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
  }

  .negoCartFab:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(18,18,22,.24) !important;
  }

  .heroCarousel { min-height: 525px !important; }
  .hero { padding-top: 36px !important; padding-bottom: 22px !important; }
}

/* Product variant interaction */
.negoColorSelected {
  outline: 2px solid var(--violet, #7657ff) !important;
  outline-offset: 2px;
  opacity: 1 !important;
}

/* Improve readability of ultra-small auxiliary labels. */
.productKicker,
.carouselKicker,
.freeTag,
.pickTag,
.eyebrow {
  font-size: max(10px, .625rem) !important;
}

/* Keep the category chips directly below the measured header, without a count row. */
.categoryWrap{top:var(--nego-live-header-h,var(--header-h))!important}
.categoryWrap #resultCount{display:none!important;margin:0!important;padding:0!important}

/* Product detail: centered media and a horizontal related-product rail. */
#modal .modalBox{align-items:start;overflow-y:auto!important}
#modal .modalVisual{
  position:sticky;top:0;align-self:start;
  display:flex!important;align-items:center;justify-content:center;
  height:92dvh!important;min-height:0!important;
  padding:38px 36px!important;box-sizing:border-box;
}
#modal .modalVisual #modalImg{
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center!important;
  margin:0!important;transform:none!important;
}
#modal .modalCopy{min-width:0}
#modal .relatedGrid{
  display:flex!important;gap:10px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 0 6px;
}
#modal .relatedGrid::-webkit-scrollbar{display:none}
#modal .relatedCard{
  flex:0 0 calc((100% - 20px)/3);min-width:0;scroll-snap-align:start;
  padding:8px;border-radius:14px;
}
#modal .relatedCard img{height:90px;object-fit:contain}
#modal .relatedCard b{font-size:10px}
#modal .relatedCard small{font-size:11px}
#modal .relatedNav{display:flex;justify-content:flex-end;gap:6px;margin:8px 0}
#modal .relatedNav[hidden]{display:none}
#modal .relatedNav button{
  width:30px;height:30px;border-radius:50%;border:1px solid #e6e1f0;
  background:#fff;color:#7657ff;cursor:pointer;font-size:18px;
}
@media(max-width:760px){
  #modal .modalVisual{position:relative;height:300px!important;padding:24px 44px!important}
  #modal .relatedCard{flex-basis:calc((100% - 20px)/2.4)}
}

/* Product detail: a discreet thumb inside the rounded dialog. */
#modal .modalBox{
  scrollbar-width:thin;
  scrollbar-color:rgba(118,87,255,.45) transparent;
}
#modal .modalBox::-webkit-scrollbar{width:7px}
#modal .modalBox::-webkit-scrollbar-track{background:transparent;margin-block:28px}
#modal .modalBox::-webkit-scrollbar-thumb{
  background:rgba(118,87,255,.45);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
}
#modal .modalBox::-webkit-scrollbar-thumb:hover{background-color:rgba(118,87,255,.7)}
#modal .modalBox::-webkit-scrollbar-button{display:none;width:0;height:0}
/* Chromium uses the rounded custom thumb; Firefox uses the thin native thumb. */
@supports selector(::-webkit-scrollbar){
  #modal .modalBox{scrollbar-width:auto;scrollbar-color:auto}
}

/* Checkout scrollbar: subtle, rounded and consistent with NEGO */
.nationalOrderPanel {
  scrollbar-width: thin;
  scrollbar-color: rgba(118,87,255,.52) transparent;
  scrollbar-gutter: stable;
}
.nationalOrderPanel::-webkit-scrollbar {
  width: 9px;
}
.nationalOrderPanel::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 16px;
}
.nationalOrderPanel::-webkit-scrollbar-thumb {
  min-height: 56px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(118,87,255,.62), rgba(67,214,229,.60));
  background-clip: padding-box;
}
.nationalOrderPanel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(118,87,255,.84), rgba(67,214,229,.80));
  background-clip: padding-box;
}
.nationalOrderPanel::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

@media (max-width: 620px) {
  .nationalOrderPanel::-webkit-scrollbar {
    width: 7px;
  }
  .nationalOrderPanel::-webkit-scrollbar-track {
    margin-block: 12px;
  }
}

/* Keyboard focus */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(118,87,255,.45) !important;
  outline-offset: 3px !important;
}

/* ===== Mobile commerce hierarchy ===== */
@media (max-width: 760px) {
  body {
    padding-bottom: 84px !important;
  }

  .hero {
    padding: 20px 0 14px !important;
  }
  .heroGrid {
    gap: 16px !important;
  }
  .hero h1 {
    font-size: clamp(46px, 12.7vw, 60px) !important;
    line-height: .9 !important;
    margin: 10px 0 14px !important;
  }
  .hero p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  .heroActions {
    margin-top: 15px !important;
    gap: 8px !important;
  }
  .heroActions .pillBtn {
    min-height: 44px;
    padding: 11px 9px !important;
    font-size: 11.5px !important;
  }
  .heroCarousel {
    min-height: 420px !important;
    border-radius: 28px !important;
  }

  /* Keep all trust signals visible as horizontal swipeable pills. */
  .trustGrid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 2px 1px 8px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .trustGrid::-webkit-scrollbar { display: none; }
  .trustItem,
  .trustItem:nth-child(1),
  .trustItem:nth-child(2) {
    display: flex !important;
    flex: 0 0 210px !important;
    min-width: 210px !important;
    scroll-snap-align: start;
  }
  .trustItem b { font-size: 11.5px !important; }
  .trustItem span { font-size: 10.5px !important; line-height: 1.4 !important; }

  /* Mobile bottom bar: only the three purchase-oriented actions. */
  .mobileBottom {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 7px !important;
    left: 9px !important;
    right: 9px !important;
    padding: 6px !important;
    border-radius: 19px !important;
  }
  .mobileBottom button,
  .mobileBottom a {
    min-height: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 8px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
  .mobileBottom > button:first-child {
    background: #fff !important;
    color: #17171b !important;
  }
  .mobileBottom .mobileCartNav {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 8px !important;
    border-radius: 14px !important;
    background: #17171b !important;
    color: #fff !important;
  }
  .mobileBottom .mobileCartNav span {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    font-size: 9.5px !important;
  }
  .mobileBottom .mobileWhatsApp {
    background: var(--green, #25d366) !important;
    color: #06210e !important;
    text-decoration: none !important;
  }
  .floatingWhatsApp {
    display: none !important;
  }

  /* Readability: no essential commerce text should fall into 7–9 px territory. */
  .productKicker { font-size: 10px !important; }
  .freeTag,
  .pickTag { font-size: 9.5px !important; }
  .productGrid.view-list .specBox ul { font-size: 11.25px !important; line-height: 1.42 !important; }
  .productGrid.view-grid .specBox ul { font-size: 10.5px !important; line-height: 1.38 !important; }
  .colorMetaLabel,
  .priceRow span { font-size: 10px !important; }
  .productGrid.view-list .cardPurchaseInline .cardAddBtn,
  .productGrid.view-list .cardPurchaseInline .cardBuyBtn,
  .productGrid.view-grid .cardPurchaseInline .cardAddBtn,
  .productGrid.view-grid .cardPurchaseInline .cardBuyBtn {
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  /* Give the catalog priority once the visitor reaches the buying area. */
  .negoPicksStory { padding-top: 10px !important; }
  .catalog { padding-top: 28px !important; }
  .catalogHead { margin-bottom: 16px !important; }
  .catalogHead h2 { font-size: 40px !important; }
  .catalogHead p { font-size: 12.5px !important; line-height: 1.55 !important; }
  .discovery { padding-top: 34px !important; }
}

@media (max-width: 460px) {
  .heroCarousel { min-height: 398px !important; }
  .hero h1 { font-size: clamp(43px, 12.4vw, 55px) !important; }
  .trustItem,
  .trustItem:nth-child(1),
  .trustItem:nth-child(2) {
    flex-basis: 196px !important;
    min-width: 196px !important;
  }
  .mobileBottom button,
  .mobileBottom a { font-size: 10.5px !important; }
}

/* Respect user motion preferences. */
@media (prefers-reduced-motion: reduce) {
  #negoIntroBrand { display: none !important; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Desktop hero: make the featured product more visually prominent without changing card geometry. */
@media (min-width: 761px) {
  .heroCarousel .carouselStage img {
    transform: scale(1.14) !important;
    transform-origin: center center;
  }

  .heroCarousel:hover .carouselStage img {
    transform: translateY(-5px) scale(1.17) !important;
  }

  .heroCarousel.changing .carouselStage img {
    transform: translateX(24px) scale(1.10) !important;
  }

  .heroCarousel.back.changing .carouselStage img {
    transform: translateX(-24px) scale(1.10) !important;
  }
}


/* Product modal · mobile related products: exactly 3 complete cards in view. */
@media(max-width:760px){
  #modal .relatedGrid{
    gap:7px!important;
    padding:2px 0 6px!important;
    scroll-padding-inline:0!important;
  }
  #modal .relatedCard{
    flex:0 0 calc((100% - 14px)/3)!important;
    width:calc((100% - 14px)/3)!important;
    min-width:calc((100% - 14px)/3)!important;
    max-width:calc((100% - 14px)/3)!important;
    padding:6px!important;
    border-radius:12px!important;
    box-sizing:border-box!important;
  }
  #modal .relatedCard img{
    width:100%!important;
    height:72px!important;
    object-fit:contain!important;
  }
  #modal .relatedCard b{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    font-size:9px!important;
    line-height:1.15!important;
  }
  #modal .relatedCard small{
    font-size:9px!important;
    line-height:1.1!important;
  }
}

/* Product modal · mobile related products: 4 complete cards in view. */
@media(max-width:760px){
  #modal .relatedGrid{gap:6px!important}
  #modal .relatedCard{
    flex:0 0 calc((100% - 18px)/4)!important;
    width:calc((100% - 18px)/4)!important;
    min-width:calc((100% - 18px)/4)!important;
    max-width:calc((100% - 18px)/4)!important;
    padding:5px!important;
    border-radius:10px!important;
  }
  #modal .relatedCard img{height:62px!important}
  #modal .relatedCard b{font-size:8px!important;line-height:1.12!important}
  #modal .relatedCard small{font-size:8px!important}
}

/* Product modal · mobile: enlarge main product image without changing modal layout. */
@media(max-width:760px){
  #modal .modalVisual{padding:16px 28px!important}
  #modal .modalVisual #modalImg{
    width:108%!important;
    height:108%!important;
    max-width:108%!important;
    max-height:108%!important;
  }
}

/* Product modal · mobile: larger and optically centered main image. */
@media(max-width:760px){
  #modal .modalVisual{padding:10px 20px!important}
  #modal .modalVisual #modalImg{
    width:116%!important;
    height:116%!important;
    max-width:116%!important;
    max-height:116%!important;
    object-position:center center!important;
    transform:translateY(12px)!important;
  }
}

/* Product modal · mobile: stronger product scale and clearly lower optical center. */
@media(max-width:760px){
  #modal .modalVisual{
    height:320px!important;
    padding:0 10px!important;
    overflow:hidden!important;
  }
  #modal .modalVisual #modalImg{
    width:132%!important;
    height:132%!important;
    max-width:132%!important;
    max-height:132%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:translateY(24px)!important;
    transform-origin:center center!important;
  }
}

/* Product modal · mobile: final optical centering and stronger scale. */
@media(max-width:760px){
  #modal .modalVisual{
    height:340px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  #modal .modalVisual #modalImg{
    width:142%!important;
    height:142%!important;
    max-width:142%!important;
    max-height:142%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:translateY(44px)!important;
    transform-origin:center center!important;
  }
}

/* Product modal · mobile: keep sold-out/detail content inside the same dialog viewport. */
@media(max-width:760px){
  #modal{
    padding:12px 0!important;
    align-items:center!important;
    box-sizing:border-box!important;
  }
  #modal .modalBox{
    width:100%!important;
    max-width:100%!important;
    height:calc(100dvh - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
    margin:auto 0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    border-radius:28px!important;
    box-sizing:border-box!important;
  }
  #modal .modalCopy{
    padding-bottom:max(14px,env(safe-area-inset-bottom))!important;
  }
}

/* Header favorites: count centered inside the heart, never below it. */
.headerFavoritesBtn{position:relative!important}
.headerFavoritesBtn .headerFavoriteCount{
  display:flex!important;
  position:absolute!important;
  inset:0!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;height:auto!important;
  padding:0!important;margin:0!important;
  border:0!important;background:transparent!important;
  color:currentColor!important;
  font-size:9px!important;font-weight:800!important;
  line-height:1!important;
  pointer-events:none!important;
  transform:translateY(-1px)!important;
}
.headerFavoritesBtn .headerFavoriteCount[hidden]{display:none!important}
.headerFavoritesBtn svg{width:24px!important;height:24px!important}


/* Header mobile actions: slightly larger favorites, account and cart icons. */
@media(max-width:760px){
  .headerActions .headerIconBtn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
  .headerActions .headerIconBtn svg{
    width:26px!important;
    height:26px!important;
  }
  .headerFavoritesBtn .headerFavoriteCount{
    font-size:10px!important;
    transform:translateY(-1px)!important;
  }
}

/* Header favorites · final optical alignment: badge lives inside heart cavity. */
.headerFavoritesBtn{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.headerFavoritesBtn svg{
  display:block!important;
  flex:none!important;
}
.headerFavoritesBtn .headerFavoriteCount{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#111!important;
  font-size:9px!important;
  font-weight:800!important;
  line-height:14px!important;
  text-align:center!important;
  transform:translate(-50%,-43%)!important;
  pointer-events:none!important;
}
.headerFavoritesBtn .headerFavoriteCount[hidden]{display:none!important}


/* Header favorites · pin count to the visual cavity of the heart SVG. */
.headerFavoritesBtn .headerFavoriteCount{
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  width:12px!important;
  height:12px!important;
  min-width:12px!important;
  font-size:8px!important;
  line-height:12px!important;
  transform:translate(-50%,-68%)!important;
  z-index:2!important;
}


/* Header favorites · use the same floating badge treatment as cart. */
.headerFavoritesBtn .headerFavoriteCount{
  left:auto!important;
  top:-3px!important;
  right:-3px!important;
  bottom:auto!important;
  inset:auto!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#7c4dff!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:18px!important;
  text-align:center!important;
  transform:none!important;
  z-index:3!important;
  box-shadow:none!important;
}
.headerFavoritesBtn .headerFavoriteCount[hidden]{display:none!important}


/* Favorites count: preserve exact badge position; remove only purple circle. */
.headerFavoritesBtn .headerFavoriteCount{
  background:transparent!important;
  border-radius:0!important;
  color:#111!important;
  box-shadow:none!important;
}


/* Product modal · mobile: shorter dialog, vertically centered with internal scroll when needed. */
@media(max-width:760px){
  #modal{
    padding:28px 0!important;
    align-items:center!important;
  }
  #modal .modalBox{
    height:auto!important;
    max-height:calc(100dvh - 56px)!important;
    min-height:0!important;
    margin:auto 0!important;
    overflow-y:auto!important;
    border-radius:28px!important;
  }
}

/* NEGO public construction / maintenance screen */
.negoMaintenance{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;overflow:hidden;background:var(--bg,#fbfaf7)}
.negoMaintenance[hidden]{display:none}
.negoMaintenanceBackdrop{position:absolute;inset:-30px;background:inherit;filter:blur(18px);transform:scale(1.08);opacity:.86}
.negoMaintenanceBackdrop:before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.48);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.negoMaintenanceCard{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 42px;text-align:center}
.negoMaintenanceLogo{width:min(220px,48vw);height:auto;object-fit:contain}
.negoMaintenanceIllustration{width:210px;height:138px;display:grid;place-items:center;opacity:.68}
.negoMaintenanceIllustration svg{width:100%;height:100%}
.negoMaintenanceLabel{margin:0;font-size:clamp(17px,2vw,22px);font-weight:650;letter-spacing:.08em;opacity:.82}
html.negoSiteLocked body>*:not(#negoMaintenance){visibility:hidden!important}
@media(max-width:600px){.negoMaintenanceCard{padding:26px;gap:10px}.negoMaintenanceLogo{width:min(190px,58vw)}.negoMaintenanceIllustration{width:165px;height:108px}.negoMaintenanceLabel{font-size:17px}}